288 lines
8.6 KiB
Vue
288 lines
8.6 KiB
Vue
|
<template>
|
||
|
|
<BaseDialog
|
||
|
|
:dialogVisible="props.visible"
|
||
|
|
@close="onclone"
|
||
|
|
:titleName="titleName + '人员'"
|
||
|
|
width="50%"
|
||
|
|
@onSubmit="handleSubmit"
|
||
|
|
:footerclosed="true"
|
||
|
|
:footerkeepnaem="readonly ? false : true"
|
||
|
|
:diafooter="true"
|
||
|
|
>
|
||
|
|
<div class="detailForm-content">
|
||
|
|
<el-form
|
||
|
|
ref="formRef"
|
||
|
|
label-width="120"
|
||
|
|
:rules="ruleForm"
|
||
|
|
:model="formData"
|
||
|
|
>
|
||
|
|
<el-form-item label="姓名" prop="name">
|
||
|
|
<el-input
|
||
|
|
:disabled="readonly"
|
||
|
|
placeholder="请输入姓名"
|
||
|
|
type="input"
|
||
|
|
v-model="formData.name"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="电话" prop="phoneNumber">
|
||
|
|
<el-input
|
||
|
|
:disabled="readonly"
|
||
|
|
placeholder="请输入电话"
|
||
|
|
type="input"
|
||
|
|
v-model="formData.phoneNumber"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<el-form-item label="性别" prop="sex">
|
||
|
|
<el-select
|
||
|
|
:disabled="readonly"
|
||
|
|
placeholder="请选择"
|
||
|
|
v-model="formData.sex"
|
||
|
|
>
|
||
|
|
<el-option label="男" :value="1">男</el-option>
|
||
|
|
<el-option label="女" :value="0">女</el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item prop="areaCode" label="所属区域">
|
||
|
|
<el-cascader
|
||
|
|
:disabled="readonly"
|
||
|
|
ref="cascader"
|
||
|
|
v-model="formData.areaCode"
|
||
|
|
placeholder="请选择地区"
|
||
|
|
:options="orgList"
|
||
|
|
:props="{
|
||
|
|
checkStrictly: true,
|
||
|
|
label: 'orgname',
|
||
|
|
value: 'orgcode',
|
||
|
|
}"
|
||
|
|
clearable
|
||
|
|
></el-cascader>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="人员标签" prop="peopleTag">
|
||
|
|
<el-select
|
||
|
|
:disabled="readonly"
|
||
|
|
placeholder="请选择人员标签"
|
||
|
|
v-model="formData.peopleTag"
|
||
|
|
>
|
||
|
|
<el-option label="常住人口" :value="1">常住人口</el-option>
|
||
|
|
<el-option label="流动人口" :value="2">流动人口</el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="关系" prop="relation">
|
||
|
|
<el-select
|
||
|
|
:disabled="readonly"
|
||
|
|
placeholder="请选择关系"
|
||
|
|
v-model="formData.relation"
|
||
|
|
>
|
||
|
|
<el-option label="户主" :value="1">户主</el-option>
|
||
|
|
<el-option label="父亲" :value="2">父亲</el-option>
|
||
|
|
<el-option label="母亲" :value="3">母亲</el-option>
|
||
|
|
<el-option label="祖父" :value="4">祖父</el-option>
|
||
|
|
<el-option label="祖母" :value="5">祖母</el-option>
|
||
|
|
<el-option label="子女" :value="6">子女</el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="出生日期" prop="birthday">
|
||
|
|
<el-date-picker
|
||
|
|
:disabled="readonly"
|
||
|
|
v-model="formData.birthday"
|
||
|
|
type="date"
|
||
|
|
placeholder="请选择出生日期"
|
||
|
|
size="default"
|
||
|
|
format="YYYY-MM-DD"
|
||
|
|
value-format="YYYY-MM-DD"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="创建时间" prop="createTime">
|
||
|
|
<el-date-picker
|
||
|
|
:disabled="readonly"
|
||
|
|
v-model="formData.createTime"
|
||
|
|
type="date"
|
||
|
|
placeholder="请选择创建时间"
|
||
|
|
size="default"
|
||
|
|
format="YYYY-MM-DD"
|
||
|
|
value-format="YYYY-MM-DD"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="类型" prop="typeId" style="width: 100%;">
|
||
|
|
<el-select
|
||
|
|
multiple
|
||
|
|
:disabled="readonly"
|
||
|
|
placeholder="请选择类型"
|
||
|
|
v-model="formData.typeId"
|
||
|
|
>
|
||
|
|
<el-option
|
||
|
|
v-for="(item, index) in typeList"
|
||
|
|
:key="index"
|
||
|
|
:label="item.typeName"
|
||
|
|
:value="item.typeId"
|
||
|
|
>{{ item.typeName }}</el-option
|
||
|
|
>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="身份证号" prop="idCard" style="width: 100%;">
|
||
|
|
<el-input
|
||
|
|
:disabled="readonly"
|
||
|
|
placeholder="请输入身份证号"
|
||
|
|
type="input"
|
||
|
|
v-model="formData.idCard"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="当前地址" prop="nowAddress" style="width: 100%;">
|
||
|
|
<el-input
|
||
|
|
:disabled="readonly"
|
||
|
|
placeholder="请输入当前地址"
|
||
|
|
type="input"
|
||
|
|
v-model="formData.nowAddress"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
</BaseDialog>
|
||
|
|
</template>
|
||
|
|
<script setup lang='ts'>
|
||
|
|
import { reactive, ref, onMounted, watch } from "vue";
|
||
|
|
import { ElMessage, FormInstance, FormRules } from "element-plus";
|
||
|
|
import { areaTree } from "@/api/account";
|
||
|
|
import { crTypeList, peopleAdd, peopleDetail } from "@/api/base";
|
||
|
|
import useUserStore from "@/store/modules/user";
|
||
|
|
const userStore = useUserStore();
|
||
|
|
const user = ref(JSON.parse(userStore.userInfo));
|
||
|
|
const userId = ref(user.value.userId);
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
visible: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
readonly: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
id: {
|
||
|
|
type: String,
|
||
|
|
default: "",
|
||
|
|
},
|
||
|
|
form: Object,
|
||
|
|
});
|
||
|
|
const emits = defineEmits(["close"]);
|
||
|
|
const titleName = ref("新增");
|
||
|
|
// 表单
|
||
|
|
const formRef = ref<FormInstance>();
|
||
|
|
let isCardId = (rule, value, callback) => {
|
||
|
|
if (!value) {
|
||
|
|
return new Error("请输入身份证号)");
|
||
|
|
} else {
|
||
|
|
const reg =
|
||
|
|
/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/;
|
||
|
|
const card = reg.test(value);
|
||
|
|
if (!card) {
|
||
|
|
//判断座机为12位
|
||
|
|
callback(new Error("身份证格式如:423024xxxx0216xxxx"));
|
||
|
|
} else {
|
||
|
|
callback();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const ruleForm = reactive<FormRules>({
|
||
|
|
name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
|
||
|
|
phoneNumber: [{ required: true, message: "请输入电话", trigger: "blur" }],
|
||
|
|
areaCode: [{ required: true, message: "请选择地区", trigger: "blur" }],
|
||
|
|
idCard: [
|
||
|
|
{ required: true, message: "请输入身份证号", trigger: "blur" },
|
||
|
|
{ validator: isCardId, trigger: "blur" },
|
||
|
|
],
|
||
|
|
createTime: [
|
||
|
|
{ required: true, message: "请选择创建时间", trigger: "blur" },
|
||
|
|
],
|
||
|
|
sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
|
||
|
|
nowAddress: [{ required: true, message: "请输入地址", trigger: "blur" }],
|
||
|
|
peopleTag: [{ required: true, message: "请选择人员标签", trigger: "blur" }],
|
||
|
|
relation: [{ required: true, message: "请选择人员关系", trigger: "blur" }],
|
||
|
|
typeId: [{ required: true, message: "请选择类型", trigger: "blur" }],
|
||
|
|
});
|
||
|
|
|
||
|
|
const formData = ref<any>({});
|
||
|
|
//保存并退出
|
||
|
|
const handleSubmit = () => {
|
||
|
|
formRef.value?.validate((valid) => {
|
||
|
|
if (valid) {
|
||
|
|
let params = {
|
||
|
|
...formData.value,
|
||
|
|
areaCode: "",
|
||
|
|
peopleId: formData.value.peopleId ? formData.value.peopleId : null,
|
||
|
|
domicileId:props.id,
|
||
|
|
};
|
||
|
|
if (formData.value.areaCode instanceof Array) {
|
||
|
|
params.areaCode =
|
||
|
|
formData.value.areaCode[formData.value.areaCode.length - 1];
|
||
|
|
} else {
|
||
|
|
params.areaCode = formData.value.areaCode;
|
||
|
|
}
|
||
|
|
peopleAdd(params).then((res: any) => {
|
||
|
|
if (res.code == 1) {
|
||
|
|
ElMessage.success({
|
||
|
|
message: "操作成功",
|
||
|
|
type: "success",
|
||
|
|
});
|
||
|
|
onclone();
|
||
|
|
} else {
|
||
|
|
ElMessage.error({
|
||
|
|
message: res.message,
|
||
|
|
type: "error",
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
};
|
||
|
|
//获取地区
|
||
|
|
const orgList = ref([]);
|
||
|
|
const getareaTree = () => {
|
||
|
|
areaTree(userId.value).then((res: any) => {
|
||
|
|
orgList.value = res.data;
|
||
|
|
});
|
||
|
|
};
|
||
|
|
//获取类型
|
||
|
|
const typeList = ref([]);
|
||
|
|
const getCrTypeList = () => {
|
||
|
|
crTypeList(userId.value).then((res: any) => {
|
||
|
|
typeList.value = res.data;
|
||
|
|
});
|
||
|
|
};
|
||
|
|
//查看人员详情
|
||
|
|
const getPeopleDetail = (id) => {
|
||
|
|
peopleDetail({peopleId:id}).then((res: any) => {
|
||
|
|
formData.value = res.data;
|
||
|
|
formData.value.typeId = res.data.typeIds;
|
||
|
|
formData.value.peopleTag = res.data.peopleTag*1;
|
||
|
|
});
|
||
|
|
};
|
||
|
|
//关闭弹窗
|
||
|
|
const onclone = () => {
|
||
|
|
formRef.value?.clearValidate();
|
||
|
|
formData.value = {};
|
||
|
|
emits("close");
|
||
|
|
};
|
||
|
|
onMounted(() => {
|
||
|
|
getareaTree();
|
||
|
|
getCrTypeList();
|
||
|
|
});
|
||
|
|
|
||
|
|
//详情
|
||
|
|
watch(
|
||
|
|
() => props.form,
|
||
|
|
(val: any) => {
|
||
|
|
titleName.value = val.peopleId ? "编辑" : "新增";
|
||
|
|
if (val.peopleId) {
|
||
|
|
getPeopleDetail(val.peopleId);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
</script>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.detailForm-content {
|
||
|
|
margin-right: 30px;
|
||
|
|
}
|
||
|
|
</style>
|