diff --git a/CHANGELOG.md b/CHANGELOG.md index ca32d0aa..f093354d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +# 1.3.7 + +**FEATURES** + +- 菜单管理(通用方法) 保存表格滚动/展开状态并执行回调 用于树表在执行 新增/编辑/删除等操作后 依然在当前位置(体验优化) + # 1.3.6 **BUG FIX** diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json index d5d0c0d7..c055710e 100644 --- a/apps/web-antd/package.json +++ b/apps/web-antd/package.json @@ -1,6 +1,6 @@ { "name": "@vben/web-antd", - "version": "1.3.6", + "version": "1.3.7", "homepage": "https://vben.pro", "bugs": "https://github.com/vbenjs/vue-vben-admin/issues", "repository": { diff --git a/apps/web-antd/src/adapter/vxe-table.ts b/apps/web-antd/src/adapter/vxe-table.ts index 592161af..5c222d42 100644 --- a/apps/web-antd/src/adapter/vxe-table.ts +++ b/apps/web-antd/src/adapter/vxe-table.ts @@ -1,4 +1,5 @@ import type { VxeGridPropTypes } from '@vben/plugins/vxe-table'; +import type { MaybePromise } from '@vben/types'; import { h } from 'vue'; @@ -133,3 +134,25 @@ 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/index.vue b/apps/web-antd/src/views/system/menu/index.vue index 83b583bb..9be81bcb 100644 --- a/apps/web-antd/src/views/system/menu/index.vue +++ b/apps/web-antd/src/views/system/menu/index.vue @@ -12,7 +12,7 @@ import { eachTree, getVxePopupContainer } from '@vben/utils'; import { Popconfirm, Space } from 'ant-design-vue'; -import { useVbenVxeGrid } from '#/adapter/vxe-table'; +import { preserveTreeTableState, useVbenVxeGrid } from '#/adapter/vxe-table'; import { menuList, menuRemove } from '#/api/system/menu'; import { columns, querySchema } from './data'; @@ -112,8 +112,17 @@ async function handleEdit(record: Menu) { } async function handleDelete(row: Menu) { - await menuRemove([row.menuId]); - await tableApi.query(); + await preserveTreeTableState(tableApi, async () => { + await menuRemove([row.menuId]); + await tableApi.query(); + }); +} + +/** + * 编辑/添加成功后刷新表格 + */ +async function afterEditOrAdd() { + await preserveTreeTableState(tableApi, () => tableApi.query()); } /** @@ -189,7 +198,7 @@ const isAdmin = computed(() => { - +