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

hooks/useTable/index.d.ts

@@ -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;

hooks/useTable/index.js

@@ -1,8 +1,5 @@
-import { tools } from "@cqsjjb/jjb-common-lib";
 import { useAntdTable } from "ahooks";
-import useGetUrlQuery from "../useGetUrlQuery";
+import useUrlQueryCriteria from "../useUrlQueryCriteria";
-
-const { query } = tools.router;
 
 /**
  * 获取数据
@@ -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 storageQueryCriteriaSearchForm = useStorageQueryCriteria ? getUrlCriteriaQuery("searchFormKeys", "searchFormValues") : {};
-  const storageQueryCriteriaPagination = useStorageQueryCriteria && usePagination ? getQuery("paginationKeys", "paginationValues") : {};
+  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 }

hooks/useUrlQueryCriteria/index.d.ts

@@ -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 };

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 };
+}