【功能修复】 修复流程详情页面 请求模型视图接口两次的问题

Author: cooling-jason

src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue

@@ -6,31 +6,28 @@
 <script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
 import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
-import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 
 defineOptions({ name: 'BpmProcessInstanceBpmnViewer' })
 
 const props = defineProps({
   loading: propTypes.bool.def(false), // 是否加载中
-  id: propTypes.string, // 流程实例的编号
-  bpmnXml: propTypes.string // BPMN XML
+  bpmnXml: propTypes.string, // BPMN XML
+  modelView: propTypes.object
 })
 
 const view = ref({
   bpmnXml: ''
 }) // BPMN 流程图数据
 
+
 /** 只有 loading 完成时，才去加载流程列表 */
 watch(
-  () => props.loading,
-  async (value) => {
-    // 重置
-    view.value = {
-      bpmnXml: ''
-    }
+  () => props.modelView,
+  async (newModelView) => {
     // 加载最新
-    if (value && props.id) {
-      view.value = await ProcessInstanceApi.getProcessInstanceBpmnModelView(props.id)
+    if (newModelView) {
+      //@ts-ignore
+      view.value = newModelView
     }
   }
 )

src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue

@@ -8,45 +8,71 @@ import { propTypes } from '@/utils/propTypes'
 import { TaskStatusEnum } from '@/api/bpm/task'
 import { SimpleFlowNode, NodeType } from '@/components/SimpleProcessDesignerV2/src/consts'
 import { SimpleProcessViewer } from '@/components/SimpleProcessDesignerV2/src/'
-import * as ProcessInstanceApi from '@/api/bpm/processInstance'
-
 defineOptions({ name: 'BpmProcessInstanceSimpleViewer' })
 
 const props = defineProps({
   loading: propTypes.bool.def(false), // 是否加载中
-  id: propTypes.string // 流程实例的编号
+  modelView: propTypes.object
 })
 const simpleModel = ref()
 // 用户任务
 const tasks = ref([])
 // 流程实例
 const processInstance = ref()
-/** 只有 loading 完成时，才去加载流程列表 */
+// /** 只有 loading 完成时，才去加载流程列表 */
+// watch(
+//   () => props.loading,
+//   async (value) => {
+//     if (value && props.id) {
+//       const modelView = await ProcessInstanceApi.getProcessInstanceBpmnModelView(props.id)
+//       if (modelView) {
+//         tasks.value = modelView.tasks
+//         processInstance.value = modelView.processInstance
+//         // 已经拒绝的活动节点编号集合，只包括 UserTask
+//         const rejectedTaskActivityIds: string[] = modelView.rejectedTaskActivityIds
+//         // 进行中的活动节点编号集合， 只包括 UserTask
+//         const unfinishedTaskActivityIds: string[] = modelView.unfinishedTaskActivityIds
+//         // 已经完成的活动节点编号集合， 包括 UserTask、Gateway 等
+//         const finishedActivityIds: string[] = modelView.finishedTaskActivityIds
+//         // 已经完成的连线节点编号集合，只包括 SequenceFlow
+//         const finishedSequenceFlowActivityIds: string[] = modelView.finishedSequenceFlowActivityIds
+//         setSimpleModelNodeTaskStatus(
+//           modelView.simpleModel,
+//           modelView.processInstance.status,
+//           rejectedTaskActivityIds,
+//           unfinishedTaskActivityIds,
+//           finishedActivityIds,
+//           finishedSequenceFlowActivityIds
+//         )
+//         simpleModel.value = modelView.simpleModel
+//       }
+//     }
+//   }
+// )
 watch(
-  () => props.loading,
-  async (value) => {
-    if (value && props.id) {
-      const modelView = await ProcessInstanceApi.getProcessInstanceBpmnModelView(props.id)
-      if (modelView) {
-        tasks.value = modelView.tasks
-        processInstance.value = modelView.processInstance
+  () => props.modelView,
+  async (newModelView) => {
+    if (newModelView) {
+      if (newModelView) {
+        tasks.value = newModelView.tasks
+        processInstance.value = newModelView.processInstance
         // 已经拒绝的活动节点编号集合，只包括 UserTask
-        const rejectedTaskActivityIds: string[] = modelView.rejectedTaskActivityIds
+        const rejectedTaskActivityIds: string[] = newModelView.rejectedTaskActivityIds
         // 进行中的活动节点编号集合， 只包括 UserTask
-        const unfinishedTaskActivityIds: string[] = modelView.unfinishedTaskActivityIds
+        const unfinishedTaskActivityIds: string[] = newModelView.unfinishedTaskActivityIds
         // 已经完成的活动节点编号集合， 包括 UserTask、Gateway 等
-        const finishedActivityIds: string[] = modelView.finishedTaskActivityIds
+        const finishedActivityIds: string[] = newModelView.finishedTaskActivityIds
         // 已经完成的连线节点编号集合，只包括 SequenceFlow
-        const finishedSequenceFlowActivityIds: string[] = modelView.finishedSequenceFlowActivityIds
+        const finishedSequenceFlowActivityIds: string[] = newModelView.finishedSequenceFlowActivityIds
         setSimpleModelNodeTaskStatus(
-          modelView.simpleModel,
-          modelView.processInstance.status,
+          newModelView.simpleModel,
+          newModelView.processInstance.status,
           rejectedTaskActivityIds,
           unfinishedTaskActivityIds,
           finishedActivityIds,
           finishedSequenceFlowActivityIds
         )
-        simpleModel.value = modelView.simpleModel
+        simpleModel.value = newModelView.simpleModel
       }
     }
   }

src/views/bpm/processInstance/detail/index.vue

@@ -79,15 +79,15 @@
                 v-show="
                   processDefinition.modelType && processDefinition.modelType === BpmModelType.SIMPLE
                 "
-                :id="`${id}`"
                 :loading="processInstanceLoading"
+                :model-view="processModelView"
               />
               <ProcessInstanceBpmnViewer
                 v-show="
                   processDefinition.modelType && processDefinition.modelType === BpmModelType.BPMN
                 "
-                :id="`${id}`"
                 :loading="processInstanceLoading"
+                :model-view="processModelView"
               />
             </div>
           </el-tab-pane>
@@ -153,7 +153,7 @@ const message = useMessage() // 消息弹窗
 const processInstanceLoading = ref(false) // 流程实例的加载中
 const processInstance = ref<any>({}) // 流程实例
 const processDefinition = ref<any>({}) // 流程定义
-
+const processModelView = ref<any>({}) // 流程模型视图
 const operationButtonRef = ref() // 操作按钮组件 ref
 const auditIcons = {
   1: audit1,
@@ -173,6 +173,8 @@ const detailForm = ref({
 /** 获得详情 */
 const getDetail = () => {
   getApprovalDetail()
+
+  getProcessModelView()
 }
 
 /** 加载流程实例 */
@@ -238,6 +240,21 @@ const getApprovalDetail = async () => {
   }
 }
 
+/** 获取流程模型视图*/
+const getProcessModelView = async () => {
+
+  if (BpmModelType.BPMN === processDefinition.value?.modelType) {
+    // 重置，解决 BPMN 流程图刷新不会重新渲染问题
+    processModelView.value = {
+      bpmnXml: ''
+    }
+  }
+  const data = await ProcessInstanceApi.getProcessInstanceBpmnModelView(props.id)
+  if (data) {
+    processModelView.value = data
+  }
+}
+
 // 审批节点信息
 const activityNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([])
 /**