From d923a70cb4abe4b17cc20a97570aa74b1c525d06 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Fri, 19 Jun 2026 21:30:27 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20[bpm]=20simple=20=E8=AE=BE=E8=AE=A1?=
 =?UTF-8?q?=E5=99=A8=E5=AF=BC=E5=85=A5=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/simple-process-model.vue               | 11 +++++++++++
 .../components/simple-process-model.vue               | 11 +++++++++++
 .../components/simple-process-model.vue               | 11 +++++++++++
 3 files changed, 33 insertions(+)

diff --git a/apps/web-antd/src/views/bpm/components/simple-process-design/components/simple-process-model.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/simple-process-model.vue
index 7679c9316..f6674dcf0 100644
--- a/apps/web-antd/src/views/bpm/components/simple-process-design/components/simple-process-model.vue
+++ b/apps/web-antd/src/views/bpm/components/simple-process-design/components/simple-process-model.vue
@@ -179,14 +179,24 @@ function exportJson() {
 
 /** 导入 JSON */
 const refFile = ref();
+/** 导入后自增，作为 ProcessNodeTree 的 key，强制重新挂载以保证画布刷新 */
+const importKey = ref(0);
 function importJson() {
   refFile.value.click();
 }
 function importLocalFile() {
   const file = refFile.value.files[0];
+  // 清空 input 的 value，否则再次选择同一个文件时 change 事件不会触发
+  refFile.value.value = '';
+  if (!file) {
+    return;
+  }
   file.text().then((result: any) => {
     if (isString(result)) {
       processNodeTree.value = JSON.parse(result);
+      // 改变 key，强制 ProcessNodeTree 重新挂载，
+      // 规避 watch(() => props.flowNode) 在组件复用场景下同步失效导致画布不刷新的问题
+      importKey.value++;
       emits('save', processNodeTree.value);
     }
   });
@@ -244,6 +254,7 @@ onMounted(() => {
     >
       <ProcessNodeTree
         v-if="processNodeTree"
+        :key="importKey"
         v-model:flow-node="processNodeTree"
       />
     </div>
diff --git a/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/simple-process-model.vue b/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/simple-process-model.vue
index b5e58f3d6..dbfece5f4 100644
--- a/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/simple-process-model.vue
+++ b/apps/web-antdv-next/src/views/bpm/components/simple-process-design/components/simple-process-model.vue
@@ -179,14 +179,24 @@ function exportJson() {
 
 /** 导入 JSON */
 const refFile = ref();
+/** 导入后自增，作为 ProcessNodeTree 的 key，强制重新挂载以保证画布刷新 */
+const importKey = ref(0);
 function importJson() {
   refFile.value.click();
 }
 function importLocalFile() {
   const file = refFile.value.files[0];
+  // 清空 input 的 value，否则再次选择同一个文件时 change 事件不会触发
+  refFile.value.value = '';
+  if (!file) {
+    return;
+  }
   file.text().then((result: any) => {
     if (isString(result)) {
       processNodeTree.value = JSON.parse(result);
+      // 改变 key，强制 ProcessNodeTree 重新挂载，
+      // 规避 watch(() => props.flowNode) 在组件复用场景下同步失效导致画布不刷新的问题
+      importKey.value++;
       emits('save', processNodeTree.value);
     }
   });
@@ -244,6 +254,7 @@ onMounted(() => {
     >
       <ProcessNodeTree
         v-if="processNodeTree"
+        :key="importKey"
         v-model:flow-node="processNodeTree"
       />
     </div>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/simple-process-model.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/simple-process-model.vue
index d4fa3b152..ef477c4f1 100644
--- a/apps/web-ele/src/views/bpm/components/simple-process-design/components/simple-process-model.vue
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/simple-process-model.vue
@@ -179,14 +179,24 @@ function exportJson() {
 
 /** 导入 JSON */
 const refFile = ref();
+/** 导入后自增，作为 ProcessNodeTree 的 key，强制重新挂载以保证画布刷新 */
+const importKey = ref(0);
 function importJson() {
   refFile.value.click();
 }
 function importLocalFile() {
   const file = refFile.value.files[0];
+  // 清空 input 的 value，否则再次选择同一个文件时 change 事件不会触发
+  refFile.value.value = '';
+  if (!file) {
+    return;
+  }
   file.text().then((result: any) => {
     if (isString(result)) {
       processNodeTree.value = JSON.parse(result);
+      // 改变 key，强制 ProcessNodeTree 重新挂载，
+      // 规避 watch(() => props.flowNode) 在组件复用场景下同步失效导致画布不刷新的问题
+      importKey.value++;
       emits('save', processNodeTree.value);
     }
   });
@@ -244,6 +254,7 @@ onMounted(() => {
     >
       <ProcessNodeTree
         v-if="processNodeTree"
+        :key="importKey"
         v-model:flow-node="processNodeTree"
       />
     </div>