工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
潘志宝
3 天以前 221918bba28d2384d03c596a68256d7832e4a0e0
提交 | 用户 | 时间
3e359e 1 <template>
H 2   <div class="node-handler-wrapper">
3     <div class="node-handler">
4       <el-popover
5         trigger="hover"
6         v-model:visible="popoverShow"
7         placement="right-start"
8         width="auto"
9         v-if="!readonly"
10       >
11         <div class="handler-item-wrapper">
12           <div class="handler-item" @click="addNode(NodeType.USER_TASK_NODE)">
13             <div class="approve handler-item-icon">
14               <span class="iconfont icon-approve icon-size"></span>
15             </div>
16             <div class="handler-item-text">审批人</div>
17           </div>
18           <div class="handler-item" @click="addNode(NodeType.COPY_TASK_NODE)">
19             <div class="handler-item-icon copy">
20               <span class="iconfont icon-size icon-copy"></span>
21             </div>
22             <div class="handler-item-text">抄送</div>
23           </div>
24           <div class="handler-item" @click="addNode(NodeType.CONDITION_BRANCH_NODE)">
25             <div class="handler-item-icon condition">
26               <span class="iconfont icon-size icon-exclusive"></span>
27             </div>
28             <div class="handler-item-text">条件分支</div>
29           </div>
30           <div class="handler-item" @click="addNode(NodeType.PARALLEL_BRANCH_NODE)">
31             <div class="handler-item-icon parallel">
32               <span class="iconfont icon-size icon-parallel"></span>
33             </div>
34             <div class="handler-item-text">并行分支</div>
35           </div>
36           <div class="handler-item" @click="addNode(NodeType.INCLUSIVE_BRANCH_NODE)">
37             <div class="handler-item-icon inclusive">
38               <span class="iconfont icon-size icon-inclusive"></span>
39             </div>
40             <div class="handler-item-text">包容分支</div>
41           </div>
c9a6f7 42           <div class="handler-item" @click="addNode(NodeType.DELAY_TIMER_NODE)">
H 43             <!-- TODO @芋艿 需要更换一下iconfont的图标 -->
44             <div class="handler-item-icon copy">
45               <span class="iconfont icon-size icon-copy"></span>
46             </div>
47             <div class="handler-item-text">延迟器</div>
48           </div>
3e359e 49         </div>
H 50         <template #reference>
51           <div class="add-icon"><Icon icon="ep:plus" /></div>
52         </template>
53       </el-popover>
54     </div>
55   </div>
56 </template>
57
58 <script setup lang="ts">
59 import {
60   ApproveMethodType,
61   AssignEmptyHandlerType,
62   AssignStartUserHandlerType,
63   NODE_DEFAULT_NAME,
64   NodeType,
65   RejectHandlerType,
66   SimpleFlowNode
67 } from './consts'
68 import { generateUUID } from '@/utils'
69
70 defineOptions({
71   name: 'NodeHandler'
72 })
73
74 const message = useMessage() // 消息弹窗
75
76 const popoverShow = ref(false)
77 const props = defineProps({
78   childNode: {
79     type: Object as () => SimpleFlowNode,
80     default: null
81   },
82   currentNode: {
83     type: Object as () => SimpleFlowNode,
84     required: true
85   }
86 })
87 const emits = defineEmits(['update:childNode'])
88
89 const readonly = inject<Boolean>('readonly') // 是否只读
90
91 const addNode = (type: number) => {
92   // 校验：条件分支、包容分支后面，不允许直接添加并行分支
93   if (
94     type === NodeType.PARALLEL_BRANCH_NODE &&
95     [NodeType.CONDITION_BRANCH_NODE, NodeType.INCLUSIVE_BRANCH_NODE].includes(
96       props.currentNode?.type
97     )
98   ) {
99     message.error('条件分支、包容分支后面，不允许直接添加并行分支')
100     return
101   }
102
103   popoverShow.value = false
104   if (type === NodeType.USER_TASK_NODE) {
105     const id = 'Activity_' + generateUUID()
106     const data: SimpleFlowNode = {
107       id: id,
108       name: NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string,
109       showText: '',
110       type: NodeType.USER_TASK_NODE,
111       approveMethod: ApproveMethodType.SEQUENTIAL_APPROVE,
112       // 超时处理
113       rejectHandler: {
114         type: RejectHandlerType.FINISH_PROCESS
115       },
116       timeoutHandler: {
117         enable: false
118       },
119       assignEmptyHandler: {
120         type: AssignEmptyHandlerType.APPROVE
121       },
122       assignStartUserHandlerType: AssignStartUserHandlerType.START_USER_AUDIT,
123       childNode: props.childNode
124     }
125     emits('update:childNode', data)
126   }
127   if (type === NodeType.COPY_TASK_NODE) {
128     const data: SimpleFlowNode = {
129       id: 'Activity_' + generateUUID(),
130       name: NODE_DEFAULT_NAME.get(NodeType.COPY_TASK_NODE) as string,
131       showText: '',
132       type: NodeType.COPY_TASK_NODE,
133       childNode: props.childNode
134     }
135     emits('update:childNode', data)
136   }
137   if (type === NodeType.CONDITION_BRANCH_NODE) {
138     const data: SimpleFlowNode = {
139       name: '条件分支',
140       type: NodeType.CONDITION_BRANCH_NODE,
141       id: 'GateWay_' + generateUUID(),
142       childNode: props.childNode,
143       conditionNodes: [
144         {
145           id: 'Flow_' + generateUUID(),
146           name: '条件1',
147           showText: '',
148           type: NodeType.CONDITION_NODE,
149           childNode: undefined,
150           conditionType: 1,
151           defaultFlow: false
152         },
153         {
154           id: 'Flow_' + generateUUID(),
155           name: '其它情况',
156           showText: '未满足其它条件时，将进入此分支',
157           type: NodeType.CONDITION_NODE,
158           childNode: undefined,
159           conditionType: undefined,
160           defaultFlow: true
161         }
162       ]
163     }
164     emits('update:childNode', data)
165   }
166   if (type === NodeType.PARALLEL_BRANCH_NODE) {
167     const data: SimpleFlowNode = {
168       name: '并行分支',
169       type: NodeType.PARALLEL_BRANCH_NODE,
170       id: 'GateWay_' + generateUUID(),
171       childNode: props.childNode,
172       conditionNodes: [
173         {
174           id: 'Flow_' + generateUUID(),
175           name: '并行1',
176           showText: '无需配置条件同时执行',
177           type: NodeType.CONDITION_NODE,
178           childNode: undefined
179         },
180         {
181           id: 'Flow_' + generateUUID(),
182           name: '并行2',
183           showText: '无需配置条件同时执行',
184           type: NodeType.CONDITION_NODE,
185           childNode: undefined
186         }
187       ]
188     }
189     emits('update:childNode', data)
190   }
191   if (type === NodeType.INCLUSIVE_BRANCH_NODE) {
192     const data: SimpleFlowNode = {
193       name: '包容分支',
194       type: NodeType.INCLUSIVE_BRANCH_NODE,
195       id: 'GateWay_' + generateUUID(),
196       childNode: props.childNode,
197       conditionNodes: [
198         {
199           id: 'Flow_' + generateUUID(),
200           name: '包容条件1',
201           showText: '',
202           type: NodeType.CONDITION_NODE,
203           childNode: undefined,
204           defaultFlow: false
205         },
206         {
207           id: 'Flow_' + generateUUID(),
208           name: '其它情况',
209           showText: '未满足其它条件时，将进入此分支',
210           type: NodeType.CONDITION_NODE,
211           childNode: undefined,
212           defaultFlow: true
213         }
214       ]
215     }
216     emits('update:childNode', data)
217   }
c9a6f7 218   if (type === NodeType.DELAY_TIMER_NODE) {
H 219     const data: SimpleFlowNode = {
220       id: 'Activity_' + generateUUID(),
221       name: NODE_DEFAULT_NAME.get(NodeType.DELAY_TIMER_NODE) as string,
222       showText: '',
223       type: NodeType.DELAY_TIMER_NODE,
224       childNode: props.childNode
225     }
226     emits('update:childNode', data)
227   }
3e359e 228 }
H 229 </script>
230
231 <style lang="scss" scoped></style>