前端公共插件
components/QueryPop
<template>
<div id="querypop">
<div class="left">
{{props.title}}：
<input
type="text" v-model="state.idNumber" />
<input type="button" value="查询" @click="selectPerson()" />
<!-- showpop是否显示同户查询，只有修改时showpop=0-->
<input type="button" value="同户查询" @click="selectPersonAll()" v-show="props.showpop!=0"/>
</div>
<table width="100%" border="1" cellspacing="0" cellpadding="0" align="center" bordercolor="#dadada">
<tr align="center" >
<th width="15%" height="25" valign="middle">户口类别</th>
<th width="10%" height="25" valign="middle">户号</th>
<th width="10%" height="25" valign="middle">关系</th>
<th width="10%" height="25" valign="middle">姓名</th>
<th width="5%" height="25" valign="middle">性别</th>
<th width="10%" height="25" valign="middle">生日</th>
<th width="5%" height="25" valign="middle">民族</th>
<th width="15%" height="25" valign="middle">证件号</th>
<th width="15%" height="25" valign="middle" v-if="props.operate='del'">操作</th>
</tr>
<tr align="center" v-for="item in state.list" :key="item.id">
<td height="25" valign="middle">{{item.populationType}}</td>
<td height="25" valign="middle">{{item.populationId}}</td>
<td height="25" valign="middle">{{item.relation}}</td>
<td height="25" valign="middle">{{item.name}}</td>
<td height="25" valign="middle">{{item.sex}}</td>
<td height="25" valign="middle">{{item.birthday}}</td>
<td height="25" valign="middle">{{item.nation}}</td>
<td height="25" valign="middle">{{item.idNumber}}</td>
<td height="25" valign="middle" v-if="props.operate='del'">
<button @click="del(item.idNumber)">删除</button>
</td>
</tr>
</table>
</div>
</template>
<script setup>
import axios from 'axios';
import qs from 'qs';
let emit=defineEmits(['getPop'])
//showpop是否显示同步查询按钮
let props=defineProps(['title','showpop','operate'])
import {reactive} from 'vue';
let state = reactive({
idNumber: undefined,
list: [],
populationId: undefined,
})
function del(idNumber){
//alert(idNumber)
let flag=confirm('确定要删除么')
if(flag){
axios.get("http://localhost:8081/ssmstudy/population/del?idNumber=" + state.idNumber)
}
}
function selectPerson() {
axios.get("http://localhost:8081/ssmstudy/population/findByIdNumber?idNumber=" + state.idNumber)
.then(res => {
state.list = res.data;
state.populationId = res.data[0].populationId;
emit('getPop',state.list)
})
}
function selectPersonAll() {
axios.get("http://localhost:8081/ssmstudy/population/findAll?idNumber=" + state.idNumber)
.then(res => {
state.list = res.data;
state.populationId = res.data[0].populationId;
emit('getPop',state.list)
})
}
</script>
<style scoped>
.strong {
font-weight: 600;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
h3 {
display: flex;
justify-content: center;
align-items: center;
}
.mid {
text-align: center;
}
</style>
components/Regist
<template>
<div class="regist">
<h3>{{title}}</h3>
<table border="0" cellspacing="10px" cellpadding="0" width="90%">
<tr>
<td class="strong right" width="10%">姓 名:</td>
<td width="20%" class="left">
<input type="text" v-model="state.form.name" />
</td>
<td class="strong right" width="10%">性 别:</td>
<td width="20%" class="left">
<select v-model="state.form.sex" >
<option v-for="item in state.dictList.xb" :key="item.id" :value="item.id">{{item.constantName}}</option>
</select>
</td>
<td class="strong right" width="10%">与户主关系:</td>
<td width="30%" class="left">
<select v-model="state.form.relation">
<option v-for="item in state.dictList.hzgx" :key="item.id" :value="item.id">{{item.constantName}}</option>
</select>
</td>
</tr>
<tr>
<td class="strong right">出生日期:</td>
<td class="left">
<input type="date" v-model="state.form.birthday" />
</td>
<td class="strong right">身份证号:</td>
<td class="left">
<input type="text" v-model="state.form.idNumber" />
</td>
<td class="strong right">宗教信仰:</td>
<td class="left">
<input type="text" v-model="state.form.religiousBelief" />
</td>
</tr>
<tr>
<td class="strong right" width="12%">文化程度:</td>
<td width="18%" class="left">
<select v-model="state.form.educationalLevel">
<option v-for="item in state.dictList.whcd" :key="item.id" :value="item.id">{{item.constantName}}</option>
</select>
</td>
<td class="strong right" width="12%">婚姻状况:</td>
<td width="18%" class="left">
<select v-model="state.form.marriage">
<option v-for="item in state.dictList.hyzk" :key="item.id" :value="item.id">{{item.constantName}}</option>
</select>
</td>
<td class="strong right" width="12%">兵役情况:</td>
<td width="28%" class="left">
<select v-model="state.form.militaryService">
<option v-for="item in state.dictList.byqk" :key="item.id" :value="item.id">{{item.constantName}}</option>
</select>
</td>
</tr>
<tr>
<td class="strong right" width="12%">民 族:</td>
<td width="18%" class="left">
<select v-model="state.form.nation">
<option v-for="item in state.dictList.mz" :key="item.id" :value="item.id">{{item.constantName}}</option>
</select>
</td>
<td class="strong right" width="12%">血 型:</td>
<td width="18%" class="left">
<select v-model="state.form.bloodType">
<option v-for="item in state.dictList.xx" :key="item.id" :value="item.id">{{item.constantName}}</option>
</select>
</td>
<td class="strong right" width="12%">职 业:</td>
<td width="28%" class="left">
<input type="text" v-model="state.form.job" />
</td>
</tr>
<tr>
<td class="strong right" width="12%">住 址:</td>
<td width="18%" class="left">
<input type="text" v-model="state.form.address" />
</td>
<td class="strong right" width="12%">户口类型:</td>
<td width="18%" class="left">
<select v-model="state.form.populationType">
<option v-for="item in state.dictList.hklx" :key="item.id" :value="item.id">{{item.constantName}}</option>
</select>
</td>
<td class="strong right" width="12%">户主姓名</td>
<td width="28%" class="left">
<input type="text" v-model="state.form.houseHolder" />
</td>
</tr>
<tr>
<td colspan="6" class="mid">
<input type="button" value="保存" @click="regist()" />
</td>
</tr>
</table>
<div v-show="state.flag">{{state.resultMsg}}</div>
</div>
</template>
<script setup>
import {onMounted, onUpdated, reactive} from 'vue';
import axios from 'axios';
import qs from 'qs';
//backup01后台用的 = 0-立户 1-出生申报 2-夫妻投靠 3-父母投靠子女
//title 前台的 populationId 存到哪个户口下
const myProps = defineProps(['title','populationId','operate','population'])
//1,性别数据开始时置空
let state =reactive({flag:false,resultMsg:'',dictList:{},
form:{
id:undefined,
name: undefined,
sex: undefined,
relation: undefined,
birthday: undefined,
idNumber: undefined,
educationalLevel: undefined,
marriage: undefined,
militaryService: undefined,
nation: undefined,
bloodType: undefined,
job: undefined,
populationId: undefined,
religiousBelief: undefined,
address: undefined,
populationType:undefined,//户口类型，城镇 非城镇
houseHolder:undefined,//户主姓名,
operate:undefined
}
})
function regist() {
//把operate补全
state.form.operate=myProps.operate;
//补全户号
//alert("户号"+myProps.populationId)
if(myProps.populationId!=undefined){
state.form.populationId=myProps.populationId;
}
axios.post("http://localhost:8081/ssmstudy/population/save",qs.stringify(state.form))
.then(res=>{
state.flag=true;
state.resultMsg=res.data.message
})
}
onMounted(()=>{
axios.get("http://localhost:8081/ssmstudy/constantType/findAll")
.then(res=>{
//console.log(res.data)
state.dictList=res.data
})
//如果是修改信息的话，把原始信息加载进来
//state.form=myProps.population
})
onUpdated(()=>{
//console.log("myProps.population",myProps.population)
//alert("onUpdated-populationId "+myProps.populationId)
if(myProps.population!=null){
state.form=myProps.population
}
})
</script>
<style scoped>
.strong {
font-weight: 600;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
h3 {
display: flex;
justify-content: center;
align-items: center;
}
.mid {
text-align: center;
}
</style>
页面
app.vue
/views/population/Login
<template>
<!--路由出口，变动的是这部分内容 -->
<router-view/>
</template>
<style>
body{
margin:0;
padding:0;
}
input[type='button']:link,input[type='button']:visited{
text-decoration: none;
color:#BFC0B3;
font-size: 14px;
}
input[type='button']:hover{
background-color: #419efe;
border: none;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style>
/views/population/Index
<template>
<div class="container">
<div class="left">
<ul>
<li>
<router-link to="/populationAdd">户口立户</router-link>
</li>
<li>
<router-link to="/born">出生申报</router-link>
</li>
<li>
<router-link to="/spouse">夫妻投靠</router-link>
</li>
<li>
<router-link to="/parents">父母投靠子女</router-link>
</li>
<li>
<router-link to="/update">修改信息</router-link>
</li>
<li>
<router-link to="/del">注销户口</router-link>
</li>
</ul>
</div>
<div class="right">
<!-- 路由出口-->
<router-view></router-view>
</div>
</div>
</template>
<script>
</script>
<style scoped>
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
background-color: #fff;
display: flex;
}
.left {
flex: 2;
background-color: #304156;
}
.right {
flex: 10;
background-color: #fff;
}
ul {
list-style: none;
}
a:link, a:visited {
text-decoration: none;
color: #BFC0B3;
font-size: 14px;
}
a:hover {
background-color: #419efe;
border: none;
}
</style>
/views/population/PopulationAdd
<template>
<div id="populationadd">
<!-- operate 0-立户 1-出生申报 2-夫妻投靠 3-父母投靠子女 4-修改 -->
<regist title="户口立户" operate="0" ></regist>
</div>
</template>
<script setup>
import regist from '@/components/Regist'
</script>
<style>
</style>
/views/population/Born
<template>
<div class="regist">
<querypop @getPop="getPop" title="监护人身份证号"></querypop>
<regist title="出生申报" :populationId="state.populationId" operate=1 ></regist>
</div>
</template>
<script setup>
import { reactive } from 'vue';
import regist from '@/components/Regist'
import querypop from '@/components/QueryPop'
let state=reactive({populationId:undefined})
function getPop(list){
//alert(list[0].populationId)
state.populationId=list[0].populationId;
}
</script>
/views/population/Spouse
<template>
<div class="regist">
<querypop @getPop="getPop" title="被投靠人身份证号"></querypop>
<regist title="夫妻投靠" :populationId="state.populationId" operate=2 ></regist>
</div>
</template>
<script setup>
import { reactive } from 'vue';
import regist from '@/components/Regist'
import querypop from '@/components/QueryPop'
let state=reactive({populationId:undefined})
function getPop(list){
//alert(list[0].populationId)
state.populationId=list[0].populationId;
}
</script>
/views/population/Parents
<template>
<div class="regist">
<querypop @getPop="getPop" title="被投靠人身份证号"></querypop>
<regist title="父母投靠" :populationId="state.populationId" operate=3 ></regist>
</div>
</template>
<script setup>
import { reactive } from 'vue';
import regist from '@/components/Regist'
import querypop from '@/components/QueryPop'
let state=reactive({populationId:undefined})
function getPop(list){
//alert(list[0].populationId)
state.populationId=list[0].populationId;
}
</script>
/views/population/Update
<template>
<div class="regist">
<querypop @getPop="getPop" title="身份证号" showpop="0"></querypop>
<regist title="修改信息" :population="state.population" operate=4 ></regist>
</div>
</template>
<script setup>
import { reactive } from 'vue';
import regist from '@/components/Regist'
import querypop from '@/components/QueryPop'
let state=reactive({population:undefined})
function getPop(list){
state.population=list[0];
}
</script>
/views/population/Del
<template>
<div class="del">
<querypop title="身份证号" operate="del"></querypop>
</div>
</template>
<script setup>
import { reactive } from 'vue';
import regist from '@/components/Regist'
import querypop from '@/components/QueryPop'
</script>
后端
1、后端实体类 com.neuedu.po
import lombok.Data;
package com.neuedu.po;
import lombok.Data;
@Data
public class ConstantType {
private Integer id;
private String constantTypeCode;
private String constantTypeName;
}
@Data
public class ConstantItem {
private Integer id;
private String constantName;
private Integer constantTypeId;
}
@Data
public class Person {
private Integer id;
private String name;
private Integer sex;
private Integer relation;
private String birthday;
private String idNumber;
private Integer educationalLevel;
private Integer marriage;
private Integer militaryService;
private Integer nation;
private Integer bloodType;
private String job;
private String populationId;
private String religiousBelief;
}
@Data
public class PersonLog {
private Integer id;
private String populationId;
private Integer personId;
private String operateType;
private String operateDetail;
private String operateTime;
private Integer operateUser;
}
@Data
public class Population {
private String id;
private String populationType;
private String houseHolder;
private String address;
}
@Data
public class PopulationLog {
private Integer id;
private String populationId;
private String operateType;
private String operateDetail;
private String operateTime;
private Integer operateUser;
}
@Data
public class ResultMsg {
//返回码 0-成功 -1 用户名错误 -2密码错误
int code;
//描述 成功/错误原因
String message;
}
@Data
public class User {
private int id;
private String userName;
private String password;
private String role;
}
2、后端 controller
@RestController
@RequestMapping("/constantType")
public class ConstantTypeController {
@Autowired
IConstantTypeService service;
@RequestMapping("/findAll")
public Map<String,List<ConstantItem>> findAll(){
Map<String,List<ConstantItem>> map=service.findAll();
return map;
}
}
@RestController
@RequestMapping("population")
public class PopulationController {
@Autowired
IPopulationService service;
@PostMapping("save")
public ResultMsg save(Person person,Population population,String operate){
System.out.println(person);
System.out.println(population);
//System.out.println(operate);
ResultMsg msg=service.save(person,population,operate);
return msg;
}
@RequestMapping("/findByIdNumber")
public List<Map<String,Object>> findByIdNumber(String idNumber){
List<Map<String,Object>> list = service.findByIdNumber(idNumber);
return list;
}
@RequestMapping("/findAll")
public List<Map<String,Object>> findAll(String idNumber){
List<Map<String,Object>> list = service.findAll(idNumber);
return list;
}
@RequestMapping("/del")
public int del(String idNumber){
int result =service.del(idNumber);
return result;
}
}
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
IUserService service;
@RequestMapping("/login")
public ResultMsg login(@RequestBody User user){
return service.login(user);
}
}
3 后端 service##
@Service
public class UserServiceImpl implements IUserService {
@Autowired
UserMapper mapper;
@Override
public ResultMsg login(User user) {
//根据用户名查询用户
User db_user=mapper.getUserByUserName(user.getUserName());
//如果没有查询到，直接回复用户名不存在
ResultMsg rm=new ResultMsg();
if(db_user==null){
rm.setCode(-1);
rm.setMessage("用户名错误");
}else if(!db_user.getPassword().equals(user.getPassword())){
//如果查询到，比对数据库里的密码与传过来的密码是否一致
//如果不一致，直接回复密码错误
rm.setCode(-2);
rm.setMessage("密码错误");
//如果一致，返回成功
}else{
rm.setCode(0);
rm.setMessage("登录成功");
}
return rm;
}
}
@Transactional
@Service
public class PopulationServiceImpl implements IPopulationService {
@Autowired
PersonMapper personMapper;
@Autowired
PersonLogMapper personLogMapper;
@Autowired
PopulationMapper populationMapper;
@Autowired
PopulationLogMapper populationLogMapper;
@Autowired
PersonHistoryMapper personHistoryMapper;
@Autowired
PopulationHistoryMapper populationHistoryMapper;
public void getLog(Person person,Population population,String operate){
PersonLog personLog = new PersonLog();
personLog.setPersonId(person.getId());
personLog.setPopulationId(person.getPopulationId());
personLog.setOperateType(operate);
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
String date = sdf.format(new Date());
personLog.setOperateTime(date);
personLog.setOperateUser(1);
personLog.setOperateDetail("xxxx");
int restult3 = personLogMapper.save(personLog);
PopulationLog populationLog = new PopulationLog();
populationLog.setPopulationId(person.getPopulationId());
populationLog.setOperateType(operate);
populationLog.setOperateDetail("xxxxx");
populationLog.setOperateTime(date);
populationLog.setOperateUser(1);
int restult4 = populationLogMapper.save(populationLog);
}
@Override
public ResultMsg save(Person person, Population population, String operate) {
ResultMsg msg = new ResultMsg();
if (operate.equals("0")) {
String populationId = UuidGenerate.get();
person.setPopulationId(populationId);
population.setId(populationId);
int restult1 = populationMapper.save(population);
if (restult1 > 0) {
int restult2 = personMapper.save(person);
if (restult2 > 0) {
PopulationServiceImpl service = new PopulationServiceImpl();
service.getLog(person, population, operate);
}
}
msg.setCode(0);
msg.setMessage("立户成功");
}else if(operate.equals("1")||operate.equals("2")||operate.equals("3")){
int restult1 = personMapper.save(person);
PopulationServiceImpl service = new PopulationServiceImpl();
service.getLog(person, population, operate);
if(restult1>0){
msg.setCode(0);
msg.setMessage("操作成功");
}
}else if("4".equals(operate)){
//修改
//修改人员信息
//修改户口信息
//添加人员操作日志
//添加户口操作日志
population.setId(person.getPopulationId());
int result1 =populationMapper.update(population);
if(result1>0){
int result2 = personMapper.update(person);
if(result2>0){
PopulationServiceImpl service = new PopulationServiceImpl();
service.getLog(person, population, operate);
}
}
msg.setCode(0);
msg.setMessage("成功");
}
return msg;
}
@Override
public List<Map<String, Object>> findByIdNumber(String idNumber) {
List<Map<String, Object>> list = personMapper.findByIdNumber(idNumber);
return list;
}
@Override
public List<Map<String, Object>> findAll(String idNumber) {
List<Map<String, Object>> list = personMapper.findAll(idNumber);
return list;
}
@Override
public int del(String idNumber) {
int count=personMapper.selectAll(idNumber);
if(count==1){
int result4 = populationHistoryMapper.add(idNumber);
int result3=personHistoryMapper.add(idNumber);
int result =personMapper.del(idNumber);
int result2 =populationMapper.del(idNumber);
}else{
int result3=personHistoryMapper.add(idNumber);
int result =personMapper.del(idNumber);
}
return 1;
}
}
@Service
public class ConstantTypeServiceImpl implements IConstantTypeService {
@Autowired
ConstantTypeMapper mapper;
@Autowired
ConstantItemMapper itemMapper;
@Override
public Map<String, List<ConstantItem>> findAll() {
List<ConstantType> list=mapper.findAll();
Map<String,List<ConstantItem>> map=new HashMap();
for(ConstantType type:list){
//获取分类代码
int typeId=type.getId();
//根据typeId去查询下面的项目
List<ConstantItem> itemList=itemMapper.findByTypeId(typeId);
map.put(type.getConstantTypeCode(),itemList);
}
return map;
}
}
mapper
public interface UserMapper {
@Select("select * from user where userName=#{userName}")
User getUserByUserName(String userName);
}
public interface ConstantTypeMapper {
@Select("select * from constanttype")
List<ConstantType> findAll();
}
public interface ConstantItemMapper {
@Select("select * from constantitem where constantTypeId=#{typeId}")
List<ConstantItem> findByTypeId(int typeId);
}
public interface PersonMapper {
@Options(useGeneratedKeys = true, keyProperty = "id")
@Insert("insert into person values "
+ "(null,#{name},#{sex},#{relation},#{birthday},"
+ "#{idNumber},#{educationalLevel},#{marriage},"
+ "#{militaryService},#{nation},#{bloodType},#{job},"
+ "#{populationId},#{religiousBelief},null)")
int save(Person person);
@Select("select a.*,b.populationType,b.houseHolder,b.address "
+" from person a,population b "
+" where a.populationId = b.id "
+" and a.idNumber =#{idNumber}")
List<Map<String, Object>> findByIdNumber(String idNumber);
@Select("select a.*,b.populationType,b.houseHolder,b.address "
+" from person a,population b "
+" where a.populationId = b.id "
+" and a.populationId = (select populationId from person where idNumber = #{idNumber})")
List<Map<String, Object>> findAll(String idNumber);
@Update("update person set name=#{name},sex=#{sex},relation=#{relation},"
+ "educationalLevel=#{educationalLevel},marriage=#{marriage},"
+ "populationId=#{populationId},religiousBelief=#{religiousBelief} where idNumber=#{idNumber}")
int update(Person person);
@Delete("delete from person where idNumber=#{idNumber}")
int del(String idNumber);
@Select("select count(*) from person where populationId=(select populationId from person where idNumber=#{idNumber})")
int selectAll(String idNumber);
}
public interface PersonHistoryMapper {
@Insert("insert into person_history select * from person where idNumber = #{idNumber} "
+ " and not EXISTS(select * from person_history where idNumber=#{idNumber})")
int add(String idNumber);
}
public interface PersonLogMapper {
@Insert("insert into person_log values (null,#{populationId},#{personId},#{operateType},#{operateTime},#{operateUser},#{operateDetail})")
int save(PersonLog personLog);
}
public interface PopulationMapper {
int save(Population population);
@Update("update population set populationType=#{populationType},"
+ "houseHolder=#{houseHolder},address=#{address} where id=#{id}")
int update(Population population);
@Delete("delete from population where id=(select populationId from person_history where idNumber=#{idNumber})")
int del(String idNumber);
}
public interface PopulationHistoryMapper {
@Insert("insert into population_history select * from population"
+ " where id = (select populationId from person where idNumber = #{idNumber}) ")
int add(String idNumber);
}
public interface PopulationHistoryMapper {
@Insert("insert into population_history select * from population"
+ " where id = (select populationId from person where idNumber = #{idNumber}) ")
int add(String idNumber);
}
