by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor: 菜单管理 刷新接口后 记录展开行的情况 (改为vxe配置)

Browse Source
This commit is contained in:
dap 2025-05-30 17:51:06 +08:00
parent 55f0da3085
commit 0da75418d0
2 changed files with 12 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
apps/web-antd/src/views/system/menu/helper.ts
View File

@ -1,25 +0,0 @@
import type { MaybePromise } from '@vben/types';
import type { useVbenVxeGrid } from '#/adapter/vxe-table';
/**
* 保存表格滚动/展开状态并执行回调 用于树表在执行 新增/编辑/删除等操作后 依然在当前位置(体验优化)
*
* @param tableApi 表格api
* @param callback 回调
*/
export async function preserveTreeTableState(
tableApi: ReturnType<typeof useVbenVxeGrid>[1],
callback: () => MaybePromise<void>,
) {
// 保存当前状态
const scrollState = tableApi.grid.getScroll();
const expandRecords = tableApi.grid.getTreeExpandRecords();
// 执行回调
await callback();
// 恢复状态
tableApi.grid.setTreeExpand(expandRecords, true);
tableApi.grid.scrollTo(scrollState.scrollLeft, scrollState.scrollTop);
}

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

@ -17,7 +17,6 @@ import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { menuCascadeRemove, menuList, menuRemove } from '#/api/system/menu'; import { menuCascadeRemove, menuList, menuRemove } from '#/api/system/menu';
import { columns, querySchema } from './data'; import { columns, querySchema } from './data';
import { preserveTreeTableState } from './helper';
import menuDrawer from './menu-drawer.vue'; import menuDrawer from './menu-drawer.vue';
/** /**
@ -69,6 +68,8 @@ const gridOptions: VxeGridProps = {
rowField: 'menuId', rowField: 'menuId',
// 自动转换为tree 由vxe处理 无需手动转换 // 自动转换为tree 由vxe处理 无需手动转换
transform: true, transform: true,
// 刷新接口后 记录展开行的情况
reserve: true,
}, },
id: 'system-menu-index', id: 'system-menu-index',
}; };
@ -118,17 +119,15 @@ async function handleEdit(record: Menu) {
*/ */
const cascadingDeletion = ref(false); const cascadingDeletion = ref(false);
async function handleDelete(row: Menu) { async function handleDelete(row: Menu) {
await preserveTreeTableState(tableApi, async () => { if (cascadingDeletion.value) {
if (cascadingDeletion.value) { // 级联删除
// 级联删除 const menuAndChildren: Menu[] = treeToList([row], { id: 'menuId' });
const menuAndChildren: Menu[] = treeToList([row], { id: 'menuId' }); await menuCascadeRemove(menuAndChildren.map((item) => item.menuId));
await menuCascadeRemove(menuAndChildren.map((item) => item.menuId)); } else {
} else { // 单删除
// 单删除 await menuRemove([row.menuId]);
await menuRemove([row.menuId]); }
} await tableApi.query();
await tableApi.query();
});
} }
function removeConfirmTitle(row: Menu) { function removeConfirmTitle(row: Menu) {
@ -147,7 +146,7 @@ function removeConfirmTitle(row: Menu) {
* 编辑/添加成功后刷新表格 * 编辑/添加成功后刷新表格
*/ */
async function afterEditOrAdd() { async function afterEditOrAdd() {
await preserveTreeTableState(tableApi, () => tableApi.query()); tableApi.query();
} }
/** /**