【功能优化】工作流：BPMN 流程图高亮的计算，切换到后端为主

Author: YunaiV

package.json

@@ -95,7 +95,7 @@
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "autoprefixer": "^10.4.17",
-    "bpmn-js": "8.9.0",
+    "bpmn-js": "8.10.0",
     "bpmn-js-properties-panel": "0.46.0",
     "consola": "^3.2.3",
     "eslint": "^8.57.0",

pnpm-lock.yaml

@@ -24,24 +24,23 @@ export type ProcessInstanceVO = {
 
 // 用户信息
 export type User = {
-  id: number,
-  nickname: string,
+  id: number
+  nickname: string
   avatar: string
 }
 
 // 审批任务信息
 export type ApprovalTaskInfo = {
-  id: number,
-  ownerUser: User,
-  assigneeUser: User,
-  status: number,
+  id: number
+  ownerUser: User
+  assigneeUser: User
+  status: number
   reason: string
-
 }
 
 // 审批节点信息
 export type ApprovalNodeInfo = {
-  id : number
+  id: number
   name: string
   nodeType: NodeType
   status: number
@@ -88,12 +87,22 @@ export const getProcessInstanceCopyPage = async (params: any) => {
 }
 
 // 获取审批详情
-export const getApprovalDetail = async (processInstanceId?:string, processDefinitionId?:string) => {
-  const param = processInstanceId ? '?processInstanceId='+ processInstanceId : '?processDefinitionId='+ processDefinitionId
-  return await request.get({ url: 'bpm/process-instance/get-approval-detail'+ param })
+export const getApprovalDetail = async (
+  processInstanceId?: string,
+  processDefinitionId?: string
+) => {
+  const param = processInstanceId
+    ? '?processInstanceId=' + processInstanceId
+    : '?processDefinitionId=' + processDefinitionId
+  return await request.get({ url: 'bpm/process-instance/get-approval-detail' + param })
 }
 
 // 获取表单字段权限
 export const getFormFieldsPermission = async (params: any) => {
   return await request.get({ url: '/bpm/process-instance/get-form-fields-permission', params })
 }
+
+// 获取流程实例的 BPMN 模型视图
+export const getProcessInstanceBpmnModelView = async (id: string) => {
+  return await request.get({ url: '/bpm/process-instance/get-bpmn-model-view?id=' + id })
+}

src/api/bpm/activity/index.ts

@@ -1,6 +1,6 @@
 <template>
   <div class="simple-flow-canvas" v-loading="loading">
-    <div class="simple-flow-container" >
+    <div class="simple-flow-container">
       <div class="top-area-container">
         <div class="top-actions">
           <div class="canvas-control">
@@ -15,10 +15,7 @@
         </div>
       </div>
       <div class="scale-container" :style="`transform: scale(${scaleValue / 100});`">
-        <ProcessNodeTree
-          v-if="processNodeTree"
-          v-model:flow-node="processNodeTree"
-        />
+        <ProcessNodeTree v-if="processNodeTree" v-model:flow-node="processNodeTree" />
       </div>
     </div>
     <Dialog v-model="errorDialogVisible" title="保存失败" width="400" :fullscreen="false">
@@ -49,7 +46,7 @@ import * as DeptApi from '@/api/system/dept'
 import * as PostApi from '@/api/system/post'
 import * as UserApi from '@/api/system/user'
 import * as UserGroupApi from '@/api/bpm/userGroup'
-import { fa } from 'element-plus/es/locale'
+
 defineOptions({
   name: 'SimpleProcessDesigner'
 })