校验员工姓名重复。

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: {
@@ -1132,7 +1164,7 @@ export default {
       return isJPG && isLt5M;
     },
     /**获取补贴 */
-    getSubsidyList(){
+    getSubsidyList() {
       listAllOptions().then(response => {
         this.subsidyOptions = response.data;
       });
@@ -1140,14 +1172,14 @@ export default {
     },
 
     /** 获取部门 */
-    getDeptList(){
+    getDeptList() {
       listAllDepts().then(response => {
         this.deptOptions = response;
-        this.deptOpt = JSON.parse(JSON.stringify(this.deptOptions).replaceAll('id','value'))
+        this.deptOpt = JSON.parse(JSON.stringify(this.deptOptions).replaceAll('id', 'value'))
       });
     },
 
-    getAllowAdjustment(){
+    getAllowAdjustment() {
       getAllowAdjustment().then(response => {
         this.allowAdjustment = response.data;
       });
@@ -1204,11 +1236,11 @@ export default {
         status: null,
         socialSubsidy: null,
         companyName: null,
-        imageUrl:null,
+        imageUrl: null,
-        fileId:null,
+        fileId: null,
-        timeClock:null,
+        timeClock: null,
-        timeClockList:null,
+        timeClockList: null,
-        subsidyList:null
+        subsidyList: null
       };
       this.resetForm("form");
     },
@@ -1242,8 +1274,8 @@ export default {
       this.$refs["form"].validate(valid => {
         if (valid) {
           console.log(this.form.deptId)
-          if(Array.isArray(this.form.deptId)){
+          if (Array.isArray(this.form.deptId)) {
-            this.form.deptId = this.form.deptId[this.form.deptId.length -1]
+            this.form.deptId = this.form.deptId[this.form.deptId.length - 1]
           }
           if (this.form.userId != null) {
             updateStaff(this.form).then(response => {
@@ -1265,12 +1297,13 @@ export default {
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      this.$modal.confirm('是否确认删除员工名称为"' + row.name + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除员工名称为"' + row.name + '"的数据项？').then(function () {
         return delStaff(row.userId);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      }).catch(() => {
+      });
     },
     /** 导出员工 */
     handleExport() {
@@ -1279,7 +1312,7 @@ export default {
       }, `员工信息_${new Date().getTime()}.xlsx`)
     },
     //导出员工详情
-    handleExportDetail(){
+    handleExportDetail() {
       this.download('system/staff/exportDetail', {
         ...this.queryParams
       }, `员工详情_${new Date().getTime()}.xlsx`)
@@ -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;
@@ -1304,7 +1337,7 @@ export default {
       this.upload.open = false;
       this.upload.isUploading = false;
       this.$refs.upload.clearFiles();
-      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
+      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", {dangerouslyUseHTMLString: true});
       this.getList();
     },
     // 提交上传文件
@@ -1312,7 +1345,7 @@ export default {
       this.$refs.upload.submit();
     },
     //离职设置
-    handleJobStatus(row){
+    handleJobStatus(row) {
       this.reset();
       this.disPlayFlag = "0";
       getStaff(row.userId).then(response => {
@@ -1321,18 +1354,18 @@ export default {
         this.title = "离职对话框";
       });
     },
-    reEmployment(row){
+    reEmployment(row) {
       reEmployment(row.userId).then(response => {
-        if(response.code==200){
+        if (response.code == 200) {
           this.$modal.msgSuccess("重新入职成功");
           this.getList();
-        }else{
+        } else {
           this.$modal.msgError(response.data.msg);
         }
       });
     },
     //员工全额工资对话框
-    handleDelay(row){
+    handleDelay(row) {
       this.reset();
       this.disPlayFlag = "2";
       getStaff(row.userId).then(response => {
@@ -1342,7 +1375,7 @@ export default {
       });
     },
     //员工转正对话框
-    handleChange(row){
+    handleChange(row) {
       this.reset();
       this.disPlayFlag = "1";
       getStaff(row.userId).then(response => {
@@ -1365,12 +1398,12 @@ export default {
       });
     },
     //销售提成上传
-    importSalesCommissions(){
+    importSalesCommissions() {
       this.uploadSale.title = "销售提成上传";
       this.uploadSale.open = true;
     },
     //公积金导入
-    uploadAccumulationFund(){
+    uploadAccumulationFund() {
       this.uploadFund.title = "五险一金导入";
       this.uploadFund.open = true;
     },
@@ -1383,41 +1416,68 @@ export default {
       this.uploadFund.open = false;
       this.uploadFund.isUploading = false;
       this.$refs.uploadFund.clearFiles();
-      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
+      this.$alert(response.msg, "导入结果", {dangerouslyUseHTMLString: true});
       this.getList();
     },
     // 提交上传文件
     submitFundForm() {
       this.$refs.uploadFund.submit();
     },
-    handleClearAll(){
+    handleClearAll() {
       clearAllStaff().then(response => {
         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)
+      }
     },
 
 
     //查看详情
-    handleDetail(row){
+    handleDetail(row) {
       getDetailByUser(row.userId).then(response => {
         this.infoForm = response.data;
         this.openInfo = true;
       });
     },
     //关闭详情
-    cancelInfo(){
+    cancelInfo() {
       this.openInfo = false;
       this.resetInfo();
     },
-    resetInfo(){
+    resetInfo() {
-      this.infoForm={};
+      this.infoForm = {};
     },
 
     /** 提交按钮 */
-     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>