cnlive_project / cnlive-community-web-vue · Files

<script setup lang="ts">
import {
  reactive,
  ref,
  onMounted,
  getCurrentInstance,
  defineExpose,
} from "vue";
import type { ElForm } from "element-plus";
import { addOrUpdate } from "@/api/notify/serviceman.ts";
import { getTableList } from "@/api/community/residence.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,
      age: null,
      mobile: null,
      idCard: null,
      sex: null,
      neighborhoods: [],
    },
  },
});
const data = reactive({
  loading: false,
  options: [],
  sexList: ["男", "女"],
});
/**
 * 校验手机号格式
 * @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",
    },
  ],
  age: [
    {
      required: true,
      message: "请输入年龄",
      trigger: "blur",
    },
    { type: "number", message: "请输入正确的年龄", max: 120 },
  ],
  mobile: [
    {
      required: true,
      trigger: "blur",
      validator: checkPhone,
    },
  ],
  idCard: [
    {
      required: true,
      trigger: "blur",
      validator: checkCard,
    },
  ],
  neighborhoods: [
    {
      required: true,
      message: "请输入楼座数",
      trigger: "blur",
    },
  ],
  sex: [
    {
      required: true,
      message: "请选择性别",
      trigger: "blur",
    },
  ],
});
/**
 * 获取下拉数据
 */
const getSelectList = (): void => {
  getTableList({ page: 1, pageSize: 1000, type: 0 })
    .then((res) => {
      data.options = res.data.data.list;
    })
    .catch((err) => {
      console.log(err);
    });
};
const emit = defineEmits<{
  (e: "cancel"): void;
  (e: "success"): void;
}>();

/**
 * 表单提交
 * @param {ElForm | undefined} formEl 表单对象
 */
let submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
  data.loading = true;
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      let params = JSON.parse(JSON.stringify(props.formObj));
      delete params.neighborhoods;
      let ids = props.formObj.neighborhoods
        .map((item) => {
          return item.id;
        })
        .toString();
      params = Object.assign(params, { ids: ids });
      // console.log({ accendant: params, neighborhoodIds: ids })
      addOrUpdate(params)
        .then((res) => {
          data.loading = false;
          emit("success");
        })
        .catch((err) => {
          data.loading = false;
        });
    } else {
      instance?.proxy?.$message.error("请完善信息"); //调用
      data.loading = false;
      return false;
    }
  });
};
/**
 * 重置
 */
let resetForm = () => {
  ruleFormRef.value.resetFields();
};
/**
 * 取消提交
 */
const cancel: void = () => {
  emit("cancel");
};
defineExpose({
  resetForm,
});
onMounted(() => {
  getSelectList();
});
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="props.formObj"
    :rules="rules"
    label-width="100px"
  >
    <el-form-item label="姓名:" prop="name">
      <el-input
        v-model="props.formObj.name"
        placeholder="请输入姓名"
        maxlength="30"
      ></el-input>
    </el-form-item>
    <el-form-item label="年龄:" prop="age">
      <el-input
        v-model.number="props.formObj.age"
        placeholder="请输入年龄"
      ></el-input>
    </el-form-item>
    <el-form-item label="联系电话:" prop="mobile">
      <el-input
        v-model="props.formObj.mobile"
        placeholder="请输入联系电话"
        maxlength="11"
        :disabled="props.formObj.id"
      ></el-input>
    </el-form-item>
    <el-form-item label="身份证号:" prop="idCard">
      <el-input
        v-model="props.formObj.idCard"
        placeholder="请输入身份证号"
        maxlength="18"
      ></el-input>
    </el-form-item>
    <el-form-item label="服务小区:" prop="neighborhoods">
      <el-select
        v-model="props.formObj.neighborhoods"
        multiple
        placeholder="请选择小区"
        value-key="id"
        style="width: 100%"
      >
        <el-option
          v-for="item in data.options"
          :key="item"
          :label="item.name"
          :value="item"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="性别:" prop="sex">
      <el-select
        v-model="props.formObj.sex"
        placeholder="请选择性别"
        style="width: 100%"
      >
        <el-option
          v-for="item in data.sexList"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button
        type="primary"
        @click="submitForm(ruleFormRef)"
        :loading="data.loading"
        >保存</el-button
      >
      <el-button @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>