feat: 节点关联/节点独立的切换逻辑

apps/web-antd/src/components/tree/src/helper.tsx

@@ -1,10 +1,11 @@
 import type { MenuPermissionOption } from './data';
 
+import type { useVbenVxeGrid } from '#/adapter/vxe-table';
 import type { MenuOption } from '#/api/system/menu/model';
 
-import { eachTree } from '@vben/utils';
+import { eachTree, treeToList } from '@vben/utils';
 
-import { difference } from 'lodash-es';
+import { difference, isEmpty, isUndefined } from 'lodash-es';
 
 /**
  * 权限列设置是否全选
@@ -73,3 +74,60 @@ export function menusWithPermissions(menus: MenuOption[]) {
     }
   });
 }
+
+/**
+ * 设置表格选中
+ * @param checkedKeys 选中的keys
+ * @param menus 菜单 转换后的菜单
+ * @param tableApi api
+ * @param association 是否节点关联
+ */
+export function setTableChecked(
+  checkedKeys: (number | string)[],
+  menus: MenuPermissionOption[],
+  tableApi: ReturnType<typeof useVbenVxeGrid>['1'],
+  association: boolean,
+) {
+  // tree转list
+  const menuList: MenuPermissionOption[] = treeToList(menus);
+  // 拿到勾选的行数据
+  let checkedRows = menuList.filter((item) => checkedKeys.includes(item.id));
+
+  /**
+   * 节点独立切换到节点关联 只需要最末尾的数据 即children为空
+   */
+  if (!association) {
+    checkedRows = checkedRows.filter(
+      (item) => isUndefined(item.children) || isEmpty(item.children),
+    );
+  }
+
+  // 设置行选中 & permissions选中
+  checkedRows.forEach((item) => {
+    tableApi.grid.setCheckboxRow(item, true);
+    if (item?.permissions?.length > 0) {
+      item.permissions.forEach((permission) => {
+        if (checkedKeys.includes(permission.id)) {
+          permission.checked = true;
+        }
+      });
+    }
+  });
+
+  /**
+   * 节点独立切换到节点关联
+   * 勾选后还需要过滤权限没有任何勾选的情况 这时候取消行的勾选
+   */
+  if (!association) {
+    const emptyRows = checkedRows.filter((item) => {
+      if (isUndefined(item.permissions) || isEmpty(item.permissions)) {
+        return false;
+      }
+      return item.permissions.every(
+        (permission) => permission.checked === false,
+      );
+    });
+    // 设置为不选中
+    tableApi.grid.setCheckboxRow(emptyRows, false);
+  }
+}

apps/web-antd/src/components/tree/src/menu-select-table.vue

@@ -1,14 +1,16 @@
 <script setup lang="tsx">
+import type { RadioChangeEvent } from 'ant-design-vue';
+
 import type { MenuPermissionOption } from './data';
 
 import type { VxeGridProps } from '#/adapter/vxe-table';
 import type { MenuOption } from '#/api/system/menu/model';
 
-import { nextTick, onMounted, ref, watch } from 'vue';
+import { nextTick, onMounted, ref, shallowRef, watch } from 'vue';
 
 import { cloneDeep, findGroupParentIds } from '@vben/utils';
 
-import { Alert, Checkbox, RadioGroup, Space } from 'ant-design-vue';
+import { Alert, Checkbox, message, RadioGroup, Space } from 'ant-design-vue';
 import { uniq } from 'lodash-es';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
@@ -18,6 +20,7 @@ import {
   menusWithPermissions,
   rowAndChildrenChecked,
   setPermissionsChecked,
+  setTableChecked,
 } from './helper';
 import { useFullScreenGuide } from './hook';
 
@@ -227,10 +230,13 @@ onMounted(() => {
   );
 });
 
+// 缓存上次(切换节点关系前)选中的keys
+const lastCheckedKeys = shallowRef<(number | string)[]>([]);
 /**
  * 节点关联变动 事件
  */
-async function handleAssociationChange() {
+async function handleAssociationChange(e: RadioChangeEvent) {
+  lastCheckedKeys.value = getCheckedKeys();
   // 清空全部permissions选中
   const records = tableApi.grid.getData();
   records.forEach((item) => {
@@ -238,9 +244,19 @@ async function handleAssociationChange() {
   });
   // 需要清空全部勾选
   await tableApi.grid.clearCheckboxRow();
-  updateCheckedNumber();
   // 滚动到顶部
   await tableApi.grid.scrollTo(0, 0);
+
+  // 从节点关联切换到节点独立
+  // 由于节点独立兼容节点关联 设置选中
+  // if (e.target.value) {
+  //   setTableChecked(lastCheckedKeys.value, records, tableApi, false);
+  // } else {
+  //   setTableChecked(lastCheckedKeys.value, records, tableApi, true);
+  // }
+  setTableChecked(lastCheckedKeys.value, records, tableApi, !e.target.value);
+
+  updateCheckedNumber();
 }
 
 /**
@@ -337,6 +353,11 @@ function getCheckedKeys() {
 defineExpose({
   getCheckedKeys,
 });
+
+function test() {
+  const keys = getCheckedKeys();
+  message.success(`keys:${keys.length}`);
+}
 </script>
 
 <template>
@@ -364,6 +385,7 @@ defineExpose({
       </template>
       <template #toolbar-tools>
         <Space>
+          <a-button @click="test"> 测试 </a-button>
           <a-button @click="setExpandOrCollapse(false)">
             {{ $t('pages.common.collapse') }}
           </a-button>