!4 流程预览优化

Merge pull request !4 from wh/master
approve-sys
tony 3 years ago committed by Gitee
commit 2dfc2c4010
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F

@ -60,7 +60,8 @@
"vue-router": "3.4.9", "vue-router": "3.4.9",
"vuedraggable": "2.24.3", "vuedraggable": "2.24.3",
"vuex": "3.6.0", "vuex": "3.6.0",
"workflow-bpmn-modeler": "^0.2.8" "workflow-bpmn-modeler": "^0.2.8",
"diagram-js": "^5.0.0"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "4.4.6", "@vue/cli-plugin-babel": "4.4.6",

@ -326,7 +326,7 @@ export default {
}, },
'formData.async': function(val) { 'formData.async': function(val) {
if (val === '') val = null if (val === '') val = null
this.updateProperties({ 'flowable:async': true }) this.updateProperties({ 'flowable:async': val })
}, },
'formData.dueDate': function(val) { 'formData.dueDate': function(val) {
if (val === '') val = null if (val === '') val = null

@ -0,0 +1,12 @@
import inherits from "inherits";
import Viewer from "bpmn-js/lib/Viewer";
import ZoomScrollModule from "diagram-js/lib/navigation/zoomscroll";
import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas";
function CustomViewer(options) {
Viewer.call(this, options);
}
inherits(CustomViewer, Viewer);
CustomViewer.prototype._modules = [].concat(Viewer.prototype._modules, [ZoomScrollModule, MoveCanvasModule]);
export {
CustomViewer
};

@ -1,19 +1,23 @@
<template> <template>
<div> <div>
<bpmn-modeler <!--<bpmn-modeler
ref="refNode" ref="refNode"
:xml="xmlData" :xml="xmlData"
:is-view="true" :is-view="true"
:taskList="taskData" :taskList="taskData"
/> />-->
<flow-view :xmlData="xmlData" :taskList="taskData"/>
</div> </div>
</template> </template>
<script> <script>
import bpmnModeler from '@/components/Process/index' import bpmnModeler from '@/components/Process/index'
import FlowView from './flowview'
export default { export default {
name: "Flow", name: "Flow",
components: { components: {
bpmnModeler bpmnModeler,
FlowView
}, },
props: { props: {
xmlData: { xmlData: {

@ -0,0 +1,244 @@
<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: {
xmlData: {
type: String,
default: ''
},
taskList: {
type: Array,
default: () => []
}
},
data() {
return {
bpmnViewer: null
};
},
watch: {
xmlData: function(val) {
if (val) {
this.getImg(val)
}
}
},
mounted() {
//
this.bpmnViewer && this.bpmnViewer.destroy();
this.bpmnViewer = new BpmnViewer({
container: this.$refs.flowCanvas,
height: 'calc(100vh - 200px)',
});
this.getImg(this.xmlData)
},
methods: {
//
async getImg(xmlUrl) {
const self = this
try {
await this.bpmnViewer.importXML(xmlUrl);
this.fitViewport()
if (this.taskList !==undefined && this.taskList.length > 0 ) {
this.fillColor()
}
} 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() {
const canvas = this.bpmnViewer.get('canvas')
this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => {
const completeTask = this.taskList.find(m => m.key === n.id)
const todoTask = this.taskList.find(m => !m.completed)
const endTask = this.taskList[this.taskList.length - 1]
if (n.$type === 'bpmn:UserTask') {
if (completeTask) {
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
n.outgoing?.forEach(nn => {
const targetTask = this.taskList.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 = this.taskList.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 => {
debugger
const targetTask = this.taskList.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 = this.taskList.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">
@import "../../../../../node_modules/bpmn-js/dist/assets/diagram-js.css";
@import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
@import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
@import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
.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;
right: 0;
top: 50px;
width: 300px;
}
.load {
margin-right: 10px;
}
.el-form-item__label{
font-size: 13px;
}
.djs-palette{
left: 0px!important;
top: 0px;
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 {
font-size: 10px;
color: red;
width: 100px;
top: -20px !important;
}
}
</style>

@ -72,7 +72,7 @@
<!--审批正常流程--> <!--审批正常流程-->
<el-dialog :title="completeTitle" :visible.sync="completeOpen" :width="checkSendUser? '60%':'40%'" append-to-body> <el-dialog :title="completeTitle" :visible.sync="completeOpen" :width="checkSendUser? '60%':'40%'" append-to-body>
<el-form ref="taskForm" :model="taskForm" label-width="80px" > <el-form ref="taskForm" :model="taskForm" label-width="80px" >
<el-form-item v-if="checkSendUser" label="处理人" prop="targetKey"> <el-form-item v-if="checkSendUser" prop="targetKey">
<el-row :gutter="20"> <el-row :gutter="20">
<!--部门数据--> <!--部门数据-->
<el-col :span="4" :xs="24"> <el-col :span="4" :xs="24">
@ -116,7 +116,7 @@
<h6>已选人员</h6> <h6>已选人员</h6>
<el-tag <el-tag
v-for="tag in userData" v-for="tag in userData"
:key="tag.nickName" :key="tag"
closable closable
@close="handleClose(tag)"> @close="handleClose(tag)">
{{tag.nickName}} {{tag.dept.deptName}} {{tag.nickName}} {{tag.dept.deptName}}
@ -350,6 +350,7 @@ export default {
// //
handleClose(tag) { handleClose(tag) {
this.userData.splice(this.userData.indexOf(tag), 1); this.userData.splice(this.userData.indexOf(tag), 1);
this.$refs.singleTable.toggleRowSelection(tag, false)
}, },
/** 流程变量赋值 */ /** 流程变量赋值 */
handleCheckChange(val) { handleCheckChange(val) {

Loading…
Cancel
Save