diff --git a/hooks/useTable/index.d.ts b/hooks/useTable/index.d.ts index dd5c97e..48d8e91 100644 --- a/hooks/useTable/index.d.ts +++ b/hooks/useTable/index.d.ts @@ -5,7 +5,7 @@ type FormValues = Record; /** * useTable 钩子的选项参数 */ -export interface UseTableOptions extends Omit, "defaultParams" | "form"> { +export interface UseTableOptions extends Omit, "defaultParams" | "form" | "defaultType"> { /** 是否使用分页，默认是 */ usePagination?: boolean; /** 默认分页参数，默认 { current: 1; pageSize: 10 } */ @@ -69,7 +69,7 @@ export interface UseTableResult exte */ declare function useTable( service: Service, - options?: UseTableOptions + options?: UseTableOptions, ): UseTableResult; export default useTable; diff --git a/hooks/useTable/index.js b/hooks/useTable/index.js index c9422a2..7d515f7 100644 --- a/hooks/useTable/index.js +++ b/hooks/useTable/index.js @@ -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 } diff --git a/hooks/useUrlQueryCriteria/index.d.ts b/hooks/useUrlQueryCriteria/index.d.ts new file mode 100644 index 0000000..fb5d895 --- /dev/null +++ b/hooks/useUrlQueryCriteria/index.d.ts @@ -0,0 +1,8 @@ +export type SetUrlCriteriaQueryFunction = (searchForm: Record, pagination: Record) => void; + +export type GetUrlCriteriaQueryFunction = (keysStr: string, valuesStr: string) => Record; + +/** + * 处理搜索条件缓存到 URL + */ +export default function useUrlQueryCriteria(): { setUrlCriteriaQuery: SetUrlCriteriaQueryFunction; getUrlCriteriaQuery: GetUrlCriteriaQueryFunction }; diff --git a/hooks/useUrlQueryCriteria/index.js b/hooks/useUrlQueryCriteria/index.js new file mode 100644 index 0000000..706f071 --- /dev/null +++ b/hooks/useUrlQueryCriteria/index.js @@ -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 }; +}