huangge1199/vue-pro
1
0
Fork 0
mirror of https://gitee.com/huangge1199_admin/vue-pro.git synced 2024-11-26 17:21:53 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

流程详情页 100% - 完成流程图的高亮功能

Browse Source
This commit is contained in:
YunaiV 2022-01-18 08:15:43 +08:00
parent 5a4392dc4e
commit 2de81e438a
1 changed files with 89 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<template> <template>
<div class="my-process-designer"> <div class="my-process-designer">
<div class="my-process-designer__container"> <div class="my-process-designer__container">
<div class="my-process-designer__canvas" ref="canvas"></div> <div class="my-process-designer__canvas" ref="bpmn-canvas"></div>
</div> </div>
</div> </div>
</template> </template>
@ -56,7 +56,7 @@ export default {
initBpmnModeler() { initBpmnModeler() {
if (this.bpmnModeler) return; if (this.bpmnModeler) return;
this.bpmnModeler = new BpmnViewer({ this.bpmnModeler = new BpmnViewer({
container: this.$refs["canvas"], container: this.$refs["bpmn-canvas"],
bpmnRenderer: { bpmnRenderer: {
} }
}) })
@ -88,54 +88,68 @@ export default {
if (!this.bpmnModeler.getDefinitions().rootElements[0].flowElements) { if (!this.bpmnModeler.getDefinitions().rootElements[0].flowElements) {
return; return;
} }
// 参考自 https://gitee.com/tony2y/RuoYi-flowable/blob/master/ruoyi-ui/src/components/Process/index.vue#L222 实现
let canvas = this.bpmnModeler.get('canvas'); let canvas = this.bpmnModeler.get('canvas');
this.bpmnModeler.getDefinitions().rootElements[0].flowElements.forEach(n => { this.bpmnModeler.getDefinitions().rootElements[0].flowElements?.forEach(n => {
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 (n.$type === 'bpmn:UserTask') { 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) { if (completeTask) {
canvas.addMarker(n.id, completeTask.endTime ? 'highlight' : 'highlight-todo'); canvas.addMarker(n.id, completeTask.endTime ? 'highlight' : 'highlight-todo');
console.log(n.id + ' : ' + (completeTask.endTime ? 'highlight' : 'highlight-todo')); // console.log(n.id + ' : ' + (completeTask.endTime ? 'highlight' : 'highlight-todo'));
// n.outgoing.forEach(nn => { n.outgoing?.forEach(nn => {
// let targetTask = this.tasks.find(m => m.definitionKey === nn.targetRef.id) let targetTask = this.tasks.find(m => m.definitionKey === nn.targetRef.id)
// if (targetTask) { if (targetTask) {
// canvas.addMarker(nn.id, targetTask.endTime ? 'highlight' : 'highlight-todo'); canvas.addMarker(nn.id, targetTask.endTime ? 'highlight' : 'highlight-todo');
// } else if (nn.targetRef.$type === 'bpmn:ExclusiveGateway') { } else if (nn.targetRef.$type === 'bpmn:ExclusiveGateway') {
// // canvas.addMarker(nn.id, 'highlight'); // canvas.addMarker(nn.id, 'highlight');
// canvas.addMarker(nn.id, completeTask.endTime ? 'highlight' : 'highlight-todo'); canvas.addMarker(nn.id, completeTask.endTime ? 'highlight' : 'highlight-todo');
// canvas.addMarker(nn.targetRef.id, completeTask.endTime ? 'highlight' : 'highlight-todo'); canvas.addMarker(nn.targetRef.id, completeTask.endTime ? 'highlight' : 'highlight-todo');
// } else if (nn.targetRef.$type === 'bpmn:EndEvent') { } else if (nn.targetRef.$type === 'bpmn:EndEvent') {
// if (!todoTask && endTask.definitionKey === n.id) { if (!todoTask && endTask.definitionKey === n.id) {
// canvas.addMarker(nn.id, 'highlight'); canvas.addMarker(nn.id, 'highlight');
// canvas.addMarker(nn.targetRef.id, 'highlight'); canvas.addMarker(nn.targetRef.id, 'highlight');
// } }
// if (!completeTask.endTime) { if (!completeTask.endTime) {
// canvas.addMarker(nn.id, 'highlight-todo'); canvas.addMarker(nn.id, 'highlight-todo');
// canvas.addMarker(nn.targetRef.id, 'highlight-todo'); canvas.addMarker(nn.targetRef.id, 'highlight-todo');
// } }
// } }
// }); });
} }
} else if (n.$type === 'bpmn:ExclusiveGateway') { } else if (n.$type === 'bpmn:ExclusiveGateway') {
// n.outgoing.forEach(nn => { n.outgoing?.forEach(nn => {
// let targetTask = this.tasks.find(m => m.definitionKey === nn.targetRef.id) let targetTask = this.tasks.find(m => m.definitionKey === nn.targetRef.id)
// if (targetTask) { if (targetTask) {
// canvas.addMarker(nn.id, targetTask.endTime ? 'highlight' : 'highlight-todo'); canvas.addMarker(nn.id, targetTask.endTime ? 'highlight' : 'highlight-todo');
// } }
// }) })
} } else if (n.$type === 'bpmn:ParallelGateway') {
if (n.$type === 'bpmn:StartEvent') { if (completeTask) {
canvas.addMarker(n.id, 'highlight-todo'); canvas.addMarker(n.id, completeTask.endTime ? 'highlight' : 'highlight-todo')
n.outgoing?.forEach(nn => {
// n.outgoing.forEach(nn => { const targetTask = this.taskList.find(m => m.definitionKey === nn.targetRef.id)
// let completeTask = this.tasks.find(m => m.definitionKey === nn.targetRef.id) if (targetTask) {
// if (completeTask) { canvas.addMarker(nn.id, targetTask.endTime ? 'highlight' : 'highlight-todo')
// canvas.addMarker(nn.id, 'highlight'); canvas.addMarker(nn.targetRef.id, targetTask.endTime ? 'highlight' : 'highlight-todo')
// canvas.addMarker(n.id, 'highlight'); }
// return })
// } }
// }); } else if (n.$type === 'bpmn:StartEvent') {
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
}
});
} else if (n.$type === 'bpmn:EndEvent') {
if (endTask.definitionKey === n.id && endTask.endTime) {
canvas.addMarker(n.id, 'highlight')
return
}
} }
}) })
} }
@ -144,24 +158,39 @@ export default {
</script> </script>
<style> <style>
.containers {
position: absolute; .highlight.djs-shape .djs-visual > :nth-child(1) {
background-color: #ffffff; fill: green !important;
top:0; stroke: green !important;
left: 0; fill-opacity: 0.2 !important;
width: 100%;
height: 100%;
} }
.canvas { .highlight.djs-shape .djs-visual > :nth-child(2) {
width: 100%; fill: green !important;
height: 100%; }
.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;
} }
/*/deep/.highlight-todo {*/ .highlight-todo.djs-connection > .djs-visual > path {
/* background-color: red;*/ stroke: orange !important;
/* fill: green !important;*/ stroke-dasharray: 4px !important;
/* stroke: green !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;
}
.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) { /deep/.highlight.djs-shape .djs-visual > :nth-child(1) {
fill: green !important; fill: green !important;
@ -191,10 +220,5 @@ export default {
stroke-dasharray: 4px !important; stroke-dasharray: 4px !important;
fill-opacity: 0.2 !important; fill-opacity: 0.2 !important;
} }
/deep/.overlays-div {
font-size: 10px;
color: red;
width: 100px;
top: -20px !important;
}
</style> </style>