bug:修复员工技能重复

src/views/base/skill/components/edit-skill.vue

@@ -2,12 +2,11 @@
   <div class="mainContentBox">
     <avue-form
       ref="formRef"
-      v-model="form"
       v-model:search="search"
+      v-model="form"
       :data="data2"
       :option="option2"
-    >
-    </avue-form>
+    />
     <avue-crud
       ref="crudRef"
       v-model="form"
@@ -18,15 +17,8 @@
       @row-del="deleteRow"
     >
       <template #menu-left="{ size }">
-        <el-button
-          circle
-          icon="el-icon-plus"
-          type="primary"
-          @click="addSkill"
-        ></el-button
-        >
-      </template>
-
+        <el-button type="primary" icon="el-icon-plus" circle @click="addSkill"
+      /></template>
     </avue-crud>
     <CommonTable
       ref="ctableRef"
@@ -35,22 +27,24 @@
       @selected-sure="onSelectedFinish"
     />
     <div class="detail-footer">
-      <el-button type="primary" @click="onHandle"> 确定</el-button>
+      <el-button type="primary" @click="onHandle"> 确定 </el-button>
       <el-button @click="cancelWindow">取消</el-button>
-
     </div>
   </div>
 </template>
 <script setup>
-import {ref, getCurrentInstance} from "vue";
-import {useCrud} from "@/hooks/userCrud";
-import {useCommonStoreHook, useDictionaryStore} from "@/store";
+import { ref, getCurrentInstance } from "vue";
+import { useCrud } from "@/hooks/userCrud";
+import { useCommonStoreHook, useDictionaryStore } from "@/store";
 import dictDataUtil from "@/common/configs/dictDataUtil";
-
-const {isShowTable, tableType} = toRefs(useCommonStoreHook());
-import {getPostSkill, addEmployeeSkill, getSkillDetail} from "@/api/system/skill";
+const { isShowTable, tableType } = toRefs(useCommonStoreHook());
+import {
+  getPostSkill,
+  addEmployeeSkill,
+  getSkillDetail,
+} from "@/api/system/skill";
 // 数据字典相关
-const {dicts} = useDictionaryStore();
+const { dicts } = useDictionaryStore();
 
 const test = () => {
   isShowTable.value = true;
@@ -59,15 +53,21 @@ const test = () => {
 const data3 = ref([]);
 const data2 = ref(null);
 // 传入一个url，后面不带/
-const {form, data, option, search, page, toDeleteIds, Methords, Utils} =
+const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
   useCrud({
     src: "/api/v1/sys/skillScore",
     dataListUrl: "/api/v1/sys/skillScore/list",
   });
-const {dataList, createRow, updateRow, deleteRow, searchChange, dataNoPageList} =
-  Methords; //增删改查
-const {selectionChange, multipleDelete} = Methords; //选中和批量删除事件
-const {checkBtnPerm, downloadTemplate, exportData} = Utils; //按钮权限等工具
+const {
+  dataList,
+  createRow,
+  updateRow,
+  deleteRow,
+  searchChange,
+  dataNoPageList,
+} = Methords; //增删改查
+const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
+const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
 // checkBtnPerm(ButtonPermKeys.PLAN.BTNS.order_add) :permission="permission"
 // const permission = reactive({
 //   delBtn: checkPerm(buttonPermission.PLAN.BTNS.order_del),
@@ -80,25 +80,25 @@ const ctableRef = ref(null); //crudRef.value 获取avue-crud对象
 const router = useRouter();
 onMounted(() => {
   // console.log("crudRef", crudRef)
-  getSkillDetail(props.skillId).then(
-    (data) => {
-      form.value = data.data;
-    }
-  )
+  getSkillDetail(props.skillId).then((data) => {
+    form.value = data.data;
+  });
   search.value.employeeSkillId = props.skillId;
   dataList();
-
-
 });
 
 const skillChange = (row) => {
-  if (skillValue.value !== undefined && skillValue.value !== null && skillValue.value !== "") {
+  if (
+    skillValue.value !== undefined &&
+    skillValue.value !== null &&
+    skillValue.value !== ""
+  ) {
     data.value[row.$index].skillDictValue = skillValue.value;
   }
-}
+};
 const cancelWindow = () => {
   props.editDialog.visible = false;
-}
+};
 const addSkill = () => {
   const bom = ref({
     $cellEdit: true,
@@ -107,15 +107,23 @@ const addSkill = () => {
 };
 const employeeSkill = ref({});
 const onHandle = () => {
-  console.info(form.value);
-  if (form.value.userId === null || form.value.userId === undefined || form.value.userId === "") {
+  console.info("dddd", data);
+  if (
+    form.value.userId === null ||
+    form.value.userId === undefined ||
+    form.value.userId === ""
+  ) {
     ElMessage({
       message: "未选择打分用户",
       type: "error",
     });
     return false;
   }
-  if (form.value.postId === null || form.value.postId === undefined || form.value.postId === "") {
+  if (
+    form.value.postId === null ||
+    form.value.postId === undefined ||
+    form.value.postId === ""
+  ) {
     ElMessage({
       message: "未选择岗位",
       type: "error",
@@ -131,14 +139,22 @@ const onHandle = () => {
   }
   if (data.value.length > 0) {
     for (let i = 0; i < data.value.length; i++) {
-      if (data.value[i].skillDictValue === undefined || data.value[i].skillDictValue === null || data.value[i].skillDictValue === "") {
+      if (
+        data.value[i].skillDictValue === undefined ||
+        data.value[i].skillDictValue === null ||
+        data.value[i].skillDictValue === ""
+      ) {
         ElMessage({
           message: "第" + (i + 1) + "项没有选择技能",
           type: "error",
         });
         return false;
       }
-      if (data.value[i].score === undefined || data.value[i].score === null || data.value[i].score === "") {
+      if (
+        data.value[i].score === undefined ||
+        data.value[i].score === null ||
+        data.value[i].score === ""
+      ) {
         ElMessage({
           message: "第" + (i + 1) + "项没有打分",
           type: "error",
@@ -151,24 +167,21 @@ const onHandle = () => {
   employeeSkill.value.postId = form.value.postId;
   employeeSkill.value.skillList = Array.from(data.value);
   employeeSkill.value.id = form.value.id;
-  addEmployeeSkill(employeeSkill.value).then(
-    (data) => {
-      if (data.code === "200") {
-        ElMessage({
-          message: data.msg,
-          type: "success",
-        });
-        props.editDialog.visible = false;
-      } else {
-        ElMessage({
-          message: data.msg,
-          type: "error",
-        });
-      }
+  addEmployeeSkill(employeeSkill.value).then((data) => {
+    if (data.code === "200") {
+      ElMessage({
+        message: data.msg,
+        type: "success",
+      });
+      props.editDialog.visible = false;
+    } else {
+      ElMessage({
+        message: data.msg,
+        type: "error",
+      });
     }
-  )
-
-}
+  });
+};
 // 设置表格列或者其他自定义的option
 option2.value = {
   selection: true,
@@ -177,37 +190,53 @@ option2.value = {
   emptyBtn: false,
   column: [
     {
-      label: "id", prop: "id", width: 130, overHidden: true, search: true,
+      label: "id",
+      prop: "id",
+      width: 130,
+      overHidden: true,
+      search: true,
       filterable: true,
+      width: 100,
+      overHidden: true,
       disabled: false,
       display: false,
-
     },
 
     {
-      label: "用户id", prop: "userId", width: 130, overHidden: true, search: true,
+      label: "用户id",
+      prop: "userId",
+      width: 130,
+      overHidden: true,
+      search: true,
       filterable: true,
       disabled: true,
       display: false,
-
     },
     {
-      label: "用户名", prop: "userName", width: 140, overHidden: true, search: true, rules: [{
-        required: true,
-        search: true,
-        message: "请选择员工姓名",
-        trigger: "blur"
-      }],
-      click: ({value, column}) => {
+      label: "用户名",
+      prop: "userName",
+      width: 140,
+      overHidden: true,
+      search: true,
+      rules: [
+        {
+          required: true,
+          search: true,
+          message: "请选择员工姓名",
+          trigger: "blur",
+        },
+      ],
+      click: ({ value, column }) => {
         ctableRef.value.startSelect();
       },
     },
-   /* {
-      label: "所属机构", prop: "institution", width: 130, overHidden: true, search: true,
+    /* {
+      label: "所属机构",
+      prop: "institution",
+      width: 130,
+      overHidden: true,
+      search: true,
       filterable: true,
-      width: 100, overHidden: true,
-      disabled: true,
-
     },*/
     {
       label: "员工编号",
@@ -216,29 +245,17 @@ option2.value = {
       disabled: true,
     },
     {
-      label: "岗位", prop: "postName",
+      label: "岗位",
+      prop: "postName",
       search: true,
       filterable: true,
       overHidden: true,
       disabled: true,
       dicUrl: dictDataUtil.post_list_url,
       dicMethod: "post",
-      change: ({value, column}) => {
-        if (value !== undefined) {
-          props.postId = value;
-          skillValue.value = null;
-          optionSkill.value = null;
-          dataNoPageList();
-        }
-      },
-      props: {label: "postName", value: "id"},
-
+      props: { label: "postName", value: "id" },
     },
-    {
-      label: "所属机构", prop: "deptName", overHidden: true,
-      disabled: true,
-    },
-
+    { label: "所属机构", prop: "deptName", overHidden: true, disabled: true },
   ],
 };
 const postIdValue = ref({});
@@ -248,23 +265,24 @@ const props = defineProps({
     type: Object,
     default: () => {
       return {};
-    }
+    },
   },
   skillId: {
     type: String,
     default: () => {
       return "0";
-    }
+    },
   },
   postId: {
     type: Number,
     default: () => {
       return "0";
-    }
-  }
-
-})
+    },
+  },
+});
 const postIdSkill = ref({});
+
+const focusedElement = ref(null);
 // 设置表格列或者其他自定义的option
 option.value = Object.assign(option.value, {
   selection: false,
@@ -274,59 +292,91 @@ option.value = Object.assign(option.value, {
   saveBtn: false,
 
   cellBtn: true,
-  column: [{
-    label: "技能",
-    prop: "skillDictValue",
-    align: 'center',
-    headerAlign: 'center',
-    span: 24,
-    cell: true,
-    type: 'select',
-    dicUrl: import.meta.env.VITE_APP_BASE_API + "/api/v1/sys/postSkill/list/" + props.postId,
-    props: {
-      label: "skillDictLabel", // 下拉菜单显示的字段
-      value: "skillDictValue", // 下拉菜单值的字段
+  column: [
+    {
+      label: "技能",
+      prop: "skillDictValue",
+      align: "center",
+      headerAlign: "center",
+      span: 24,
+      cell: true,
+      type: "select",
+      dicUrl:
+        import.meta.env.VITE_APP_BASE_API +
+        "/api/v1/sys/postSkill/list/" +
+        props.postId,
+      props: {
+        label: "skillDictLabel", // 下拉菜单显示的字段
+        value: "skillDictValue", // 下拉菜单值的字段
+      },
+      change: function (value, row) {
+        nextTick(() => {
+          focusedElement.value.blur();
+        });
+      },
+      focus: function (row) {
+        focusedElement.value = row.event.target;
+      },
+      blur: function (row) {
+        if (
+          data.value
+            .filter((value, index) => {
+              return index != row.index;
+            })
+            .map((item, index) => {
+              return item.skillDictValue;
+            })
+            .includes(row.value)
+        ) {
+          ElMessage({
+            message: row.row.$skillDictValue + " 打分项重复",
+            type: "error",
+          });
+          row.row.skillDictValue = "";
+          row.row.$skillDictValue = "";
+          row.value = "";
+        }
+      },
     },
-  },
     {
       label: "分数",
       prop: "score",
-      align: 'center',
-      headerAlign: 'center',
+      align: "center",
+      headerAlign: "center",
       cell: true,
       type: "number",
       precision: 2,
       max: 100,
       min: 0,
       span: 24,
-    },],
+    },
+  ],
 });
 const onSelectedFinish = (selectedValue) => {
   form.value.userId = selectedValue.id;
-
   form.value.userName = selectedValue.userName;
   form.value.deptName = selectedValue.deptName;
   form.value.employeeCode = selectedValue.employeeCode;
   //form.value.institution = selectedValue.institution;
-
-}
+};
 const skillValue = ref(null);
 const optionSkill = ref([]);
 const getPostSkills = () => {
-  if (postIdValue.value === undefined || postIdValue.value === null || postIdValue.value === "") {
+  if (
+    postIdValue.value === undefined ||
+    postIdValue.value === null ||
+    postIdValue.value === ""
+  ) {
     ElMessage({
       message: "未选择岗位",
       type: "error",
     });
     return false;
   }
-  getPostSkill(postIdValue.value).then(
-    (data) => {
-      optionSkill.value = Array.from(data.data);
-    }
-  )
-}
-
+  getPostSkill(postIdValue.value).then((data) => {
+    optionSkill.value = Array.from(data.data);
+  });
+};
 </script>
 <style type="text/css">
 .title-detail {
@@ -336,23 +386,18 @@ const getPostSkills = () => {
   margin: 25px 20px 25px 0;
   float: left;
 }
-
 .detail {
   margin: 0 auto;
   width: 100%;
 }
-
 .avue-crud {
   float: left;
 }
-
 .detail-footer {
   float: right;
   margin-top: 15px;
 }
-
 .el-select__selection {
   width: 150px;
 }
-
 </style>