|
|
|
|
@ -0,0 +1,151 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div ref="bpmnContainer" class="bpmn-container"></div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script lang="ts" setup name="processInfo">
|
|
|
|
|
import { definitionXml
|
|
|
|
|
} from '@/api/workflow/processDefinition';
|
|
|
|
|
import { getHistoryList } from '@/api/workflow/processInstance';
|
|
|
|
|
import { ref, onMounted, watch } from 'vue';
|
|
|
|
|
import BpmnViewer from 'bpmn-js/lib/Viewer'; // 引入 BpmnViewer
|
|
|
|
|
import BpmnModeler from 'bpmn-js/lib/Modeler';
|
|
|
|
|
let diagramXML = null;
|
|
|
|
|
let bpmnViewer = null;
|
|
|
|
|
const bpmnContainer = ref(null);
|
|
|
|
|
// 定义 props
|
|
|
|
|
const props = ref([]);
|
|
|
|
|
const initializeBpmnViewer = async () => {
|
|
|
|
|
const resp = await definitionXml('ceshi:1:1888121144965664769');
|
|
|
|
|
diagramXML = resp.data.xmlStr;
|
|
|
|
|
bpmnViewer = new BpmnModeler({
|
|
|
|
|
container: bpmnContainer.value,
|
|
|
|
|
// 禁用编辑功能
|
|
|
|
|
additionalModules: [
|
|
|
|
|
// {
|
|
|
|
|
// // 禁用工具栏
|
|
|
|
|
// paletteProvider: ['value', null], // 将 paletteProvider 设置为 null
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// // 禁用右键菜单
|
|
|
|
|
// contextPadProvider: ['value', null], // 将 contextPadProvider 设置为 null
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// // 禁用拖拽和连线
|
|
|
|
|
// modeling: ['value', {}], // 禁用 modeling 模块的部分功能
|
|
|
|
|
// },
|
|
|
|
|
],
|
|
|
|
|
});
|
|
|
|
|
const resp1 = await getHistoryList('1889223417401753602');
|
|
|
|
|
console.log(resp1.data)
|
|
|
|
|
props.value = resp1.data.historyList;
|
|
|
|
|
await bpmnViewer.importXML(diagramXML,null, (err) => {
|
|
|
|
|
if (err) {
|
|
|
|
|
|
|
|
|
|
console.error('Failed to render BPMN diagram', err);
|
|
|
|
|
} else {
|
|
|
|
|
console.log('BPMN diagram rendered successfully');
|
|
|
|
|
highlightApprovalNodes();
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
// highlightApprovalNodes();
|
|
|
|
|
applyNodeStyles();
|
|
|
|
|
};
|
|
|
|
|
// 获取流程各节点状态
|
|
|
|
|
const getNodeStatus = async () => {
|
|
|
|
|
|
|
|
|
|
// console.log(props.value)
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 高亮审批节点
|
|
|
|
|
const highlightApprovalNodes = () => {
|
|
|
|
|
const elementRegistry = bpmnViewer.get('elementRegistry');
|
|
|
|
|
const modeling = bpmnViewer.get('modeling');
|
|
|
|
|
// 假设审批节点的类型是 'bpmn:UserTask'
|
|
|
|
|
const approvalNodes = elementRegistry.filter((element) => element.type === 'bpmn:UserTask');
|
|
|
|
|
approvalNodes.forEach((node) => {
|
|
|
|
|
modeling.setColor(node, {
|
|
|
|
|
fill: '#f8f8f8', // 设置填充颜色
|
|
|
|
|
stroke: '#ff0000', // 设置边框颜色
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 根据节点状态设置样式
|
|
|
|
|
const applyNodeStyles = () => {
|
|
|
|
|
const elementRegistry = bpmnViewer.get('elementRegistry');
|
|
|
|
|
const modeling = bpmnViewer.get('modeling');
|
|
|
|
|
|
|
|
|
|
// 遍历节点状态
|
|
|
|
|
console.log(modeling)
|
|
|
|
|
props.value.forEach((e) => {
|
|
|
|
|
console.log(e.taskDefinitionKey)
|
|
|
|
|
console.log(e.status)
|
|
|
|
|
const element = elementRegistry.get(e.taskDefinitionKey);
|
|
|
|
|
console.log(element)
|
|
|
|
|
if (element) {
|
|
|
|
|
let fill, stroke, color;
|
|
|
|
|
switch (e.status) {
|
|
|
|
|
case '已处理':
|
|
|
|
|
fill = '#d4f7d4'; // 完成状态：绿色背景
|
|
|
|
|
stroke = '#28a745'; // 绿色边框
|
|
|
|
|
break;
|
|
|
|
|
case 'in-progress':
|
|
|
|
|
fill = '#fff3cd'; // 进行中状态：黄色背景
|
|
|
|
|
stroke = '#ffc107'; // 黄色边框
|
|
|
|
|
break;
|
|
|
|
|
case '已驳回':
|
|
|
|
|
fill = '#f8d7da'; // 错误状态：红色背景
|
|
|
|
|
stroke = '#dc3545'; // 红色边框
|
|
|
|
|
break;
|
|
|
|
|
default:
|
|
|
|
|
fill = '#f8f9fa'; // 默认状态：灰色背景
|
|
|
|
|
stroke = '#6c757d'; // 灰色边框
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// modeler模式设置节点样式
|
|
|
|
|
modeling.setColor(element, {
|
|
|
|
|
fill,
|
|
|
|
|
stroke,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
// 监听 diagramXML 的变化，动态更新流程图
|
|
|
|
|
watch(
|
|
|
|
|
() => diagramXML,
|
|
|
|
|
(newXML) => {
|
|
|
|
|
if (bpmnViewer) {
|
|
|
|
|
bpmnViewer.importXML(newXML, (err) => {
|
|
|
|
|
if (err) {
|
|
|
|
|
console.error('Failed to update BPMN diagram', err);
|
|
|
|
|
} else {
|
|
|
|
|
console.log('BPMN diagram updated successfully');
|
|
|
|
|
highlightApprovalNodes(); // 高亮审批节点
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
// 组件挂载时初始化 BpmnViewer
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
initializeBpmnViewer();
|
|
|
|
|
getNodeStatus();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 组件卸载时销毁 BpmnViewer
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
|
if (bpmnViewer) {
|
|
|
|
|
bpmnViewer.destroy();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.bpmn-container {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 600px;
|
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
maxw@mesnac.com
4 months ago