mirror of
https://gitee.com/huangge1199_admin/vue-pro.git
synced 2024-11-26 17:21:53 +08:00
流程详情页 100% - 完成流程图的高亮功能
This commit is contained in:
YunaiV
parent
5a4392dc4e
commit
2de81e438a
@ -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 => {
|
||||||
if (n.$type === 'bpmn:UserTask') {
|
|
||||||
let completeTask = this.tasks.find(m => m.definitionKey === n.id)
|
let completeTask = this.tasks.find(m => m.definitionKey === n.id)
|
||||||
let todoTask = this.tasks.find(m => !m.endTime)
|
let todoTask = this.tasks.find(m => !m.endTime)
|
||||||
let endTask = this.tasks[this.tasks.length - 1]
|
let endTask = this.tasks[this.tasks.length - 1]
|
||||||
|
if (n.$type === 'bpmn:UserTask') {
|
||||||
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, 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.id, 'highlight');
|
||||||
// canvas.addMarker(nn.targetRef.id, 'highlight');
|
canvas.addMarker(nn.id, completeTask.endTime ? 'highlight' : 'highlight-todo');
|
||||||
// }
|
canvas.addMarker(nn.targetRef.id, completeTask.endTime ? 'highlight' : 'highlight-todo');
|
||||||
// if (!completeTask.endTime) {
|
} else if (nn.targetRef.$type === 'bpmn:EndEvent') {
|
||||||
// canvas.addMarker(nn.id, 'highlight-todo');
|
if (!todoTask && endTask.definitionKey === n.id) {
|
||||||
// canvas.addMarker(nn.targetRef.id, 'highlight-todo');
|
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') {
|
} 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 (completeTask) {
|
||||||
|
canvas.addMarker(n.id, completeTask.endTime ? 'highlight' : 'highlight-todo')
|
||||||
|
n.outgoing?.forEach(nn => {
|
||||||
|
const targetTask = this.taskList.find(m => m.definitionKey === 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 => {
|
||||||
|
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
|
||||||
}
|
}
|
||||||
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
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user