From 34a0f0ea9db57d96a92a784da90f6b1e9cda6de9 Mon Sep 17 00:00:00 2001 From: YunaiV Date: Fri, 21 Jan 2022 01:12:44 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20bpmn=20=E6=B5=81=E7=A8=8B?= =?UTF-8?q?=E5=9B=BE=E7=9A=84=E9=AB=98=E4=BA=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../package/designer/ProcessViewer.vue | 87 ++++++++++++++----- 1 file changed, 63 insertions(+), 24 deletions(-) diff --git a/yudao-admin-ui/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue b/yudao-admin-ui/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue index 9fbf08fec..20de0f418 100644 --- a/yudao-admin-ui/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue +++ b/yudao-admin-ui/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue @@ -117,7 +117,7 @@ export default { // 再次基础上，增加不同审批结果的颜色等等 let canvas = this.bpmnModeler.get('canvas'); let todoActivity = activityList.find(m => !m.endTime) // 找到待办的任务 - let endActivity = activityList[activityList.length - 1] // 找到结束任务 + let endActivity = activityList[activityList.length - 1] // 获得最后一个任务 // debugger console.log(this.bpmnModeler.getDefinitions().rootElements[0].flowElements); this.bpmnModeler.getDefinitions().rootElements[0].flowElements?.forEach(n => { @@ -129,23 +129,27 @@ export default { // 处理用户任务的高亮 const task = this.taskList.find(m => m.id === activity.taskId); // 找到活动对应的 taskId if (task) { - canvas.addMarker(n.id, this.getTaskHighlightCss(task)); + canvas.addMarker(n.id, this.getResultCss(task.result)); + // 如果非通过，就不走后面的线条了 + if (task.result !== 2) { + return; + } } // 处理 outgoing 出线 const outgoing = this.getActivityOutgoing(activity); outgoing?.forEach(nn => { - debugger + // debugger let targetActivity = activityList.find(m => m.key === nn.targetRef.id) if (targetActivity) { - debugger + // debugger canvas.addMarker(nn.id, targetActivity.endTime ? 'highlight' : 'highlight-todo'); } else if (nn.targetRef.$type === 'bpmn:ExclusiveGateway') { - debugger + // debugger canvas.addMarker(nn.id, activity.endTime ? 'highlight' : 'highlight-todo'); canvas.addMarker(nn.targetRef.id, activity.endTime ? 'highlight' : 'highlight-todo'); } else if (nn.targetRef.$type === 'bpmn:EndEvent') { - debugger + // debugger if (!todoActivity && endActivity.key === n.id) { canvas.addMarker(nn.id, 'highlight'); canvas.addMarker(nn.targetRef.id, 'highlight'); @@ -188,22 +192,17 @@ export default { } }); } else if (n.$type === 'bpmn:EndEvent') { // 结束节点 - if (endActivity.key !== n.id) { // 保证 endActivity 就是 EndEvent + if (!this.processInstance || this.processInstance.result === 1) { return; } - // 在并行网关后，跟着多个任务，如果其中一个任务完成，endActivity 的 endTime 就会存在值 - // 所以，通过 todoActivity 在做一次判断 - if (endActivity.endTime && !todoActivity) { - canvas.addMarker(n.id, 'highlight'); - } + canvas.addMarker(n.id, this.getResultCss(this.processInstance.result)); } }) }, getActivityHighlightCss(activity) { return activity.endTime ? 'highlight' : 'highlight-todo'; }, - getTaskHighlightCss(task) { - const result = task.result; + getResultCss(result) { if (result === 1) { return 'highlight-todo'; } else if (result === 2) { @@ -253,12 +252,43 @@ export default { !this.overlays && (this.overlays = this.bpmnModeler.get("overlays")); // 展示信息 if (!this.elementOverlayIds[element.id] && element.type !== "bpmn:Process") { - this.elementOverlayIds[element.id] = this.overlays.add(element, { - position: { left: 0, bottom: 0 }, - html: `
+ let html = `

Elemet id: ${element.id}

Elemet type: ${element.type}

-
` +
`; // 默认值 + if (element.type === 'bpmn:StartEvent' && this.processInstance) { + html = `

发起人：${this.processInstance.startUser.nickname}

+

部门：${this.processInstance.startUser.deptName}

+

创建时间：${this.parseTime(this.processInstance.createTime)}`; + } else if (element.type === 'bpmn:UserTask') { + // debugger + const activity = this.activityList.find(m => m.key === element.id); + if (!activity) { + return; + } + let task = this.taskList.find(m => m.id === activity.taskId); // 找到活动对应的 taskId + if (!task) { + return; + } + html = `

审批人：${task.assigneeUser.nickname}

+

部门：${task.assigneeUser.deptName}

+

结果：${this.getDictDataLabel(this.DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT, task.result)}

+

创建时间：${this.parseTime(task.createTime)}

`; + if (task.endTime) { + html += `

结束时间：${this.parseTime(task.endTime)}

` + } + if (task.comment) { + html += `

审批建议：${task.comment}

` + } + } else if (element.type === 'bpmn:EndEvent' && this.processInstance) { + html = `

结果：${this.getDictDataLabel(this.DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT, this.processInstance.result)}

`; + if (this.processInstance.endTime) { + html += `

结束时间：${this.parseTime(this.processInstance.endTime)}

` + } + } + this.elementOverlayIds[element.id] = this.overlays.add(element, { + position: { left: 0, bottom: 0 }, + html: `
${html}
` }); } }, @@ -275,26 +305,26 @@ export default { /** 处理中 */ .highlight-todo.djs-connection > .djs-visual > path { - stroke: orange !important; + stroke: #1890ff !important; stroke-dasharray: 4px !important; fill-opacity: 0.2 !important; } .highlight-todo.djs-shape .djs-visual > :nth-child(1) { - fill: orange !important; - stroke: orange !important; + fill: #1890ff !important; + stroke: #1890ff !important; stroke-dasharray: 4px !important; fill-opacity: 0.2 !important; } /deep/.highlight-todo.djs-connection > .djs-visual > path { - stroke: orange !important; + stroke: #1890ff !important; stroke-dasharray: 4px !important; fill-opacity: 0.2 !important; marker-end: url(#sequenceflow-end-_E7DFDF-_E7DFDF-803g1kf6zwzmcig1y2ulm5egr); } /deep/.highlight-todo.djs-shape .djs-visual > :nth-child(1) { - fill: orange !important; - stroke: orange !important; + fill: #1890ff !important; + stroke: #1890ff !important; stroke-dasharray: 4px !important; fill-opacity: 0.2 !important; } @@ -415,4 +445,13 @@ export default { /deep/.highlight-cancel.djs-connection > .djs-visual > path { stroke: grey !important; } + +.element-overlays { + box-sizing: border-box; + padding: 8px; + background: rgba(0, 0, 0, 0.6); + border-radius: 4px; + color: #fafafa; + width: 200px; +}