refactor(projects): update useTable

src/hooks/business/use-table.ts

@@ -1,10 +1,42 @@
 import { ref, reactive } from 'vue';
 import type { Ref } from 'vue';
 import type { DataTableBaseColumn, DataTableSelectionColumn, DataTableExpandColumn, PaginationProps } from 'naive-ui';
-import type { MaybeComputedRef } from '@vueuse/core';
 import type { TableColumnGroup, InternalRowData } from 'naive-ui/es/data-table/src/interface';
 import { useLoadingEmpty } from '../common';
 
+/**
+ * 表格分页参数
+ */
+type PaginationParams = Pick<PaginationProps, 'page' | 'pageSize'>;
+
+/**
+ * 表格请求接口的参数
+ */
+type ApiParams = Record<string, unknown> & PaginationParams;
+
+/**
+ * 表格请求接口的结果
+ * @description 这里用属性list来表示后端接口返回的表格数据
+ */
+type ApiData<TableData = Record<string, unknown>> = Record<string, unknown> & { list: TableData[] };
+
+/**
+ * 表格接口的请求函数
+ */
+type ApiFn<Params = ApiParams, TableData = Record<string, unknown>> = (
+  params: Params
+) => Promise<Service.RequestResult<ApiData<TableData>>>;
+
+/**
+ * 表格接口请求后转换后的数据
+ */
+type TransformedTableData<TableData = Record<string, unknown>> = {
+  data: TableData[];
+  pageNum: number;
+  pageSize: number;
+  total: number;
+};
+
 /**
  * 表格的列
  */
@@ -15,60 +47,45 @@ type DataTableColumn<T = InternalRowData> =
   | DataTableExpandColumn<T>;
 
 /**
- * 表格分页参数
+ * 表格数据转换器
+ * @description 将不同接口的表格数据转换成统一的类型
  */
-type TablePaginationParams = Pick<PaginationProps, 'page' | 'pageSize'>;
+type Transformer<TableData = Record<string, unknown>> = (
+  apiData: ApiData<TableData>
+) => TransformedTableData<TableData>;
 
-/**
+type TableParams<TableData = Record<string, unknown>, Params = ApiParams> = {
- * 表格接口的请求参数
+  apiFn: ApiFn<Params, TableData>;
- */
+  apiParams: Params;
-type TableApiParams = Record<string, unknown> & TablePaginationParams;
+  transformer: Transformer<TableData>;
-
+  columns: DataTableColumn<TableData>[];
-/**
+  pagination?: PaginationProps;
- * 表格接口的请求数据
- */
-type TableApiData<T = InternalRowData> = {
-  data: T[];
-  pageNum: number;
-  pageSize: number;
-  total: number;
 };
 
-/**
+export function useTable<TableData extends Record<string, unknown>, Params extends ApiParams>(
- * 表格接口的请求函数
+  params: TableParams<TableData, Params>,
- */
+  immediate = true
-type TableApiFn<P extends TableApiParams, T extends InternalRowData> = (
-  params: P
-) => Promise<Service.SuccessResult<TableApiData<T>>>;
-
-export function useNaiveTable<TableData extends InternalRowData, P extends TableApiParams>(
-  apiFn: TableApiFn<P, TableData>,
-  apiParams: P,
-  columns: MaybeComputedRef<DataTableColumn<TableData>[]>
 ) {
   const { loading, startLoading, endLoading, empty, setEmpty } = useLoadingEmpty();
+  const data: Ref<TableData[]> = ref([]);
 
-  const tableData: Ref<TableData[]> = ref([]);
+  function updateData(update: TableData[]) {
-
+    data.value = update;
-  async function getTableData(paginationParams?: TablePaginationParams) {
-    startLoading();
-
-    const params = { ...apiParams, ...paginationParams };
-
-    const { data } = await apiFn(params);
-    if (data) {
-      tableData.value = data.data;
-
-      setEmpty(data.data.length === 0);
-    }
-    endLoading();
   }
 
-  const pagination: PaginationProps = reactive({
+  let dataSource: TableData[] = [];
-    page: 1,
+  function setDataSource(source: TableData[]) {
-    pageSize: 10,
+    dataSource = source;
-    showSizePicker: true,
+  }
-    pageSizes: [10, 15, 20, 25, 30],
+
+  function resetData() {
+    data.value = dataSource;
+  }
+
+  const columns = ref(params.columns) as Ref<DataTableColumn<TableData>[]>;
+
+  const pagination = reactive({
+    ...getPagination(params.pagination),
     onChange: (page: number) => {
       pagination.page = page;
     },
@@ -76,14 +93,59 @@ export function useNaiveTable<TableData extends InternalRowData, P extends Table
       pagination.pageSize = pageSize;
       pagination.page = 1;
     }
-  });
+  }) 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);
+
+      setDataSource(transformedData.data);
+
+      setEmpty(transformedData.data.length === 0);
+
+      updatePagination({ page: transformedData.pageNum, pageSize: transformedData.pageSize });
+    }
+
+    endLoading();
+  }
+
+  if (immediate) {
+    getData();
+  }
 
   return {
-    tableData,
+    data,
     columns,
     loading,
     empty,
     pagination,
-    start: getTableData
+    getData,
+    updateData,
+    resetData
   };
 }
+
+function getPagination(pagination?: Partial<PaginationProps>) {
+  const defaultPagination: Partial<PaginationProps> = {
+    page: 1,
+    pageSize: 10,
+    showSizePicker: true,
+    pageSizes: [10, 15, 20, 25, 30]
+  };
+  Object.assign(defaultPagination, pagination);
+
+  return defaultPagination;
+}