hhyykk/ipms-sjy
1
1
Fork 0
mirror of https://gitee.com/hhyykk/ipms-sjy.git synced 2025-07-06 23:25:06 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

临时提交，尝试实现流程图的高亮

Browse Source
This commit is contained in:
YunaiV
2022-01-18 01:41:22 +08:00
parent 0765f481ff
commit 5a4392dc4e
7 changed files with 150 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
yudao-admin-ui/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="my-process-designer">
<div class="my-process-designer__container">
<div class="my-process-designer__canvas" ref="bpmn-canvas"></div>
<div class="my-process-designer__canvas" ref="canvas"></div>
</div>
</div>
</template>
@ -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
// }
// });
}
})
}
}
};
</script>
<style>
.containers {
position: absolute;
background-color: #ffffff;
top:0;
left: 0;
width: 100%;
height: 100%;
}
.canvas {
width: 100%;
height: 100%;
}
/*/deep/.highlight-todo {*/
/* background-color: red;*/
/* fill: green !important;*/
/* stroke: green !important;*/
/*}*/
/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;
}
/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;
}
/deep/.overlays-div {
font-size: 10px;
color: red;
width: 100px;
top: -20px !important;
}
</style>