yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

pull/710/head
Lemon 2025-02-25 15:06:38 +08:00
parent da7c9e9796
commit dc84312542
2 changed files with 79 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
View File

@ -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[],
curentNode: SimpleFlowNode,
nodeType: number
nodeList: SimpleFlowNode[], // 节点列表
curentNode: SimpleFlowNode, // 当前节点
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>

53
src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
View File

@ -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,
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 &&
conditionNode.childNode.id !== currentNodeId) {
uniqueNodes.add(conditionNode.childNode)
}
findChildUserTaskNodes(conditionNode.childNode, uniqueNodes, currentNodeId)
findChildUserTaskNodes(conditionNode.childNode, uniqueNodes, currentNodeId, processedNodes)
}
}
}