| 提交 | 用户 | 时间 | ||
| 3e359e | 1 | <template> |
| H | 2 | <div class="branch-node-wrapper"> |
| 3 | <div class="branch-node-container"> | |
| 4 | <div | |
| 5 | v-if="readonly" | |
| 6 | class="branch-node-readonly" | |
| 7 | :class="`${useTaskStatusClass(currentNode?.activityStatus)}`" | |
| 8 | > | |
| 9 | <span class="iconfont icon-exclusive icon-size condition"></span> | |
| 10 | </div> | |
| 11 | <el-button v-else class="branch-node-add" color="#67c23a" @click="addCondition" plain | |
| 12 | >添加条件</el-button | |
| 13 | > | |
| 14 | ||
| 15 | <div | |
| 16 | class="branch-node-item" | |
| 17 | v-for="(item, index) in currentNode.conditionNodes" | |
| 18 | :key="index" | |
| 19 | > | |
| 20 | <template v-if="index == 0"> | |
| 21 | <div class="branch-line-first-top"> </div> | |
| 22 | <div class="branch-line-first-bottom"></div> | |
| 23 | </template> | |
| 24 | <template v-if="index + 1 == currentNode.conditionNodes?.length"> | |
| 25 | <div class="branch-line-last-top"></div> | |
| 26 | <div class="branch-line-last-bottom"></div> | |
| 27 | </template> | |
| 28 | <div class="node-wrapper"> | |
| 29 | <div class="node-container"> | |
| 30 | <div | |
| 31 | class="node-box" | |
| 32 | :class="[ | |
| 33 | { 'node-config-error': !item.showText }, | |
| 34 | `${useTaskStatusClass(item.activityStatus)}` | |
| 35 | ]" | |
| 36 | > | |
| 37 | <div class="branch-node-title-container"> | |
| 38 | <div v-if="!readonly && showInputs[index]"> | |
| 39 | <input | |
| 40 | type="text" | |
| 41 | class="input-max-width editable-title-input" | |
| 42 | @blur="blurEvent(index)" | |
| 43 | v-mountedFocus | |
| 44 | v-model="item.name" | |
| 45 | /> | |
| 46 | </div> | |
| 47 | <div v-else class="branch-title" @click="clickEvent(index)"> {{ item.name }} </div> | |
| 48 | <div class="branch-priority"> 优先级{{ index + 1 }} </div> | |
| 49 | </div> | |
| 50 | <div class="branch-node-content" @click="conditionNodeConfig(item.id)"> | |
| 51 | <div class="branch-node-text" :title="item.showText" v-if="item.showText"> | |
| 52 | {{ item.showText }} | |
| 53 | </div> | |
| 54 | <div class="branch-node-text" v-else> | |
| 55 | {{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }} | |
| 56 | </div> | |
| 57 | </div> | |
| 58 | <div | |
| 59 | class="node-toolbar" | |
| 60 | v-if="!readonly && index + 1 !== currentNode.conditionNodes?.length" | |
| 61 | > | |
| 62 | <div class="toolbar-icon"> | |
| 63 | <Icon | |
| 64 | color="#0089ff" | |
| 65 | icon="ep:circle-close-filled" | |
| 66 | :size="18" | |
| 67 | @click="deleteCondition(index)" | |
| 68 | /> | |
| 69 | </div> | |
| 70 | </div> | |
| 71 | <div | |
| 72 | class="branch-node-move move-node-left" | |
| 73 | v-if="index != 0 && index + 1 !== currentNode.conditionNodes?.length" | |
| 74 | @click="moveNode(index, -1)" | |
| 75 | > | |
| 76 | <Icon icon="ep:arrow-left" /> | |
| 77 | </div> | |
| 78 | ||
| 79 | <div | |
| 80 | class="branch-node-move move-node-right" | |
| 81 | v-if="currentNode.conditionNodes && index < currentNode.conditionNodes.length - 2" | |
| 82 | @click="moveNode(index, 1)" | |
| 83 | > | |
| 84 | <Icon icon="ep:arrow-right" /> | |
| 85 | </div> | |
| 86 | </div> | |
| 87 | <NodeHandler v-model:child-node="item.childNode" :current-node="item" /> | |
| 88 | </div> | |
| 89 | </div> | |
| 90 | <ConditionNodeConfig :node-index="index" :condition-node="item" :ref="item.id" /> | |
| 91 | <!-- 递归显示子节点 --> | |
| 92 | <ProcessNodeTree | |
| 93 | v-if="item && item.childNode" | |
| 94 | :parent-node="item" | |
| 95 | v-model:flow-node="item.childNode" | |
| 96 | @find:recursive-find-parent-node="recursiveFindParentNode" | |
| 97 | /> | |
| 98 | </div> | |
| 99 | </div> | |
| 100 | <NodeHandler | |
| 101 | v-if="currentNode" | |
| 102 | v-model:child-node="currentNode.childNode" | |
| 103 | :current-node="currentNode" | |
| 104 | /> | |
| 105 | </div> | |
| 106 | </template> | |
| 107 | ||
| 108 | <script setup lang="ts"> | |
| 109 | import NodeHandler from '../NodeHandler.vue' | |
| 110 | import ProcessNodeTree from '../ProcessNodeTree.vue' | |
| 111 | import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts' | |
| 112 | import { getDefaultConditionNodeName } from '../utils' | |
| 113 | import { useTaskStatusClass } from '../node' | |
| 114 | import { generateUUID } from '@/utils' | |
| 115 | import ConditionNodeConfig from '../nodes-config/ConditionNodeConfig.vue' | |
| 116 | const { proxy } = getCurrentInstance() as any | |
| 117 | defineOptions({ | |
| 118 | name: 'ExclusiveNode' | |
| 119 | }) | |
| 120 | const props = defineProps({ | |
| 121 | flowNode: { | |
| 122 | type: Object as () => SimpleFlowNode, | |
| 123 | required: true | |
| 124 | } | |
| 125 | }) | |
| 126 | // 定义事件，更新父组件 | |
| 127 | const emits = defineEmits<{ | |
| 128 | 'update:modelValue': [node: SimpleFlowNode | undefined] | |
| 129 | 'find:parentNode': [nodeList: SimpleFlowNode[], nodeType: number] | |
| 130 | 'find:recursiveFindParentNode': [ | |
| 131 | nodeList: SimpleFlowNode[], | |
| 132 | curentNode: SimpleFlowNode, | |
| 133 | nodeType: number | |
| 134 | ] | |
| 135 | }>() | |
| 136 | // 是否只读 | |
| 137 | const readonly = inject<Boolean>('readonly') | |
| 138 | const currentNode = ref<SimpleFlowNode>(props.flowNode) | |
| 139 | watch( | |
| 140 | () => props.flowNode, | |
| 141 | (newValue) => { | |
| 142 | currentNode.value = newValue | |
| 143 | } | |
| 144 | ) | |
| 145 | ||
| 146 | const showInputs = ref<boolean[]>([]) | |
| 147 | // 失去焦点 | |
| 148 | const blurEvent = (index: number) => { | |
| 149 | showInputs.value[index] = false | |
| 150 | const conditionNode = currentNode.value.conditionNodes?.at(index) as SimpleFlowNode | |
| 151 | conditionNode.name = | |
| 152 | conditionNode.name || getDefaultConditionNodeName(index, conditionNode.defaultFlow) | |
| 153 | } | |
| 154 | ||
| 155 | // 点击条件名称 | |
| 156 | const clickEvent = (index: number) => { | |
| 157 | showInputs.value[index] = true | |
| 158 | } | |
| 159 | ||
| 160 | const conditionNodeConfig = (nodeId: string) => { | |
| 161 | if (readonly) { | |
| 162 | return | |
| 163 | } | |
| 164 | const conditionNode = proxy.$refs[nodeId][0] | |
| 165 | conditionNode.open() | |
| 166 | } | |
| 167 | ||
| 168 | // 新增条件 | |
| 169 | const addCondition = () => { | |
| 170 | const conditionNodes = currentNode.value.conditionNodes | |
| 171 | if (conditionNodes) { | |
| 172 | const len = conditionNodes.length | |
| 173 | let lastIndex = len - 1 | |
| 174 | const conditionData: SimpleFlowNode = { | |
| 175 | id: 'Flow_' + generateUUID(), | |
| 176 | name: '条件' + len, | |
| 177 | showText: '', | |
| 178 | type: NodeType.CONDITION_NODE, | |
| 179 | childNode: undefined, | |
| 180 | conditionNodes: [], | |
| 181 | conditionType: 1, | |
| 182 | defaultFlow: false | |
| 183 | } | |
| 184 | conditionNodes.splice(lastIndex, 0, conditionData) | |
| 185 | } | |
| 186 | } | |
| 187 | ||
| 188 | // 删除条件 | |
| 189 | const deleteCondition = (index: number) => { | |
| 190 | const conditionNodes = currentNode.value.conditionNodes | |
| 191 | if (conditionNodes) { | |
| 192 | conditionNodes.splice(index, 1) | |
| 193 | if (conditionNodes.length == 1) { | |
| 194 | const childNode = currentNode.value.childNode | |
| 195 | // 更新此节点为后续孩子节点 | |
| 196 | emits('update:modelValue', childNode) | |
| 197 | } | |
| 198 | } | |
| 199 | } | |
| 200 | ||
| 201 | // 移动节点 | |
| 202 | const moveNode = (index: number, to: number) => { | |
| 203 | // -1 ：向左 1： 向右 | |
| 204 | if (currentNode.value.conditionNodes) { | |
| 205 | currentNode.value.conditionNodes[index] = currentNode.value.conditionNodes.splice( | |
| 206 | index + to, | |
| 207 | 1, | |
| 208 | currentNode.value.conditionNodes[index] | |
| 209 | )[0] | |
| 210 | } | |
| 211 | } | |
| 212 | // 递归从父节点中查询匹配的节点 | |
| 213 | const recursiveFindParentNode = ( | |
| 214 | nodeList: SimpleFlowNode[], | |
| 215 | node: SimpleFlowNode, | |
| 216 | nodeType: number | |
| 217 | ) => { | |
| 218 | if (!node || node.type === NodeType.START_USER_NODE) { | |
| 219 | return | |
| 220 | } | |
| 221 | if (node.type === nodeType) { | |
| 222 | nodeList.push(node) | |
| 223 | } | |
| 224 | // 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点条件分支节点（NodeType.EXCLUSIVE_NODE) 继续查找 | |
| 225 | emits('find:parentNode', nodeList, nodeType) | |
| 226 | } | |
| 227 | </script> | |
| 228 | ||
| 229 | <style lang="scss" scoped></style> | |
