diff --git a/CHANGELOG.md b/CHANGELOG.md index 4fb15188..b322ab4d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,7 @@ - 流程相关样式更新 - 请假申请 表单更改为drawer方式 替换新页面打开 - API加密 迁移到@vben/utils下 +- 菜单管理 改为节点懒加载(去除展开全部功能) 关闭虚拟滚动(可自行开启) **OTHERS** diff --git a/apps/web-antd/src/views/system/menu/data.tsx b/apps/web-antd/src/views/system/menu/data.tsx index e30a0023..e5177cab 100644 --- a/apps/web-antd/src/views/system/menu/data.tsx +++ b/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), diff --git a/apps/web-antd/src/views/system/menu/index.vue b/apps/web-antd/src/views/system/menu/index.vue index 14bda194..39591e89 100644 --- a/apps/web-antd/src/views/system/menu/index.vue +++ b/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(() => {