139 lines
4.0 KiB
TypeScript
139 lines
4.0 KiB
TypeScript
import type { TableProps } from 'antd';
|
|
import { useCallback, useState } from 'react';
|
|
|
|
const useTableParams = (
|
|
initialParams: STORAGE.TableParams = {
|
|
pagination: { current: 1, pageSize: 10 },
|
|
filters: {},// 表格的搜索对象
|
|
sort: {},
|
|
search: {}, // 添加搜索参数对象
|
|
},
|
|
) => {
|
|
const [tableParams, setTableParams] =
|
|
useState<STORAGE.TableParams>(initialParams);
|
|
|
|
const getApiParams = useCallback(() => {
|
|
const { pagination, filters, sort, search, ...rest } = tableParams;
|
|
const apiParams: Record<string, any> = {
|
|
page_size: pagination?.pageSize,
|
|
page_num: pagination?.current,
|
|
...rest,
|
|
};
|
|
|
|
if (sort?.field) {
|
|
apiParams.orderby = sort.field;
|
|
apiParams.order = sort.order === 'ascend' ? 'asc' : 'desc';
|
|
}
|
|
|
|
// 处理表格搜索参数
|
|
Object.entries(filters || {}).forEach(([key, value]) => {
|
|
if (value !== undefined && value !== null) {
|
|
apiParams[key] = value;
|
|
}
|
|
});
|
|
|
|
// 处理搜索参数
|
|
Object.entries(search || {}).forEach(([key, value]) => {
|
|
if (value !== undefined && value !== null && value !== '') {
|
|
apiParams[key] = value;
|
|
}
|
|
});
|
|
|
|
console.log('getApiParams apiParams', apiParams);
|
|
return apiParams;
|
|
}, [tableParams]);
|
|
|
|
// 统一的更新方法，可以处理所有参数类型
|
|
const updateParams = useCallback(
|
|
(
|
|
newParams: Partial<STORAGE.TableParams>,
|
|
options?: { resetPage?: boolean },
|
|
) => {
|
|
// console.log('updateParams', newParams);
|
|
|
|
setTableParams((prev) => {
|
|
// 如果是搜索或过滤相关的更新，重置到第一页
|
|
const shouldResetPage =
|
|
options?.resetPage ??
|
|
((newParams.search && Object.keys(newParams.search).length > 0) || // 有搜索值
|
|
(newParams.filters && Object.keys(newParams.filters).length > 0)); // 有过滤值
|
|
|
|
return {
|
|
...prev,
|
|
...newParams,
|
|
pagination: {
|
|
...prev.pagination,
|
|
...newParams.pagination,
|
|
...(shouldResetPage ? { current: 1 } : {}), // 根据条件决定是否重置页码
|
|
},
|
|
};
|
|
});
|
|
},
|
|
[],
|
|
);
|
|
|
|
/**
|
|
* 处理表格的分页、排序、过滤等变化
|
|
* @param pagination 分页信息
|
|
* @param filters 过滤条件 这里面直接将filters为空的条件过滤掉
|
|
* @param sorter 排序信息
|
|
* @param extra 其他信息
|
|
* @returns void
|
|
* */
|
|
const handleTableChange = useCallback<
|
|
NonNullable<TableProps<STORAGE.StorageItem>['onChange']>
|
|
>(
|
|
(pagination, filters, sorter) => {
|
|
// console.log('handleTableChange',pagination,filters,sorter,extra);
|
|
|
|
// 过滤掉空值的filters
|
|
const filteredFilters: Record<string, any> = {};
|
|
Object.entries(filters || {}).forEach(([key, value]) => {
|
|
if (key === 'image_type') {
|
|
if (Array.isArray(value) && value.length > 0 && value[0] !== '全部') {
|
|
filteredFilters[key] = Number(value[0]);
|
|
}
|
|
} else {
|
|
if (Array.isArray(value) && value.length > 0) {
|
|
filteredFilters[key] = value[0];
|
|
} else if (value !== undefined && value !== null) {
|
|
if (!Array.isArray(value) && value !== '') {
|
|
filteredFilters[key] = value;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
const newParams: Partial<STORAGE.TableParams> = {
|
|
pagination: {
|
|
current: pagination.current || 1,
|
|
pageSize: pagination.pageSize || 10,
|
|
},
|
|
filters: filteredFilters,
|
|
};
|
|
|
|
if (!Array.isArray(sorter)) {
|
|
newParams.sort = {
|
|
field: sorter.field as string,
|
|
order:
|
|
sorter.order === 'ascend' || sorter.order === 'descend'
|
|
? sorter.order
|
|
: undefined,
|
|
};
|
|
}
|
|
// console.log('handleTableChange', newParams);
|
|
|
|
updateParams(newParams);
|
|
},
|
|
[updateParams],
|
|
);
|
|
|
|
return {
|
|
tableParams,
|
|
getApiParams,
|
|
updateParams, // 统一的更新方法
|
|
handleTableChange,
|
|
};
|
|
};
|
|
|
|
export default useTableParams;
|