chore: 虚拟滚动及自动list转tree(由vxe处理)

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 1.1.2
+
+**OTHERS**
+
+- 菜单管理 改为虚拟滚动
+
 # 1.1.1
 
 **REFACTOR**

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

@@ -4,12 +4,7 @@ import type { Recordable } from '@vben/types';
 import { nextTick } from 'vue';
 
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
-import {
+import { eachTree, getVxePopupContainer } from '@vben/utils';
-  eachTree,
-  getVxePopupContainer,
-  listToTree,
-  removeEmptyChildren,
-} from '@vben/utils';
 
 import { Popconfirm, Space } from 'ant-design-vue';
 
@@ -43,13 +38,7 @@ const gridOptions: VxeGridProps = {
         const resp = await deptList({
           ...formValues,
         });
-        const treeData = listToTree(resp, {
+        return { rows: resp };
-          id: 'deptId',
-          pid: 'parentId',
-          children: 'children',
-        });
-        removeEmptyChildren(treeData);
-        return { rows: treeData };
       },
       // 默认请求接口后展开全部 不需要可以删除这段
       querySuccess: () => {
@@ -62,15 +51,21 @@ const gridOptions: VxeGridProps = {
       },
     },
   },
+  /**
+   * 虚拟滚动  默认关闭
+   */
+  scrollY: {
+    enabled: false,
+    gt: 0,
+  },
   rowConfig: {
     isHover: true,
     keyField: 'deptId',
   },
-
   treeConfig: {
     parentField: 'parentId',
     rowField: 'deptId',
-    transform: false,
+    transform: true,
   },
   id: 'system-dept-index',
 };

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

@@ -6,12 +6,7 @@ import { computed } from 'vue';
 import { useAccess } from '@vben/access';
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
 import { Fallback } from '@vben/common-ui';
-import {
+import { eachTree, getVxePopupContainer } from '@vben/utils';
-  eachTree,
-  getVxePopupContainer,
-  listToTree,
-  removeEmptyChildren,
-} from '@vben/utils';
 
 import { Popconfirm, Space } from 'ant-design-vue';
 
@@ -49,13 +44,7 @@ const gridOptions: VxeGridProps = {
         const resp = await menuList({
           ...formValues,
         });
-        const treeData = listToTree(resp, {
+        return { rows: resp };
-          id: 'menuId',
-          pid: 'parentId',
-          children: 'children',
-        });
-        removeEmptyChildren(treeData);
-        return { rows: treeData };
       },
     },
   },
@@ -63,11 +52,19 @@ const gridOptions: VxeGridProps = {
     isHover: true,
     keyField: 'menuId',
   },
-
+  /**
+   * 开启虚拟滚动
+   * 数据量小可以选择关闭
+   */
+  scrollY: {
+    enabled: true,
+    gt: 0,
+  },
   treeConfig: {
     parentField: 'parentId',
     rowField: 'menuId',
-    transform: false,
+    // 自动转换为tree 由vxe处理 无需手动转换
+    transform: true,
   },
   id: 'system-menu-index',
 };

apps/web-antd/src/views/workflow/category/index.vue

@@ -4,7 +4,7 @@ import type { Recordable } from '@vben/types';
 import { nextTick } from 'vue';
 
 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
-import { getVxePopupContainer, listToTree } from '@vben/utils';
+import { getVxePopupContainer } from '@vben/utils';
 
 import { Popconfirm, Space } from 'ant-design-vue';
 
@@ -38,12 +38,7 @@ const gridOptions: VxeGridProps = {
         const resp = await categoryList({
           ...formValues,
         });
-        const treeData = listToTree(resp, {
+        return { rows: resp };
-          id: 'id',
-          pid: 'parentId',
-          children: 'children',
-        });
-        return { rows: treeData };
       },
       // 默认请求接口后展开全部 不需要可以删除这段
       querySuccess: () => {
@@ -53,13 +48,20 @@ const gridOptions: VxeGridProps = {
       },
     },
   },
+  /**
+   * 虚拟滚动  默认关闭
+   */
+  scrollY: {
+    enabled: false,
+    gt: 0,
+  },
   rowConfig: {
     keyField: 'id',
   },
   treeConfig: {
     parentField: 'parentId',
     rowField: 'id',
-    transform: false,
+    transform: true,
   },
   // 表格全局唯一表示 保存列配置需要用到
   id: 'workflow-category-index',