优化审核节点流程节点多 打开审核节点卡顿问题

src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue

@@ -54,8 +54,8 @@
     :flow-node="currentNode"
     @update:flow-node="handleModelValueUpdate"
   />
-   <!-- 触发器节点 -->
+  <!-- 触发器节点 -->
-   <TriggerNode
+  <TriggerNode
     v-if="currentNode && currentNode.type === NodeType.TRIGGER_NODE"
     :flow-node="currentNode"
     @update:flow-node="handleModelValueUpdate"
@@ -75,6 +75,7 @@
   />
 </template>
 <script setup lang="ts">
+// 导入各种流程节点组件
 import StartUserNode from './nodes/StartUserNode.vue'
 import EndEventNode from './nodes/EndEventNode.vue'
 import UserTaskNode from './nodes/UserTaskNode.vue'
@@ -85,72 +86,102 @@ import InclusiveNode from './nodes/InclusiveNode.vue'
 import DelayTimerNode from './nodes/DelayTimerNode.vue'
 import RouterNode from './nodes/RouterNode.vue'
 import TriggerNode from './nodes/TriggerNode.vue'
+
+// 导入流程节点相关的类型定义和工具函数
 import { SimpleFlowNode, NodeType } from './consts'
 import { useWatchNode } from './node'
+
+// 定义组件名称
 defineOptions({
   name: 'ProcessNodeTree'
 })
+
+// 定义组件的 props
 const props = defineProps({
+  // 父节点对象
   parentNode: {
     type: Object as () => SimpleFlowNode,
     default: () => null
   },
+  // 当前流程节点对象
   flowNode: {
     type: Object as () => SimpleFlowNode,
     default: () => null
   }
 })
+
+// 定义组件的事件
 const emits = defineEmits<{
+  // 更新流程节点的事件
   'update:flowNode': [node: SimpleFlowNode | undefined]
+  // 递归查找父节点的事件
   'find:recursiveFindParentNode': [
-    nodeList: SimpleFlowNode[],
+    nodeList: SimpleFlowNode[],  // 节点列表
-    curentNode: SimpleFlowNode,
+    curentNode: SimpleFlowNode,  // 当前节点
-    nodeType: number
+    nodeType: number            // 节点类型
   ]
 }>()
 
+// 使用 useWatchNode hook 监听节点变化
 const currentNode = useWatchNode(props)
 
-// 用于删除节点
+// 处理节点更新事件，用于删除节点等操作
 const handleModelValueUpdate = (updateValue) => {
   emits('update:flowNode', updateValue)
 }
 
+// 从父节点中查找指定类型的节点
 const findFromParentNode = (nodeList: SimpleFlowNode[], nodeType: number) => {
   emits('find:recursiveFindParentNode', nodeList, props.parentNode, nodeType)
 }
 
-// 递归从父节点中查询匹配的节点
+// 优化递归查找函数，添加缓存机制
+const nodeCache = new Map<string, SimpleFlowNode[]>()
+
 const recursiveFindParentNode = (
   nodeList: SimpleFlowNode[],
   findNode: SimpleFlowNode,
   nodeType: number
 ) => {
-  if (!findNode) {
+  if (!findNode) return
+
+  // 检查缓存
+  const cacheKey = `${findNode.id}-${nodeType}`
+  if (nodeCache.has(cacheKey)) {
+    const cachedNodes = nodeCache.get(cacheKey)
+    nodeList.push(...cachedNodes!)
     return
   }
 
+  const foundNodes: SimpleFlowNode[] = []
+
   // 检查当前节点
   if (findNode.type === nodeType) {
-    nodeList.push(findNode)
+    foundNodes.push(findNode)
   }
 
   // 检查子节点
   if (findNode.childNode) {
     if (findNode.childNode.type === nodeType) {
-      nodeList.push(findNode.childNode)
+      foundNodes.push(findNode.childNode)
     }
-    recursiveFindParentNode(nodeList, findNode.childNode, nodeType)
+    recursiveFindParentNode(foundNodes, findNode.childNode, nodeType)
   }
 
   // 检查条件分支节点
   if (findNode.type === NodeType.CONDITION_BRANCH_NODE && findNode.conditionNodes) {
     findNode.conditionNodes.forEach(conditionNode => {
       if (conditionNode.childNode) {
-        recursiveFindParentNode(nodeList, conditionNode.childNode, nodeType)
+        recursiveFindParentNode(foundNodes, conditionNode.childNode, nodeType)
       }
     })
   }
+
+  // 存入缓存
+  nodeCache.set(cacheKey, foundNodes)
+  nodeList.push(...foundNodes)
+
+  // 继续向上递归查找
   emits('find:recursiveFindParentNode', nodeList, props.parentNode, nodeType)
 }
 </script>

src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue

@@ -41,7 +41,7 @@
         </div>
         <div v-if="!readonly" class="node-toolbar">
           <div class="toolbar-icon"
-            ><Icon color="#0089ff" icon="ep:circle-close-filled" :size="18" @click="deleteNode"
+          ><Icon color="#0089ff" icon="ep:circle-close-filled" :size="18" @click="deleteNode"
           /></div>
         </div>
       </div>
@@ -147,12 +147,16 @@ const nodeSetting = ref()
 
 const nodeClick = () => {
   if (readonly) {
+    console.log('[UserTaskNode] 开始处理只读模式点击, tasks长度:', tasks.value?.length)
     if (tasks && tasks.value) {
       dialogTitle.value = currentNode.value.name
+      console.time('过滤任务耗时')
       // 只读模式，弹窗显示任务信息
       selectTasks.value = tasks.value.filter(
         (item: any) => item?.taskDefinitionKey === currentNode.value.id
       )
+      console.timeEnd('过滤任务耗时')
+      console.log('[UserTaskNode] 过滤后的任务数:', selectTasks.value.length)
       dialogVisible.value = true
     }
   } else {
@@ -165,55 +169,66 @@ const nodeClick = () => {
 const deleteNode = () => {
   emits('update:flowNode', currentNode.value.childNode)
 }
-// 优化后的查找可驳回用户节点函数
+// 优化查找可驳回用户节点函数
 const findReturnTaskNodes = (matchNodeList: SimpleFlowNode[]) => {
-  // 创建 Set 用于去重,提前初始化以避免重复操作
+  console.time('findReturnTaskNodes总耗时')
+
+  // 使用Set进行去重
   const uniqueNodes = new Set<SimpleFlowNode>()
   const currentNodeId = currentNode.value.id
+  const processedNodes = new Set<string>() // 用于记录已处理的节点
 
   // 从父节点查找用户任务节点
+  console.time('父节点查找耗时')
   emits('find:parentNode', matchNodeList, NodeType.USER_TASK_NODE)
-  
+  console.timeEnd('父节点查找耗时')
-  // 先将父节点中的有效节点添加到 Set
+
+  // 过滤并去重
   matchNodeList.forEach(node => {
-    if (node.id !== currentNodeId) {
+    if (!processedNodes.has(node.id) && node.id !== currentNodeId) {
       uniqueNodes.add(node)
+      processedNodes.add(node.id)
     }
   })
 
-  // 查找子节点并直接添加到 Set
+  // 查找子节点
-  findChildUserTaskNodes(currentNode.value, uniqueNodes, currentNodeId)
+  findChildUserTaskNodes(currentNode.value, uniqueNodes, currentNodeId, processedNodes)
 
-  // 直接用 Set 的值更新数组
+  // 更新结果数组
   matchNodeList.length = 0
-  matchNodeList.push(...uniqueNodes)
+  matchNodeList.push(...Array.from(uniqueNodes))
+
+  console.log('[findReturnTaskNodes] 最终找到的节点数:', matchNodeList.length)
+  console.timeEnd('findReturnTaskNodes总耗时')
 }
 
-// 优化后的子节点查找函数
+// 优化子节点查找函数
 const findChildUserTaskNodes = (
-  node: SimpleFlowNode, 
+  node: SimpleFlowNode,
   uniqueNodes: Set<SimpleFlowNode>,
-  currentNodeId: string
+  currentNodeId: string,
+  processedNodes: Set<string>
 ) => {
-  if (!node) return
+  if (!node || processedNodes.has(node.id)) return
+
+  processedNodes.add(node.id)
 
   // 处理直接子节点
   if (node.childNode) {
-    if (node.childNode.type === NodeType.USER_TASK_NODE && node.childNode.id !== currentNodeId) {
+    if (node.childNode.type === NodeType.USER_TASK_NODE &&
+      node.childNode.id !== currentNodeId &&
+      !processedNodes.has(node.childNode.id)) {
       uniqueNodes.add(node.childNode)
+      processedNodes.add(node.childNode.id)
     }
-    findChildUserTaskNodes(node.childNode, uniqueNodes, currentNodeId)
+    findChildUserTaskNodes(node.childNode, uniqueNodes, currentNodeId, processedNodes)
   }
 
   // 处理条件分支节点
   if (node.type === NodeType.CONDITION_BRANCH_NODE && node.conditionNodes) {
     for (const conditionNode of node.conditionNodes) {
       if (conditionNode.childNode) {
-        if (conditionNode.childNode.type === NodeType.USER_TASK_NODE && 
+        findChildUserTaskNodes(conditionNode.childNode, uniqueNodes, currentNodeId, processedNodes)
-            conditionNode.childNode.id !== currentNodeId) {
-          uniqueNodes.add(conditionNode.childNode)
-        }
-        findChildUserTaskNodes(conditionNode.childNode, uniqueNodes, currentNodeId)
       }
     }
   }