315 lines
9.1 KiB
Vue
315 lines
9.1 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"
|
|
class="center-form"
|
|
>
|
|
<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="sortId">
|
|
<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="marriageState">
|
|
<el-select
|
|
:disabled="readonly"
|
|
placeholder="请选择"
|
|
v-model="formData.marriageState"
|
|
>
|
|
<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="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="changeTime">
|
|
<el-date-picker
|
|
:disabled="readonly"
|
|
v-model="formData.changeTime"
|
|
type="date"
|
|
placeholder="请选择户籍创建时间"
|
|
size="default"
|
|
format="YYYY-MM-DD"
|
|
value-format="YYYY-MM-DD"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="身份证号" prop="idCard" style="width: 94%;">
|
|
<el-input
|
|
:disabled="readonly"
|
|
placeholder="请输入身份证号"
|
|
type="input"
|
|
v-model="formData.idCard"
|
|
>
|
|
<template #append v-if="formData.domicileId">
|
|
<svg-icon name="xianshi" class="icon_xianshi" v-if="cardtype" @click.stop="getPeopleIdCard(true)" />
|
|
<svg-icon name="yingchang" class="icon_xianshi" v-else @click.stop="getPeopleIdCard(false)" />
|
|
</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="现居地址" prop="address" style="width: 94%;">
|
|
<el-input
|
|
:disabled="readonly"
|
|
placeholder="请输入"
|
|
type="input"
|
|
v-model="formData.address"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="经度" prop="lon">
|
|
<el-input
|
|
:disabled="readonly"
|
|
placeholder="请输入"
|
|
type="input"
|
|
v-model="formData.lon"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="纬度" prop="lat">
|
|
<el-input
|
|
:disabled="readonly"
|
|
placeholder="请输入"
|
|
type="input"
|
|
v-model="formData.lat"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="readonly ? false : true"
|
|
label="地图："
|
|
style="width: 94%;"
|
|
>
|
|
<Map
|
|
@change="handleMapChange"
|
|
:longlat="
|
|
formData.lon && formData.lat
|
|
? [formData.lon, formData.lat]
|
|
: latAndLon
|
|
"
|
|
></Map>
|
|
</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 { domicileAdd, domicileDetail,domicileIdCard } 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,
|
|
},
|
|
form: Object,
|
|
});
|
|
//道孚地图坐标
|
|
const latAndLon = ref([101.13, 30.98]);
|
|
const emits = defineEmits(["close"]);
|
|
const titleName = ref("新增");
|
|
// 表单
|
|
const formRef = ref<FormInstance>();
|
|
let isCardId = (rule, value, callback) => {
|
|
if (!value) {
|
|
return new Error("请输入身份证号)");
|
|
} else {
|
|
const reg = /^[0-9*]{15}$|^[0-9*]{17}[0-9Xx]$/;
|
|
const card = reg.test(value);
|
|
if (!card) {
|
|
///判断是否15-18位
|
|
callback(new Error("请输入长度为15或者18位"));
|
|
} else {
|
|
callback();
|
|
}
|
|
}
|
|
};
|
|
const ruleForm = reactive<FormRules>({
|
|
name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
|
|
sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
|
|
lat: [{ required: true, message: "请选择纬度", trigger: "blur" }],
|
|
lon: [{ required: true, message: "请选择经度", trigger: "blur" }],
|
|
idCard: [
|
|
{ required: true, message: "请输入身份证号", trigger: "blur" },
|
|
{ validator: isCardId, trigger: "blur" },
|
|
],
|
|
changeTime: [
|
|
{ required: true, message: "请选择户籍创建时间", trigger: "blur" },
|
|
],
|
|
areaCode: [{ required: true, message: "请选择地区", trigger: "blur" }],
|
|
address: [{ required: true, message: "请输入地址", trigger: "blur" }],
|
|
});
|
|
|
|
const formData = ref<any>({});
|
|
//保存并退出
|
|
const handleSubmit = () => {
|
|
formRef.value?.validate((valid) => {
|
|
if (valid) {
|
|
let params = {
|
|
...formData.value,
|
|
areaCode: "",
|
|
domicileId: formData.value.domicileId
|
|
? formData.value.domicileId
|
|
: null,
|
|
};
|
|
if (formData.value.areaCode instanceof Array) {
|
|
params.areaCode =
|
|
formData.value.areaCode[formData.value.areaCode.length - 1];
|
|
} else {
|
|
params.areaCode = formData.value.areaCode;
|
|
}
|
|
domicileAdd(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 handleMapChange = (pos) => {
|
|
formData.value.lon = pos[0];
|
|
formData.value.lat = pos[1];
|
|
};
|
|
//关闭弹窗
|
|
const onclone = () => {
|
|
formRef.value?.clearValidate();
|
|
formData.value = {};
|
|
emits("close");
|
|
};
|
|
//详情获取户籍人员信息
|
|
const getDomicileDetail = (id) => {
|
|
domicileDetail({ domicileId: id }).then((res: any) => {
|
|
formData.value = res.data;
|
|
});
|
|
};
|
|
//获取身份证明文
|
|
const cardtype = ref(true);
|
|
const getPeopleIdCard = (type) =>{
|
|
cardtype.value = !cardtype.value
|
|
if(type) {
|
|
let params = {
|
|
idCard:formData.value.idCard,
|
|
domicileId:formData.value.domicileId,
|
|
}
|
|
domicileIdCard(params).then((res: any) => {
|
|
if (res.data.idCard) {
|
|
formData.value.idCard = res.data.idCard;
|
|
}
|
|
});
|
|
}else {
|
|
function maskIdCard(idCardNumber) {
|
|
if (idCardNumber.length !== 18) {
|
|
throw new Error('身份证号码必须是18位');
|
|
}
|
|
// 提取前六位
|
|
var firstSix = idCardNumber.substring(0, 6);
|
|
// 提取后四位
|
|
var lastFour = idCardNumber.substring(14);
|
|
// 中间用*代替
|
|
var maskedMiddle = '********'.repeat(1); // 生成8个*
|
|
// 拼接结果
|
|
return firstSix + maskedMiddle + lastFour;
|
|
}
|
|
formData.value.idCard = maskIdCard(formData.value.idCard);
|
|
}
|
|
|
|
}
|
|
onMounted(() => {
|
|
getareaTree();
|
|
});
|
|
//详情
|
|
watch(
|
|
() => props.form,
|
|
(val: any) => {
|
|
titleName.value = val.domicileId ? "编辑" : "新增/迁入";
|
|
formData.value = JSON.parse(JSON.stringify(val));
|
|
if(val.domicileId) getDomicileDetail(formData.value.domicileId);
|
|
}
|
|
);
|
|
</script>
|
|
<style scoped>
|
|
.icon_xianshi {
|
|
width: 2em;
|
|
height: 2em;
|
|
position: absolute;
|
|
right: 0px;
|
|
}
|
|
:deep(.el-input-group__append) {
|
|
padding: 0 !important;
|
|
background-color:transparent !important;
|
|
|
|
}
|
|
</style> |