refactor: preserveTreeTableState
This commit is contained in:
parent
95859e36a2
commit
bea7c1a094
@ -1,5 +1,4 @@
|
|||||||
import type { VxeGridPropTypes } from '@vben/plugins/vxe-table';
|
import type { VxeGridPropTypes } from '@vben/plugins/vxe-table';
|
||||||
import type { MaybePromise } from '@vben/types';
|
|
||||||
|
|
||||||
import { h } from 'vue';
|
import { h } from 'vue';
|
||||||
|
|
||||||
@ -134,25 +133,3 @@ export function addSortParams(
|
|||||||
params.orderByColumn = orderByColumn;
|
params.orderByColumn = orderByColumn;
|
||||||
params.isAsc = isAsc;
|
params.isAsc = isAsc;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* 保存表格滚动/展开状态并执行回调 用于树表在执行 新增/编辑/删除等操作后 依然在当前位置(体验优化)
|
|
||||||
*
|
|
||||||
* @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/helper.ts
Normal file
25
apps/web-antd/src/views/system/menu/helper.ts
Normal file
@ -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<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);
|
||||||
|
}
|
@ -8,14 +8,16 @@ import { computed, ref } from 'vue';
|
|||||||
|
|
||||||
import { useAccess } from '@vben/access';
|
import { useAccess } from '@vben/access';
|
||||||
import { Fallback, Page, useVbenDrawer } from '@vben/common-ui';
|
import { Fallback, Page, useVbenDrawer } from '@vben/common-ui';
|
||||||
|
import { $t } from '@vben/locales';
|
||||||
import { eachTree, getVxePopupContainer, treeToList } from '@vben/utils';
|
import { eachTree, getVxePopupContainer, treeToList } from '@vben/utils';
|
||||||
|
|
||||||
import { Popconfirm, Space, Switch, Tooltip } from 'ant-design-vue';
|
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 { 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';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
Loading…
Reference in New Issue
Block a user