refactor(utils): 提取缓存逻辑到通用工具函数

- 在 utils 中新增 executeWithCache 函数用于统一缓存处理
- 将 Dictionary Cascader 组件中的全局缓存逻辑替换为新工具函数
- 将 Department LeftTree 组件中的全局缓存逻辑替换为新工具函数
- 将 Dictionary LeftTree 组件中的全局缓存逻辑替换为新工具函数
- 将 Dictionary Select 组件中的全局缓存逻辑替换为新工具函数
- 将 Personnel Select 组件中的全局缓存逻辑替换为新工具函数
- 将 Department SelectTree 组件中的全局缓存逻辑替换为新工具函数
- 将 Dictionary SelectTree 组件中的全局缓存逻辑替换为新工具函数
- 移除各组件中的重复缓存实现代码
- 为新工具函数添加类型定义支持

src/components/Cascader/Dictionary/index.js

@@ -1,11 +1,9 @@
 import { request } from "@cqsjjb/jjb-common-lib/http.js";
 import { useEffect, useState } from "react";
 import { DICTIONARY_APP_KEY_ENUM } from "../../../enum/dictionary";
+import { executeWithCache } from "../../../utils";
 import BasicCascader from "../Basic";
 
-// 全局缓存
-const cacheMap = new Map();
-
 /**
  * 数据字典级联组件
  */
@@ -21,8 +19,6 @@ function DictionaryCascader(props) {
   const [treeData, setTreeData] = useState([]);
 
   const getData = async () => {
-    setTreeData([]);
-
     if (!Object.values(DICTIONARY_APP_KEY_ENUM).includes(appKey)) {
       console.error(`【DictionaryCascader】 传入的 appKey 不在 DICTIONARY_APP_KEY_ENUM 中，当前传入的 appKey 是 ${appKey}`);
       return;
@@ -33,21 +29,12 @@ function DictionaryCascader(props) {
       return;
     }
 
-    // 生成缓存键
+    const cacheKey = { appKey, dictValue };
-    const cacheKey = JSON.stringify({ appKey, dictValue });
 
-    // 检查缓存，如果存在直接返回缓存结果
+    await executeWithCache(cacheKey, async () => {
-    if (cacheMap.has(cacheKey)) {
+      const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue });
-      setTreeData(cacheMap.get(cacheKey));
+      return data;
-      return;
+    }, setTreeData);
-    }
-
-    const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue });
-
-    // 存入缓存
-    cacheMap.set(cacheKey, data);
-
-    setTreeData(data);
   };
 
   useEffect(() => {

src/components/LeftTree/Department/Gwj/index.js

@@ -1,10 +1,8 @@
 import { request } from "@cqsjjb/jjb-common-lib/http.js";
 import { useEffect, useState } from "react";
+import { executeWithCache } from "../../../../utils";
 import BasicLeftTree from "../../Basic";
 
-// 全局缓存
-const cacheMap = new Map();
-
 /**
  * 部门左侧树组件（港务局版本）
  */
@@ -18,18 +16,6 @@ function DepartmentLeftTree(props) {
   const [treeData, setTreeData] = useState([]);
 
   const getData = async () => {
-    setTreeData([]);
-
-    // 生成缓存键
-    const paramsStr = JSON.stringify(params);
-    const cacheKey = `${searchType}_${paramsStr}`;
-
-    // 检查缓存，如果存在直接返回缓存结果
-    if (cacheMap.has(cacheKey)) {
-      setTreeData(cacheMap.get(cacheKey));
-      return;
-    }
-
     let requestUrl = "";
     const actualParams = { ...params, time: new Date().getTime() };
     if (searchType === "current") {
@@ -53,12 +39,12 @@ function DepartmentLeftTree(props) {
       }
     }
 
-    const { data } = await request(requestUrl, "post", actualParams);
+    const cacheKey = { searchType, params };
 
-    // 存入缓存
+    await executeWithCache(cacheKey, async () => {
-    cacheMap.set(cacheKey, data);
+      const { data } = await request(requestUrl, "post", actualParams);
-
+      return data;
-    setTreeData(data);
+    }, setTreeData);
   };
 
   useEffect(() => {

src/components/LeftTree/Dictionary/index.js

@@ -1,11 +1,9 @@
 import { request } from "@cqsjjb/jjb-common-lib/http.js";
 import { useEffect, useState } from "react";
 import { DICTIONARY_APP_KEY_ENUM } from "../../../enum/dictionary";
+import { executeWithCache } from "../../../utils";
 import BasicLeftTree from "../Basic";
 
-// 全局缓存
-const cacheMap = new Map();
-
 /**
  * 数据字典左侧树组件
  */
@@ -21,8 +19,6 @@ function DictionaryLeftTree(props) {
   const [treeData, setTreeData] = useState([]);
 
   const getData = async () => {
-    setTreeData([]);
-
     if (!Object.values(DICTIONARY_APP_KEY_ENUM).includes(appKey)) {
       console.error(`【DictionaryLeftTree】 传入的 appKey 不在 DICTIONARY_APP_KEY_ENUM 中，当前传入的 appKey 是 ${appKey}`);
       return;
@@ -33,21 +29,12 @@ function DictionaryLeftTree(props) {
       return;
     }
 
-    // 生成缓存键
+    const cacheKey = { appKey, dictValue };
-    const cacheKey = JSON.stringify({ appKey, dictValue });
 
-    // 检查缓存，如果存在直接返回缓存结果
+    await executeWithCache(cacheKey, async () => {
-    if (cacheMap.has(cacheKey)) {
+      const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue });
-      setTreeData(cacheMap.get(cacheKey));
+      return data;
-      return;
+    }, setTreeData);
-    }
-
-    const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue });
-
-    // 存入缓存
-    cacheMap.set(cacheKey, data);
-
-    setTreeData(data);
   };
 
   useEffect(() => {

src/components/Select/Dictionary/index.js

@@ -1,11 +1,9 @@
 import { request } from "@cqsjjb/jjb-common-lib/http.js";
 import { useEffect, useState } from "react";
 import { DICTIONARY_APP_KEY_ENUM } from "../../../enum/dictionary";
+import { executeWithCache } from "../../../utils";
 import BasicSelect from "../Basic";
 
-// 全局缓存
-const cacheMap = new Map();
-
 /**
  * 数据字典下拉组件
  */
@@ -21,8 +19,6 @@ function DictionarySelect(props) {
   const [data, setData] = useState([]);
 
   const getData = async () => {
-    setData([]);
-
     if (!Object.values(DICTIONARY_APP_KEY_ENUM).includes(appKey)) {
       console.error(`【DictionarySelect】 传入的 appKey 不在 DICTIONARY_APP_KEY_ENUM 中，当前传入的 appKey 是 ${appKey}`);
       return;
@@ -33,21 +29,12 @@ function DictionarySelect(props) {
       return;
     }
 
-    // 生成缓存键
+    const cacheKey = { appKey, dictValue };
-    const cacheKey = JSON.stringify({ appKey, dictValue });
 
-    // 检查缓存，如果存在直接返回缓存结果
+    await executeWithCache(cacheKey, async () => {
-    if (cacheMap.has(cacheKey)) {
+      const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue });
-      setData(cacheMap.get(cacheKey));
+      return data;
-      return;
+    }, setData);
-    }
-
-    const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue });
-
-    // 存入缓存
-    cacheMap.set(cacheKey, data);
-
-    setData(data);
   };
 
   useEffect(() => {

src/components/Select/Personnel/Gwj/index.js

@@ -1,10 +1,8 @@
 import { request } from "@cqsjjb/jjb-common-lib/http.js";
 import { useEffect, useState } from "react";
+import { executeWithCache } from "../../../../utils";
 import BasicSelect from "../../Basic";
 
-// 全局缓存
-const cacheMap = new Map();
-
 /**
  * 人员下拉组件（港务局版本）
  */
@@ -27,8 +25,6 @@ function PersonnelSelect(props) {
   const [data, setData] = useState([]);
 
   const getData = async () => {
-    setData([]);
-
     if (!isNeedCorpInfoId && !isNeedDepartmentId && !isNeedPostId) {
       console.error("【PersonnelSelect】 请至少传入一个参数");
       return;
@@ -43,22 +39,12 @@ function PersonnelSelect(props) {
       return;
 
     const actualExtraParams = { ...defaultExtraParams, ...extraParams };
+    const cacheKey = { params, extraParams: actualExtraParams };
 
-    // 生成缓存键
+    await executeWithCache(cacheKey, async () => {
-    const cacheKey = JSON.stringify({ params, extraParams: actualExtraParams });
+      const { data } = await request("/basicInfo/user/listAll", "get", { ...params, ...actualExtraParams, time: new Date().getTime() });
-
+      return data;
-    // 检查缓存，如果存在直接返回缓存结果
+    }, setData);
-    if (cacheMap.has(cacheKey)) {
-      setData(cacheMap.get(cacheKey));
-      return;
-    }
-
-    const { data } = await request("/basicInfo/user/listAll", "get", { ...params, ...actualExtraParams, time: new Date().getTime() });
-
-    // 存入缓存
-    cacheMap.set(cacheKey, data);
-
-    setData(data);
   };
 
   useEffect(() => {

src/components/SelectTree/Department/Gwj/index.js

@@ -1,10 +1,8 @@
 import { request } from "@cqsjjb/jjb-common-lib/http.js";
 import { useEffect, useState } from "react";
+import { executeWithCache } from "../../../../utils";
 import BasicSelectTree from "../../Basic";
 
-// 全局缓存
-const cacheMap = new Map();
-
 /**
  * 部门下拉树组件（港务局版本）
  */
@@ -21,18 +19,6 @@ function DepartmentSelectTree(props) {
   const [treeData, setTreeData] = useState([]);
 
   const getData = async () => {
-    setTreeData([]);
-
-    // 生成缓存键
-    const paramsStr = JSON.stringify(params);
-    const cacheKey = `${searchType}_${paramsStr}`;
-
-    // 检查缓存，如果存在直接返回缓存结果
-    if (cacheMap.has(cacheKey)) {
-      setTreeData(cacheMap.get(cacheKey));
-      return;
-    }
-
     if (searchType === "current") {
       if (isNeedCorpInfoId && !params.eqCorpinfoId)
         return;
@@ -63,12 +49,12 @@ function DepartmentSelectTree(props) {
       }
     }
 
-    const { data } = await request(requestUrl, "post", actualParams);
+    const cacheKey = { searchType, params };
 
-    // 存入缓存
+    await executeWithCache(cacheKey, async () => {
-    cacheMap.set(cacheKey, data);
+      const { data } = await request(requestUrl, "post", actualParams);
-
+      return data;
-    setTreeData(data);
+    }, setTreeData);
   };
 
   useEffect(() => {

src/components/SelectTree/Dictionary/index.js

@@ -1,11 +1,9 @@
 import { request } from "@cqsjjb/jjb-common-lib/http.js";
 import { useEffect, useState } from "react";
 import { DICTIONARY_APP_KEY_ENUM } from "../../../enum/dictionary";
+import { executeWithCache } from "../../../utils";
 import BasicSelectTree from "../Basic";
 
-// 全局缓存
-const cacheMap = new Map();
-
 /**
  * 数据字典下拉树组件
  */
@@ -21,8 +19,6 @@ function DictionarySelectTree(props) {
   const [treeData, setTreeData] = useState([]);
 
   const getData = async () => {
-    setTreeData([]);
-
     if (!Object.values(DICTIONARY_APP_KEY_ENUM).includes(appKey)) {
       console.error(`【DictionarySelectTree】 传入的 appKey 不在 DICTIONARY_APP_KEY_ENUM 中，当前传入的 appKey 是 ${appKey}`);
       return;
@@ -33,21 +29,12 @@ function DictionarySelectTree(props) {
       return;
     }
 
-    // 生成缓存键
+    const cacheKey = { appKey, dictValue };
-    const cacheKey = JSON.stringify({ appKey, dictValue });
 
-    // 检查缓存，如果存在直接返回缓存结果
+    await executeWithCache(cacheKey, async () => {
-    if (cacheMap.has(cacheKey)) {
+      const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue });
-      setTreeData(cacheMap.get(cacheKey));
+      return data;
-      return;
+    }, setTreeData);
-    }
-
-    const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue });
-
-    // 存入缓存
-    cacheMap.set(cacheKey, data);
-
-    setTreeData(data);
   };
 
   useEffect(() => {

src/utils/index.d.ts

@@ -1,3 +1,4 @@
+import type { Dispatch, SetStateAction } from "react";
 import type { BasePaginationConfig } from "../hooks/useTable";
 
 // 定义 getDataType 函数可能返回的所有类型
@@ -377,3 +378,12 @@ export function dynamicLoadCss(url: string): Promise<void>;
  * 是否空html，用于给富文本编辑器使用
  */
 export function normalizeEmptyHtml(html: string): string;
+
+/**
+ * 带缓存的请求执行函数
+ */
+export function executeWithCache<T>(
+  cacheKey: string | object,
+  requestFn: () => Promise<T>,
+  setData: Dispatch<SetStateAction<T[]>>,
+): Promise<T>;

src/utils/index.js

@@ -615,3 +615,36 @@ export async function getFileUrlFromServer() {
   const { data } = await request("/basicInfo/imgFiles/getImagePath", "get");
   window.fileUrl = data;
 }
+
+// 全局请求缓存
+const requestCacheMap = new Map();
+
+/**
+ * 带缓存的请求执行函数
+ * @param {string | object} cacheKey - 缓存键
+ * @param {Function} requestFn - 请求函数，返回 Promise
+ * @param {Function} setData - 设置数据的回调
+ * @returns {Promise} 请求结果
+ */
+export async function executeWithCache(cacheKey, requestFn, setData) {
+  // 清空旧数据
+  setData([]);
+
+  // 生成缓存键
+  const key = typeof cacheKey === "string" ? cacheKey : JSON.stringify(cacheKey);
+
+  // 检查缓存，如果存在直接返回缓存结果
+  if (requestCacheMap.has(key)) {
+    setData(requestCacheMap.get(key));
+    return requestCacheMap.get(key);
+  }
+
+  // 执行请求
+  const result = await requestFn();
+
+  // 存入缓存
+  requestCacheMap.set(key, result);
+
+  setData(result);
+  return result;
+}