= (props: any) => {
26 | const { modeler, changeModelerObj } = props
27 |
28 | const [baseForm] = Form.useForm()
29 | const [userForm] = Form.useForm()
30 | const [selectedAssignee, setSelectedAssignee] = useState('') // 代理人
31 | const [element, setElement] = useState(null as any)
32 | const [selectType, setSelectType] = useState('')
33 | const [selectedElements, setSelectedElements] = useState([])
34 | const [rootElement, setRootElement] = useState(null)
35 | const [isUserTask, setIsUserTask] = useState(null)
36 | const [isServiceTask, setIsServiceTask] = useState(null)
37 | const [sequenceFlow, setSequenceFlow] = useState(null)
38 | const [isGateway, setIsGateway] = useState(null)
39 | const [isExclusiveSequenceFlow, setIsExclusiveSequenceFlow] = useState(null)
40 | const [isStart, setIsStart] = useState(null)
41 | const [isTask, setIsTask] = useState(null)
42 | const [isEvent, setIsEvent] = useState(null)
43 | const [userModalVisible, setUserModalVisible] = useState(false)
44 | const [roleOptions, setRoleOptions] = useState([])
45 | const [contactValues, setContactValues] = useState({
46 | name: '',
47 | maxSelectNum: 1,
48 | selectedIds: [],
49 | })
50 | const [form, setForm] = useState({
51 | id: null,
52 | name: null,
53 | versionTag: null,
54 | taskPriority: null,
55 | jobPriority: null,
56 | candidateStarterGroups: null,
57 | candidateStarterUsersNames: null,
58 | candidateStarterUsers: null,
59 | historyTimeToLive: null,
60 | // 流程发起人
61 | initiator: null,
62 | description: null,
63 | targetNamespace: null,
64 | async: null,
65 | exclusive: null,
66 | isForCompensation: null,
67 | skipExpression: null,
68 | })
69 | const [listener, setListener] = useState({} as any) // 监听器
70 | const [taskListener, setTaskListener] = useState({} as any) // 任务监听器
71 | const [isTaskListener, setIsTaskListener] = useState(null) // 任务监听器
72 | const [saveButtonDatas, setSaveButtonDatas] = useState({} as any) // 任务监听器
73 | const [multiInstance, setMultiInstance] = useState({} as any) //
74 | const [saveProperties, setSaveProperties] = useState({} as any) //
75 | const [buttonsData, setButtonDatas] = useState([]) // 按钮
76 | const [listenerData, setListenerData] = useState([]) // 选中的监听器数组
77 | const [taskListenerData, setTaskListenerData] = useState([]) // 选中的监听器数组
78 | const [exclusiveSequence, setExclusiveSequence] = useState({ conditionExpression: undefined })
79 | const [userTask, setUserTask] = useState({
80 | assigneeType: 1,
81 | assigneeName: '',
82 | assignee: '',
83 | assigneeId: '',
84 | candidateUsersName: '',
85 | candidateUsers: '',
86 | candidateGroups: [],
87 | formKey: '',
88 | assigneeSelectedArr: [],
89 | candidateUsersSelectedArr: [],
90 | } as any)
91 | const [selectedMultiInstance, setSelectedMultiInstance] = useState({
92 | isSequential: '',
93 | loopCardinality: '',
94 | collection: '',
95 | elementVariable: '',
96 | completionCondition: '',
97 | asyncBefore: false,
98 | asyncAfter: false,
99 | failedJobRetryTimeCycle: '',
100 | })
101 |
102 | const setProcessUser = () => {
103 | let userIds = []
104 | if (form.candidateStarterUsers) {
105 | userIds = form.candidateStarterUsers.split(',')
106 | }
107 | }
108 |
109 | const setButton = businessExtension => {
110 | setSaveButtonDatas(saveButtonDatas[form.id] || {})
111 | const objValues = JSON.parse(JSON.stringify(saveButtonDatas[form.id] || {}))
112 | const Buttons = []
113 | const TaskListener = []
114 | const ExecutionListener = []
115 | const obj: any = {}
116 | const listenerType = ['class', 'expression', 'delegateExpression']
117 | businessExtension.filter(item => {
118 | if (item.$type === 'activiti:Button') {
119 | obj.eventType = item.event
120 | listenerType.some(key => {
121 | if (item[key]) {
122 | obj.value = item[key]
123 | obj.listenerType = key
124 | return
125 | }
126 | })
127 | Buttons.push(item)
128 | }
129 | if (item.$type === 'activiti:TaskListener') {
130 | obj.eventType = item.event
131 | listenerType.some(key => {
132 | if (item[key]) {
133 | obj.value = item[key]
134 | obj.listenerType = key
135 | return
136 | }
137 | })
138 | TaskListener.push(item)
139 | }
140 | if (item.$type === 'activiti:ExecutionListener') {
141 | obj.eventType = item.event
142 | listenerType.some(key => {
143 | if (item[key]) {
144 | obj.value = item[key]
145 | obj.listenerType = key
146 | return
147 | }
148 | })
149 | ExecutionListener.push(item)
150 | }
151 | })
152 | setButtonDatas(objValues.Button || Buttons)
153 | setListenerData(objValues.ExecutionListener || ExecutionListener)
154 | setTaskListenerData(objValues.TaskListener || TaskListener)
155 | }
156 |
157 | // 根据流程保存的信息的设置处理人
158 | const elsetUserTask = async(businessObject) => {
159 | // userForm.setFieldsValue({ ...userTask })
160 |
161 | if (businessObject.assignee) {
162 | const res = await getUserById(businessObject.assignee)
163 | userTask.assigneeName = res.data.name
164 | userTask.assignee = businessObject.assignee
165 | userTask.assigneeSelectedArr = [{ id: businessObject.assignee }]
166 | } else {
167 | userTask.assigneeName = ''
168 | userTask.assignee = ''
169 | userTask.assigneeSelectedArr = []
170 | }
171 | userTask.candidateUsersSelectedArr = []
172 | userTask.candidateUsersName = ''
173 | if (businessObject.candidateUsers) {
174 | const newArr = businessObject.candidateUsers.split(',')
175 | newArr.forEach(async(id, i, arr) => {
176 | userTask.candidateUsersSelectedArr.push({ id: Number(id) })
177 | const data = await getUserById(id)
178 | if (userTask.candidateUsersName.indexOf(data.data.name) < 0) {
179 | userTask.candidateUsersName += data.data.name
180 | if (i !== arr.length - 1) {
181 | userTask.candidateUsersName += ','
182 | }
183 | }
184 | })
185 | }
186 | userTask.candidateGroups = []
187 | if (businessObject.candidateGroups) {
188 | userTask.candidateGroups = businessObject.candidateGroups
189 | }
190 | setUserTask({
191 | ...userTask,
192 | assigneeType: 1,
193 | })
194 | if (userForm) {
195 | userForm.setFieldsValue({...userTask})
196 | const res = userForm.getFieldsValue()
197 | console.log(567, userTask, res)
198 | }
199 | }
200 |
201 | const setListenerFn = (elements, businessObject) => {
202 | // 执行监听器
203 | setListenerData(listener[elements.id] || [])
204 | if (listener[elements.id]?.length === 0) {
205 | const listeners =
206 | extensionElementsHelper.getExtensionElements(
207 | businessObject,
208 | 'activiti:ExecutionListener',
209 | ) || []
210 | const mylistenerData = [...listenerData]
211 | for (let i = 0; i < listeners.length; i++) {
212 | const mylistener = listeners[i]
213 | const listenerType = ImplementationTypeHelper.getImplementationType(listener)
214 | mylistenerData.push({
215 | id: Math.random(16),
216 | eventType: mylistener.event || '',
217 | listenerType,
218 | value: mylistener[listenerType],
219 | })
220 | setListenerData(mylistenerData)
221 | }
222 | const ELlistener = { ...listener }
223 | ELlistener[element.id] = mylistenerData
224 | setListener(ELlistener)
225 | }
226 | }
227 |
228 | const setTaskListenerFn = (elements, businessObject) => {
229 | setTaskListenerData(taskListener[elements.id] || [])
230 | const mytaskListenerData = [...taskListenerData]
231 | if (taskListener[elements.id]?.length === 0) {
232 | const listeners =
233 | extensionElementsHelper.getExtensionElements(businessObject, 'activiti:TaskListener') || []
234 | for (let i = 0; i < listeners.length; i++) {
235 | const mylistener = listeners[i]
236 | const listenerType = ImplementationTypeHelper.getImplementationType(mylistener)
237 | mytaskListenerData.push({
238 | id: Math.random(16),
239 | eventType: mylistener.event || '',
240 | listenerType,
241 | value: mylistener[listenerType],
242 | })
243 | }
244 | const eltaskListener = { ...taskListener }
245 | eltaskListener[elements.id] = mytaskListenerData
246 | setTaskListener(eltaskListener)
247 | }
248 | }
249 |
250 | // 保存每个节点对应的数据
251 | const saveKeys = (obj, objkeys = 'saveProperties') => {
252 | // 保存右侧属性
253 | const myobj = eval(objkeys)
254 | const ownKeys = myobj?.[form.id]
255 | if (ownKeys) {
256 | myobj[form.id] = { ...myobj[form.id], ...obj }
257 | } else {
258 | myobj[form.id] = obj
259 | }
260 | const fnStr = objkeys.substring(1)
261 | const fnFirstStr = objkeys.substring(0, 1).toUpperCase()
262 | console.log(`set${fnFirstStr}${fnStr}`)
263 | eval(`set${fnFirstStr}${fnStr}`)({ ...myobj })
264 | }
265 |
266 | const updateProperties = properties => {
267 | const modeling = modeler.get('modeling')
268 | console.log(properties, rootElement)
269 | modeling.updateProperties(element || rootElement, properties)
270 | }
271 |
272 | // 保存处理人数据到流程上
273 | const changeField = (value, type, isUpdate) => {
274 | // const value = event.target.value
275 | // console.log(value, type)
276 | element[type] = value
277 | const properties = {}
278 | properties[type] = value
279 | saveKeys(properties)
280 | if (isUpdate) {
281 | updateProperties(properties)
282 | userTask.candidateGroups = value
283 | setUserTask({ ...userTask })
284 | }
285 | }
286 |
287 | // 保存处理人
288 | const setAssignee = (res) => {
289 | // console.log(res)
290 | setUserModalVisible(false)
291 | userTask.assignee = res[0].id
292 | userTask.assigneeName = res[0].name
293 | userTask.assigneeSelectedArr = [
294 | {
295 | id: res[0].id,
296 | },
297 | ]
298 | updateProperties({
299 | assignee: userTask.assignee,
300 | })
301 | setUserTask({ ...userTask })
302 | console.log(userTask)
303 | userForm.setFieldsValue({
304 | ...userTask,
305 | })
306 | saveKeys({
307 | assigneeName: userTask.assigneeName,
308 | assigneeSelectedArr: userTask.assigneeSelectedArr,
309 | })
310 | }
311 |
312 | // 保存处理人组
313 | const setCandidateUsers = (res) => {
314 | setUserModalVisible(false)
315 | const users = []
316 | const usersName = []
317 | const candidateUsersSelectedArr = []
318 | for (let i = 0; i < res.length; i++) {
319 | candidateUsersSelectedArr.push({ id: res[i].id })
320 | users.push(res[i].id)
321 | usersName.push(res[i].name)
322 | }
323 | userTask.candidateUsersSelectedArr = candidateUsersSelectedArr
324 | userTask.candidateUsers = users.join(',')
325 | userTask.candidateUsersName = usersName.join(',')
326 | setUserTask({ ...userTask })
327 | userForm.setFieldsValue({
328 | ...userTask,
329 | })
330 | updateProperties({
331 | candidateUsers: userTask.candidateUsers,
332 | })
333 | saveKeys({
334 | candidateUsersName: userTask.candidateUsersName,
335 | candidateUsersSelectedArr: userTask.candidateUsersSelectedArr,
336 | })
337 | }
338 |
339 | // 调用处理人选择弹框
340 | const selectAgent = (maxSelectNum, name) => {
341 | setUserModalVisible(true)
342 | setContactValues({
343 | name,
344 | maxSelectNum,
345 | selectedIds: name === 'assignee'
346 | ? userTask.assigneeSelectedArr
347 | : userTask.candidateUsersSelectedArr,
348 | })
349 | }
350 |
351 | const handleMultiInstance = val => {
352 | saveKeys({ isSequential: val }, 'multiInstance')
353 | let loopCharacteristics
354 | if (val === '') {
355 | loopCharacteristics = undefined
356 | } else {
357 | const moddle = modeler.get('moddle')
358 | loopCharacteristics = moddle.create('bpmn:MultiInstanceLoopCharacteristics')
359 | if (val === 'Sequential') {
360 | loopCharacteristics.isSequential = true
361 | }
362 | }
363 | updateProperties({
364 | loopCharacteristics,
365 | })
366 | }
367 |
368 | const setMultiInstanceFn = businessObject => {
369 | setMultiInstance(multiInstance[form.id] || {})
370 | const objValues = JSON.parse(JSON.stringify(multiInstance[form.id] || {}))
371 | const keys = [
372 | 'isSequential',
373 | 'loopCardinality',
374 | 'collection',
375 | 'elementVariable',
376 | 'completionCondition',
377 | ]
378 | keys.forEach(v => {
379 | selectedMultiInstance[v] = objValues[v]
380 | })
381 | const loopCharacteristics = businessObject.loopCharacteristics
382 | ? businessObject.loopCharacteristics
383 | : {}
384 |
385 | const myselectedMultiInstance = { ...selectedMultiInstance }
386 |
387 | myselectedMultiInstance.collection = objValues.collection || loopCharacteristics.collection
388 | myselectedMultiInstance.elementVariable =
389 | objValues.elementVariable || loopCharacteristics.elementVariable
390 |
391 | if (!myselectedMultiInstance.isSequential) {
392 | if (objValues.isSequential) {
393 | myselectedMultiInstance.isSequential = objValues.isSequential
394 | } else if (loopCharacteristics.loopCardinality) {
395 | myselectedMultiInstance.isSequential = loopCharacteristics.isSequential
396 | ? 'Sequential'
397 | : 'Parallel'
398 | if (!businessObject.loopCharacteristics) {
399 | handleMultiInstance(myselectedMultiInstance.isSequential)
400 | }
401 | }
402 | }
403 | if (
404 | myselectedMultiInstance.loopCardinality === undefined &&
405 | loopCharacteristics.loopCardinality
406 | ) {
407 | myselectedMultiInstance.loopCardinality = loopCharacteristics.loopCardinality.body
408 | }
409 | if (
410 | myselectedMultiInstance.completionCondition === undefined &&
411 | loopCharacteristics.completionCondition
412 | ) {
413 | myselectedMultiInstance.completionCondition = loopCharacteristics.completionCondition.body
414 | }
415 | setSelectedMultiInstance(myselectedMultiInstance)
416 | }
417 |
418 | const setDefaultProperties = elelement => {
419 | if (elelement) {
420 | console.log(99, elelement, isUserTask)
421 | const { businessObject } = elelement
422 | // setUserTask({
423 | // ...businessObject,
424 | // ...businessObject?.$attrs,
425 | // })
426 | setForm({
427 | ...businessObject,
428 | ...businessObject?.$attrs,
429 | targetNamespace: businessObject?.$parent?.targetNamespace,
430 | name: businessObject?.name,
431 | })
432 | baseForm.setFieldsValue({
433 | ...businessObject,
434 | ...businessObject?.$attrs,
435 | targetNamespace: businessObject?.$parent?.targetNamespace,
436 | name: businessObject?.name,
437 | })
438 | if (elelement.type === 'bpmn:Process') {
439 | setProcessUser()
440 | setIsUserTask(false)
441 | setIsStart(false)
442 | setIsTask(false)
443 | } else if (isUserTask || elelement.type === 'bpmn:UserTask') {
444 | // 设置流程人
445 | elsetUserTask(businessObject)
446 | // 设置多实例配置的值
447 | setMultiInstanceFn(businessObject)
448 | const businessExtension = businessObject.extensionElements
449 | ? businessObject.extensionElements.values
450 | : []
451 | setButton(businessExtension)
452 | }
453 | if (elelement.type === 'bpmn:SequenceFlow' && businessObject.conditionExpression) {
454 | setExclusiveSequence({
455 | ...exclusiveSequence,
456 | conditionExpression: businessObject.conditionExpression.body,
457 | })
458 | }
459 | setListenerFn(elelement, businessObject)
460 | setTaskListenerFn(elelement, businessObject)
461 | if (businessObject?.documentation) {
462 | // this.form.description = businessObject.documentation[0].text
463 | }
464 | }
465 | }
466 |
467 | const executeCommand = command => {
468 | const commandStack = modeler.get('commandStack')
469 | console.log(command)
470 | commandStack.execute(command.cmd, command.context)
471 | }
472 |
473 | const updateDocumentation = value => {
474 | const bpmnFactory = modeler.get('bpmnFactory')
475 | if (value) {
476 | const newObjectList = []
477 | newObjectList.push(
478 | bpmnFactory.create('bpmn:Documentation', {
479 | text: value,
480 | }),
481 | )
482 | const elements = rootElement
483 | const command = cmdHelper.setList(
484 | elements,
485 | elements.businessObject,
486 | 'documentation',
487 | newObjectList,
488 | )
489 | executeCommand(command)
490 | }
491 | }
492 |
493 | const handleChangeAssignee = e => {
494 | const { value } = e.target
495 | userTask.assigneeType = value
496 | let assignee = selectedAssignee
497 | if (value === 2) {
498 | assignee = '$INITIATOR'
499 | setSelectedAssignee(userTask.assignee)
500 | }
501 | setUserTask({ ...userTask, assignee })
502 | updateProperties({ assignee })
503 | saveKeys({ assigneeType: value })
504 | }
505 |
506 | const elementChangeEvent = e => {
507 | if (!element) {
508 | return
509 | }
510 | if (e.element.id === element.id) {
511 | setElement(e.element)
512 | setDefaultProperties(e.element)
513 | }
514 | }
515 | const elementClickEvent = e => {
516 | const type = e.element?.type
517 | if (type === 'bpmn:Process') setRootElement(e.element)
518 | if (!element) {
519 | setDefaultProperties(e.element)
520 | }
521 | }
522 |
523 | // 获取所有角色列表
524 | const getUserList = async() => {
525 | const result = await getAllRoleList()
526 | if (result.data) {
527 | setRoleOptions(result.data)
528 | } else setRoleOptions([])
529 | }
530 | const initFn = () => {
531 | modeler.on('selection.changed', e => {
532 | const { newSelection } = e
533 | setSelectedElements(newSelection)
534 | setElement(newSelection[0])
535 | setRootElement(null)
536 | setDefaultProperties(newSelection[0])
537 | // console.log(element, 'change')
538 | })
539 | modeler.on('element.changed', e => {
540 | elementChangeEvent(e)
541 | })
542 | modeler.on('element.click', e => {
543 | elementClickEvent(e)
544 | })
545 | modeler.on('root.added', e => {
546 | elementClickEvent(e)
547 | })
548 | }
549 |
550 | // 基本设置
551 | const renderContent = () => {
552 | return (
553 | <>
554 |
559 | {
560 | updateProperties({ id: e.currentTarget.value })
561 | }} />
562 |
563 |
568 | {
569 | updateProperties({ name: e.currentTarget.value })
570 | }} />
571 |
572 | {rootElement ?
573 |
578 | {
579 | updateProperties({ targetNamespace: e.currentTarget.value })
580 | }} />
581 |
582 |
587 | {
588 | updateProperties({ taskPriority: e.currentTarget.value })
589 | }} />
590 |
591 |
596 | {
597 | updateProperties({ jobPriority: e.currentTarget.value })
598 | }} />
599 |
600 |
605 | {
606 | updateProperties({ historyTimeToLive: e.currentTarget.value })
607 | }} />
608 |
609 |
614 |