front_library
/
zy-react-library
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

将useTable中处理缓存条件单独抽离成文件

master
LiuJiaNan 2025-11-18 09:09:50 +08:00
parent 0386413f68
commit a9bc608039
4 changed files with 88 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
hooks/useTable/index.d.ts vendored
View File

@ -5,7 +5,7 @@ type FormValues = Record<string, any>;
/**
* useTable 钩子的选项参数
*/
export interface UseTableOptions<TData extends Data, TParams extends Params> extends Omit<AntdTableOptions<TData, TParams>, "defaultParams" | "form"> {
export interface UseTableOptions<TData extends Data, TParams extends Params> extends Omit<AntdTableOptions<TData, TParams>, "defaultParams" | "form" | "defaultType"> {
/** 是否使用分页，默认是 */
usePagination?: boolean;
/** 默认分页参数，默认 { current: 1; pageSize: 10 } */
@ -69,7 +69,7 @@ export interface UseTableResult<TData extends Data, TParams extends Params> exte
*/
declare function useTable<TData extends Data, TParams extends Params>(
service: Service<TData, TParams>,
options?: UseTableOptions<TData, TParams>
options?: UseTableOptions<TData, TParams>,
): UseTableResult<TData, TParams>;
export default useTable;

74
hooks/useTable/index.js
View File

@ -1,8 +1,5 @@
import { tools } from "@cqsjjb/jjb-common-lib";
import { useAntdTable } from "ahooks";
import useGetUrlQuery from "../useGetUrlQuery";
const { query } = tools.router;
import useUrlQueryCriteria from "../useUrlQueryCriteria";
/**
* 获取数据
@ -38,67 +35,6 @@ function getService(service, getExtraParams = {}, transform) {
};
}
/**
* 将搜索表单项和分页参数保存到 URL 中
*/
function setQuery(searchForm, pagination) {
// 将对象转换为键值对字符串格式
const getJoinString = (data) => {
const keys = [];
const values = [];
Object.entries(data).forEach(([key, value]) => {
if (value) {
keys.push(key);
if (Array.isArray(value)) {
// 数组值使用方括号包裹，并用竖线分隔
values.push(`[${value.join("|")}]`);
}
else {
values.push(value);
}
}
});
return { keys: keys.join(","), values: values.join(",") };
};
// 获取搜索表单和分页数据的键值对字符串
const searchFormData = getJoinString(searchForm);
const paginationData = getJoinString(pagination);
// 将数据存储到 URL 查询参数中
query.searchFormKeys = searchFormData.keys;
query.searchFormValues = searchFormData.values;
query.paginationKeys = paginationData.keys;
query.paginationValues = paginationData.values;
}
/**
* 从 URL 中获取查询参数
*/
function getQuery(keysStr, valuesStr) {
const query = useGetUrlQuery();
// 将键值字符串分割为数组
const keys = query[keysStr] ? query[keysStr].split(",") : [];
const values = query[valuesStr] ? query[valuesStr].split(",") : [];
// 构建结果对象
const resultMap = {};
keys.forEach((key, index) => {
if (values[index]) {
// 处理数组值（方括号包裹的值）
if (values[index].startsWith("[") && values[index].endsWith("]")) {
const arrayContent = values[index].substring(1, values[index].length - 1);
resultMap[key] = arrayContent ? arrayContent.split("|") : [];
}
else {
// 处理普通值
resultMap[key] = values[index];
}
}
});
return resultMap;
}
/**
* 自定义 useTable，继承 ahooks 的 useAntdTable，根据需求进行扩展
*/
@ -120,9 +56,11 @@ function useTable(service, options) {
...restRestOptions
} = restOptions;
const { setUrlCriteriaQuery, getUrlCriteriaQuery } = useUrlQueryCriteria();
// 获取存储的查询条件
const storageQueryCriteriaSearchForm = useStorageQueryCriteria ? getQuery("searchFormKeys", "searchFormValues") : {};
const storageQueryCriteriaPagination = useStorageQueryCriteria && usePagination ? getQuery("paginationKeys", "paginationValues") : {};
const storageQueryCriteriaSearchForm = useStorageQueryCriteria ? getUrlCriteriaQuery("searchFormKeys", "searchFormValues") : {};
const storageQueryCriteriaPagination = useStorageQueryCriteria && usePagination ? getUrlCriteriaQuery("paginationKeys", "paginationValues") : {};
// 确定实际使用的搜索表单和分页参数
const actualSearchForm = Object.keys(storageQueryCriteriaSearchForm).length > 0 ? storageQueryCriteriaSearchForm : {};
@ -140,7 +78,7 @@ function useTable(service, options) {
// 执行成功回调，为了保留 ahooks 的 onSuccess 回调
restOptions.onSuccess && restOptions.onSuccess(data, params);
// 存储查询条件和分页到 URL
useStorageQueryCriteria && setQuery(
useStorageQueryCriteria && setUrlCriteriaQuery(
params[1] ?? {},
usePagination
? { current: res.tableProps.pagination.current, pageSize: res.tableProps.pagination.pageSize }

8
hooks/useUrlQueryCriteria/index.d.ts vendored Normal file
View File

@ -0,0 +1,8 @@
export type SetUrlCriteriaQueryFunction = (searchForm: Record<string, any>, pagination: Record<string, any>) => void;
export type GetUrlCriteriaQueryFunction = (keysStr: string, valuesStr: string) => Record<string, any>;
/**
* 处理搜索条件缓存到 URL
*/
export default function useUrlQueryCriteria(): { setUrlCriteriaQuery: SetUrlCriteriaQueryFunction; getUrlCriteriaQuery: GetUrlCriteriaQueryFunction };

72
hooks/useUrlQueryCriteria/index.js Normal file
View File

@ -0,0 +1,72 @@
import { tools } from "@cqsjjb/jjb-common-lib";
import useGetUrlQuery from "../useGetUrlQuery";
const { query } = tools.router;
/**
* 处理搜索条件缓存到 URL
*/
export default function useUrlQueryCriteria() {
/**
* 将搜索表单项和分页参数缓存到 URL 中
*/
function setUrlCriteriaQuery(searchForm, pagination) {
// 将对象转换为键值对字符串格式
const getJoinString = (data) => {
const keys = [];
const values = [];
Object.entries(data).forEach(([key, value]) => {
if (value) {
keys.push(key);
if (Array.isArray(value)) {
// 数组值使用方括号包裹，并用竖线分隔
values.push(`[${value.join("|")}]`);
}
else {
values.push(value);
}
}
});
return { keys: keys.join(","), values: values.join(",") };
};
// 获取搜索表单和分页数据的键值对字符串
const searchFormData = getJoinString(searchForm);
const paginationData = getJoinString(pagination);
// 将数据存储到 URL 查询参数中
query.searchFormKeys = searchFormData.keys;
query.searchFormValues = searchFormData.values;
query.paginationKeys = paginationData.keys;
query.paginationValues = paginationData.values;
}
/**
* 从 URL 中获取缓存的查询参数
*/
function getUrlCriteriaQuery(keysStr, valuesStr) {
const query = useGetUrlQuery();
// 将键值字符串分割为数组
const keys = query[keysStr] ? query[keysStr].split(",") : [];
const values = query[valuesStr] ? query[valuesStr].split(",") : [];
// 构建结果对象
const resultMap = {};
keys.forEach((key, index) => {
if (values[index]) {
// 处理数组值（方括号包裹的值）
if (values[index].startsWith("[") && values[index].endsWith("]")) {
const arrayContent = values[index].substring(1, values[index].length - 1);
resultMap[key] = arrayContent ? arrayContent.split("|") : [];
}
else {
// 处理普通值
resultMap[key] = values[index];
}
}
});
return resultMap;
}
return { setUrlCriteriaQuery, getUrlCriteriaQuery };
}