jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues 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
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
) => Promise<Service.RequestResult<ApiData<TableData>>>;
@ -54,45 +54,41 @@ type Transformer<TableData = Record<string, unknown>> = (
apiData: ApiData<TableData>
) => TransformedTableData<TableData>;
type TableParams<TableData = Record<string, unknown>, Params = ApiParams> = {
apiFn: ApiFn<Params, TableData>;
type TableParams<TableData = Record<string, unknown>, Params = ApiParams<TableData>> = {
apiFn: ApiFn<TableData, Params>;
apiParams: Params;
transformer: Transformer<TableData>;
columns: DataTableColumn<TableData>[];
transformer: Transformer<TableData>;
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>,
immediate = true
) {
const { loading, startLoading, endLoading, empty, setEmpty } = useLoadingEmpty();
const data: Ref<TableData[]> = 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<DataTableColumn<TableData>[]>;
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<PaginationProps>) {
@ -105,6 +101,7 @@ export function useTable<TableData extends Record<string, unknown>, 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<TableData extends Record<string, unknown>, 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<TableData extends Record<string, unknown>, Params exten
empty,
pagination,
getData,
updateData,
resetData
updatePagination
};
}
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;
}