DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix -- 修复跟踪流程有时无法着色问题。添加更多色彩标记"流程跟踪"节点状态（试验阶段）

Browse Source
This commit is contained in:
konbai
2022-03-26 00:26:33 +08:00
parent 581a6d8f02
commit d40cc71609
5 changed files with 252 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
ruoyi-ui/src/components/ProcessViewer/index.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="process-viewer">
<div class="process-canvas" style="height: 100%;" ref="processCanvas" v-show="!isLoading" />
<!-- 自定义箭头样式，用于已完成状态下流程连线箭头 -->
<defs ref="customDefs">
<!-- 自定义箭头样式，用于成功状态下流程连线箭头 -->
<defs ref="customSuccessDefs">
<marker id="sequenceflow-end-white-success" viewBox="0 0 20 20" refX="11" refY="10" markerWidth="10" markerHeight="10" orient="auto">
<path class="success-arrow" d="M 1 5 L 11 10 L 1 15 Z" style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;"></path>
</marker>
@@ -10,6 +10,15 @@
<path class="success-conditional" d="M 0 10 L 8 6 L 16 10 L 8 14 Z" style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;"></path>
</marker>
</defs>
<!-- 自定义箭头样式，用于失败状态下流程连线箭头 -->
<defs ref="customFailDefs">
<marker id="sequenceflow-end-white-fail" viewBox="0 0 20 20" refX="11" refY="10" markerWidth="10" markerHeight="10" orient="auto">
<path class="fail-arrow" d="M 1 5 L 11 10 L 1 15 Z" style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;"></path>
</marker>
<marker id="conditional-flow-marker-white-fail" viewBox="0 0 20 20" refX="-1" refY="10" markerWidth="10" markerHeight="10" orient="auto">
<path class="fail-conditional" d="M 0 10 L 8 6 L 16 10 L 8 14 Z" style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;"></path>
</marker>
</defs>
<!-- 已完成节点悬浮弹窗 -->
<el-dialog class="comment-dialog" :title="dlgTitle || '审批记录'" :visible.sync="dialogVisible">
<el-row>
@@ -138,8 +147,10 @@ export default {
addCustomDefs() {
const canvas = this.bpmnViewer.get('canvas');
const svg = canvas._svg;
const customDefs = this.$refs.customDefs;
svg.appendChild(customDefs);
const customSuccessDefs = this.$refs.customSuccessDefs;
const customFailDefs = this.$refs.customFailDefs;
svg.appendChild(customSuccessDefs);
svg.appendChild(customFailDefs);
},
// 任务悬浮弹窗
onSelectElement(element) {
@@ -186,14 +197,14 @@ export default {
}
},
// 设置流程图元素状态
setProcessStatus(processNodeInfo) {
setProcessStatus (processNodeInfo) {
this.processNodeInfo = processNodeInfo;
if (this.isLoading || this.processNodeInfo == null || this.bpmnViewer == null) return;
let { finishedSequenceFlowList, finishedTaskList, unfinishedTaskList } = this.processNodeInfo;
let { finishedTaskSet, rejectedTaskSet, unfinishedTaskSet, finishedSequenceFlowSet } = this.processNodeInfo;
const canvas = this.bpmnViewer.get('canvas');
const elementRegistry = this.bpmnViewer.get('elementRegistry');
if (Array.isArray(finishedSequenceFlowList)) {
finishedSequenceFlowList.forEach(item => {
if (Array.isArray(finishedSequenceFlowSet)) {
finishedSequenceFlowSet.forEach(item => {
if (item != null) {
canvas.addMarker(item, 'success');
let element = elementRegistry.get(item);
@@ -204,15 +215,23 @@ export default {
}
});
}
if (Array.isArray(finishedTaskList)) {
finishedTaskList.forEach(item => {
canvas.addMarker(item, 'success');
});
if (Array.isArray(finishedTaskSet)) {
finishedTaskSet.forEach(item => canvas.addMarker(item, 'success'));
}
if (Array.isArray(unfinishedTaskList)) {
unfinishedTaskList.forEach(item => {
canvas.addMarker(item, 'current');
});
if (Array.isArray(unfinishedTaskSet)) {
unfinishedTaskSet.forEach(item => canvas.addMarker(item, 'primary'));
}
if (Array.isArray(rejectedTaskSet)) {
rejectedTaskSet.forEach(item => {
if (item != null) {
let element = elementRegistry.get(item);
if (element.type.includes('Task')) {
canvas.addMarker(item, 'danger');
} else {
canvas.addMarker(item, 'warning');
}
}
})
}
}
},
@@ -237,7 +256,4 @@ export default {
</script>
<style scoped>
.comment-dialog >>> .el-dialog__body {
padding: 0px;
}
</style>

101
ruoyi-ui/src/plugins/package/theme/index.scss
View File

@@ -9,13 +9,16 @@
@import "./process-panel.scss";
$success-color: #4eb819;
$current-color: #409EFF;
$primary-color: #409EFF;
$warning-color: #E6A23C;
$danger-color: #F56C6C;
$cancel-color: #909399;
.process-viewer {
position: relative;
border: 1px solid #EFEFEF;
background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+') repeat!important;
.success-arrow {
fill: $success-color;
stroke: $success-color;
@@ -26,6 +29,16 @@ $current-color: #409EFF;
stroke: $success-color;
}
.fail-arrow {
fill: $warning-color;
stroke: $warning-color;
}
.fail-conditional {
fill: white;
stroke: $warning-color;
}
.success.djs-connection {
.djs-visual path {
stroke: $success-color!important;
@@ -64,18 +77,90 @@ $current-color: #409EFF;
.current.djs-shape {
.djs-visual rect {
stroke: $current-color!important;
fill: $current-color!important;
stroke: $primary-color!important;
fill: $primary-color!important;
fill-opacity: 0.15!important;
}
.djs-visual polygon {
stroke: $current-color!important;
stroke: $primary-color!important;
}
.djs-visual circle {
stroke: $current-color!important;
fill: $current-color!important;
stroke: $primary-color!important;
fill: $primary-color!important;
fill-opacity: 0.15!important;
}
}
.warning.djs-connection {
.djs-visual path {
stroke: $warning-color!important;
marker-end: url(#sequenceflow-end-white-fail)!important;
}
}
.warning.djs-connection.condition-expression {
.djs-visual path {
marker-start: url(#conditional-flow-marker-white-fail)!important;
}
}
.warning.djs-shape {
.djs-visual rect {
stroke: $warning-color!important;
fill: $warning-color!important;
fill-opacity: 0.15!important;
}
.djs-visual polygon {
stroke: $warning-color!important;
}
.djs-visual path:nth-child(2) {
stroke: $warning-color!important;
fill: $warning-color!important;
}
.djs-visual circle {
stroke: $warning-color!important;
fill: $warning-color!important;
fill-opacity: 0.15!important;
}
}
.danger.djs-shape {
.djs-visual rect {
stroke: $danger-color!important;
fill: $danger-color!important;
fill-opacity: 0.15!important;
}
.djs-visual polygon {
stroke: $danger-color!important;
}
.djs-visual circle {
stroke: $danger-color!important;
fill: $danger-color!important;
fill-opacity: 0.15!important;
}
}
.cancel.djs-shape {
.djs-visual rect {
stroke: $cancel-color!important;
fill: $cancel-color!important;
fill-opacity: 0.15!important;
}
.djs-visual polygon {
stroke: $cancel-color!important;
}
.djs-visual circle {
stroke: $cancel-color!important;
fill: $cancel-color!important;
fill-opacity: 0.15!important;
}
}
@@ -83,4 +168,4 @@ $current-color: #409EFF;
.process-viewer .djs-tooltip-container, .process-viewer .djs-overlay-container, .process-viewer .djs-palette {
display: none;
}
}

69
ruoyi-ui/src/views/workflow/task/record/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="app-container">
<el-tabs tab-position="top">
<el-tab-pane label="基础信息">
<el-tabs tab-position="top" v-model="activeTagName">
<el-tab-pane label="基础信息" name="basicInfo">
<el-card class="box-card">
<!--流程处理表单模块-->
<el-col :span="16" :offset="6" v-if="variableOpen">
@@ -25,8 +25,8 @@
</div>
</el-col>
</el-card>
</el-tab-pane>
<el-tab-pane label="流转记录">
</el-tab-pane >
<el-tab-pane label="流转记录" name="flowRecord">
<el-card class="box-card">
<el-col :span="16" :offset="4">
<div class="block">
@@ -71,7 +71,7 @@
</el-col>
</el-card>
</el-tab-pane>
<el-tab-pane label="流程跟踪">
<el-tab-pane label="流程跟踪" name="processTrack">
<el-card class="box-card">
<process-viewer :key="`designer-${loadIndex}`" :style="'height:' + height" :xml="xmlData"
:finishedInfo="finishedInfo" :allCommentList="null"
@@ -198,13 +198,15 @@ export default {
data() {
return {
height: document.documentElement.clientHeight - 205 + 'px;',
activeTagName: 'basicInfo',
// 模型xml数据
loadIndex: 0,
xmlData: undefined,
finishedInfo: {
finishedSequenceFlowList: [],
finishedTaskList: [],
unfinishedTaskList: []
finishedSequenceFlowSet: [],
finishedTaskSet: [],
unfinishedTaskSet: [],
rejectedTaskSet: []
},
taskList: [],
// 部门名称
@@ -267,30 +269,17 @@ export default {
this.taskForm.taskId = this.$route.query && this.$route.query.taskId;
this.taskForm.procInsId = this.$route.query && this.$route.query.procInsId;
this.taskForm.instanceId = this.$route.query && this.$route.query.procInsId;
// 回显流程记录
this.getFlowViewer(this.taskForm.procInsId);
this.getModelDetail(this.taskForm.definitionId);
this.finished = this.$route.query && this.$route.query.finished
// 流程任务重获取变量表单
if (this.taskForm.taskId){
this.processVariables( this.taskForm.taskId)
this.getNextFlowNode(this.taskForm.taskId)
// this.getNextFlowNode(this.taskForm.taskId)
this.taskForm.deployId = null
}
this.getFlowRecordList( this.taskForm.procInsId, this.taskForm.deployId);
this.finished = this.$route.query && this.$route.query.finished
},
mounted() {
// // 表单数据回填，模拟异步请求场景
// setTimeout(() => {
// // 请求回来的表单数据
// const data = {
// field102: '18836662555'
// }
// // 回填数据
// this.fillFormData(this.formConf, data)
// // 更新表单
// this.key = +new Date().getTime()
// }, 1000)
Promise.all([this.getFlowViewer(this.taskForm.procInsId), this.getModelDetail(this.taskForm.definitionId)]).then(() => {
this.loadIndex = this.taskForm.procInsId;
});
},
methods: {
/** 查询部门下拉树结构 */
@@ -319,19 +308,26 @@ export default {
},
/** xml 文件 */
getModelDetail(definitionId) {
// 发送请求，获取xml
readXml(definitionId).then(res => {
this.xmlData = res.data
this.loadIndex = definitionId
return new Promise(resolve => {
// 发送请求，获取xml
readXml(definitionId).then(res => {
this.xmlData = res.data
resolve()
})
})
},
getFlowViewer(procInsId) {
getFlowViewer(procInsId).then(res => {
let data = res.data;
if (data) {
this.finishedInfo.finishedTaskList = data.finishedTaskList;
this.finishedInfo.unfinishedTaskList = data.unfinishedTaskList;
}
return new Promise(resolve => {
getFlowViewer(procInsId).then(res => {
let data = res.data;
if (data) {
this.finishedInfo.finishedTaskSet = data.finishedTaskSet;
this.finishedInfo.unfinishedTaskSet = data.unfinishedTaskSet;
this.finishedInfo.rejectedTaskSet = data.rejectedTaskSet;
this.finishedInfo.finishedSequenceFlowSet = data.finishedSequenceFlowSet;
}
resolve()
})
})
},
setIcon(val) {
@@ -405,7 +401,6 @@ export default {
if (taskId) {
// 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
getProcessVariables(taskId).then(res => {
// this.variables = res.data.variables;
this.variablesData = res.data.variables;
this.variableOpen = true
});