hhyykk/ipms-sjy
1
1
Fork 0
mirror of https://gitee.com/hhyykk/ipms-sjy.git synced 2025-07-15 19:45:06 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

修改流程图的高亮实现，采用 activity 替代 task 作为数据源

Browse Source
This commit is contained in:
YunaiV
2022-01-19 08:54:54 +08:00
parent 676e4f29d9
commit 8e18a63d34
8 changed files with 131 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
yudao-admin-ui/src/api/bpm/activity.js Normal file
View File

@ -0,0 +1,9 @@
import request from '@/utils/request'
export function getActivityList(query) {
return request({
url: '/bpm/activity/list',
method: 'get',
params: query
})
}

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

@ -82,24 +82,27 @@ export default {
},
/* 高亮流程图 */
async highlightDiagram() {
if (this.tasks.length === 0) {
return;
}
if (!this.bpmnModeler.getDefinitions().rootElements[0].flowElements) {
// let tasks = this.tasks.filter(task => {
// if (task.type !== 'sequenceFlow') { // 去除连线元素
// return true;
// }
// });
let tasks = this.tasks;
if (tasks.length === 0) {
return;
}
// 参考自 https://gitee.com/tony2y/RuoYi-flowable/blob/master/ruoyi-ui/src/components/Process/index.vue#L222 实现
let canvas = this.bpmnModeler.get('canvas');
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]
let completeTask = tasks.find(m => m.key === n.id)
let todoTask = tasks.find(m => !m.endTime)
let endTask = tasks[tasks.length - 1]
if (n.$type === 'bpmn:UserTask') { // 用户任务
if (completeTask) {
canvas.addMarker(n.id, completeTask.endTime ? 'highlight' : 'highlight-todo');
// console.log(n.id + ' : ' + (completeTask.endTime ? 'highlight' : 'highlight-todo'));
n.outgoing?.forEach(nn => {
let targetTask = this.tasks.find(m => m.definitionKey === nn.targetRef.id)
let targetTask = tasks.find(m => m.key === nn.targetRef.id)
if (targetTask) {
canvas.addMarker(nn.id, targetTask.endTime ? 'highlight' : 'highlight-todo');
} else if (nn.targetRef.$type === 'bpmn:ExclusiveGateway') {
@ -107,7 +110,7 @@ export default {
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) {
if (!todoTask && endTask.key === n.id) {
canvas.addMarker(nn.id, 'highlight');
canvas.addMarker(nn.targetRef.id, 'highlight');
}
@ -120,7 +123,7 @@ export default {
}
} else if (n.$type === 'bpmn:ExclusiveGateway') { // 排它网关
n.outgoing?.forEach(nn => {
let targetTask = this.tasks.find(m => m.definitionKey === nn.targetRef.id)
let targetTask = tasks.find(m => m.key === nn.targetRef.id)
if (targetTask) {
canvas.addMarker(nn.id, targetTask.endTime ? 'highlight' : 'highlight-todo');
}
@ -129,7 +132,7 @@ export default {
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)
const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
if (targetTask) {
canvas.addMarker(nn.id, targetTask.endTime ? 'highlight' : 'highlight-todo')
canvas.addMarker(nn.targetRef.id, targetTask.endTime ? 'highlight' : 'highlight-todo')
@ -138,7 +141,7 @@ export default {
}
} else if (n.$type === 'bpmn:StartEvent') { // 开始节点
n.outgoing?.forEach(nn => {
let completeTask = this.tasks.find(m => m.definitionKey === nn.targetRef.id)
let completeTask = tasks.find(m => m.key === nn.targetRef.id)
if (completeTask) {
canvas.addMarker(nn.id, 'highlight');
canvas.addMarker(n.id, 'highlight');
@ -146,7 +149,7 @@ export default {
}
});
} else if (n.$type === 'bpmn:EndEvent') { // 结束节点
if (endTask.definitionKey === n.id && endTask.endTime) {
if (endTask.key === n.id && endTask.endTime) {
canvas.addMarker(n.id, 'highlight')
return
}

14
yudao-admin-ui/src/views/bpm/processInstance/detail.vue
View File

@ -73,7 +73,7 @@
<div slot="header" class="clearfix">
<span class="el-icon-picture-outline">流程图</span>
</div>
<my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" :taskData="tasks" />
<my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" :taskData="activityList" />
</el-card>
<!-- 对话框(转派审批人) -->
@ -103,6 +103,7 @@ import {createProcessInstance, getProcessInstance} from "@/api/bpm/processInstan
import {approveTask, getTaskListByProcessInstanceId, rejectTask, updateTaskAssignee} from "@/api/bpm/task";
import {getDate} from "@/utils/dateUtils";
import {listSimpleUsers} from "@/api/system/user";
import {getActivityList} from "@/api/bpm/activity";
// 流程实例的详情页，可用于审批
export default {
@ -128,6 +129,7 @@ export default {
bpmnControlForm: {
prefix: "activiti"
},
activityList: [],
// 审批记录
tasksLoad: true,
@ -196,12 +198,18 @@ export default {
if (val) {
item.__config__.defaultValue = val
}
})
});
// 加载流程图
getProcessDefinitionBpmnXML(this.processInstance.processDefinition.id).then(response => {
this.bpmnXML = response.data
})
});
// 加载活动列表
getActivityList({
processInstanceId: this.processInstance.id
}).then(response => {
this.activityList = response.data;
});
// 取消加载中
this.processInstanceLoading = false;