From 9cee18fb4c788638b304786c9c916fbafcf24850 Mon Sep 17 00:00:00 2001
From: yaojn <yaojn@techsure.com.cn>
Date: Tue, 29 Jul 2025 15:15:10 +0800
Subject: [PATCH] =?UTF-8?q?-=20[=E5=8A=9F=E8=83=BD]=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E9=A1=B5=E9=9D=A2=EF=BC=9A=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=AF=BC=E5=87=BA=E6=B5=81=E7=A8=8B=E5=9B=BE=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=20=20=20=20-=20[=E5=85=B3=E8=81=94]#[1475484813066240]?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B=E7=BC=96=E8=BE=91=E9=A1=B5=E9=9D=A2=EF=BC=9A?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=AF=BC=E5=87=BA=E6=B5=81=E7=A8=8B=E5=9B=BE?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=20http://192.168.0.96:8090/demo/rdm.html#/st?=
 =?UTF-8?q?ory-detail/939050947543040/939050947543042/1475484813066240?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../catalog/catalog/catalog-viewprocess.vue   |  12 +-
 .../pages/process/flow/flow-edit-new.vue      |   1 +
 .../flow/floweditor/flow-editor-toolbar.vue   | 106 +++++++++++++++++-
 .../process/task/process-topo-dialog.vue      |   1 +
 .../common/processtask-topo-dialog.vue        |   1 +
 5 files changed, 115 insertions(+), 6 deletions(-)

diff --git a/src/views/pages/process/catalog/catalog/catalog-viewprocess.vue b/src/views/pages/process/catalog/catalog/catalog-viewprocess.vue
index e40e174a..161c1f25 100644
--- a/src/views/pages/process/catalog/catalog/catalog-viewprocess.vue
+++ b/src/views/pages/process/catalog/catalog/catalog-viewprocess.vue
@@ -7,6 +7,7 @@
           mode="graph"
           :needMinimap="true"
           :readonly="true"
+          :processName="processName"
         ></FlowEditorToolbar>
       </div>
       <div v-if="isReady" style="height: calc(100vh - 334px)">
@@ -210,7 +211,8 @@ export default {
       selectLeft: [],
       showhandler: [],
       noticeList: [],
-      notifyList: []
+      notifyList: [],
+      processName: '' // 流程名称，用于导出流程图时使用，作为导出文件名
     };
   },
 
@@ -295,10 +297,10 @@ export default {
       };
       this.$api.process.process.getProcess(data).then(res => {
         if (res.Status == 'OK') {
-          let formUuid = res.Return.formUuid;
-          let config = res.Return.config;
-          this.slaList = config.process.slaList;
-          this.canvasNodeList = config.topo.nodes;
+          const { formUuid = '', config = {}, name = '' } = res?.Return || {};
+          this.slaList = config?.process?.slaList || [];
+          this.canvasNodeList = config?.topo?.nodes || [];
+          this.processName = name;
           this.getFormItem(formUuid);
           this.flowData = config;
           this.$nextTick(() => {
diff --git a/src/views/pages/process/flow/flow-edit-new.vue b/src/views/pages/process/flow/flow-edit-new.vue
index 7ae7341a..a7b449c3 100644
--- a/src/views/pages/process/flow/flow-edit-new.vue
+++ b/src/views/pages/process/flow/flow-edit-new.vue
@@ -71,6 +71,7 @@
             <FlowEditorToolbar
               :selectedNode="currentNode"
               :selectedEdge="currentEdge"
+              :processName="processName"
               :needMinimap="true"
               :graph="graph"
               mode="graph"
diff --git a/src/views/pages/process/flow/floweditor/flow-editor-toolbar.vue b/src/views/pages/process/flow/floweditor/flow-editor-toolbar.vue
index 3bda1088..5dac36e6 100644
--- a/src/views/pages/process/flow/floweditor/flow-editor-toolbar.vue
+++ b/src/views/pages/process/flow/floweditor/flow-editor-toolbar.vue
@@ -58,6 +58,7 @@
       :title="$t('term.process.seeprocessconfig')"
       @click.stop="openFlow(true)"
     ></div>
+    <div class="action-item tsfont-download" title="导出流程图" @click.stop="exportPng()"></div>
   </div>
 </template>
 <script>
@@ -85,7 +86,8 @@ export default {
       type: String,
       default: ''
     },
-    processTaskId: { type: [Number, String] } // 流程任务id
+    processTaskId: { type: [Number, String] }, // 流程任务id
+    processName: { type: String, default: '流程图' } // 流程名称
   },
   data() {
     return {
@@ -167,6 +169,108 @@ export default {
         }
         window.open(url, '_blank');
       }
+    },
+    exportPng() {
+      const getContentArea = this.graph.getContentArea();
+      this.graph.toPNG(
+        async imgBase64 => {
+          const response = await fetch(imgBase64);
+          const blob = await response.blob();
+          const url = URL.createObjectURL(blob);
+          const a = document.createElement('a');
+          a.href = url;
+          a.download = `${this.processName}.png`;
+          a.click();
+          URL.revokeObjectURL(url);
+        },
+        {
+          quality: 1,
+          padding: 100,
+          preserveDimensions: false,
+          stylesheet: `${this.$utils.convertWoff2ToBase64()} 
+         .radius-sm {
+            border-radius: 6px;
+          }
+          .border-radius {
+            border-radius: 6px;
+          }
+          .icon {
+            z-index: 1;
+          }
+          .start,
+          .end {
+            width: 40px;
+            height: 40px;
+            border-radius: 40px;
+          }
+          .start {
+            background-color: #81d5531a;
+          }
+          .end {
+            background-color: #ff625a1a;
+          }
+          .core {
+            border-radius: 18px;
+            width: 18px;
+            height: 18px;
+          }
+          .container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+          .shadow {
+            box-shadow: 0 1px 4px #0000001a;
+          }
+          [data-shape="automatic"] .container,
+          [data-shape="event"] .container,
+          [data-shape="timer"] .container,
+          [data-shape="createjob"] .container,
+          [data-shape="cientitysync"] .container,
+          [data-shape="dataconversion"] .container  {
+            border-radius: 20px;
+          }
+          `,
+          width: getContentArea.width * 2,
+          height: getContentArea.height * 2,
+          beforeSerialize: graph => {
+            this.convertSpansToSvgText(graph);
+          }
+        }
+      );
+    },
+    convertSpansToSvgText(svg) {
+      // 为保证在导出操作时字体图标能够正常显示，将原本使用 span 标签展示的字体图标，
+      // 转换为 <svg> 包裹 <text> 标签的展示形式
+      const spanList = svg.querySelectorAll('span[class^="tsfont-"]');
+      spanList.forEach(span => {
+        const classList = span.classList;
+        const className = classList.value;
+        const unicodeStr = this.$utils.getUnicodeByClassName(className);
+
+        // 获取样式
+        const style = span.style;
+        const fill = style.color;
+        const fontSize = style.fontSize;
+
+        const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svgElement.setAttribute('width', 16);
+        svgElement.setAttribute('height', 16);
+
+        // 创建 <text> 元素
+        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        text.setAttribute('font-family', 'tsfont');
+        text.setAttribute('font-size', fontSize);
+        text.setAttribute('x', '50%');
+        text.setAttribute('y', '50%');
+        text.setAttribute('text-anchor', 'middle');
+        text.setAttribute('dominant-baseline', 'middle');
+        text.setAttribute('fill', fill);
+        text.textContent = unicodeStr;
+
+        svgElement.appendChild(text);
+        span.replaceWith(svgElement); // 替换span元素为<svg><text></text></svg>
+      });
     }
   },
   filter: {},
diff --git a/src/views/pages/process/task/process-topo-dialog.vue b/src/views/pages/process/task/process-topo-dialog.vue
index d9b4d550..3ff00046 100644
--- a/src/views/pages/process/task/process-topo-dialog.vue
+++ b/src/views/pages/process/task/process-topo-dialog.vue
@@ -15,6 +15,7 @@
             :needMinimap="true"
             :flowUuid="flowUuid"
             :processTaskId="processTaskId"
+            :processName="title"
           ></FlowEditorToolbar>
         </div>
         <div style="height: calc(100vh - 334px)">
diff --git a/src/views/pages/process/task/processdetail/workorder/common/processtask-topo-dialog.vue b/src/views/pages/process/task/processdetail/workorder/common/processtask-topo-dialog.vue
index 3a070be0..bf461cde 100644
--- a/src/views/pages/process/task/processdetail/workorder/common/processtask-topo-dialog.vue
+++ b/src/views/pages/process/task/processdetail/workorder/common/processtask-topo-dialog.vue
@@ -15,6 +15,7 @@
             :readonly="true"
             :flowUuid="flowUuid"
             :processTaskId="processTaskId"
+            :processName="title"
           ></FlowEditorToolbar>
         </div>
         <div ref="flowBox" style="height: calc(100vh - 334px)">
-- 
Gitee