校验员工姓名重复。

src/api/system/staff.js

@@ -76,3 +76,14 @@ export function reEmployment(id) {
   })
 }
 
+
+// 校验员工姓名重复
+export function checkStaffName(data) {
+  return request({
+    url: '/system/staff/checkName',
+    method: 'post',
+    data
+  })
+}
+// 失去焦点触发校验
+

src/views/system/staff/index.vue

@@ -1,3 +1,5 @@
+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">
@@ -7,6 +9,7 @@
           placeholder="请输入姓名"
           clearable
           @keyup.enter.native="handleQuery"
+
         />
       </el-form-item>
       <el-form-item label="归属部门：" prop="deptId">
@@ -303,7 +306,7 @@
                   <el-row>
                     <el-col :span="24">
                       <el-form-item label="姓名：" prop="name">
-                          <el-input v-model="form.name" placeholder="请输入姓名" />
+                          <el-input v-model="form.name" placeholder="请输入姓名"@blur="handleCheckName" />
                       </el-form-item>
                     </el-col>
                   </el-row>
@@ -944,6 +947,7 @@ 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",
@@ -951,6 +955,8 @@ export default {
   components: { Treeselect },
   data() {
     return {
+      nameTimer: null,
+
       url: process.env.VUE_APP_BASE_URL,
       // 遮罩层
       loading: true,
@@ -1033,7 +1039,33 @@ 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: {
@@ -1270,7 +1302,8 @@ export default {
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      }).catch(() => {
+      });
     },
     /** 导出员工 */
     handleExport() {
@@ -1291,10 +1324,10 @@ export default {
     },
     /** 下载模板操作 */
     importTemplate() {
-      this.download('system/staff/importTemplate', {
+      this.download('system/staff/importTemplate', {}, `staff_template_${new Date().getTime()}.xlsx`)
-      }, `staff_template_${new Date().getTime()}.xlsx`)
       this.upload.open = false;
     },
+
     // 文件上传中处理
     handleFileUploadProgress(event, file, fileList) {
       this.upload.isUploading = true;
@@ -1395,6 +1428,25 @@ 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)
+      }
     },
 
 
@@ -1415,9 +1467,17 @@ export default {
     },
 
     /** 提交按钮 */
-     submitInfoForm() {
+    async submitInfoForm() {
-      this.$refs["infoForm"].validate(valid => {
+      this.$refs["infoForm"].validate(async 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;
@@ -1425,11 +1485,25 @@ 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>