From 809fa85706b20dab19f1875d69381f58e385fd5d Mon Sep 17 00:00:00 2001 From: Soybean Date: Wed, 26 Jul 2023 00:49:55 +0800 Subject: [PATCH] perf(hooks): perf useHookTable --- src/hooks/business/use-hook-table.ts | 20 +++- src/hooks/business/use-table.ts | 133 --------------------------- src/typings/storage.d.ts | 2 +- 3 files changed, 16 insertions(+), 139 deletions(-) delete mode 100644 src/hooks/business/use-table.ts 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; } }