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"
    :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="sortId">
          <el-input placeholder="请输入" type="input" v-model="formData.name" />
        </el-form-item>
        <el-form-item label="户籍" prop="sortId">
          <el-input placeholder="请输入" type="input" v-model="formData.loc" />
        </el-form-item>
        <el-form-item label="出生日期" prop="sortId">
          <el-date-picker placeholder="请选择" v-model="formData.birth" />
        </el-form-item>
        <el-form-item label="性别" prop="sortId">
          <el-select placeholder="请选择" v-model="formData.sex">
            <el-option label="男" value="女">男</el-option>
            <el-option label="女" value="女">女</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="户籍成员" prop="sortId" style="width: 94%">
          <el-input
            placeholder="请输入"
            type="input"
            v-model="formData.member"
          />
        </el-form-item>
        <el-form-item label="现居地址" prop="sortId" style="width: 94%">
          <el-input
            placeholder="请输入"
            type="input"
            v-model="formData.address"
          />
        </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 { getUUID } from "@/utils/common";
const uuid = ref(getUUID());

import { inListAdd } from "@/api/industry";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  form: Object,
});

const emits = defineEmits(["close"]);
const titleName = ref("新增");
// 表单
const formRef = ref<FormInstance>();
const ruleForm = reactive<FormRules>({
  itemTitle: [{ required: true, message: "请输入内容", trigger: "blur" }],
});
const formData = ref<any>({});

const tags = ref([
  { label: "流动人口", value: 1 },
  { label: "常住人口", value: 2 },
]);
const types = ref([
  { label: "新生儿", value: 1 },
  { label: "在校生", value: 2 },
  { label: "残疾人", value: 3 },
  { label: "低保户", value: 4 },
  { label: "五保户", value: 5 },
  { label: "党员", value: 6 },
  { label: "村组干部", value: 7 },
  { label: "其他", value: 8 },
]);

//保存并退出
const handleSubmit = () => {
  formRef.value?.validate((valid) => {
    if (valid) {
      formData.value.sortId = formData.value.sortId || 1;
      formData.value.industryId = props.id;
      formData.value.delState = formData.value.delState || 1;
      inListAdd(formData.value).then((res: any) => {
        if (res.code == 1) {
          ElMessage.success({
            message: "操作成功",
            type: "success",
          });
          onclone();
        } else {
          ElMessage.error({
            message: res.message,
            type: "error",
          });
        }
      });
    }
    return false;
  });
};

//关闭弹窗
const onclone = () => {
  formRef.value?.clearValidate();
  formData.value = {};
  emits("close");
};
onMounted(() => {});

watch(
  () => props.form,
  (val: any) => {
    titleName.value = val.id ? "编辑" : "新增/迁入";
    formData.value = JSON.parse(JSON.stringify(val));
  }
);
</script>
<style scoped></style>