<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="personType">
|
<el-select v-model="item.personType" placeholder="">
|
<el-option
|
v-for="(it, ix) in personTypeList"
|
:key="ix"
|
:label="it.label"
|
:value="it.value"
|
></el-option>
|
</el-select>
|
</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 },
|
],
|
personTypeList: [
|
{ value: '1', label: "户籍人口" },
|
{ value: '2', label: "留守人员" },
|
{ value: '3', label: "外地人员" },
|
{ value: '4', label: "境外人员" },
|
{ value: '5', label: "流动人口" },
|
{ value: '6', label: "常住人口" },
|
{ value: '7', label: "暂住人口" },
|
],
|
label: [],
|
rules: {
|
name: [
|
{ required: true, message: "请输入家庭成员", trigger: "blur" },
|
{ min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
|
],
|
sex: [{ required: true, message: "请选择性别", trigger: "change" }],
|
personType: [{ 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>
|
