Skip to content

Commit 520fc78

Browse files
cooling-jasoncooling-jason
committed
【功能修改】 新增包容分支
1 parent dcdce41 commit 520fc78

File tree

9 files changed

+290
-40
lines changed

9 files changed

+290
-40
lines changed

‎src/components/SimpleProcessDesignerV2/src/NodeHandler.vue

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,17 @@
2727
<div class="handler-item-text">条件分支</div>
2828
</div>
2929
<div class="handler-item" @click="addNode(NodeType.PARALLEL_BRANCH_NODE)">
30-
<div class="handler-item-icon condition">
30+
<div class="handler-item-icon parallel">
3131
<span class="iconfont icon-size icon-parallel"></span>
3232
</div>
3333
<div class="handler-item-text">并行分支</div>
3434
</div>
35+
<div class="handler-item" @click="addNode(NodeType.INCLUSIVE_BRANCH_NODE)">
36+
<div class="handler-item-icon inclusive">
37+
<span class="iconfont icon-size icon-inclusive"></span>
38+
</div>
39+
<div class="handler-item-text">包容分支</div>
40+
</div>
3541
</div>
3642
<template #reference>
3743
<div class="add-icon"><Icon icon="ep:plus" /></div>
@@ -127,7 +133,7 @@ const addNode = (type: number) => {
127133
{
128134
id: 'Flow_' + generateUUID(),
129135
name: '其它情况',
130-
showText: '其它情况进入此流程',
136+
showText: '未满足其它条件时，将进入此分支',
131137
type: NodeType.CONDITION_NODE,
132138
childNode: undefined,
133139
conditionType: undefined,
@@ -162,6 +168,32 @@ const addNode = (type: number) => {
162168
}
163169
emits('update:childNode', data)
164170
}
171+
if (type === NodeType.INCLUSIVE_BRANCH_NODE) {
172+
const data: SimpleFlowNode = {
173+
name: '包容分支',
174+
type: NodeType.INCLUSIVE_BRANCH_NODE,
175+
id: 'GateWay_' + generateUUID(),
176+
childNode: props.childNode,
177+
conditionNodes: [
178+
{
179+
id: 'Flow_' + generateUUID(),
180+
name: '包容条件1',
181+
showText: '',
182+
type: NodeType.CONDITION_NODE,
183+
childNode: undefined
184+
},
185+
{
186+
id: 'Flow_' + generateUUID(),
187+
name: '其它情况',
188+
showText: '未满足其它条件时，将进入此分支',
189+
type: NodeType.CONDITION_NODE,
190+
childNode: undefined,
191+
defaultFlow: true
192+
}
193+
]
194+
}
195+
emits('update:childNode', data)
196+
}
165197
}
166198
</script>
167199

‎src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,13 @@
3131
@update:model-value="handleModelValueUpdate"
3232
@find:parent-node="findFromParentNode"
3333
/>
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+
/>
3441
<!-- 递归显示孩子节点 -->
3542
<ProcessNodeTree
3643
v-if="currentNode && currentNode.childNode"
@@ -49,6 +56,7 @@ import UserTaskNode from './nodes/UserTaskNode.vue'
4956
import CopyTaskNode from './nodes/CopyTaskNode.vue'
5057
import ExclusiveNode from './nodes/ExclusiveNode.vue'
5158
import ParallelNode from './nodes/ParallelNode.vue'
59+
import InclusiveNode from './nodes/InclusiveNode.vue'
5260
import { SimpleFlowNode, NodeType } from './consts'
5361
import { useWatchNode } from './node'
5462
defineOptions({

‎src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -111,32 +111,31 @@ const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNo
111111
return
112112
}
113113
if (type == NodeType.START_USER_NODE) {
114+
// 发起人节点暂时不用校验，直接校验孩子节点
114115
validateNode(node.childNode, errorNodes)
115116
}
116117
117-
if (type === NodeType.USER_TASK_NODE) {
118+
if (
119+
type === NodeType.USER_TASK_NODE ||
120+
type === NodeType.COPY_TASK_NODE ||
121+
type === NodeType.CONDITION_NODE
122+
) {
118123
if (!showText) {
119124
errorNodes.push(node)
120125
}
121126
validateNode(node.childNode, errorNodes)
122127
}
123-
if (type === NodeType.COPY_TASK_NODE) {
124-
if (!showText) {
125-
errorNodes.push(node)
126-
}
127-
validateNode(node.childNode, errorNodes)
128-
}
129-
if (type === NodeType.CONDITION_NODE) {
130-
if (!showText) {
131-
errorNodes.push(node)
132-
}
133-
validateNode(node.childNode, errorNodes)
134-
}
135-
136-
if (type == NodeType.CONDITION_BRANCH_NODE) {
128+
129+
if (
130+
type == NodeType.CONDITION_BRANCH_NODE ||
131+
type == NodeType.PARALLEL_BRANCH_NODE ||
132+
type == NodeType.INCLUSIVE_BRANCH_NODE
133+
) { // 分支节点
134+
// 1. 先校验各个分支
137135
conditionNodes?.forEach((item) => {
138136
validateNode(item, errorNodes)
139137
})
138+
// 2. 校验孩子节点
140139
validateNode(node.childNode, errorNodes)
141140
}
142141
}

‎src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
</div>
2727
</template>
2828
<div>
29-
<div class="mb-3 font-size-16px" v-if="currentNode.defaultFlow">其它条件不满足进入此分支（该分支不可编辑和删除）</div>
29+
<div class="mb-3 font-size-16px" v-if="currentNode.defaultFlow">未满足其它条件时，将进入此分支（该分支不可编辑和删除）</div>
3030
<div v-else>
3131
<el-form
3232
ref="formRef"

‎src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="branch-node-wrapper">
33
<div class="branch-node-container">
4-
<div class="branch-node-add" @click="addCondition">添加条件</div>
4+
<el-button class="branch-node-add" color="#67c23a" @click="addCondition" plain>添加条件</el-button>
55
<div
66
class="branch-node-item"
77
v-for="(item, index) in currentNode.conditionNodes"
@@ -94,10 +94,6 @@ defineOptions({
9494
name: 'ExclusiveNode'
9595
})
9696
const props = defineProps({
97-
// parentNode : {
98-
// type: Object as () => SimpleFlowNode,
99-
// required: true
100-
// },
10197
flowNode: {
10298
type: Object as () => SimpleFlowNode,
10399
required: true
@@ -193,7 +189,7 @@ const recursiveFindParentNode = (
193189
node: SimpleFlowNode,
194190
nodeType: number
195191
) => {
196-
if (!node || node.type === NodeType.START_EVENT_NODE) {
192+
if (!node || node.type === NodeType.START_USER_NODE) {
197193
return
198194
}
199195
if (node.type === nodeType) {

‎src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue

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

‎src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="branch-node-wrapper">
33
<div class="branch-node-container">
4-
<div class="branch-node-add" @click="addCondition">添加分支</div>
4+
<el-button class="branch-node-add" color="#626aef" @click="addCondition" plain>添加分支</el-button>
55
<div
66
class="branch-node-item"
77
v-for="(item, index) in currentNode.conditionNodes"
@@ -169,7 +169,7 @@ const recursiveFindParentNode = (
169169
node: SimpleFlowNode,
170170
nodeType: number
171171
) => {
172-
if (!node || node.type === NodeType.START_EVENT_NODE) {
172+
if (!node || node.type === NodeType.START_USER_NODE) {
173173
return
174174
}
175175
if (node.type === nodeType) {

0 commit comments

Comments
 (0)