From 1b5a06f3a2d2488b1d14ed7a5282d7d85e21e5e9 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Fri, 5 Jun 2026 08:11:00 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20[bpm]=20web-ele=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E5=AE=A1=E6=89=B9=E7=AD=89=E6=8C=89=E9=92=AE=E4=B8=8D=E8=83=BD?=
 =?UTF-8?q?=E6=93=8D=E4=BD=9C=E7=AD=89=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpm/processInstance/detail/index.vue      | 25 ++++++++++++++++---
 .../detail/modules/bpm-viewer.vue             |  1 +
 .../detail/modules/operation-button.vue       |  1 +
 .../detail/modules/simple-bpm-viewer.vue      |  1 +
 4 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/apps/web-ele/src/views/bpm/processInstance/detail/index.vue b/apps/web-ele/src/views/bpm/processInstance/detail/index.vue
index 8e63adaf1..d5f1dcd81 100644
--- a/apps/web-ele/src/views/bpm/processInstance/detail/index.vue
+++ b/apps/web-ele/src/views/bpm/processInstance/detail/index.vue
@@ -42,7 +42,7 @@ import { registerComponent } from '#/utils';
 
 import ProcessInstanceBpmnViewer from './modules/bpm-viewer.vue';
 import ProcessInstanceOperationButton from './modules/operation-button.vue';
-import ProcessssPrint from './modules/process-print.vue';
+import ProcessPrint from './modules/process-print.vue';
 import ProcessInstanceSimpleViewer from './modules/simple-bpm-viewer.vue';
 import BpmProcessInstanceTaskList from './modules/task-list.vue';
 import ProcessInstanceTimeline from './modules/time-line.vue';
@@ -200,7 +200,7 @@ const refresh = () => {
 };
 
 const [PrintModal, printModalApi] = useVbenModal({
-  connectedComponent: ProcessssPrint,
+  connectedComponent: ProcessPrint,
   destroyOnClose: true,
 });
 
@@ -343,7 +343,12 @@ onMounted(async () => {
                 </ElCol>
               </ElRow>
             </ElTabPane>
-            <ElTabPane label="流程图" name="diagram" class="pb-20 pr-3">
+            <ElTabPane
+              label="流程图"
+              name="diagram"
+              :lazy="false"
+              class="pb-20 pr-3"
+            >
               <ProcessInstanceSimpleViewer
                 v-show="
                   processDefinition.modelType &&
@@ -420,7 +425,21 @@ onMounted(async () => {
 }
 
 :deep(.el-tabs__content) {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+:deep(.el-tab-pane) {
   flex: 1;
   overflow-y: auto;
 }
+
+/* 流程图 tab 特殊处理：需要内部 flex 布局 */
+:deep(#pane-diagram) {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
 </style>
diff --git a/apps/web-ele/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue b/apps/web-ele/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue
index 4ffbb62c0..3f86e68f3 100644
--- a/apps/web-ele/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue
+++ b/apps/web-ele/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue
@@ -33,6 +33,7 @@ watch(
       view.value = newModelView;
     }
   },
+  { immediate: true },
 );
 
 /** 监听 bpmnXml */
diff --git a/apps/web-ele/src/views/bpm/processInstance/detail/modules/operation-button.vue b/apps/web-ele/src/views/bpm/processInstance/detail/modules/operation-button.vue
index 907b73677..d2521c15d 100644
--- a/apps/web-ele/src/views/bpm/processInstance/detail/modules/operation-button.vue
+++ b/apps/web-ele/src/views/bpm/processInstance/detail/modules/operation-button.vue
@@ -280,6 +280,7 @@ async function openPopover(type: string) {
   Object.keys(popOverVisible.value).forEach((item) => {
     if (popOverVisible.value[item]) popOverVisible.value[item] = item === type;
   });
+  popOverVisible.value[type] = true;
   if (type === 'approve') {
     // 当前任务有节点表单时，等 form-create 的 fApi 就绪后再计算下一个节点；
     // 没有节点表单时，approveFormFApi 永远不会被赋值，跳过等待
diff --git a/apps/web-ele/src/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue b/apps/web-ele/src/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue
index 751f390ca..6e4c65982 100644
--- a/apps/web-ele/src/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue
+++ b/apps/web-ele/src/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue
@@ -56,6 +56,7 @@ watch(
       simpleModel.value = newModelView.simpleModel || {};
     }
   },
+  { immediate: true },
 );
 
 /** 监控模型结构数据 */