From 3318041b92e9c7950ad135d39d4e9354d37edbb7 Mon Sep 17 00:00:00 2001 From: Soybean Date: Mon, 19 Jun 2023 23:43:16 +0800 Subject: [PATCH] perf(hooks): perf use-table --- src/hooks/business/use-table.ts | 48 +++++++++++---------------------- 1 file changed, 15 insertions(+), 33 deletions(-) diff --git a/src/hooks/business/use-table.ts b/src/hooks/business/use-table.ts index 7417fd7c..a7de139d 100644 --- a/src/hooks/business/use-table.ts +++ b/src/hooks/business/use-table.ts @@ -12,7 +12,7 @@ type PaginationParams = Pick; /** * 表格请求接口的参数 */ -type ApiParams = Record & PaginationParams; +type ApiParams = Record & PaginationParams & Partial; /** * 表格请求接口的结果 @@ -23,7 +23,7 @@ type ApiData> = Record & { /** * 表格接口的请求函数 */ -type ApiFn> = ( +type ApiFn, Params = ApiParams> = ( params: Params ) => Promise>>; @@ -54,45 +54,41 @@ type Transformer> = ( apiData: ApiData ) => TransformedTableData; -type TableParams, Params = ApiParams> = { - apiFn: ApiFn; +type TableParams, Params = ApiParams> = { + apiFn: ApiFn; apiParams: Params; - transformer: Transformer; columns: DataTableColumn[]; + transformer: Transformer; pagination?: PaginationProps; }; -export function useTable, Params extends ApiParams>( +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; } - let dataSource: TableData[] = []; - function setDataSource(source: TableData[]) { - dataSource = source; - } - - function resetData() { - data.value = dataSource; - } - const columns = ref(params.columns) as Ref[]>; const pagination = reactive({ - ...getPagination(params.pagination), + 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) { @@ -105,6 +101,7 @@ export function useTable, Params exten apiParams.pageSize = apiParams.pageSize || pagination.pageSize; startLoading(); + const { data: apiData } = await params.apiFn(apiParams); if (apiData) { @@ -112,8 +109,6 @@ export function useTable, Params exten updateData(transformedData.data); - setDataSource(transformedData.data); - setEmpty(transformedData.data.length === 0); updatePagination({ page: transformedData.pageNum, pageSize: transformedData.pageSize }); @@ -133,19 +128,6 @@ export function useTable, Params exten empty, pagination, getData, - updateData, - resetData + updatePagination }; } - -function getPagination(pagination?: Partial) { - const defaultPagination: Partial = { - page: 1, - pageSize: 10, - showSizePicker: true, - pageSizes: [10, 15, 20, 25, 30] - }; - Object.assign(defaultPagination, pagination); - - return defaultPagination; -}