From bea7c1a0949edd1ad77ea573adfb71ec15455fbe Mon Sep 17 00:00:00 2001 From: dap <15891557205@163.com> Date: Mon, 26 May 2025 09:28:54 +0800 Subject: [PATCH] refactor: preserveTreeTableState --- apps/web-antd/src/adapter/vxe-table.ts | 23 ----------------- apps/web-antd/src/views/system/menu/helper.ts | 25 +++++++++++++++++++ apps/web-antd/src/views/system/menu/index.vue | 4 ++- 3 files changed, 28 insertions(+), 24 deletions(-) create mode 100644 apps/web-antd/src/views/system/menu/helper.ts diff --git a/apps/web-antd/src/adapter/vxe-table.ts b/apps/web-antd/src/adapter/vxe-table.ts index 5c222d42..592161af 100644 --- a/apps/web-antd/src/adapter/vxe-table.ts +++ b/apps/web-antd/src/adapter/vxe-table.ts @@ -1,5 +1,4 @@ import type { VxeGridPropTypes } from '@vben/plugins/vxe-table'; -import type { MaybePromise } from '@vben/types'; import { h } from 'vue'; @@ -134,25 +133,3 @@ export function addSortParams( params.orderByColumn = orderByColumn; params.isAsc = isAsc; } - -/** - * 保存表格滚动/展开状态并执行回调 用于树表在执行 新增/编辑/删除等操作后 依然在当前位置(体验优化) - * - * @param tableApi 表格api - * @param callback 回调 - */ -export async function preserveTreeTableState( - tableApi: ReturnType[1], - callback: () => MaybePromise, -) { - // 保存当前状态 - const scrollState = tableApi.grid.getScroll(); - const expandRecords = tableApi.grid.getTreeExpandRecords(); - - // 执行回调 - await callback(); - - // 恢复状态 - tableApi.grid.setTreeExpand(expandRecords, true); - tableApi.grid.scrollTo(scrollState.scrollLeft, scrollState.scrollTop); -} diff --git a/apps/web-antd/src/views/system/menu/helper.ts b/apps/web-antd/src/views/system/menu/helper.ts new file mode 100644 index 00000000..61181f50 --- /dev/null +++ b/apps/web-antd/src/views/system/menu/helper.ts @@ -0,0 +1,25 @@ +import type { MaybePromise } from '@vben/types'; + +import type { useVbenVxeGrid } from '#/adapter/vxe-table'; + +/** + * 保存表格滚动/展开状态并执行回调 用于树表在执行 新增/编辑/删除等操作后 依然在当前位置(体验优化) + * + * @param tableApi 表格api + * @param callback 回调 + */ +export async function preserveTreeTableState( + tableApi: ReturnType[1], + callback: () => MaybePromise, +) { + // 保存当前状态 + const scrollState = tableApi.grid.getScroll(); + const expandRecords = tableApi.grid.getTreeExpandRecords(); + + // 执行回调 + await callback(); + + // 恢复状态 + tableApi.grid.setTreeExpand(expandRecords, true); + tableApi.grid.scrollTo(scrollState.scrollLeft, scrollState.scrollTop); +} diff --git a/apps/web-antd/src/views/system/menu/index.vue b/apps/web-antd/src/views/system/menu/index.vue index f3227860..7861dffd 100644 --- a/apps/web-antd/src/views/system/menu/index.vue +++ b/apps/web-antd/src/views/system/menu/index.vue @@ -8,14 +8,16 @@ 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 { Popconfirm, Space, Switch, Tooltip } from 'ant-design-vue'; -import { preserveTreeTableState, useVbenVxeGrid } from '#/adapter/vxe-table'; +import { useVbenVxeGrid } from '#/adapter/vxe-table'; import { menuCascadeRemove, menuList, menuRemove } from '#/api/system/menu'; import { columns, querySchema } from './data'; +import { preserveTreeTableState } from './helper'; import menuDrawer from './menu-drawer.vue'; /**