| | |
| | | import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'; |
| | | import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll'; |
| | | import { ModuleDeclaration } from 'didi'; |
| | | import { Canvas, ModdleElement } from 'bpmn'; |
| | | import defaultXML from '@/components/BpmnDesign/assets/defaultXML'; |
| | | import type { Canvas, ModdleElement } from 'bpmn'; |
| | | import EventBus from 'diagram-js/lib/core/EventBus'; |
| | | import Overlays from 'diagram-js/lib/features/overlays/Overlays'; |
| | | import processApi from '@/api/workflow/processInstance/index'; |
| | |
| | | const bpmnVisible = ref(true); |
| | | const historyList = ref([]); |
| | | |
| | | const init = (instanceId) => { |
| | | const init = (businessKey) => { |
| | | loading.value = true; |
| | | bpmnVisible.value = true; |
| | | nextTick(async () => { |
| | |
| | | MoveCanvasModule |
| | | ] as ModuleDeclaration[] |
| | | }); |
| | | const resp = await processApi.getHistoryList(instanceId); |
| | | const resp = await processApi.getHistoryList(businessKey); |
| | | xml.value = resp.data.xml; |
| | | taskList.value = resp.data.taskList; |
| | | historyList.value = resp.data.historyList; |
| | | await createDiagram(xml.value); |
| | | loading.value = false; |
| | | }); |
| | | }; |
| | | |
| | | const initXml = (xmlStr: string) => { |
| | | loading.value = true; |
| | | bpmnVisible.value = true; |
| | | nextTick(async () => { |
| | | if (modeler.value) modeler.value.destroy(); |
| | | modeler.value = new BpmnViewer({ |
| | | container: canvas.value, |
| | | additionalModules: [ |
| | | { |
| | | //禁止滚轮滚动 |
| | | zoomScroll: ['value', ''] |
| | | }, |
| | | ZoomScrollModule, |
| | | MoveCanvasModule |
| | | ] as ModuleDeclaration[] |
| | | }); |
| | | xml.value = xmlStr; |
| | | await createDiagram(xml.value); |
| | | loading.value = false; |
| | | }); |
| | |
| | | <p>开始时间:${data.startTime || ''}</p> |
| | | <p>结束时间:${data.endTime || ''}</p> |
| | | <p>审批耗时:${data.runDuration || ''}</p> |
| | | <p>流程版本:v${data.version || ''}</p> |
| | | </div>` |
| | | }); |
| | | }; |
| | |
| | | //递归上色 |
| | | const bpmnNodeList = (flowElements, canvas) => { |
| | | flowElements.forEach((n) => { |
| | | console.log(n); |
| | | if (n.$type === 'bpmn:UserTask') { |
| | | const completeTask = taskList.value.find((m) => m.key === n.id); |
| | | console.log(completeTask); |
| | | if (completeTask) { |
| | | canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo'); |
| | | n.outgoing?.forEach((nn) => { |
| | |
| | | if (completeTask) { |
| | | canvas.addMarker(nn.id, 'highlight'); |
| | | canvas.addMarker(n.id, 'highlight'); |
| | | // return; |
| | | } |
| | | }); |
| | | } |
| | |
| | | } |
| | | }; |
| | | defineExpose({ |
| | | init |
| | | init, |
| | | initXml |
| | | }); |
| | | </script> |
| | | |
| | |
| | | } |
| | | } |
| | | .bpmn-el-container { |
| | | height: 500px; |
| | | height: calc(100vh - 350px); |
| | | } |
| | | .flow-containers { |
| | | width: 100%; |
| | |
| | | :deep(.highlight.djs-connection > .djs-visual > path) { |
| | | stroke: green !important; |
| | | } |
| | | :deep(.highlight-todo.djs-connection > .djs-visual > path) { |
| | | stroke: orange !important; |
| | | stroke-dasharray: 4px !important; |
| | | fill-opacity: 0.2 !important; |
| | | marker-end: url(#sequenceflow-end-_E7DFDF-_E7DFDF-803g1kf6zwzmcig1y2ulm5egr); |
| | | |
| | | // 边框滚动动画 |
| | | @keyframes path-animation { |
| | | from { |
| | | stroke-dashoffset: 100%; |
| | | } |
| | | |
| | | to { |
| | | stroke-dashoffset: 0%; |
| | | } |
| | | } |
| | | :deep(.highlight-todo.djs-shape .djs-visual > :nth-child(1)) { |
| | | fill: orange !important; |
| | | stroke: orange !important; |
| | | |
| | | :deep(.highlight-todo.djs-connection > .djs-visual > path) { |
| | | animation: path-animation 60s; |
| | | animation-timing-function: linear; |
| | | animation-iteration-count: infinite; |
| | | stroke-dasharray: 4px !important; |
| | | stroke: orange !important; |
| | | fill-opacity: 0.2 !important; |
| | | marker-end: url('#sequenceflow-end-_E7DFDF-_E7DFDF-803g1kf6zwzmcig1y2ulm5egr'); |
| | | } |
| | | |
| | | :deep(.highlight-todo.djs-shape .djs-visual > :nth-child(1)) { |
| | | animation: path-animation 60s; |
| | | animation-timing-function: linear; |
| | | animation-iteration-count: infinite; |
| | | stroke-dasharray: 4px !important; |
| | | stroke: orange !important; |
| | | fill: orange !important; |
| | | fill-opacity: 0.2 !important; |
| | | } |
| | | } |
| | |
| | | margin: 0; |
| | | padding: 0; |
| | | } |
| | | cursor: pointer; |
| | | } |
| | | </style> |