<template>
|
<div class="box-a">
|
<v-header
|
title="居民信息编辑"
|
></v-header>
|
<div class="form-box">
|
<el-form size="small" label-position="left" class="form" :model="item" :rules="rules" ref="item" label-width="100px">
|
<el-form-item label="姓名" prop="name">
|
<el-input :maxlength="15" v-model="item.name"></el-input>
|
</el-form-item>
|
<el-form-item label="身份证号">
|
<el-input :disabled="true" v-model="item.cardNo"></el-input>
|
</el-form-item>
|
<el-form-item label="性别" prop="sex">
|
<el-select :disabled="true" v-model="item.sex" placeholder="">
|
<el-option label="男" :value="1"></el-option>
|
<el-option label="女" :value="2"></el-option>
|
<el-option label="未知" :value="3"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="政治面貌" prop="politicalOutlook">
|
<el-select v-model="item.politicalOutlook" placeholder="">
|
<el-option label="中共党员" :value="1"></el-option>
|
<el-option label="共青团员" :value="3"></el-option>
|
<el-option label="群众" :value="13"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="是否租用" prop="isRent">
|
<el-select v-model="item.isRent" placeholder="">
|
<el-option label="否" :value="0"></el-option>
|
<el-option label="是" :value="1"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="街/路/巷" prop="road">
|
<el-input v-model="item.road"></el-input>
|
</el-form-item>
|
<!-- <el-form-item label="与户主关系" prop="relation">
|
<el-select v-model="item.relation" placeholder="">
|
<el-option v-for="li in relation" :key="li.value" :label="li.name" :value="li.value"></el-option>
|
</el-select>
|
</el-form-item> -->
|
<el-form-item label="籍贯" prop="nativePlace">
|
<el-input disabled v-model="item.nativePlace"></el-input>
|
</el-form-item>
|
<el-form-item label="联系方式" prop="phone">
|
<el-input :maxlength="11" v-model="item.phone"></el-input>
|
</el-form-item>
|
<el-form-item label="文化程度" prop="cultureLevel">
|
<el-select v-model="item.cultureLevel" placeholder="">
|
<el-option v-for="li in cultureLevel" value-key="value" :key="li.value" :label="li.name"
|
:value="li.value"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="婚姻状况" prop="marriage">
|
<el-select v-model="item.marriage" placeholder="">
|
<el-option v-for="(li,index) in marriage" value-key="value" :key="index" :label="li.name"
|
:value="li.value"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="健康状况" prop="healthy">
|
<el-input :maxlength="10" v-model="item.healthy"></el-input>
|
</el-form-item>
|
<el-form-item label="工作单位" prop="workCompany">
|
<el-input :maxlength="35" v-model="item.workCompany"></el-input>
|
</el-form-item>
|
<el-form-item label="本地/外地" prop="outOrLocal">
|
<el-select v-model="item.outOrLocal" placeholder="">
|
<el-option v-for="(li,index) in outOrLocal" :key="index" :label="li.name" :value="li.value"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="户口所在地" prop="censusRegister">
|
<el-input :maxlength="20" v-model="item.censusRegister"></el-input>
|
</el-form-item>
|
<el-form-item style="width: 100%" label="人员标签" >
|
<el-select size="small" multiple v-model="item.label" placeholder="请选择">
|
<el-option v-for="(li,index) in label" :key="index" :value="li"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item style="width: 100%" label="备注">
|
<el-input :maxlength="100" type="textarea" v-model="item.remark"></el-input>
|
</el-form-item>
|
<div class="form-item" v-for="(item,index) in houseList" :key="index">
|
<div class="label">房屋地址{{index+1}}</div>
|
<div class="input-box">
|
<el-cascader
|
style="width: 100%"
|
size="small"
|
:placeholder="item.address"
|
v-model="item.houseId"
|
:props="props"
|
:options="options"
|
></el-cascader>
|
</div>
|
<el-form-item label="与户主关系" prop="">
|
<el-select v-model="item.relation" placeholder="">
|
<el-option v-for="li in relation" :key="li.value" :label="li.name" :value="li.value"></el-option>
|
</el-select>
|
</el-form-item>
|
<div class="operation">
|
<el-radio @change="change($event,index)" v-model="item.isResidence" :label="true">是否为居住地</el-radio>
|
<el-button :disabled="index!==(houseList.length-1)" @click="houseAdd" type="text">添加</el-button>
|
<el-button :disabled="item.isResidence" @click="clearHouse(index)" type="text">删除</el-button>
|
</div>
|
</div>
|
</el-form>
|
<div>
|
<el-button size="small" type="primary" @click="submitForm('item')">提交</el-button>
|
<el-button size="small" @click="back">取消</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
let id = 0;
|
export default {
|
name: "edit",
|
props: [],
|
components: {},
|
data() {
|
return {
|
value:'',
|
options:[
|
{
|
value:1,
|
label:'222'
|
}
|
],
|
houseList:[],
|
props:{//Cascader 级联选择器
|
label:'name',
|
value:'houseId',
|
lazy:true,
|
lazyLoad:(node, resolve)=>{
|
//动态加载
|
let {level,value} = node
|
if(level===0){
|
return
|
}
|
// debugger
|
let data = {
|
level:level+1,
|
houseId:value
|
}
|
this.$api.post('common/data/population/cascade/list',data,e=>{
|
if(level===4){
|
e.map(item=>{
|
item.leaf=level >= 4//第5级为子节点
|
})
|
}
|
resolve(e)
|
})
|
}
|
},
|
item: {},
|
house:[],
|
relation: [],
|
cultureLevel: [],
|
marriage: [],
|
outOrLocal: [{name: '本地', value: 1}, {name: '外地', value: 2}],
|
label: [],
|
rules: {
|
name: [
|
{required: true, message: '请输入家庭成员', trigger: 'blur'},
|
{min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
|
],
|
sex: [
|
{required: true, message: '请选择性别', trigger: 'change'}
|
],
|
isRent: [
|
{required: true, message: '请选择是否租用', trigger: 'change'}
|
],
|
road: [
|
{required: true, message: '请输入街路巷', trigger: 'blur'},
|
],
|
// nativePlace: [
|
// {required: true, message: '请输入籍贯', trigger: 'blur'},
|
// ],
|
phone: [
|
{required: true, message: '请输入联系方式', trigger: 'blur'},
|
],
|
cultureLevel: [
|
{required: true, message: '请选择文化程度', trigger: 'change'}
|
],
|
relation: [
|
{required: true, message: '请选择户主关系', trigger: 'change'}
|
],
|
politicalOutlook: [
|
{required: true, message: '请选择政治面貌', trigger: 'change'}
|
],
|
marriage: [
|
{required: true, message: '请选择婚姻状况', trigger: 'change'}
|
],
|
healthy: [
|
{required: true, message: '请输入健康状况', trigger: 'blur'},
|
],
|
workCompany: [
|
{required: true, message: '请输入工作单位', trigger: 'blur'},
|
],
|
outOrLocal: [
|
{required: true, message: '请选择本地/外地', trigger: 'change'},
|
],
|
censusRegister: [
|
{required: true, message: '请输入户口所在地', trigger: 'blur'},
|
]
|
}
|
}
|
},
|
created() {
|
if (this.$route.query.item) {
|
let item = JSON.parse(this.$route.query.item)
|
item.label = item.label ? item.label.split(',') : ''
|
this.init(item.id)
|
// this.item = item
|
// this.item.
|
}
|
this.listtag()
|
this.cascadeList()
|
},
|
mounted() {
|
// 与户主关系relation
|
this.householder();
|
// 婚姻状况 政治面貌
|
this.marriageList();
|
//文化程度 cultureLevel
|
this.cultureLevelList();
|
|
},
|
methods: {
|
//与户主关系
|
householder() {
|
let params = {
|
key:'GB/T4761'
|
}
|
this.$api.get('dictionary/listDictionaryByKey',params,e=>{
|
this.relation = e.map(d=> {
|
return {
|
value:d.dictValue,
|
name:d.dictName
|
}
|
})
|
})
|
},
|
|
marriageList() {
|
let params = {
|
key:'marry'
|
}
|
this.$api.get('dictionary/listDictionaryByKey',params,e=>{
|
this.marriage = e.map(d=> {
|
return {
|
value:d.dictValue,
|
name:d.dictName
|
}
|
})
|
})
|
},
|
|
cultureLevelList() {
|
let params = {
|
key:'education'
|
}
|
this.$api.get('dictionary/listDictionaryByKey',params,e=>{
|
this.cultureLevel = e.map(d=> {
|
return {
|
value:d.dictValue,
|
name:d.dictName
|
}
|
})
|
})
|
},
|
|
cascadeList(){
|
//连级选择器 房屋地址
|
let data = {
|
level:1
|
}
|
this.$api.post('common/data/population/cascade/list',data,e=>{
|
this.options = e
|
})
|
},
|
|
listtag() {
|
this.$api.get('communitymanager/listtag', '', e => {
|
this.label = e
|
})
|
},
|
init(id){
|
|
let data = {
|
populationId:id
|
}
|
this.$api.post('common/data/population/detail?populationId='+id,'',e=>{
|
|
e.label =e.label?e.label.split(','):[]
|
this.item = e;
|
this.item.cultureLevel =e.cultureLevel ? e.cultureLevel.toString():'';
|
this.item.marriage = this.item.marriage ? e.marriage.toString():'';
|
|
this.houseList = e.houseList || [{houseId:'',address:'',isResidence:true,relation:''}]
|
|
if(this.houseList.relation) {
|
this.houseList.forEach((item,index)=>{
|
item.isResidence = true;
|
})
|
}
|
|
this.houseList.forEach((item,index)=>{
|
item.relation = item.relation.toString()
|
this.$set(item,'isResidence',index===0)
|
})
|
|
})
|
},
|
houseAdd(){
|
//添加房屋地址
|
this.houseList.push({
|
houseId:'',
|
address:'',
|
relation:'',
|
isResidence:false
|
})
|
},
|
clearHouse(index){
|
//删除房屋地址
|
this.houseList.splice(index,1)
|
},
|
change(e,index){
|
this.houseList.map((item,index1)=>{
|
item.isResidence = index===index1
|
})
|
},
|
back() {
|
this.$router.back()
|
},
|
onSubmit() {
|
let list = [];
|
if(this.houseList) {
|
this.houseList.map(item=>{
|
if(item.houseId){
|
list.push({
|
id:Array.isArray(item.houseId)?item.houseId[item.houseId.length-1]:item.houseId,//取最后一位
|
isResidence:item.isResidence?1:2,//是否是居住地(1.是 2.否)
|
relation:item.relation
|
})
|
}
|
})
|
|
if(list.length===0){
|
return demo.toast("请选择房屋住址");
|
}
|
}
|
this.item.label =this.item.label?this.item.label.join():''
|
this.item.houseEditDTOList = list
|
|
|
this.$api.post('common/data/population/edit', this.item, e => {
|
// if()
|
this.back()
|
})
|
},
|
submitForm(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
|
if(this.houseList[0].isResidence && !this.houseList[0].relation) {
|
demo.toast("与户主关系必选");
|
return
|
}
|
this.onSubmit()
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
},
|
},
|
watch: {},
|
computed: {}
|
}
|
|
</script>
|
<style scoped>
|
.box-a{
|
overflow: scroll;
|
}
|
.form-box {
|
max-width: 1000px;
|
}
|
|
.form {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
}
|
|
.el-form-item {
|
box-sizing: border-box;
|
width: 400px;
|
padding: 0 10px;
|
}
|
.form-item{
|
width: 100%;
|
display: flex;
|
box-sizing: border-box;
|
}
|
.label{
|
font-size: 14px;
|
color: #606266;
|
box-sizing: border-box;
|
padding: 10px;
|
width: 100px;
|
}
|
.input-box{
|
/* flex: 1; */
|
padding:0 10px;
|
width: 300px;
|
}
|
.operation{
|
width: 220px;
|
height: 37px;
|
display: flex;
|
align-items: center;
|
}
|
</style>
|
