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 { 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,7 +119,6 @@ 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' });
|
||||||
@ -128,7 +128,6 @@ async function handleDelete(row: Menu) {
|
|||||||
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();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
Loading…
Reference in New Issue
Block a user