| 提交 | 用户 | 时间 | ||
| 3e359e | 1 | <template> |
| H | 2 | <!-- 发起人节点 --> |
| 3 | <StartUserNode | |
| 4 | v-if="currentNode && currentNode.type === NodeType.START_USER_NODE" | |
| 5 | :flow-node="currentNode" | |
| 6 | /> | |
| 7 | <!-- 审批节点 --> | |
| 8 | <UserTaskNode | |
| 9 | v-if="currentNode && currentNode.type === NodeType.USER_TASK_NODE" | |
| 10 | :flow-node="currentNode" | |
| 11 | @update:flow-node="handleModelValueUpdate" | |
| 12 | @find:parent-node="findFromParentNode" | |
| 13 | /> | |
| 14 | <!-- 抄送节点 --> | |
| 15 | <CopyTaskNode | |
| 16 | v-if="currentNode && currentNode.type === NodeType.COPY_TASK_NODE" | |
| 17 | :flow-node="currentNode" | |
| 18 | @update:flow-node="handleModelValueUpdate" | |
| 19 | /> | |
| 20 | <!-- 条件节点 --> | |
| 21 | <ExclusiveNode | |
| 22 | v-if="currentNode && currentNode.type === NodeType.CONDITION_BRANCH_NODE" | |
| 23 | :flow-node="currentNode" | |
| 24 | @update:model-value="handleModelValueUpdate" | |
| 25 | @find:parent-node="findFromParentNode" | |
| 26 | /> | |
| 27 | <!-- 并行节点 --> | |
| 28 | <ParallelNode | |
| 29 | v-if="currentNode && currentNode.type === NodeType.PARALLEL_BRANCH_NODE" | |
| 30 | :flow-node="currentNode" | |
| 31 | @update:model-value="handleModelValueUpdate" | |
| 32 | @find:parent-node="findFromParentNode" | |
| 33 | /> | |
| 34 | <!-- 包容分支节点 --> | |
| 35 | <InclusiveNode | |
| 36 | v-if="currentNode && currentNode.type === NodeType.INCLUSIVE_BRANCH_NODE" | |
| 37 | :flow-node="currentNode" | |
| 38 | @update:model-value="handleModelValueUpdate" | |
| 39 | @find:parent-node="findFromParentNode" | |
| 40 | /> | |
| 41 | <!-- 递归显示孩子节点 --> | |
| 42 | <ProcessNodeTree | |
| 43 | v-if="currentNode && currentNode.childNode" | |
| 44 | v-model:flow-node="currentNode.childNode" | |
| 45 | :parent-node="currentNode" | |
| 46 | @find:recursive-find-parent-node="recursiveFindParentNode" | |
| 47 | /> | |
| 48 | ||
| 49 | <!-- 结束节点 --> | |
| 50 | <EndEventNode | |
| 51 | v-if="currentNode && currentNode.type === NodeType.END_EVENT_NODE" | |
| 52 | :flow-node="currentNode" | |
| 53 | /> | |
| 54 | </template> | |
| 55 | <script setup lang="ts"> | |
| 56 | import StartUserNode from './nodes/StartUserNode.vue' | |
| 57 | import EndEventNode from './nodes/EndEventNode.vue' | |
| 58 | import UserTaskNode from './nodes/UserTaskNode.vue' | |
| 59 | import CopyTaskNode from './nodes/CopyTaskNode.vue' | |
| 60 | import ExclusiveNode from './nodes/ExclusiveNode.vue' | |
| 61 | import ParallelNode from './nodes/ParallelNode.vue' | |
| 62 | import InclusiveNode from './nodes/InclusiveNode.vue' | |
| 63 | import { SimpleFlowNode, NodeType } from './consts' | |
| 64 | import { useWatchNode } from './node' | |
| 65 | defineOptions({ | |
| 66 | name: 'ProcessNodeTree' | |
| 67 | }) | |
| 68 | const props = defineProps({ | |
| 69 | parentNode: { | |
| 70 | type: Object as () => SimpleFlowNode, | |
| 71 | default: () => null | |
| 72 | }, | |
| 73 | flowNode: { | |
| 74 | type: Object as () => SimpleFlowNode, | |
| 75 | default: () => null | |
| 76 | } | |
| 77 | }) | |
| 78 | const emits = defineEmits<{ | |
| 79 | 'update:flowNode': [node: SimpleFlowNode | undefined] | |
| 80 | 'find:recursiveFindParentNode': [ | |
| 81 | nodeList: SimpleFlowNode[], | |
| 82 | curentNode: SimpleFlowNode, | |
| 83 | nodeType: number | |
| 84 | ] | |
| 85 | }>() | |
| 86 | ||
| 87 | const currentNode = useWatchNode(props) | |
| 88 | ||
| 89 | // 用于删除节点 | |
| 90 | const handleModelValueUpdate = (updateValue) => { | |
| 91 | emits('update:flowNode', updateValue) | |
| 92 | } | |
| 93 | ||
| 94 | const findFromParentNode = (nodeList: SimpleFlowNode[], nodeType: number) => { | |
| 95 | emits('find:recursiveFindParentNode', nodeList, props.parentNode, nodeType) | |
| 96 | } | |
| 97 | ||
| 98 | // 递归从父节点中查询匹配的节点 | |
| 99 | const recursiveFindParentNode = ( | |
| 100 | nodeList: SimpleFlowNode[], | |
| 101 | findNode: SimpleFlowNode, | |
| 102 | nodeType: number | |
| 103 | ) => { | |
| 104 | if (!findNode) { | |
| 105 | return | |
| 106 | } | |
| 107 | if (findNode.type === NodeType.START_USER_NODE) { | |
| 108 | nodeList.push(findNode) | |
| 109 | return | |
| 110 | } | |
| 111 | ||
| 112 | if (findNode.type === nodeType) { | |
| 113 | nodeList.push(findNode) | |
| 114 | } | |
| 115 | emits('find:recursiveFindParentNode', nodeList, props.parentNode, nodeType) | |
| 116 | } | |
| 117 | </script> | |
| 118 | <style lang="scss" scoped></style> | |
