refactor: 菜单管理 改为节点懒加载(去除展开全部功能) 关闭虚拟滚动(可自行开启)

CHANGELOG.md

@@ -24,6 +24,7 @@
 - 流程相关样式更新
 - 请假申请 表单更改为drawer方式 替换新页面打开
 - API加密 迁移到@vben/utils下
+- 菜单管理 改为节点懒加载(去除展开全部功能) 关闭虚拟滚动(可自行开启)
 
 **OTHERS**
 

apps/web-antd/src/views/system/menu/data.tsx

@@ -62,6 +62,8 @@ export const columns: VxeGridProps['columns'] = [
     field: 'menuName',
     treeNode: true,
     width: 200,
+    // 层级更明显显示
+    align: 'left',
     slots: {
       // 需要i18n支持 否则返回原始值
       default: ({ row }) => $t(row.menuName),

apps/web-antd/src/views/system/menu/index.vue

@@ -9,7 +9,12 @@ import { computed, ref } from 'vue';
 import { useAccess } from '@vben/access';
 import { Fallback, Page, useVbenDrawer } from '@vben/common-ui';
 import { $t } from '@vben/locales';
-import { eachTree, getVxePopupContainer, treeToList } from '@vben/utils';
+import {
+  eachTree,
+  getVxePopupContainer,
+  listToTree,
+  treeToList,
+} from '@vben/utils';
 
 import { Popconfirm, Space, Switch, Tooltip } from 'ant-design-vue';
 
@@ -47,29 +52,47 @@ const gridOptions: VxeGridProps = {
         const resp = await menuList({
           ...formValues,
         });
-        return { rows: resp };
+        // 手动转为树结构
+        const treeData = listToTree(resp, { id: 'menuId', pid: 'parentId' });
+        // 添加hasChildren字段
+        eachTree(treeData, (item) => {
+          item.hasChildren = !!(item.children && item.children.length > 0);
+        });
+        console.log(treeData);
+
+        return { rows: treeData };
       },
     },
   },
   rowConfig: {
     keyField: 'menuId',
+    // 高亮点击行
+    isCurrent: true,
   },
   /**
    * 开启虚拟滚动
    * 数据量小可以选择关闭
    * 如果遇到样式问题(空白、错位 滚动等)可以选择关闭虚拟滚动
+   *
+   * 由于已经重构为懒加载 不需要虚拟滚动(如果你觉得卡顿 依旧可以选择开启)
    */
-  scrollY: {
-    enabled: true,
-    gt: 0,
-  },
+  // scrollY: {
+  //   enabled: true,
+  //   gt: 0,
+  // },
   treeConfig: {
     parentField: 'parentId',
     rowField: 'menuId',
-    // 自动转换为tree 由vxe处理 无需手动转换
-    transform: true,
+    // 使用懒加载需要自行构造hasChild字段 不需要自动转换为树结构
+    transform: false,
     // 刷新接口后 记录展开行的情况
     reserve: true,
+    // 是否存在子节点的字段
+    hasChildField: 'hasChildren',
+    // 开启展开 懒加载
+    lazy: true,
+    // 懒加载方法 直接返回children
+    loadMethod: ({ row }) => row.children ?? [],
   },
   id: 'system-menu-index',
 };
@@ -173,25 +196,29 @@ const isAdmin = computed(() => {
 
 <template>
   <Page v-if="isAdmin" :auto-content-height="true">
-    <BasicTable table-title="菜单列表" table-title-help="双击展开/收起子菜单">
+    <BasicTable
+      id="system-menu-table"
+      table-title="菜单列表"
+      table-title-help="双击展开/收起子菜单"
+      :style="{ '--vxe-ui-table-row-current-background-color': '#1677ff' }"
+    >
       <template #toolbar-tools>
         <Space>
           <Tooltip title="删除菜单以及子菜单">
             <div
               v-access:role="['superadmin']"
               v-access:code="['system:menu:remove']"
-              class="flex items-center"
+              class="mr-2 flex items-center"
             >
               <span class="mr-2 text-sm text-[#666666]">级联删除</span>
               <Switch v-model:checked="cascadingDeletion" />
             </div>
           </Tooltip>
+
           <a-button @click="setExpandOrCollapse(false)">
             {{ $t('pages.common.collapse') }}
           </a-button>
-          <a-button @click="setExpandOrCollapse(true)">
-            {{ $t('pages.common.expand') }}
-          </a-button>
+
           <a-button
             type="primary"
             v-access:code="['system:menu:add']"
@@ -243,3 +270,13 @@ const isAdmin = computed(() => {
   </Page>
   <Fallback v-else description="您没有菜单管理的访问权限" status="403" />
 </template>
+
+<style lang="scss">
+#system-menu-table > .vxe-grid {
+  --vxe-ui-table-row-current-background-color: hsl(var(--primary-100));
+
+  html.dark & {
+    --vxe-ui-table-row-current-background-color: hsl(var(--primary-800));
+  }
+}
+</style>