feat: 保存表格滚动/展开状态并执行回调 用于树表在执行 新增/编辑/删除等操作后 依然在当前位置(体验优化)

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 1.3.7
+
+**FEATURES**
+
+- 菜单管理(通用方法) 保存表格滚动/展开状态并执行回调 用于树表在执行 新增/编辑/删除等操作后 依然在当前位置(体验优化)
+
 # 1.3.6
 
 **BUG FIX**

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": {

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<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);
+}

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(() => {
         </Space>
       </template>
     </BasicTable>
-    <MenuDrawer @reload="tableApi.query()" />
+    <MenuDrawer @reload="afterEditOrAdd" />
   </Page>
   <Fallback v-else description="您没有菜单管理的访问权限" status="403" />
 </template>