daofu-gov-pc/src/views/base-manage/residence/dialog/add-edit.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>