refactor: 菜单管理 刷新接口后 记录展开行的情况 (改为vxe配置)
This commit is contained in:
parent
55f0da3085
commit
0da75418d0
@ -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);
|
||||
}
|
@ -17,7 +17,6 @@ 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';
|
||||
|
||||
/**
|
||||
@ -69,6 +68,8 @@ const gridOptions: VxeGridProps = {
|
||||
rowField: 'menuId',
|
||||
// 自动转换为tree 由vxe处理 无需手动转换
|
||||
transform: true,
|
||||
// 刷新接口后 记录展开行的情况
|
||||
reserve: true,
|
||||
},
|
||||
id: 'system-menu-index',
|
||||
};
|
||||
@ -118,17 +119,15 @@ async function handleEdit(record: Menu) {
|
||||
*/
|
||||
const cascadingDeletion = ref(false);
|
||||
async function handleDelete(row: Menu) {
|
||||
await preserveTreeTableState(tableApi, async () => {
|
||||
if (cascadingDeletion.value) {
|
||||
// 级联删除
|
||||
const menuAndChildren: Menu[] = treeToList([row], { id: 'menuId' });
|
||||
await menuCascadeRemove(menuAndChildren.map((item) => item.menuId));
|
||||
} else {
|
||||
// 单删除
|
||||
await menuRemove([row.menuId]);
|
||||
}
|
||||
await tableApi.query();
|
||||
});
|
||||
if (cascadingDeletion.value) {
|
||||
// 级联删除
|
||||
const menuAndChildren: Menu[] = treeToList([row], { id: 'menuId' });
|
||||
await menuCascadeRemove(menuAndChildren.map((item) => item.menuId));
|
||||
} else {
|
||||
// 单删除
|
||||
await menuRemove([row.menuId]);
|
||||
}
|
||||
await tableApi.query();
|
||||
}
|
||||
|
||||
function removeConfirmTitle(row: Menu) {
|
||||
@ -147,7 +146,7 @@ function removeConfirmTitle(row: Menu) {
|
||||
* 编辑/添加成功后刷新表格
|
||||
*/
|
||||
async function afterEditOrAdd() {
|
||||
await preserveTreeTableState(tableApi, () => tableApi.query());
|
||||
tableApi.query();
|
||||
}
|
||||
|
||||
/**
|
||||
|
Loading…
Reference in New Issue
Block a user