update 代码优化

2026-04-13 11:15:13 +08:00
parent 3c6d5fab08
commit 30b7f8d13a
1 changed files with 95 additions and 112 deletions
--- a/src/views/system/configuration/components/workloadPermission.vue
+++ b/src/views/system/configuration/components/workloadPermission.vue
@@ -164,81 +164,92 @@ onMounted(() => {
 });
 const dialogDataType = ref('');

+// #region --------------------------- 公共函数 ---------------------------
+// 公共函数：根据 userId 去重
+const uniqueByUserId = (data: any[]) => {
+  const map = new Map();
+  data.forEach((item) => map.set(item.userId, item));
+  return Array.from(map.values());
+};
+
+// 公共函数：从数组中移除指定 userId 的项
+const removeByUserIds = (data: any[], userIds: string[]) => {
+  const userIdSet = new Set(userIds);
+  return data.filter((item) => !userIdSet.has(item.userId));
+};
+
+// 公共函数：更新表格选中状态
+const updateTableSelection = (tableRef: any, checkedData: any[]) => {
+  tableRef?.tableRef?.clearCheckboxRow();
+  nextTick(() => {
+    const selectedKeys = checkedData.map((item: any) => item.userId);
+    tableRef?.tableRef?.setCheckboxRowKey(selectedKeys, true);
+  });
+};
+// #endregion
+
 // #region 左侧表格
 const leftTableRef = ref();
 const leftParams = ref({
  deptId: '',
 });
 const leftCheckedData = ref<any>([]);
-// 更新选中数据
+// 更新左侧选中数据
 const leftChangeFun = async (data: any) => {
  if (data.checked) {
-    leftCheckedData.value.push(data.row);
+    leftCheckedData.value = uniqueByUserId([...leftCheckedData.value, data.row]);
  } else {
-    leftCheckedData.value = leftCheckedData.value.filter(
-      (item: any) => item.userId !== data.row.userId
-    );
-    // 获取取消勾选的负责人关联的用户
-    const params = {
+    leftCheckedData.value = removeByUserIds(leftCheckedData.value, [data.row.userId]);
+    // 获取并移除取消勾选负责人关联的用户
+    const { data: relatedData } = await queryRelatedUserIdsApi({
      userIds: [data.row.userId],
      relationType: 1,
-    };
-    const { data: relatedData } = await queryRelatedUserIdsApi(params);
-    // 从右侧列表中移除这些用户
-    if (relatedData && relatedData.length > 0) {
-      const relatedUserIds = relatedData.map((item: any) => item.userId);
-      rightCheckedData.value = rightCheckedData.value.filter(
-        (item: any) => !relatedUserIds.includes(item.userId)
+    });
+    if (relatedData?.length) {
+      rightCheckedData.value = removeByUserIds(
+        rightCheckedData.value,
+        relatedData.map((item: any) => item.userId)
      );
-      if (leftCheckedData.value.length == 0) {
-        rightTableDataLoad();
+      if (!leftCheckedData.value.length) {
+        updateTableSelection(rightTableRef.value, rightCheckedData.value);
      }
    }
    // 获取当前左侧勾选用户的关联用户
    getRelatedUserIds();
  }
 };
-// 更新全选
+
+// 更新左侧全选状态
 const leftAllChangeFun = async (data: any) => {
  if (data.checked) {
-    leftCheckedData.value = [...leftCheckedData.value, ...leftTableRef.value.tableData];
-    // 根据id去重
-    leftCheckedData.value = leftCheckedData.value.filter(
-      (item: any, index: number, arr: any) =>
-        arr.findIndex((i: any) => i.userId === item.userId) === index
-    );
+    leftCheckedData.value = uniqueByUserId([
+      ...leftCheckedData.value,
+      ...leftTableRef.value.tableData,
+    ]);
  } else {
-    // 更新左侧表格已选数据
-    leftCheckedData.value = leftCheckedData.value.filter((item: any) => {
-      return !leftTableRef.value.tableData.some((i: any) => i.userId === item.userId);
-    });
-    if (leftCheckedData.value.length > 0) {
-      // 获取取消勾选的所有负责人关联的用户
-      const params = {
-        userIds: leftTableRef.value.tableData.map((item: any) => item.userId),
+    const uncheckedUserIds = leftTableRef.value.tableData.map((item: any) => item.userId);
+    leftCheckedData.value = removeByUserIds(leftCheckedData.value, uncheckedUserIds);
+    if (leftCheckedData.value.length) {
+      // 获取并移除取消勾选负责人关联的用户
+      const { data: relatedData } = await queryRelatedUserIdsApi({
+        userIds: uncheckedUserIds,
        relationType: 1,
-      };
-      const { data: relatedData } = await queryRelatedUserIdsApi(params);
-      // 从右侧列表中移除这些用户
-      if (relatedData && relatedData.length > 0) {
-        const relatedUserIds = relatedData.map((item: any) => item.userId);
-        rightCheckedData.value = rightCheckedData.value.filter(
-          (item: any) => !relatedUserIds.includes(item.userId)
+      });
+      if (relatedData?.length) {
+        rightCheckedData.value = removeByUserIds(
+          rightCheckedData.value,
+          relatedData.map((item: any) => item.userId)
        );
      }
-      // 获取当前左侧勾选用户的关联用户并更新
      getRelatedUserIds();
    } else {
      rightCheckedData.value = [];
-      rightTableRef.value.tableRef.clearCheckboxRow();
+      rightTableRef.value?.tableRef?.clearCheckboxRow();
    }
  }
 };
 const leftTableDataLoad = () => {
-  nextTick(() => {
-    const selectedKeys = leftCheckedData.value.map((item: any) => item.userId);
-    leftTableRef.value.tableRef.setCheckboxRowKey(selectedKeys, true); // 设置为选中
-  });
+  updateTableSelection(leftTableRef.value, leftCheckedData.value);
 };

 const checkTableDataVisible = ref(false);
@@ -250,26 +261,20 @@ const showLeftCheckedData = () => {
 };

 // 更新右侧所选数据
+// 更新右侧选中数据
 const updateRightCheckData = (data: any) => {
-  const addData = data;
-  // 把addData添加到rightCheckedData中,且根据userId去重
-  rightCheckedData.value = rightCheckedData.value
-    .concat(addData)
-    .filter(
-      (item: any, index: number, arr: any) =>
-        arr.findIndex((i: any) => i.userId === item.userId) === index
-    );
-  rightTableDataLoad();
+  rightCheckedData.value = uniqueByUserId([...rightCheckedData.value, ...data]);
+  updateTableSelection(rightTableRef.value, rightCheckedData.value);
 };

 const getRelatedUserIds = async () => {
-  const params = {
-    userIds: leftCheckedData.value.map((item: any) => item.userId),
+  const userIds = leftCheckedData.value.map((item: any) => item.userId);
+  if (!userIds.length) return;
+  const { data } = await queryRelatedUserIdsApi({
+    userIds,
    relationType: 1,
-  };
-  if (params.userIds.length == 0) return;
-  const { data } = await queryRelatedUserIdsApi(params);
-  updateRightCheckData(data);
+  });
+  updateRightCheckData(data || []);
 };
 watch(
  () => leftCheckedData.value,
@@ -283,23 +288,14 @@ watch(
 );
 // #endregion

+// 弹窗数据更新
 // 弹窗数据更新
 const handleDataChange = (newData: any[]) => {
-  if (dialogDataType.value === 'left') {
-    leftCheckedData.value = newData;
-    // 同步更新左侧表格的选中状态
-    nextTick(() => {
-      leftTableRef.value?.tableRef?.clearCheckboxRow();
-      leftTableDataLoad();
-    });
-  } else if (dialogDataType.value === 'right') {
-    rightCheckedData.value = newData;
-    // 同步更新右侧表格的选中状态
-    nextTick(() => {
-      rightTableRef.value?.tableRef?.clearCheckboxRow();
-      rightTableDataLoad();
-    });
-  }
+  const isLeft = dialogDataType.value === 'left';
+  const checkedData = isLeft ? leftCheckedData : rightCheckedData;
+  const tableRef = isLeft ? leftTableRef : rightTableRef;
+  checkedData.value = newData;
+  updateTableSelection(tableRef.value, newData);
 };

 // #region 右侧表格
@@ -315,58 +311,46 @@ const showRightCheckedData = () => {
 };
 const rightChangeFun = (data: any) => {
  if (data.checked) {
-    rightCheckedData.value.push(data.row);
+    rightCheckedData.value = uniqueByUserId([...rightCheckedData.value, data.row]);
  } else {
-    rightCheckedData.value = rightCheckedData.value.filter(
-      (item: any) => item.userId !== data.row.userId
-    );
+    rightCheckedData.value = removeByUserIds(rightCheckedData.value, [data.row.userId]);
  }
 };
+// 更新右侧全选状态
 const rightAllChangeFun = (data: any) => {
  if (data.checked) {
-    rightCheckedData.value = [...rightCheckedData.value, ...rightTableRef.value.tableData];
-    // 根据id去重
-    rightCheckedData.value = rightCheckedData.value.filter(
-      (item: any, index: number, arr: any) =>
-        arr.findIndex((i: any) => i.userId === item.userId) === index
-    );
+    rightCheckedData.value = uniqueByUserId([
+      ...rightCheckedData.value,
+      ...rightTableRef.value.tableData,
+    ]);
  } else {
-    rightCheckedData.value = rightCheckedData.value.filter((item: any) => {
-      return !rightTableRef.value.tableData.some((i: any) => i.userId === item.userId);
-    });
+    const uncheckedUserIds = rightTableRef.value.tableData.map((item: any) => item.userId);
+    rightCheckedData.value = removeByUserIds(rightCheckedData.value, uncheckedUserIds);
  }
 };
 const rightTableDataLoad = () => {
-  rightTableRef.value?.tableRef?.clearCheckboxRow();
-  nextTick(() => {
-    const selectedKeys = rightCheckedData.value.map((item: any) => item.userId);
-    rightTableRef.value.tableRef.setCheckboxRowKey(selectedKeys, true); // 设置为选中
-  });
+  updateTableSelection(rightTableRef.value, rightCheckedData.value);
 };
 // #endregion

-const clearAll = (type: string) => {
-  if (type === 'left') {
-    leftCheckedData.value = [];
-    leftTableRef.value?.tableRef?.clearCheckboxRow();
-  } else if (type === 'right') {
-    rightCheckedData.value = [];
-    rightTableRef.value?.tableRef?.clearCheckboxRow();
-  }
+// 清空选中数据
+const clearAll = (type: 'left' | 'right') => {
+  const checkedData = type === 'left' ? leftCheckedData : rightCheckedData;
+  const tableRef = type === 'left' ? leftTableRef : rightTableRef;
+
+  checkedData.value = [];
+  tableRef.value?.tableRef?.clearCheckboxRow();
 };
+
 // #region 关联确认
 const relateConfirm = () => {
-  const tips = `为 ${leftCheckedData.value.length} 位负责人绑定当前所选的权限( ${rightCheckedData.value.length} 位用户)，<br>确定操作吗？`;
+  const tips = `为 ${leftCheckedData.value.length} 位负责人绑定当前所选的权限(${rightCheckedData.value.length} 位用户)，确定操作吗？`;
  ElMessageBox.confirm(tips, '提示', {
    type: 'warning',
    dangerouslyUseHTMLString: true,
  })
-    .then(() => {
-      relateFun();
-    })
-    .catch(() => {
-      ElMessage.info('取消操作');
-    });
+    .then(() => relateFun())
+    .catch(() => ElMessage.info('取消操作'));
 };
 const relateFun = async () => {
  const params = {
@@ -374,11 +358,10 @@ const relateFun = async () => {
    relatedUserIds: rightCheckedData.value.map((item: any) => item.userId),
    relationType: 1,
  };
-  saveUserRelationApi(params).then((res) => {
-    if (res.code === 200) {
-      ElMessage.success('关联成功');
-    }
-  });
+  const res = await saveUserRelationApi(params);
+  if (res?.code === 200) {
+    ElMessage.success('关联成功');
+  }
 };

 // #endregion