319 lines
10 KiB
Vue
319 lines
10 KiB
Vue
<template>
|
||
<div class="my-process-designer">
|
||
<div class="my-process-designer__container">
|
||
<div class="my-process-designer__canvas" ref="bpmn-canvas"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import BpmnViewer from "bpmn-js/lib/Viewer";
|
||
import DefaultEmptyXML from "./plugins/defaultEmpty";
|
||
|
||
export default {
|
||
name: "MyProcessViewer",
|
||
componentName: "MyProcessViewer",
|
||
props: {
|
||
value: String, // xml 字符串
|
||
prefix: {
|
||
type: String,
|
||
default: "camunda"
|
||
},
|
||
taskData: {
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
xml: '',
|
||
tasks: [],
|
||
};
|
||
},
|
||
mounted() {
|
||
this.xml = this.value;
|
||
this.tasks = this.taskData;
|
||
// 初始化
|
||
this.initBpmnModeler();
|
||
this.createNewDiagram(this.xml);
|
||
this.$once("hook:beforeDestroy", () => {
|
||
if (this.bpmnModeler) this.bpmnModeler.destroy();
|
||
this.$emit("destroy", this.bpmnModeler);
|
||
this.bpmnModeler = null;
|
||
});
|
||
},
|
||
watch: {
|
||
value: function (newValue) { // 在 xmlString 发生变化时，重新创建，从而绘制流程图
|
||
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"],
|
||
bpmnRenderer: {
|
||
}
|
||
})
|
||
},
|
||
/* 创建新的流程图 */
|
||
async createNewDiagram(xml) {
|
||
// 将字符串转换成图显示出来
|
||
let newId = `Process_${new Date().getTime()}`;
|
||
let newName = `业务流程_${new Date().getTime()}`;
|
||
let xmlString = xml || DefaultEmptyXML(newId, newName, this.prefix);
|
||
try {
|
||
// 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(e);
|
||
// console.error(`[Process Designer Warn]: ${e?.message || e}`);
|
||
}
|
||
},
|
||
/* 高亮流程图 */
|
||
async highlightDiagram() {
|
||
let activityList = this.tasks;
|
||
if (activityList.length === 0) {
|
||
return;
|
||
}
|
||
// 参考自 https://gitee.com/tony2y/RuoYi-flowable/blob/master/ruoyi-ui/src/components/Process/index.vue#L222 实现
|
||
// 再次基础上，增加不同审批结果的颜色等等
|
||
let canvas = this.bpmnModeler.get('canvas');
|
||
let todoActivity = activityList.find(m => !m.endTime) // 找到待办的任务
|
||
let endActivity = activityList[activityList.length - 1] // 找到结束任务
|
||
this.bpmnModeler.getDefinitions().rootElements[0].flowElements?.forEach(n => {
|
||
let activity = activityList.find(m => m.key === n.id) // 找到对应的活动
|
||
if (n.$type === 'bpmn:UserTask') { // 用户任务
|
||
if (!activity) {
|
||
return;
|
||
}
|
||
if (activity.task) {
|
||
const result = activity.task.result;
|
||
if (result === 1) {
|
||
canvas.addMarker(n.id, 'highlight-todo');
|
||
} else if (result === 2) {
|
||
canvas.addMarker(n.id, 'highlight');
|
||
} else if (result === 3) {
|
||
canvas.addMarker(n.id, 'highlight-reject');
|
||
} else if (result === 4) {
|
||
canvas.addMarker(n.id, 'highlight-cancel');
|
||
}
|
||
}
|
||
|
||
n.outgoing?.forEach(nn => {
|
||
let targetTask = activityList.find(m => m.key === 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, activity.endTime ? 'highlight' : 'highlight-todo');
|
||
canvas.addMarker(nn.targetRef.id, activity.endTime ? 'highlight' : 'highlight-todo');
|
||
} else if (nn.targetRef.$type === 'bpmn:EndEvent') {
|
||
if (!todoActivity && endActivity.key === n.id) {
|
||
canvas.addMarker(nn.id, 'highlight');
|
||
canvas.addMarker(nn.targetRef.id, 'highlight');
|
||
}
|
||
if (!activity.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 = activityList.find(m => m.key === nn.targetRef.id)
|
||
if (targetTask) {
|
||
canvas.addMarker(nn.id, targetTask.endTime ? 'highlight' : 'highlight-todo');
|
||
}
|
||
})
|
||
} else if (n.$type === 'bpmn:ParallelGateway') { // 并行网关
|
||
if (activity) {
|
||
canvas.addMarker(n.id, activity.endTime ? 'highlight' : 'highlight-todo')
|
||
n.outgoing?.forEach(nn => {
|
||
const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
|
||
if (targetTask) {
|
||
canvas.addMarker(nn.id, targetTask.endTime ? 'highlight' : 'highlight-todo')
|
||
canvas.addMarker(nn.targetRef.id, targetTask.endTime ? 'highlight' : 'highlight-todo')
|
||
}
|
||
})
|
||
}
|
||
} else if (n.$type === 'bpmn:StartEvent') { // 开始节点
|
||
n.outgoing?.forEach(nn => { // outgoing 例如说【bpmn:SequenceFlow】连线
|
||
let fromTask = activityList.find(m => m.key === nn.targetRef.id)
|
||
if (fromTask) {
|
||
canvas.addMarker(nn.id, 'highlight');
|
||
canvas.addMarker(n.id, 'highlight');
|
||
}
|
||
});
|
||
} else if (n.$type === 'bpmn:EndEvent') { // 结束节点
|
||
if (endActivity.key !== n.id) { // 保证 endActivity 就是 EndEvent
|
||
return;
|
||
}
|
||
// 在并行网关后，跟着多个任务，如果其中一个任务完成，endActivity 的 endTime 就会存在值
|
||
// 所以，通过 todoActivity 在做一次判断
|
||
if (endActivity.endTime && !todoActivity) {
|
||
canvas.addMarker(n.id, 'highlight');
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
|
||
/** 通过 */
|
||
.highlight.djs-shape .djs-visual > :nth-child(1) {
|
||
fill: green !important;
|
||
stroke: green !important;
|
||
fill-opacity: 0.2 !important;
|
||
}
|
||
.highlight.djs-shape .djs-visual > :nth-child(2) {
|
||
fill: green !important;
|
||
}
|
||
.highlight.djs-shape .djs-visual > path {
|
||
fill: green !important;
|
||
fill-opacity: 0.2 !important;
|
||
stroke: green !important;
|
||
}
|
||
.highlight.djs-connection > .djs-visual > path {
|
||
stroke: green !important;
|
||
}
|
||
|
||
.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
|
||
fill: green !important; /* color elements as green */
|
||
}
|
||
|
||
/deep/.highlight.djs-shape .djs-visual > :nth-child(1) {
|
||
fill: green !important;
|
||
stroke: green !important;
|
||
fill-opacity: 0.2 !important;
|
||
}
|
||
/deep/.highlight.djs-shape .djs-visual > :nth-child(2) {
|
||
fill: green !important;
|
||
}
|
||
/deep/.highlight.djs-shape .djs-visual > path {
|
||
fill: green !important;
|
||
fill-opacity: 0.2 !important;
|
||
stroke: green !important;
|
||
}
|
||
/deep/.highlight.djs-connection > .djs-visual > path {
|
||
stroke: green !important;
|
||
}
|
||
|
||
/** 处理中 */
|
||
.highlight-todo.djs-connection > .djs-visual > path {
|
||
stroke: orange !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;
|
||
stroke-dasharray: 4px !important;
|
||
fill-opacity: 0.2 !important;
|
||
}
|
||
|
||
/deep/.highlight-todo.djs-connection > .djs-visual > path {
|
||
stroke: orange !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;
|
||
stroke-dasharray: 4px !important;
|
||
fill-opacity: 0.2 !important;
|
||
}
|
||
|
||
/** 不通过 */
|
||
.highlight-reject.djs-shape .djs-visual > :nth-child(1) {
|
||
fill: red !important;
|
||
stroke: red !important;
|
||
fill-opacity: 0.2 !important;
|
||
}
|
||
.highlight-reject.djs-shape .djs-visual > :nth-child(2) {
|
||
fill: red !important;
|
||
}
|
||
.highlight-reject.djs-shape .djs-visual > path {
|
||
fill: red !important;
|
||
fill-opacity: 0.2 !important;
|
||
stroke: red !important;
|
||
}
|
||
.highlight-reject.djs-connection > .djs-visual > path {
|
||
stroke: red !important;
|
||
}
|
||
|
||
.highlight-reject:not(.djs-connection) .djs-visual > :nth-child(1) {
|
||
fill: red !important; /* color elements as green */
|
||
}
|
||
|
||
/deep/.highlight-reject.djs-shape .djs-visual > :nth-child(1) {
|
||
fill: red !important;
|
||
stroke: red !important;
|
||
fill-opacity: 0.2 !important;
|
||
}
|
||
/deep/.highlight-reject.djs-shape .djs-visual > :nth-child(2) {
|
||
fill: red !important;
|
||
}
|
||
/deep/.highlight-reject.djs-shape .djs-visual > path {
|
||
fill: red !important;
|
||
fill-opacity: 0.2 !important;
|
||
stroke: red !important;
|
||
}
|
||
/deep/.highlight-reject.djs-connection > .djs-visual > path {
|
||
stroke: red !important;
|
||
}
|
||
|
||
/** 已取消 */
|
||
.highlight-cancel.djs-shape .djs-visual > :nth-child(1) {
|
||
fill: grey !important;
|
||
stroke: grey !important;
|
||
fill-opacity: 0.2 !important;
|
||
}
|
||
.highlight-cancel.djs-shape .djs-visual > :nth-child(2) {
|
||
fill: grey !important;
|
||
}
|
||
.highlight-cancel.djs-shape .djs-visual > path {
|
||
fill: grey !important;
|
||
fill-opacity: 0.2 !important;
|
||
stroke: grey !important;
|
||
}
|
||
.highlight-cancel.djs-connection > .djs-visual > path {
|
||
stroke: grey !important;
|
||
}
|
||
|
||
.highlight-cancel:not(.djs-connection) .djs-visual > :nth-child(1) {
|
||
fill: grey !important; /* color elements as green */
|
||
}
|
||
|
||
/deep/.highlight-cancel.djs-shape .djs-visual > :nth-child(1) {
|
||
fill: grey !important;
|
||
stroke: grey !important;
|
||
fill-opacity: 0.2 !important;
|
||
}
|
||
/deep/.highlight-cancel.djs-shape .djs-visual > :nth-child(2) {
|
||
fill: grey !important;
|
||
}
|
||
/deep/.highlight-cancel.djs-shape .djs-visual > path {
|
||
fill: grey !important;
|
||
fill-opacity: 0.2 !important;
|
||
stroke: grey !important;
|
||
}
|
||
/deep/.highlight-cancel.djs-connection > .djs-visual > path {
|
||
stroke: grey !important;
|
||
}
|
||
</style>
|