Review 代码, 还原原始代码, 增加名称重复校验规则

src/views/system/staff/index.vue

@@ -1,5 +1,3 @@
-import { checkStaffName } from '@/api/system/staff'
-import { listStaff, getStaff, addStaff, updateStaff, delStaff, listStaffAll, listStaffByDept, clearAllStaff, reEmployment, checkStaffName } from '@/api/system/staff'
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="98px">
@@ -9,7 +7,6 @@ import { listStaff, getStaff, addStaff, updateStaff, delStaff, listStaffAll, lis
           placeholder="请输入姓名"
           clearable
           @keyup.enter.native="handleQuery"
-
         />
       </el-form-item>
       <el-form-item label="归属部门：" prop="deptId">
@@ -306,7 +303,7 @@ import { listStaff, getStaff, addStaff, updateStaff, delStaff, listStaffAll, lis
                   <el-row>
                     <el-col :span="24">
                       <el-form-item label="姓名：" prop="name">
-                          <el-input v-model="form.name" placeholder="请输入姓名"@blur="handleCheckName" />
+                          <el-input v-model="form.name" placeholder="请输入姓名" />
                       </el-form-item>
                     </el-col>
                   </el-row>
@@ -939,7 +936,7 @@ import { listStaff, getStaff, addStaff, updateStaff, delStaff, listStaffAll, lis
 
 
 <script>
-import { listStaff, getStaff, delStaff, addStaff, updateStaff, clearAllStaff,reEmployment } from '@/api/system/staff'
+import { listStaff, getStaff, delStaff, addStaff, updateStaff, clearAllStaff,reEmployment,checkStaffName } from '@/api/system/staff'
 import {  getDetailByUser,updateDetail } from "@/api/system/staffDetail";
 import { listAllDepts } from '@/api/system/dept';
 import { listAllOptions } from '@/api/personnelMatters/subsidyInformation';
@@ -947,16 +944,32 @@ import { getToken } from "@/utils/auth";
 import Treeselect from "@riophae/vue-treeselect";
 import {  getAllowAdjustment } from "@/api/system/allowAdjustment";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-import {checkStaffName} from "../../../api/system/staff";
 
 export default {
   name: "Staff",
   dicts: ['sys_user_sex', 'sys_level','sys_yes_no','sys_worker_status','sys_contract','sys_company','time_clock','job_info'],
   components: { Treeselect },
   data() {
-    return {
-      nameTimer: null,
     
+     var checkUsernameAsync = async(rule, value, callback) =>{
+          // 异步请求后台接口校验用户名是否存在
+           await checkStaffName({ userId: this.form.userId,name: value }).then(res=>{
+              if (res.data) {
+                callback(new Error('员工【'+value+'】已存在(包含离职)'))
+              } else {
+                callback() // 校验通过
+              }
+           });
+         
+          // 假设后台返回 { code: 0, data: true } true=已存在
+          // if (res.data.data) {
+          //   callback(new Error('姓名【'+value+'】已存在，所有员工（含离职）不可重名'))
+          // } else {
+          //   callback() // 校验通过
+          // }
+      }
+
+    return {
       url: process.env.VUE_APP_BASE_URL,
       // 遮罩层
       loading: true,
@@ -1039,39 +1052,14 @@ export default {
       //详情form表单
       infoForm:{},
       infoRules: {
-        async handleCheckName()
-        {
-          if (!this.infoForm.name) return
-          const res = await checkStaffName({
-            id: this.infoForm.id || null, // 新增传null，编辑传员工id
-            name: this.infoForm.name
-          })
-          if (res.data) {
-            this.$message.error(`姓名【${this.infoForm.name}】已存在，在职/离职人员均不可重名`)
-          }
-        },
 
-// 提交表单前二次校验兜底
-        async submitForm()
-        {
-          await this.$refs.form.validate()
-          // 提交前再次校验，防止快速提交绕过失焦校验
-          const repeatRes = await checkStaffName({ id: this.infoForm.id, name: this.infoForm.name })
-          if (repeatRes.data) {
-            return this.$message.error('姓名重复，无法保存')
-          }
-          // 执行新增/编辑提交
-          await this.$api.staff.saveOrUpdate(this.infoForm)
-          this.$message.success('保存成功')
-          this.dialogVisible = false
-          this.getTableList() // 刷新员工列表
-        }
       },
       // 表单校验
       rules: {
         name: [
           { required: true, message: "姓名不能为空", trigger: "blur" },
-          { min: 2, max: 20, message: '用户名称长度必须介于 2 和 25 之间', trigger: 'blur' }
+          { min: 2, max: 20, message: '用户名称长度必须介于 2 和 25 之间', trigger: 'blur' },
+          { validator: checkUsernameAsync, trigger: 'blur' }
         ],
         deptId: [
           { required: true, message: "部门不能为空", trigger: "blur" }
@@ -1137,6 +1125,7 @@ export default {
         ]
       }
     };
+ 
   },
   created() {
     this.getAllowAdjustment();
@@ -1145,6 +1134,8 @@ export default {
     this.getSubsidyList();
   },
   methods: {
+
+
       //上传头像
       handleAvatarSuccess(res, file) {
         this.form.imageUrl = res.url;
@@ -1302,8 +1293,7 @@ export default {
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {
-      });
+      }).catch(() => {});
     },
     /** 导出员工 */
     handleExport() {
@@ -1324,10 +1314,10 @@ export default {
     },
     /** 下载模板操作 */
     importTemplate() {
-      this.download('system/staff/importTemplate', {}, `staff_template_${new Date().getTime()}.xlsx`)
+      this.download('system/staff/importTemplate', {
+      }, `staff_template_${new Date().getTime()}.xlsx`)
       this.upload.open = false;
     },
-
     // 文件上传中处理
     handleFileUploadProgress(event, file, fileList) {
       this.upload.isUploading = true;
@@ -1428,25 +1418,6 @@ export default {
         this.$modal.msgSuccess("清理成功");
         this.getList();
       });
-
-      async function handleCheckName() {
-        if (this.nameTimer) clearTimeout(this.nameTimer)
-        const name = this.infoForm.name?.trim()
-        if (!name) return
-
-        this.nameTimer = setTimeout(async () => {
-          try {
-            const params = {name}
-            if (this.infoForm.id) params.id = this.infoForm.id
-            const res = await checkStaffName(params)
-            if (res.data) {
-              this.$modal.msgWarning('该员工姓名已存在，不能重复')
-            }
-          } catch (e) {
-            this.$modal.msgError('姓名校验接口异常')
-          }
-        }, 300)
-      }
     },
 
 
@@ -1467,17 +1438,9 @@ export default {
     },
 
      /** 提交按钮 */
-    async submitInfoForm() {
-      this.$refs["infoForm"].validate(async valid => {
+     submitInfoForm() {
+      this.$refs["infoForm"].validate(valid => {
         if (valid) {
-          const name = this.form.name.trim()
-          const params = {name}
-          if (this.form.id) params.id = this.form.id
-          const {data} = await checkStaffName(params)
-          if (data) {
-            this.$modal.msgWarning('该员工姓名已存在，不能重复')
-            return
-          }
           updateDetail(this.infoForm).then(response => {
             this.$modal.msgSuccess("修改成功");
             this.openInfo = false;
@@ -1485,25 +1448,6 @@ export default {
         }
       });
     },
-    async handleCheckName() {
-      if (this.nameTimer) clearTimeout(this.nameTimer)
-      const name = this.infoForm?.name?.trim()
-      if (!name) return
-
-      this.nameTimer = setTimeout(async () => {
-        try {
-          const params = {name}
-          if (this.infoForm.id) params.id = this.infoForm.id
-          const res = await checkStaffName(params)
-          if (res.data) {
-            this.$modal.msgWarning('该员工姓名已存在，不能重复')
   }
-        } catch (e) {
-          this.$modal.msgError('姓名校验接口异常')
-        }
-      }, 300)
-    }
-  }
-}
-
+};
 </script>