xinyin025/soybean-admin
1
0
Fork 0
mirror of https://github.com/soybeanjs/soybean-admin.git synced 2025-09-24 12:26:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf(hooks): perf use-table

Browse Source
This commit is contained in:
Soybean 2023-06-19 23:43:16 +08:00
parent af53ec7625
commit 3318041b92
1 changed files with 15 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/hooks/business/use-table.ts
View File

@ -12,7 +12,7 @@ type PaginationParams = Pick<PaginationProps, 'page' | 'pageSize'>;
/** /**
* 表格请求接口的参数 * 表格请求接口的参数
*/ */
type ApiParams = Record<string, unknown> & PaginationParams; type ApiParams<TableData> = Record<string, unknown> & PaginationParams & Partial<TableData>;
/** /**
* 表格请求接口的结果 * 表格请求接口的结果
@ -23,7 +23,7 @@ type ApiData<TableData = Record<string, unknown>> = Record<string, unknown> & {
/** /**
* 表格接口的请求函数 * 表格接口的请求函数
*/ */
type ApiFn<Params = ApiParams, TableData = Record<string, unknown>> = ( type ApiFn<TableData = Record<string, unknown>, Params = ApiParams<TableData>> = (
params: Params params: Params
) => Promise<Service.RequestResult<ApiData<TableData>>>; ) => Promise<Service.RequestResult<ApiData<TableData>>>;
@ -54,45 +54,41 @@ type Transformer<TableData = Record<string, unknown>> = (
apiData: ApiData<TableData> apiData: ApiData<TableData>
) => TransformedTableData<TableData>; ) => TransformedTableData<TableData>;
type TableParams<TableData = Record<string, unknown>, Params = ApiParams> = { type TableParams<TableData = Record<string, unknown>, Params = ApiParams<TableData>> = {
apiFn: ApiFn<Params, TableData>; apiFn: ApiFn<TableData, Params>;
apiParams: Params; apiParams: Params;
transformer: Transformer<TableData>;
columns: DataTableColumn<TableData>[]; columns: DataTableColumn<TableData>[];
transformer: Transformer<TableData>;
pagination?: PaginationProps; pagination?: PaginationProps;
}; };
export function useTable<TableData extends Record<string, unknown>, Params extends ApiParams>( export function useTable<TableData extends Record<string, unknown>, Params extends ApiParams<TableData>>(
params: TableParams<TableData, Params>, params: TableParams<TableData, Params>,
immediate = true immediate = true
) { ) {
const { loading, startLoading, endLoading, empty, setEmpty } = useLoadingEmpty(); const { loading, startLoading, endLoading, empty, setEmpty } = useLoadingEmpty();
const data: Ref<TableData[]> = ref([]); const data: Ref<TableData[]> = ref([]);
function updateData(update: TableData[]) { function updateData(update: TableData[]) {
data.value = update; data.value = update;
} }
let dataSource: TableData[] = [];
function setDataSource(source: TableData[]) {
dataSource = source;
}
function resetData() {
data.value = dataSource;
}
const columns = ref(params.columns) as Ref<DataTableColumn<TableData>[]>; const columns = ref(params.columns) as Ref<DataTableColumn<TableData>[]>;
const pagination = reactive({ const pagination = reactive({
...getPagination(params.pagination), page: 1,
pageSize: 10,
showSizePicker: true,
pageSizes: [10, 15, 20, 25, 30],
onChange: (page: number) => { onChange: (page: number) => {
pagination.page = page; pagination.page = page;
}, },
onUpdatePageSize: (pageSize: number) => { onUpdatePageSize: (pageSize: number) => {
pagination.pageSize = pageSize; pagination.pageSize = pageSize;
pagination.page = 1; pagination.page = 1;
} },
...params.pagination
}) as PaginationProps; }) as PaginationProps;
function updatePagination(update: Partial<PaginationProps>) { function updatePagination(update: Partial<PaginationProps>) {
@ -105,6 +101,7 @@ export function useTable<TableData extends Record<string, unknown>, Params exten
apiParams.pageSize = apiParams.pageSize || pagination.pageSize; apiParams.pageSize = apiParams.pageSize || pagination.pageSize;
startLoading(); startLoading();
const { data: apiData } = await params.apiFn(apiParams); const { data: apiData } = await params.apiFn(apiParams);
if (apiData) { if (apiData) {
@ -112,8 +109,6 @@ export function useTable<TableData extends Record<string, unknown>, Params exten
updateData(transformedData.data); updateData(transformedData.data);
setDataSource(transformedData.data);
setEmpty(transformedData.data.length === 0); setEmpty(transformedData.data.length === 0);
updatePagination({ page: transformedData.pageNum, pageSize: transformedData.pageSize }); updatePagination({ page: transformedData.pageNum, pageSize: transformedData.pageSize });
@ -133,19 +128,6 @@ export function useTable<TableData extends Record<string, unknown>, Params exten
empty, empty,
pagination, pagination,
getData, getData,
updateData, updatePagination
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;
}