vue3+ts用resetFields清空打开弹框清空校验规则与内容

<template>
  <div class="com-dialog-style">
    <el-dialog
      class="add-edit-user"
      :title="dialogTitle"
      v-model="dialogVisible"
      width="60%"
    >
      <div class="add-edit-box">
        <el-form
          :model="form"
          :rules="rules"
          ref="formRef"
          label-width="80px"
          class="demo-form"
        >
          <el-form-item label="用户姓名" prop="nickname">
            <el-input
              v-model="form.nickname"
              placeholder="输入用户姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="工资编码" prop="user_no">
            <el-input
              v-model="form.user_no"
              maxlength="5"
              placeholder="输入用户工资编码，5个字符"
            ></el-input>
          </el-form-item>
          <el-form-item label="单位编码">
            <el-input
              v-model="form.depart_code"
              maxlength="2"
              placeholder="输入用户但我编码，2个字符"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input
              v-model="form.phone"
              oninput="if(value.length>11)value=value.slice(0,11)"
              placeholder="输入用户手机号，11个数字"
            ></el-input>
          </el-form-item>
          <el-form-item label="出生年月">
            <el-col :span="11">
              <el-form-item>
                <el-date-picker
                  type="month"
                  placeholder="选择出生年月"
                  v-model="form.birthday"
                  style="width: 100%"
                  value-format="YYYY-MM"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item label="性别">
            <el-radio v-model="form.sex" :label="1">男</el-radio>
            <el-radio v-model="form.sex" :label="2">女</el-radio>
          </el-form-item>
          <div class="add-description">
            <div class="add-description-title">说明：</div>
            <div class="add-description-item">
              ①此页面仅能编辑用户基本信息，要新增或修改用户头像请到<span>人脸识别系统</span>操作。
            </div>
            <div class="add-description-item">
              ②人脸识别系统批量导入头像时，请用“<span>姓名_工资编码</span>”作为文件名，例如：张三_98532
            </div>
            <div class="add-description-item">
              ③每天凌晨后台会自动将人脸识别系统的头像同步到用户列表（根据<span>工资编码</span>匹配），点击列表右侧的“<span>更新头像</span>”可立即同步。
            </div>
            <div class="add-description-item">
              ④如果<span>修改了用户的工资编码，人脸识别系统那边也要手动修改</span>，否则会导致头像匹配不上。
            </div>
          </div>
          <div class="flex-center-end">
            <el-form-item>
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="submitForm('form')"
                >保存</el-button
              >
            </el-form-item>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { add_user, edit_user } from "@/api";
import { ElDialog, ElDatePicker, ElMessage, ElRadio } from "element-plus";
const dialogVisible = ref(false);
const dialogTitle = ref(""); //标题
const dialogType = ref(""); //弹框类型
const itemUser = ref(); //编辑数据
const formRef = ref();
const form = ref({
  user_id: 0,
  nickname: "",
  user_no: "",
  depart_code: "",
  phone: "",
  birthday: "",
  sex: 0,
});

const rules = {
  nickname: [{ required: true, message: "请输入用户姓名", trigger: "blur" }],
  user_no: [{ required: true, message: "请输入工资编码", trigger: "blur" }],
  phone: [
    { required: false, message: "手机号" },
    { pattern: /^1[3456789]\d{9}$/, message: "请输入11位正确手机号" },
  ],
} as any;
const handleOpen = (action, row) => {
  dialogVisible.value = true;
  dialogType.value = action;
  itemUser.value = row;
  if (action == "add") {
    dialogTitle.value = "新增用户";
    formRef.value !== undefined ? formRef.value.resetFields() : ""; //清空校验规则
    form.value = getNullValue();
  } else {
    dialogTitle.value = "编辑用户";
    setFormData(row);
  }
};
const setFormData = (data) => {
  if (data) {
    form.value = { ...data };
  }
};
const getParams = () => {
  let formData = form.value;
  return {
    user_id: itemUser?.value ? itemUser.value.id : 0,
    nickname: formData.nickname,
    user_no: formData.user_no,
    depart_code: formData.depart_code,
    phone: formData.phone,
    birthday: formData.birthday,
    sex: formData.sex,
  };
};
// 打开弹框时清空内容
const getNullValue = () => {
  return {
    user_id: 0,
    nickname: "",
    user_no: "",
    depart_code: "",
    phone: "",
    birthday: "",
    sex: 0,
  };
};
const emit = defineEmits(["onConfirm"]);
const submitForm = async () => {
  let params = getParams();
  await formRef.value.validate(async (valid) => {
    if (valid) {
      if (dialogType.value === "edit") {
        const { status, message } = await edit_user(params);
        if (status === 200) {
          ElMessage({
            message: "编辑成功",
            type: "success",
          });
          dialogVisible.value = false;
          emit("onConfirm", true);
        } else {
          ElMessage({
            message: message,
            type: "warning",
          });
        }
      } else {
        const { status, message } = await add_user(params);
        if (status === 200) {
          ElMessage({
            message: "新增成功",
            type: "success",
          });
          dialogVisible.value = false;
          emit("onConfirm", true);
        } else {
          ElMessage({
            message: message,
            type: "warning",
          });
        }
      }
    } else {
      return false;
    }
  });
};
defineExpose({
  handleOpen,
});
</script>
<style lang="scss">
.add-edit-user {
  .flex-center-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .add-description {
    font-size: var(--el-dialog-content-font-size);
    line-height: var(--el-font-size-large);
    span {
      color: red;
    }
    .add-description-item {
      margin-bottom: 8px;
    }
    .add-description-title {
      margin-bottom: 10px;
    }
  }
}
</style>