From 5a4392dc4e1d8ed55e073e586a00d0a2b6fcb335 Mon Sep 17 00:00:00 2001 From: YunaiV Date: Tue, 18 Jan 2022 01:41:22 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=B4=E6=97=B6=E6=8F=90=E4=BA=A4=EF=BC=8C?= =?UTF-8?q?=E5=B0=9D=E8=AF=95=E5=AE=9E=E7=8E=B0=E6=B5=81=E7=A8=8B=E5=9B=BE?= =?UTF-8?q?=E7=9A=84=E9=AB=98=E4=BA=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../task/vo/task/BpmTaskRespVO.java | 3 + .../bpm/convert/task/BpmTaskConvert.java | 1 + .../package/designer/ProcessViewer.vue | 149 +++++++++++++++++- .../package/designer/index.js | 1 + .../package/designer/index2.js | 1 + yudao-admin-ui/src/main.js | 1 + .../src/views/bpm/processInstance/detail.vue | 2 +- 7 files changed, 150 insertions(+), 8 deletions(-) diff --git a/yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/bpm/controller/task/vo/task/BpmTaskRespVO.java b/yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/bpm/controller/task/vo/task/BpmTaskRespVO.java index 61b3c65e0..a66c9f2af 100644 --- a/yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/bpm/controller/task/vo/task/BpmTaskRespVO.java +++ b/yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/bpm/controller/task/vo/task/BpmTaskRespVO.java @@ -14,6 +14,9 @@ import java.util.List; @ToString(callSuper = true) public class BpmTaskRespVO extends BpmTaskDonePageItemRespVO { + @ApiModelProperty(value = "任务定义的标识", required = true, example = "user-001") + private String definitionKey; + /** * 审核的用户信息 */ diff --git a/yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/bpm/convert/task/BpmTaskConvert.java b/yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/bpm/convert/task/BpmTaskConvert.java index d3c77f59a..303a3d00e 100644 --- a/yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/bpm/convert/task/BpmTaskConvert.java +++ b/yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/bpm/convert/task/BpmTaskConvert.java @@ -99,6 +99,7 @@ public interface BpmTaskConvert { }); } + @Mapping(source = "taskDefinitionKey", target = "definitionKey") BpmTaskRespVO convert3(HistoricTaskInstance bean); BpmTaskRespVO.User convert3(SysUserDO bean); 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 fccf2e376..10cddf62e 100644 --- a/yudao-admin-ui/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue +++ b/yudao-admin-ui/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue @@ -1,7 +1,7 @@ @@ -18,14 +18,24 @@ export default { prefix: { type: String, default: "camunda" + }, + taskData: { + type: Array, + default: () => [] } }, data() { - return {}; + return { + xml: '', + tasks: [], + }; }, mounted() { + this.xml = this.value; + this.tasks = this.taskData; + // 初始化 this.initBpmnModeler(); - this.createNewDiagram(this.value); + this.createNewDiagram(this.xml); this.$once("hook:beforeDestroy", () => { if (this.bpmnModeler) this.bpmnModeler.destroy(); this.$emit("destroy", this.bpmnModeler); @@ -34,14 +44,21 @@ export default { }, watch: { value: function (newValue) { // 在 xmlString 发生变化时，重新创建，从而绘制流程图 - this.createNewDiagram(newValue); + this.xml = newValue; + this.createNewDiagram(this.xml); + }, + taskData: function (newTaskData) { + this.tasks = newTaskData; + this.createNewDiagram(this.xml); } }, methods: { initBpmnModeler() { if (this.bpmnModeler) return; this.bpmnModeler = new BpmnViewer({ - container: this.$refs["bpmn-canvas"] + container: this.$refs["canvas"], + bpmnRenderer: { + } }) }, /* 创建新的流程图 */ @@ -51,15 +68,133 @@ export default { let newName = `业务流程_${new Date().getTime()}`; let xmlString = xml || DefaultEmptyXML(newId, newName, this.prefix); try { - console.log(this.bpmnModeler.importXML); + // console.log(this.bpmnModeler.importXML); let { warnings } = await this.bpmnModeler.importXML(xmlString); if (warnings && warnings.length) { warnings.forEach(warn => console.warn(warn)); } + // 高亮流程图 + await this.highlightDiagram(); } catch (e) { - console.error(`[Process Designer Warn]: ${e?.message || e}`); + console.error(e); + // console.error(`[Process Designer Warn]: ${e?.message || e}`); } + }, + /* 高亮流程图 */ + async highlightDiagram() { + if (this.tasks.length === 0) { + return; + } + if (!this.bpmnModeler.getDefinitions().rootElements[0].flowElements) { + return; + } + let canvas = this.bpmnModeler.get('canvas'); + this.bpmnModeler.getDefinitions().rootElements[0].flowElements.forEach(n => { + if (n.$type === 'bpmn:UserTask') { + let completeTask = this.tasks.find(m => m.definitionKey === n.id) + let todoTask = this.tasks.find(m => !m.endTime) + let endTask = this.tasks[this.tasks.length - 1] + if (completeTask) { + canvas.addMarker(n.id, completeTask.endTime ? 'highlight' : 'highlight-todo'); + console.log(n.id + ' : ' + (completeTask.endTime ? 'highlight' : 'highlight-todo')); + // n.outgoing.forEach(nn => { + // let targetTask = this.tasks.find(m => m.definitionKey === nn.targetRef.id) + // if (targetTask) { + // canvas.addMarker(nn.id, targetTask.endTime ? 'highlight' : 'highlight-todo'); + // } else if (nn.targetRef.$type === 'bpmn:ExclusiveGateway') { + // // canvas.addMarker(nn.id, 'highlight'); + // canvas.addMarker(nn.id, completeTask.endTime ? 'highlight' : 'highlight-todo'); + // canvas.addMarker(nn.targetRef.id, completeTask.endTime ? 'highlight' : 'highlight-todo'); + // } else if (nn.targetRef.$type === 'bpmn:EndEvent') { + // if (!todoTask && endTask.definitionKey === n.id) { + // canvas.addMarker(nn.id, 'highlight'); + // canvas.addMarker(nn.targetRef.id, 'highlight'); + // } + // if (!completeTask.endTime) { + // canvas.addMarker(nn.id, 'highlight-todo'); + // canvas.addMarker(nn.targetRef.id, 'highlight-todo'); + // } + // } + // }); + } + } else if (n.$type === 'bpmn:ExclusiveGateway') { + // n.outgoing.forEach(nn => { + // let targetTask = this.tasks.find(m => m.definitionKey === nn.targetRef.id) + // if (targetTask) { + // canvas.addMarker(nn.id, targetTask.endTime ? 'highlight' : 'highlight-todo'); + // } + // }) + } + if (n.$type === 'bpmn:StartEvent') { + canvas.addMarker(n.id, 'highlight-todo'); + + // n.outgoing.forEach(nn => { + // let completeTask = this.tasks.find(m => m.definitionKey === nn.targetRef.id) + // if (completeTask) { + // canvas.addMarker(nn.id, 'highlight'); + // canvas.addMarker(n.id, 'highlight'); + // return + // } + // }); + } + }) } } }; + + diff --git a/yudao-admin-ui/src/components/bpmnProcessDesigner/package/designer/index.js b/yudao-admin-ui/src/components/bpmnProcessDesigner/package/designer/index.js index 028fe0543..03a814c8c 100644 --- a/yudao-admin-ui/src/components/bpmnProcessDesigner/package/designer/index.js +++ b/yudao-admin-ui/src/components/bpmnProcessDesigner/package/designer/index.js @@ -4,4 +4,5 @@ MyProcessDesigner.install = function(Vue) { Vue.component(MyProcessDesigner.name, MyProcessDesigner); }; +// 流程图的设计器，可编辑 export default MyProcessDesigner; diff --git a/yudao-admin-ui/src/components/bpmnProcessDesigner/package/designer/index2.js b/yudao-admin-ui/src/components/bpmnProcessDesigner/package/designer/index2.js index b32e26320..55974693a 100644 --- a/yudao-admin-ui/src/components/bpmnProcessDesigner/package/designer/index2.js +++ b/yudao-admin-ui/src/components/bpmnProcessDesigner/package/designer/index2.js @@ -4,4 +4,5 @@ MyProcessViewer.install = function(Vue) { Vue.component(MyProcessViewer.name, MyProcessViewer); }; +// 流程图的查看器，不可编辑 export default MyProcessViewer; diff --git a/yudao-admin-ui/src/main.js b/yudao-admin-ui/src/main.js index 01ad88ce2..5b3a896c2 100644 --- a/yudao-admin-ui/src/main.js +++ b/yudao-admin-ui/src/main.js @@ -83,6 +83,7 @@ import "@/components/bpmnProcessDesigner/package/theme/index.scss"; import "bpmn-js/dist/assets/diagram-js.css"; import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css"; import "bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css"; +import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css"; // Form Generator 组件需要使用到 tinymce import Tinymce from '@/components/tinymce/index.vue' diff --git a/yudao-admin-ui/src/views/bpm/processInstance/detail.vue b/yudao-admin-ui/src/views/bpm/processInstance/detail.vue index 6222f30ac..ac7f4f8c3 100644 --- a/yudao-admin-ui/src/views/bpm/processInstance/detail.vue +++ b/yudao-admin-ui/src/views/bpm/processInstance/detail.vue @@ -73,7 +73,7 @@
流程图
- +