From 8fe3e2ef8c2d2f0068aeccd8ae556dcbf1da5c88 Mon Sep 17 00:00:00 2001
From: chenxing <chenxing@bestsch.com>
Date: Fri, 9 Oct 2026 20:04:38 +0800
Subject: [PATCH] =?UTF-8?q?feat(notice):=20=E6=9F=A5=E7=9C=8B=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E5=9B=BE=E6=94=B9=20Drawer=EF=BC=88=E5=90=8E=E7=AB=AF?=
 =?UTF-8?q?=20DiagramDef=20=E5=90=8C=E6=BA=90=20PNG=20=E7=AB=96=E7=89=88?=
 =?UTF-8?q?=E7=9B=B4=E5=B5=8C+=E7=BA=B5=E5=90=91=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=EF=BC=89=E2=80=94=E2=80=94=E6=9B=BF=E6=8D=A2=20window.open=20?=
 =?UTF-8?q?=E6=B7=B1=E9=93=BE=20404=20=E5=9D=8F=E9=93=BE=EF=BC=88=E7=94=9F?=
 =?UTF-8?q?=E4=BA=A7=20/flow-center/front*=20=E6=97=A0=E6=A0=B9=E8=B7=AF?=
 =?UTF-8?q?=E7=94=B1=EF=BC=89=EF=BC=9B=E8=A7=A3=E7=BB=91=E9=9A=90=E8=97=8F?=
 =?UTF-8?q?=E5=85=A5=E5=8F=A3=E3=80=81=E6=9C=AA=E5=8F=91=E5=B8=83=E8=B5=B0?=
 =?UTF-8?q?=E9=94=99=E8=AF=AF=E6=96=87=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/notice/NewNotice.vue     | 38 ++++++++++++++++++++++++---
 src/views/notice/NoticeSetting.vue | 41 +++++++++++++++++++++++++++---
 2 files changed, 71 insertions(+), 8 deletions(-)

diff --git a/src/views/notice/NewNotice.vue b/src/views/notice/NewNotice.vue
index d31b349..80855ba 100644
--- a/src/views/notice/NewNotice.vue
+++ b/src/views/notice/NewNotice.vue
@@ -85,11 +85,20 @@ onMounted(async () => {
     }
 });
 
-/** 流程图：flow-center 示意图深链（Notice 指定到人场景用人员视图） */
+/** 流程图 Drawer（后端 DiagramDef 中转 PNG：同源免 token；与设置页同款，修复旧深链 404） */
+const flowDiagramVisible = ref(false);
+const flowDiagramSrc = computed(() =>
+    flowDiagramVisible.value && auditFlowGuid.value
+        ? `${config.serviceHost}/api/notice/flow/DiagramDef?flowGuid=${encodeURIComponent(auditFlowGuid.value)}`
+        : "",
+);
 function openFlowDiagram() {
-    if (auditFlowGuid.value) {
-        window.open(`${config.flowHost}/#/diagram?flowGuid=${auditFlowGuid.value}&mode=user`, "_blank");
-    }
+    if (!auditFlowGuid.value) return;
+    flowDiagramVisible.value = true;
+}
+function onFlowDiagramError() {
+    flowDiagramVisible.value = false;
+    Message.error("流程图加载失败（流程可能未发布或绑定已解除）");
 }
 
 /* ============ 富文本编辑器（wangeditor v5 for vue3） ============ */
@@ -408,6 +417,14 @@ async function saveEditAndLeave(data: NoticeRequest) {
                 <Button @click="isModal.timiSend = false" style="margin-left: 8px">取消</Button>
             </template>
         </Modal>
+
+        <!-- 流程图 Drawer（后端 DiagramDef 同源 PNG；竖版长图容器内纵向滚动） -->
+        <Drawer v-model="flowDiagramVisible" title="流程示意图" :width="860" :transfer="false"
+                :styles="{ body: { padding: '0' } }">
+            <div class="flow-diagram-frame">
+                <img v-if="flowDiagramSrc" :src="flowDiagramSrc" alt="流程示意图" @error="onFlowDiagramError" />
+            </div>
+        </Drawer>
         </div>
     </div>
 </template>
@@ -439,4 +456,17 @@ async function saveEditAndLeave(data: NoticeRequest) {
 .bottom-btn {
     margin-top: 6px;
 }
+/* 流程图 Drawer：浅底色 + 纵向滚动（竖版长图），图片撑满可读宽度 */
+.flow-diagram-frame {
+    height: 100%;
+    overflow: auto;
+    background: #f5f7fa;
+    padding: 12px;
+    box-sizing: border-box;
+}
+.flow-diagram-frame img {
+    display: block;
+    margin: 0 auto;
+    max-width: 100%;
+}
 </style>
diff --git a/src/views/notice/NoticeSetting.vue b/src/views/notice/NoticeSetting.vue
index febf34f..e9085b3 100644
--- a/src/views/notice/NoticeSetting.vue
+++ b/src/views/notice/NoticeSetting.vue
@@ -80,9 +80,21 @@ function unbindFlow() {
     });
 }
 
-/** 流程图（flow-center 示意图深链，与发通知页同一入口） */
-function openFlowDiagram(guid: string) {
-    if (guid) window.open(`${config.flowHost}/#/diagram?flowGuid=${guid}`, "_blank");
+/** 流程图 Drawer（后端 DiagramDef 中转 PNG：同源免 token 免跨域。修复旧深链 404——
+ *  生产前端静态挂 /flow-center/front*，Caddy 无 /flow-center/ 根路由，window.open 深链必 404） */
+const flowDiagramVisible = ref(false);
+const flowDiagramSrc = computed(() =>
+    flowDiagramVisible.value && boundFlowGuid.value
+        ? `${config.serviceHost}/api/notice/flow/DiagramDef?flowGuid=${encodeURIComponent(boundFlowGuid.value)}`
+        : "",
+);
+function openFlowDiagram() {
+    if (!boundFlowGuid.value) return;
+    flowDiagramVisible.value = true;
+}
+function onFlowDiagramError() {
+    flowDiagramVisible.value = false;
+    Message.error("流程图加载失败（流程可能未发布或绑定已解除）");
 }
 
 /** 当前绑定流程的节点摘要（下拉里回显） */
@@ -517,7 +529,7 @@ const groupH = useElementHeight(groupRegionRef);
                         已绑定
                         <Tag color="blue">{{ boundFlowName || boundFlowGuid }}</Tag>
                         <span class="node-summary">{{ boundFlowSummary }}</span>
-                        <Button type="text" size="small" @click="openFlowDiagram(boundFlowGuid)">查看流程图</Button>
+                        <Button type="text" size="small" @click="openFlowDiagram">查看流程图</Button>
                     </template>
                     <template v-else>
                         <Tag>未绑定</Tag>
@@ -528,6 +540,14 @@ const groupH = useElementHeight(groupRegionRef);
         </div>
         </div>
 
+        <!-- 流程图 Drawer（后端 DiagramDef 同源 PNG；竖版长图容器内纵向滚动） -->
+        <Drawer v-model="flowDiagramVisible" title="流程示意图" :width="860" :transfer="false"
+                :styles="{ body: { padding: '0' } }">
+            <div class="flow-diagram-frame">
+                <img v-if="flowDiagramSrc" :src="flowDiagramSrc" alt="流程示意图" @error="onFlowDiagramError" />
+            </div>
+        </Drawer>
+
         <!-- 新增发文部门 Modal（编辑走 TypeSetBox 内联编辑） -->
         <Modal v-model="deptModal" :mask-closable="false" width="450px" title="新增部门">
             <Form ref="deptFormRef" :model="deptForm" :rules="deptRule" :label-width="110">
@@ -627,4 +647,17 @@ const groupH = useElementHeight(groupRegionRef);
     margin-top: 16px;
     color: var(--text-3);
 }
+/* 流程图 Drawer：浅底色 + 纵向滚动（竖版长图），图片撑满可读宽度 */
+.flow-diagram-frame {
+    height: 100%;
+    overflow: auto;
+    background: #f5f7fa;
+    padding: 12px;
+    box-sizing: border-box;
+}
+.flow-diagram-frame img {
+    display: block;
+    margin: 0 auto;
+    max-width: 100%;
+}
 </style>