更新领域加载方式

zrch-risk-client-39/src/components/Form/src/jeecg/components/JTreeSelect.vue

@@ -31,7 +31,6 @@
   import { defHttp } from '/@/utils/http/axios';
   import { propTypes } from '/@/utils/propTypes';
   import { useAttrs } from '/@/hooks/core/useAttrs';
-  import { TreeSelect } from 'ant-design-vue';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { isObject, isArray } from '/@/utils/is';
   import { useI18n } from '/@/hooks/web/useI18n';
@@ -76,6 +75,8 @@
   const text = ref<any>('');
   const code = ref<any>('');
   const show = ref<boolean>(true);
+  const loadingMap = new Map<string, Promise<void>>();
+  const childrenCache = new Map<string, any[]>();
   /**
    * 监听value数据并初始化
    */
@@ -203,6 +204,8 @@
       tableName: unref(tableName),
       text: unref(text),
       code: unref(code),
+      // 若后端支持一次性返回整棵树，可利用该参数减少请求（不支持会忽略）
+      loadAll: 1,
     };
     let res = await defHttp.get({ url: Api.url, params }, { isTransformResponse: false });
     if (res.success && res.result) {
@@ -234,12 +237,25 @@
    */
   async function asyncLoadTreeData(treeNode) {
     if (treeNode.dataRef.children) {
-      return Promise.resolve();
+      return;
     }
     if (props.url) {
-      return Promise.resolve();
+      return;
+    }
+    let pid = String(treeNode.dataRef.key);
+    if (!pid) return;
+
+    const cached = childrenCache.get(pid);
+    if (cached) {
+      addChildren(pid, cached, treeData.value);
+      treeData.value = [...treeData.value];
+      return;
+    }
+
+    if (loadingMap.has(pid)) {
+      await loadingMap.get(pid);
+      return;
     }
-    let pid = treeNode.dataRef.key;
     let params = {
       pid: pid,
       pidField: props.pidField,
@@ -250,20 +266,30 @@
       text: unref(text),
       code: unref(code),
     };
-    let res = await defHttp.get({ url: Api.url, params }, { isTransformResponse: false });
-    if (res.success) {
-      for (let i of res.result) {
-        i.title = translateTitle(i.title);
-        i.value = i.key;
-        i.isLeaf = !!i.leaf;
+    const p = (async () => {
+      try {
+        let res = await defHttp.get({ url: Api.url, params }, { isTransformResponse: false });
+        if (res.success) {
+          for (let i of res.result) {
+            i.title = translateTitle(i.title);
+            i.value = i.key;
+            i.isLeaf = !!i.leaf;
+          }
+          // 代码逻辑说明: 【TV360X-87】树表编辑时不可选自己及子孙节点当父节点
+          handleHiddenNode(res.result);
+          childrenCache.set(pid, res.result);
+          //添加子节点
+          addChildren(pid, res.result, treeData.value);
+          treeData.value = [...treeData.value];
+        }
+      } finally {
+        loadingMap.delete(pid);
       }
-      // 代码逻辑说明: 【TV360X-87】树表编辑时不可选自己及子孙节点当父节点
-      handleHiddenNode(res.result);
-      //添加子节点
-      addChildren(pid, res.result, treeData.value);
-      treeData.value = [...treeData.value];
-    }
-    return Promise.resolve();
+    })();
+
+    loadingMap.set(pid, p);
+    await p;
+    return;
   }
 
   /**
@@ -329,9 +355,9 @@
   /**
    * 校验条件配置是否有误
    */
-  function validateProp() {
+  function validateProp(): Promise<void> {
     let mycondition = props.condition;
-    return new Promise((resolve, reject) => {
+    return new Promise<void>((resolve, reject) => {
       if (!mycondition) {
         resolve();
       } else {
@@ -341,11 +367,11 @@
             resolve();
           } else {
             createMessage.error('组件JTreeSelect-condition传值有误，需要一个json字符串!');
-            reject();
+            reject(new Error('invalid condition'));
           }
         } catch (e) {
           createMessage.error('组件JTreeSelect-condition传值有误，需要一个json字符串!');
-          reject();
+          reject(e as any);
         }
       }
     });

zrch-risk-client-39/src/components/Form/src/jeecg/components/JTreeSelectDomain.vue

@@ -9,6 +9,7 @@
     :value="treeValue"
     :treeData="treeData"
     :multiple="multiple"
+    :loadData="asyncLoadTreeData"
     v-bind="attrs"
     v-model:searchValue="searchValue"
     show-search
@@ -61,6 +62,8 @@
   const tableName = ref<any>('');
   const text = ref<any>('');
   const code = ref<any>('');
+  const loadingMap = new Map<string, Promise<void>>();
+  const childrenCache = new Map<string, any[]>();
   /**
    * 监听value数据并初始化
    */
@@ -149,14 +152,18 @@
       tableName: unref(tableName),
       text: unref(text),
       code: unref(code),
+      // 若后端支持一次性返回整棵树，可利用该参数减少请求（不支持会忽略）
+      loadAll: 1,
     };
     let res = await defHttp.get({ url: Api.url, params }, { isTransformResponse: false });
     if (res.success && res.result) {
       for (let i of res.result) {
         i.value = i.key;
-        if (props.onlyLevel != '1') {
+        // onlyLevel=1：仅展示一级，不允许展开
+        if (props.onlyLevel == '1') {
+          i.isLeaf = true;
+        } else {
           i.isLeaf = !!i.leaf;
-          loadTreeData(i);
         }
       }
       treeData.value = [...res.result];
@@ -165,45 +172,35 @@
     }
   }
 
-  function loadTreeData(treeNode) {
-    if (treeNode.children) {
-      return Promise.resolve();
-    }
-    let pid = treeNode.key;
-    let params = {
-      pid: pid,
-      pidField: props.pidField,
-      hasChildField: props.hasChildField,
-      converIsLeafVal: props.converIsLeafVal,
-      condition: props.condition,
-      tableName: unref(tableName),
-      text: unref(text),
-      code: unref(code),
-    };
-    defHttp.get({ url: Api.url, params }, { isTransformResponse: false }).then((res) => {
-      if (res.success) {
-        for (let i of res.result) {
-          i.value = i.key;
-          if (props.onlyLevel != '2') {
-            i.isLeaf = !!i.leaf;
-            loadTreeData(i);
-          }
-        }
-        //添加子节点
-        addChildren(pid, res.result, treeData.value);
-        treeData.value = [...treeData.value];
-      }
-    });
-  }
-
   /**
    * 异步加载数据
    */
   async function asyncLoadTreeData(treeNode) {
     if (treeNode.dataRef.children) {
-      return Promise.resolve();
+      return;
     }
-    let pid = treeNode.dataRef.key;
+    if (props.onlyLevel == '1') {
+      treeNode.dataRef.isLeaf = true;
+      return;
+    }
+
+    let pid = String(treeNode.dataRef.key);
+    if (!pid) return;
+
+    // 命中缓存
+    const cached = childrenCache.get(pid);
+    if (cached) {
+      addChildren(pid, cached, treeData.value);
+      treeData.value = [...treeData.value];
+      return;
+    }
+
+    // 并发去重
+    if (loadingMap.has(pid)) {
+      await loadingMap.get(pid);
+      return;
+    }
+
     let params = {
       pid: pid,
       pidField: props.pidField,
@@ -214,17 +211,28 @@
       text: unref(text),
       code: unref(code),
     };
-    let res = await defHttp.get({ url: Api.url, params }, { isTransformResponse: false });
-    if (res.success) {
-      for (let i of res.result) {
-        i.value = i.key;
-        i.isLeaf = !!i.leaf;
+
+    const p = (async () => {
+      try {
+        let res = await defHttp.get({ url: Api.url, params }, { isTransformResponse: false });
+        if (res.success) {
+          for (let i of res.result) {
+            i.value = i.key;
+            // onlyLevel=2：只展示到第二级，第二级不允许继续展开
+            i.isLeaf = props.onlyLevel == '2' ? true : !!i.leaf;
+          }
+          childrenCache.set(pid, res.result);
+          addChildren(pid, res.result, treeData.value);
+          treeData.value = [...treeData.value];
+        }
+      } finally {
+        loadingMap.delete(pid);
       }
-      //添加子节点
-      addChildren(pid, res.result, treeData.value);
-      treeData.value = [...treeData.value];
-    }
-    return Promise.resolve();
+    })();
+
+    loadingMap.set(pid, p);
+    await p;
+    return;
   }
 
   /**
@@ -275,7 +283,7 @@
   /**
    * 文本框值变化
    */
-  function onSearch(val) {
+  function onSearch(_val) {
     //  if(!!val){
     //  Object.assign(props,{dict:"st_domain,domain_name,domain_code,domain_name like %'+val+'%"})
     //  }
@@ -284,9 +292,9 @@
   /**
    * 校验条件配置是否有误
    */
-  function validateProp() {
+  function validateProp(): Promise<void> {
     let mycondition = props.condition;
-    return new Promise((resolve, reject) => {
+    return new Promise<void>((resolve, reject) => {
       if (!mycondition) {
         resolve();
       } else {
@@ -296,11 +304,11 @@
             resolve();
           } else {
             createMessage.error('组件JTreeSelect-condition传值有误，需要一个json字符串!');
-            reject();
+            reject(new Error('invalid condition'));
           }
         } catch (e) {
           createMessage.error('组件JTreeSelect-condition传值有误，需要一个json字符串!');
-          reject();
+          reject(e as any);
         }
       }
     });