diff --git a/src/hooks/business/use-hook-table.ts b/src/hooks/business/use-hook-table.ts
index d394e7a0..49d43c8a 100644
--- a/src/hooks/business/use-hook-table.ts
+++ b/src/hooks/business/use-hook-table.ts
@@ -43,12 +43,17 @@ type ApiParamsUpdater
= (params: P) => R;
*/
type PagePropsOfPagination = Pick;
+/**
+ * 自定义的列 key
+ */
+type CustomColumnKey = K | 'action';
+
/**
* 表格的列
*/
type HookTableColumn> =
- | (Omit, 'key'> & { key: keyof T })
- | (Omit, 'key'> & { key: keyof T })
+ | (Omit, 'key'> & { key: CustomColumnKey })
+ | (Omit, 'key'> & { key: CustomColumnKey })
| DataTableSelectionColumn
| DataTableExpandColumn;
@@ -67,7 +72,7 @@ type HookTableConfig = {
/**
* 列表列
*/
- columns: HookTableColumn[];
+ columns: () => HookTableColumn[];
/**
* 列表接口参数更新
* @description 用于更新分页参数, 如果列表接口的参数不包含同名分页参数属性 `page` 和 `pageSize`, 需要通过此函数更新
@@ -101,7 +106,7 @@ export default function useHookTable(apiFn: Fn, con
data.value = update;
}
- const columns = ref(config.columns) as Ref[]>;
+ const columns = ref(config.columns()) as Ref[]>;
const requestParams = ref(apiParams) as Ref['apiParams']>;
@@ -154,6 +159,10 @@ export default function useHookTable(apiFn: Fn, con
endLoading();
}
+ function reloadColumns() {
+ columns.value = config.columns();
+ }
+
if (immediate) {
getData();
}
@@ -165,6 +174,7 @@ export default function useHookTable(apiFn: Fn, con
empty,
pagination,
getData,
- updatePagination
+ updatePagination,
+ reloadColumns
};
}
diff --git a/src/hooks/business/use-table.ts b/src/hooks/business/use-table.ts
deleted file mode 100644
index a7de139d..00000000
--- a/src/hooks/business/use-table.ts
+++ /dev/null
@@ -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;
-
-/**
- * 表格请求接口的参数
- */
-type ApiParams = Record & PaginationParams & Partial;
-
-/**
- * 表格请求接口的结果
- * @description 这里用属性list来表示后端接口返回的表格数据
- */
-type ApiData> = Record & { list: TableData[] };
-
-/**
- * 表格接口的请求函数
- */
-type ApiFn, Params = ApiParams> = (
- params: Params
-) => Promise>>;
-
-/**
- * 表格接口请求后转换后的数据
- */
-type TransformedTableData> = {
- data: TableData[];
- pageNum: number;
- pageSize: number;
- total: number;
-};
-
-/**
- * 表格的列
- */
-type DataTableColumn =
- | (Omit, 'key'> & { key: keyof T })
- | (Omit, 'key'> & { key: keyof T })
- | DataTableSelectionColumn
- | DataTableExpandColumn;
-
-/**
- * 表格数据转换器
- * @description 将不同接口的表格数据转换成统一的类型
- */
-type Transformer> = (
- apiData: ApiData
-) => TransformedTableData;
-
-type TableParams, Params = ApiParams> = {
- apiFn: ApiFn;
- apiParams: Params;
- columns: DataTableColumn[];
- transformer: Transformer;
- pagination?: PaginationProps;
-};
-
-export function useTable, Params extends ApiParams>(
- params: TableParams,
- immediate = true
-) {
- const { loading, startLoading, endLoading, empty, setEmpty } = useLoadingEmpty();
-
- const data: Ref = ref([]);
-
- function updateData(update: TableData[]) {
- data.value = update;
- }
-
- const columns = ref(params.columns) as Ref[]>;
-
- 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) {
- 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
- };
-}
diff --git a/src/typings/storage.d.ts b/src/typings/storage.d.ts
index dfb1affe..92c8d6c4 100644
--- a/src/typings/storage.d.ts
+++ b/src/typings/storage.d.ts
@@ -18,6 +18,6 @@ declare namespace StorageInterface {
/** 多页签路由信息 */
multiTabRoutes: App.GlobalTabRoute[];
/** 本地语言缓存 */
- lang: I18nType.langType;
+ lang: I18nType.LangType;
}
}