From 65f0b2f8abac326ada7b815006abc738a428c2d9 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sun, 3 Nov 2024 22:06:35 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E3=80=91=20=E4=BF=AE=E5=A4=8D=E6=B5=81=E7=A8=8B=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=E9=9D=A2=20=E8=AF=B7=E6=B1=82=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E8=A7=86=E5=9B=BE=E6=8E=A5=E5=8F=A3=E4=B8=A4=E6=AC=A1?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/ProcessInstanceBpmnViewer.vue      | 19 +++---
 .../detail/ProcessInstanceSimpleViewer.vue    | 62 +++++++++++++------
 .../bpm/processInstance/detail/index.vue      | 23 ++++++-
 3 files changed, 72 insertions(+), 32 deletions(-)

diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
index 7ffe11b8..7d0b9593 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
+++ b/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
     }
   }
 )
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
index 0e225106..6fcad0ca 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
+++ b/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
       }
     }
   }
diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index dc9517d6..26141f53 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/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[]>([])
 /**