perf(hooks): perf useHookTable

src/hooks/business/use-hook-table.ts

@@ -43,12 +43,17 @@ type ApiParamsUpdater<P, R> = (params: P) => R;
  */
 type PagePropsOfPagination = Pick<PaginationProps, 'page' | 'pageSize'>;
 
+/**
+ * 自定义的列 key
+ */
+type CustomColumnKey<K = never> = K | 'action';
+
 /**
  * 表格的列
  */
 type HookTableColumn<T = Record<string, unknown>> =
-  | (Omit<TableColumnGroup<T>, 'key'> & { key: keyof T })
-  | (Omit<DataTableBaseColumn<T>, 'key'> & { key: keyof T })
+  | (Omit<TableColumnGroup<T>, 'key'> & { key: CustomColumnKey<keyof T> })
+  | (Omit<DataTableBaseColumn<T>, 'key'> & { key: CustomColumnKey<keyof T> })
   | DataTableSelectionColumn<T>
   | DataTableExpandColumn<T>;
 
@@ -67,7 +72,7 @@ type HookTableConfig<TableData, Fn extends ApiFn> = {
   /**
    * 列表列
    */
-  columns: HookTableColumn<TableData>[];
+  columns: () => HookTableColumn<TableData>[];
   /**
    * 列表接口参数更新
    * @description 用于更新分页参数, 如果列表接口的参数不包含同名分页参数属性 `page` 和 `pageSize`, 需要通过此函数更新
@@ -101,7 +106,7 @@ export default function useHookTable<TableData, Fn extends ApiFn>(apiFn: Fn, con
     data.value = update;
   }
 
-  const columns = ref(config.columns) as Ref<HookTableColumn<TableData>[]>;
+  const columns = ref(config.columns()) as Ref<HookTableColumn<TableData>[]>;
 
   const requestParams = ref(apiParams) as Ref<HookTableConfig<TableData, Fn>['apiParams']>;
 
@@ -154,6 +159,10 @@ export default function useHookTable<TableData, Fn extends ApiFn>(apiFn: Fn, con
     endLoading();
   }
 
+  function reloadColumns() {
+    columns.value = config.columns();
+  }
+
   if (immediate) {
     getData();
   }
@@ -165,6 +174,7 @@ export default function useHookTable<TableData, Fn extends ApiFn>(apiFn: Fn, con
     empty,
     pagination,
     getData,
-    updatePagination
+    updatePagination,
+    reloadColumns
   };
 }

src/hooks/business/use-table.ts

@@ -1,133 +0,0 @@
-import { ref, reactive } from 'vue';
-import type { Ref } from 'vue';
-import type { DataTableBaseColumn, DataTableSelectionColumn, DataTableExpandColumn, PaginationProps } from 'naive-ui';
-import type { TableColumnGroup, InternalRowData } from 'naive-ui/es/data-table/src/interface';
-import { useLoadingEmpty } from '../common';
-
-/**
- * 表格分页参数
- */
-type PaginationParams = Pick<PaginationProps, 'page' | 'pageSize'>;
-
-/**
- * 表格请求接口的参数
- */
-type ApiParams<TableData> = Record<string, unknown> & PaginationParams & Partial<TableData>;
-
-/**
- * 表格请求接口的结果
- * @description 这里用属性list来表示后端接口返回的表格数据
- */
-type ApiData<TableData = Record<string, unknown>> = Record<string, unknown> & { list: TableData[] };
-
-/**
- * 表格接口的请求函数
- */
-type ApiFn<TableData = Record<string, unknown>, Params = ApiParams<TableData>> = (
-  params: Params
-) => Promise<Service.RequestResult<ApiData<TableData>>>;
-
-/**
- * 表格接口请求后转换后的数据
- */
-type TransformedTableData<TableData = Record<string, unknown>> = {
-  data: TableData[];
-  pageNum: number;
-  pageSize: number;
-  total: number;
-};
-
-/**
- * 表格的列
- */
-type DataTableColumn<T = InternalRowData> =
-  | (Omit<TableColumnGroup<T>, 'key'> & { key: keyof T })
-  | (Omit<DataTableBaseColumn<T>, 'key'> & { key: keyof T })
-  | DataTableSelectionColumn<T>
-  | DataTableExpandColumn<T>;
-
-/**
- * 表格数据转换器
- * @description 将不同接口的表格数据转换成统一的类型
- */
-type Transformer<TableData = Record<string, unknown>> = (
-  apiData: ApiData<TableData>
-) => TransformedTableData<TableData>;
-
-type TableParams<TableData = Record<string, unknown>, Params = ApiParams<TableData>> = {
-  apiFn: ApiFn<TableData, Params>;
-  apiParams: Params;
-  columns: DataTableColumn<TableData>[];
-  transformer: Transformer<TableData>;
-  pagination?: PaginationProps;
-};
-
-export function useTable<TableData extends Record<string, unknown>, Params extends ApiParams<TableData>>(
-  params: TableParams<TableData, Params>,
-  immediate = true
-) {
-  const { loading, startLoading, endLoading, empty, setEmpty } = useLoadingEmpty();
-
-  const data: Ref<TableData[]> = ref([]);
-
-  function updateData(update: TableData[]) {
-    data.value = update;
-  }
-
-  const columns = ref(params.columns) as Ref<DataTableColumn<TableData>[]>;
-
-  const pagination = reactive({
-    page: 1,
-    pageSize: 10,
-    showSizePicker: true,
-    pageSizes: [10, 15, 20, 25, 30],
-    onChange: (page: number) => {
-      pagination.page = page;
-    },
-    onUpdatePageSize: (pageSize: number) => {
-      pagination.pageSize = pageSize;
-      pagination.page = 1;
-    },
-    ...params.pagination
-  }) as PaginationProps;
-
-  function updatePagination(update: Partial<PaginationProps>) {
-    Object.assign(pagination, update);
-  }
-
-  async function getData() {
-    const apiParams: Params = { ...params.apiParams };
-    apiParams.page = apiParams.page || pagination.page;
-    apiParams.pageSize = apiParams.pageSize || pagination.pageSize;
-
-    startLoading();
-
-    const { data: apiData } = await params.apiFn(apiParams);
-
-    if (apiData) {
-      const transformedData = params.transformer(apiData);
-
-      updateData(transformedData.data);
-
-      setEmpty(transformedData.data.length === 0);
-
-      updatePagination({ page: transformedData.pageNum, pageSize: transformedData.pageSize });
-    }
-
-    endLoading();
-  }
-
-  if (immediate) {
-    getData();
-  }
-
-  return {
-    data,
-    columns,
-    loading,
-    empty,
-    pagination,
-    getData,
-    updatePagination
-  };
-}

src/typings/storage.d.ts

@@ -18,6 +18,6 @@ declare namespace StorageInterface {
     /** 多页签路由信息 */
     multiTabRoutes: App.GlobalTabRoute[];
     /** 本地语言缓存 */
-    lang: I18nType.langType;
+    lang: I18nType.LangType;
   }
 }