cnlive_project / cnlive-community-web-vue · Files

<script setup lang="ts">
import { reactive, ref, getCurrentInstance, defineExpose } from "vue";
import type { ElForm } from "element-plus";
import { insertOrUpdate } from "@/api/housekeeper/buildinMganager.ts";
import { validMobile, checkIdcard } from "@/utils/validate";

const ruleFormRef = ref<InstanceType<typeof ElForm>>();
let instance: ComponentInternalInstance | null = getCurrentInstance(); //获取app实例
// 声明props
const props = defineProps({
  formObj: {
    type: Object,
    default: {
      name: null,
      mobile: null,
      idcard: null,
      type: null,
      gender: null,
      censusRegister: null,
      birthdate: null,
      nationality: null,
    },
  },
});

let loading = ref(false);

const data = reactive({
  options: [
    { label: "选举", value: 0 },
    { label: "派驻", value: 1 },
  ],
  genderList: [
    { label: "男", value: 1 },
    { label: "女", value: 0 },
  ],
});
/**
 * 校验手机号格式
 * @param {object} rules 验证规则
 * @param {string} value 待验证手机号
 * @callback checkPhone~checkCallback
 */
const checkPhone = (rules, value, callback) => {
  if (validMobile(value)) {
    callback();
  } else {
    callback(new Error("请填写格式正确的手机号码"));
  }
};
/**
 * 校验身份证
 * @param {object} rules 验证规则
 * @param {string} value 待验证身份证
 * @callback checkCard~checkCallback
 */
const checkCard = (rules, value, callback) => {
  if (checkIdcard(value)) {
    callback();
  } else {
    callback(new Error("请填写正确的身份证"));
  }
};
// 表单验证
const rules = reactive({
  name: [
    {
      required: true,
      message: "请输入姓名",
      trigger: "blur",
    },
  ],
  mobile: [
    {
      required: true,
      trigger: "blur",
      validator: checkPhone,
    },
  ],
  idcard: [
    {
      required: true,
      trigger: "blur",
      validator: checkCard,
    },
  ],
  type: [
    {
      required: true,
      message: "请选择类型",
      trigger: "change",
    },
  ],
  gender: [
    {
      required: true,
      message: "请输入选择性别",
      trigger: "change",
    },
  ],
  censusRegister: [
    {
      required: true,
      message: "请输入户籍所在地",
      trigger: "blur",
    },
  ],
  birthdate: [
    {
      required: true,
      message: "请选择出生日期",
      trigger: "change",
    },
  ],
  nationality: [
    {
      required: true,
      message: "请输入民族",
      trigger: "blur",
    },
  ],
});

const emit = defineEmits<{
  (e: "cancel"): void;
  (e: "success"): void;
}>();

/**
 * 表单提交
 * @param {ElForm | undefined} formEl 表单对象
 */
let submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
  loading.value = true;
  console.log(!formEl)
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      insertOrUpdate(props.formObj)
        .then((res) => {
          loading.value = false;
          emit("success");
        })
        .catch((err) => {
          loading.value = false;
        });
    } else {
      console.log(111)
      instance?.proxy?.$message.error("请完善信息"); //调用
      loading.value = false;
      return false;
    }
  });
};
/**
 * 重置
 */
let resetForm = () => {
  ruleFormRef.value.resetFields();
};
/**
 * 取消提交
 */
const cancel: void = () => {
  emit("cancel");
};

defineExpose({
  resetForm,
});
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="props.formObj"
    :rules="rules"
    label-width="100px"
    :inline="true"
  >
    <el-form-item label="姓名:" prop="name">
      <el-input
        v-model="props.formObj.name"
        placeholder="请输入姓名"
        maxlength="10"
      ></el-input>
    </el-form-item>
    <el-form-item label="手机号:" prop="mobile">
      <el-input
        v-model="props.formObj.mobile"
        :disabled="props.formObj.id"
        maxlength="11"
        placeholder="请输入手机号"
      ></el-input>
    </el-form-item>
    <el-form-item label="身份证号:" prop="idcard">
      <el-input
        maxlength="18"
        v-model="props.formObj.idcard"
        placeholder="请输入身份证号"
      ></el-input>
    </el-form-item>
    <el-form-item label="类型:" prop="type">
      <el-select
        style="width: 200px"
        v-model="props.formObj.type"
        placeholder="请选择类型"
        clearable
      >
        <el-option
          v-for="item in data.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="性别:" prop="gender">
      <el-select
        v-model="props.formObj.gender"
        placeholder="请选择"
        style="width: 200px"
      >
        <el-option
          v-for="item in data.genderList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="户籍所在地:" prop="censusRegister">
      <el-input
        maxlength="50"
        v-model="props.formObj.censusRegister"
        placeholder="请输入户籍所在地"
      ></el-input>
    </el-form-item>
    <el-form-item label="出生日期:" prop="birthdate">
      <el-date-picker
        style="width: 200px"
        v-model="props.formObj.birthdate"
        type="date"
        placeholder="选择时间"
      >
      </el-date-picker>
    </el-form-item>
    <el-form-item label="民族:" prop="nationality">
      <el-input
        maxlength="20"
        v-model="props.formObj.nationality"
        placeholder="请输入民族"
      ></el-input>
    </el-form-item>
    <el-row>
      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm(ruleFormRef)"
          :loading="loading"
          >保存</el-button
        >
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-row>
  </el-form>
</template>