提交
This commit is contained in:
293
src/views/flowable/flowview.vue
Normal file
293
src/views/flowable/flowview.vue
Normal file
@@ -0,0 +1,293 @@
|
||||
<template>
|
||||
<div class="containers main-box">
|
||||
<el-button
|
||||
type="success"
|
||||
size="small"
|
||||
icon="el-icon-zoom-in"
|
||||
@click="zoomViewport(true)"
|
||||
>放大</el-button
|
||||
>
|
||||
<el-button
|
||||
type="warning"
|
||||
size="small"
|
||||
icon="el-icon-zoom-out"
|
||||
@click="zoomViewport(false)"
|
||||
>缩小</el-button
|
||||
>
|
||||
<el-button type="info" size="small" icon="el-icon-rank" @click="fitViewport"
|
||||
>适中</el-button
|
||||
>
|
||||
<div class="canvas" ref="flowCanvas"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
|
||||
|
||||
export default {
|
||||
name: "FlowView",
|
||||
props: {
|
||||
flowData: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bpmnViewer: null,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
flowData: {
|
||||
handler(newVal) {
|
||||
//console.log(123);
|
||||
if (Object.keys(newVal).length > 0) {
|
||||
// 生成实例
|
||||
this.bpmnViewer && this.bpmnViewer.destroy();
|
||||
this.bpmnViewer = new BpmnViewer({
|
||||
container: this.$refs.flowCanvas,
|
||||
height: "460px",
|
||||
});
|
||||
this.loadFlowCanvas(newVal);
|
||||
}
|
||||
},
|
||||
immediate: true, // 立即生效
|
||||
deep: true, //监听对象或数组的时候，要用到深度监听
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
// 加载流程
|
||||
async loadFlowCanvas(flowData) {
|
||||
const self = this;
|
||||
try {
|
||||
await self.bpmnViewer.importXML(flowData.xmlData);
|
||||
|
||||
if (flowData.nodeData !== undefined && flowData.nodeData.length > 0) {
|
||||
self.fillColor(flowData.nodeData);
|
||||
}
|
||||
|
||||
self.fitViewport();
|
||||
} catch (err) {
|
||||
// console.error(err.message, err.warnings);
|
||||
}
|
||||
},
|
||||
// 设置高亮颜色的class
|
||||
setNodeColor(nodeCodes, colorClass, canvas) {
|
||||
for (let i = 0; i < nodeCodes.length; i++) {
|
||||
canvas.addMarker(nodeCodes[i], colorClass);
|
||||
}
|
||||
},
|
||||
// 让图能自适应屏幕
|
||||
fitViewport() {
|
||||
|
||||
this.zoom = this.bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
|
||||
},
|
||||
// 放大缩小
|
||||
zoomViewport(zoomIn = true) {
|
||||
this.zoom = this.bpmnViewer.get("canvas").zoom();
|
||||
this.zoom += zoomIn ? 0.1 : -0.1;
|
||||
if (this.zoom >= 0.2) this.bpmnViewer.get("canvas").zoom(this.zoom);
|
||||
},
|
||||
|
||||
// 设置高亮颜色的
|
||||
fillColor(nodeData) {
|
||||
const canvas = this.bpmnViewer.get("canvas");
|
||||
|
||||
// console.log(this.bpmnViewer.getDefinitions());
|
||||
this.bpmnViewer
|
||||
.getDefinitions()
|
||||
.rootElements[0].flowElements.forEach((n) => {
|
||||
const completeTask = nodeData.find((m) => m.key === n.id);
|
||||
const todoTask = nodeData.find((m) => !m.completed);
|
||||
const endTask = nodeData[nodeData.length - 1];
|
||||
if (n.$type === "bpmn:UserTask") {
|
||||
if (completeTask) {
|
||||
canvas.addMarker(
|
||||
n.id,
|
||||
completeTask.completed ? "highlight" : "highlight-todo"
|
||||
);
|
||||
n.outgoing.forEach((nn) => {
|
||||
const targetTask = nodeData.find(
|
||||
(m) => m.key === nn.targetRef.id
|
||||
);
|
||||
if (targetTask) {
|
||||
if (
|
||||
todoTask &&
|
||||
completeTask.key === todoTask.key &&
|
||||
!todoTask.completed
|
||||
) {
|
||||
canvas.addMarker(
|
||||
nn.id,
|
||||
todoTask.completed ? "highlight" : "highlight-todo"
|
||||
);
|
||||
canvas.addMarker(
|
||||
nn.targetRef.id,
|
||||
todoTask.completed ? "highlight" : "highlight-todo"
|
||||
);
|
||||
} else {
|
||||
canvas.addMarker(
|
||||
nn.id,
|
||||
targetTask.completed ? "highlight" : "highlight-todo"
|
||||
);
|
||||
canvas.addMarker(
|
||||
nn.targetRef.id,
|
||||
targetTask.completed ? "highlight" : "highlight-todo"
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
// 排他网关
|
||||
else if (n.$type === "bpmn:ExclusiveGateway") {
|
||||
if (completeTask) {
|
||||
canvas.addMarker(
|
||||
n.id,
|
||||
completeTask.completed ? "highlight" : "highlight-todo"
|
||||
);
|
||||
n.outgoing.forEach((nn) => {
|
||||
const targetTask = nodeData.find(
|
||||
(m) => m.key === nn.targetRef.id
|
||||
);
|
||||
if (targetTask) {
|
||||
canvas.addMarker(
|
||||
nn.id,
|
||||
targetTask.completed ? "highlight" : "highlight-todo"
|
||||
);
|
||||
canvas.addMarker(
|
||||
nn.targetRef.id,
|
||||
targetTask.completed ? "highlight" : "highlight-todo"
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
// 并行网关
|
||||
else if (n.$type === "bpmn:ParallelGateway") {
|
||||
if (completeTask) {
|
||||
canvas.addMarker(
|
||||
n.id,
|
||||
completeTask.completed ? "highlight" : "highlight-todo"
|
||||
);
|
||||
n.outgoing.forEach((nn) => {
|
||||
const targetTask = nodeData.find(
|
||||
(m) => m.key === nn.targetRef.id
|
||||
);
|
||||
if (targetTask) {
|
||||
canvas.addMarker(
|
||||
nn.id,
|
||||
targetTask.completed ? "highlight" : "highlight-todo"
|
||||
);
|
||||
canvas.addMarker(
|
||||
nn.targetRef.id,
|
||||
targetTask.completed ? "highlight" : "highlight-todo"
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
} else if (n.$type === "bpmn:StartEvent") {
|
||||
n.outgoing.forEach((nn) => {
|
||||
const completeTask = nodeData.find(
|
||||
(m) => m.key === nn.targetRef.id
|
||||
);
|
||||
if (completeTask) {
|
||||
canvas.addMarker(nn.id, "highlight");
|
||||
canvas.addMarker(n.id, "highlight");
|
||||
return;
|
||||
}
|
||||
});
|
||||
} else if (n.$type === "bpmn:EndEvent") {
|
||||
if (endTask.key === n.id && endTask.completed) {
|
||||
canvas.addMarker(n.id, "highlight");
|
||||
return;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.bjs-powered-by {
|
||||
display: none;
|
||||
}
|
||||
.view-mode {
|
||||
.el-header,
|
||||
.el-aside,
|
||||
.djs-palette,
|
||||
.bjs-powered-by {
|
||||
display: none;
|
||||
}
|
||||
.el-loading-mask {
|
||||
background-color: initial;
|
||||
}
|
||||
.el-loading-spinner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.containers {
|
||||
// background-color: #ffffff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.panel {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 0;
|
||||
width: 300px;
|
||||
}
|
||||
.load {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.el-form-item__label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.djs-palette {
|
||||
top: 0;
|
||||
left: 0 !important;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.djs-container svg {
|
||||
// min-height: 650px;
|
||||
}
|
||||
|
||||
.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-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;
|
||||
}
|
||||
.overlays-div {
|
||||
top: -20px !important;
|
||||
width: 100px;
|
||||
font-size: 10px;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user