feat: 新增菜单管理页面

src/hooks/common/table.ts

@@ -107,11 +107,11 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
       return filteredColumns;
     },
     onFetched: async transformed => {
-      const { pageNum, pageSize, total } = transformed;
+      const { total } = transformed;
 
       updatePagination({
-        page: pageNum,
-        pageSize,
+        page: searchParams.pageNum,
+        pageSize: searchParams.pageSize,
         itemCount: total
       });
     },

src/hooks/common/tree-table.ts

@@ -0,0 +1,179 @@
+import { effectScope, onScopeDispose, ref, watch } from 'vue';
+import type { Ref } from 'vue';
+import { jsonClone } from '@sa/utils';
+import { useBoolean, useHookTable } from '@sa/hooks';
+import { useAppStore } from '@/store/modules/app';
+import { $t } from '@/locales';
+
+type TableData = NaiveUI.TableData;
+type GetTableData<A extends NaiveUI.TreeTableApiFn> = NaiveUI.GetTreeTableData<A>;
+type TableColumn<T> = NaiveUI.TableColumn<T>;
+
+export function useTreeTable<A extends NaiveUI.TreeTableApiFn>(config: NaiveUI.NaiveTreeTableConfig<A>) {
+  const scope = effectScope();
+  const appStore = useAppStore();
+
+  const { apiFn, apiParams, immediate } = config;
+
+  const SELECTION_KEY = '__selection__';
+
+  const EXPAND_KEY = '__expand__';
+
+  const {
+    loading,
+    empty,
+    data,
+    columns,
+    columnChecks,
+    reloadColumns,
+    getData,
+    searchParams,
+    updateSearchParams,
+    resetSearchParams
+  } = useHookTable<A, GetTableData<A>, TableColumn<NaiveUI.TableDataWithIndex<GetTableData<A>>>>({
+    apiFn,
+    apiParams,
+    columns: config.columns,
+    transformer: res => {
+      const records = res.data || [];
+      return {
+        data: records
+      };
+    },
+    getColumnChecks: cols => {
+      const checks: NaiveUI.TableColumnCheck[] = [];
+
+      cols.forEach(column => {
+        if (isTableColumnHasKey(column)) {
+          checks.push({
+            key: column.key as string,
+            title: column.title as string,
+            checked: true
+          });
+        } else if (column.type === 'selection') {
+          checks.push({
+            key: SELECTION_KEY,
+            title: $t('common.check'),
+            checked: true
+          });
+        } else if (column.type === 'expand') {
+          checks.push({
+            key: EXPAND_KEY,
+            title: $t('common.expandColumn'),
+            checked: true
+          });
+        }
+      });
+
+      return checks;
+    },
+    getColumns: (cols, checks) => {
+      const columnMap = new Map<string, TableColumn<GetTableData<A>>>();
+
+      cols.forEach(column => {
+        if (isTableColumnHasKey(column)) {
+          columnMap.set(column.key as string, column);
+        } else if (column.type === 'selection') {
+          columnMap.set(SELECTION_KEY, column);
+        } else if (column.type === 'expand') {
+          columnMap.set(EXPAND_KEY, column);
+        }
+      });
+
+      const filteredColumns = checks
+        .filter(item => item.checked)
+        .map(check => columnMap.get(check.key) as TableColumn<GetTableData<A>>);
+
+      return filteredColumns;
+    },
+    immediate
+  });
+
+  scope.run(() => {
+    watch(
+      () => appStore.locale,
+      () => {
+        reloadColumns();
+      }
+    );
+  });
+
+  onScopeDispose(() => {
+    scope.stop();
+  });
+
+  return {
+    loading,
+    empty,
+    data,
+    columns,
+    columnChecks,
+    reloadColumns,
+    getData,
+    searchParams,
+    updateSearchParams,
+    resetSearchParams
+  };
+}
+
+export function useTreeTableOperate<T extends TableData = TableData>(_: Ref<T[]>, getData: () => Promise<void>) {
+  const { bool: drawerVisible, setTrue: openDrawer, setFalse: closeDrawer } = useBoolean();
+
+  const operateType = ref<NaiveUI.TableOperateType>('add');
+
+  function handleAdd() {
+    operateType.value = 'add';
+    openDrawer();
+  }
+
+  /** the editing row data */
+  const editingData: Ref<T | null> = ref(null);
+
+  function handleEdit(row: T) {
+    operateType.value = 'edit';
+    editingData.value = jsonClone(row);
+
+    openDrawer();
+  }
+
+  /** the checked row keys of table */
+  const checkedRowKeys = ref<string[]>([]);
+
+  function clearCheckedRowKeys() {
+    checkedRowKeys.value = [];
+  }
+
+  /** the hook after the batch delete operation is completed */
+  async function onBatchDeleted() {
+    window.$message?.success($t('common.deleteSuccess'));
+
+    checkedRowKeys.value = [];
+
+    await getData();
+  }
+
+  /** the hook after the delete operation is completed */
+  async function onDeleted() {
+    window.$message?.success($t('common.deleteSuccess'));
+
+    await getData();
+  }
+
+  return {
+    drawerVisible,
+    openDrawer,
+    closeDrawer,
+    operateType,
+    handleAdd,
+    editingData,
+    handleEdit,
+    checkedRowKeys,
+    onBatchDeleted,
+    onDeleted,
+    clearCheckedRowKeys
+  };
+}
+
+function isTableColumnHasKey<T>(column: TableColumn<T>): column is NaiveUI.TableColumnWithKey<T> {
+  return Boolean((column as NaiveUI.TableColumnWithKey<T>).key);
+}