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 @@
流程图
-
+