From 7366b948a3751c7eee8122432f537e5c4aa27cef Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 7 Dec 2025 12:26:03 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E3=80=90bpm=E3=80=91bpmn=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E5=99=A8:=20=E7=BB=84=E4=BB=B6=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7=E7=AC=AC=E4=B8=80=E6=AC=A1=E5=A4=B1=E5=8E=BB?=
 =?UTF-8?q?=E7=84=A6=E7=82=B9=E4=B8=A2=E5=A4=B1=E6=95=B0=E6=8D=AE=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=20#204=20=E3=80=90=E5=90=8C=E6=AD=A5=E8=87=AA=20vue3?=
 =?UTF-8?q?=20+=20element-plus=E3=80=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../penal/listeners/ElementListeners.vue      | 36 +++++++---
 .../penal/listeners/UserTaskListeners.vue     | 36 +++++++---
 .../penal/properties/ElementProperties.vue    | 65 ++++++++++---------
 .../bpmn-process-designer/package/utils.ts    |  5 +-
 4 files changed, 91 insertions(+), 51 deletions(-)

diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
index e2b88ffdb..8e68131e9 100644
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
@@ -52,7 +52,6 @@ const editingListenerIndex = ref(-1); // 监听器所在下标，-1 为新增
 const editingListenerFieldIndex = ref(-1); // 字段所在下标，-1 为新增
 const listenerTypeObject = ref(listenerType);
 const fieldTypeObject = ref(fieldType);
-const bpmnElement = ref();
 const otherExtensionList = ref();
 const bpmnElementListeners = ref();
 const listenerFormRef = ref();
@@ -60,13 +59,19 @@ const listenerFieldFormRef = ref();
 const bpmnInstances = () => (window as any)?.bpmnInstances;
 
 const resetListenersList = () => {
-  bpmnElement.value = bpmnInstances().bpmnElement;
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  // 直接使用原始BPMN元素，避免Vue响应式代理问题
+  const bpmnElement = instances.bpmnElement;
+  const businessObject = bpmnElement.businessObject;
+
   otherExtensionList.value =
-    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+    businessObject?.extensionElements?.values?.filter(
       (ex: any) => ex.$type !== `${prefix}:ExecutionListener`,
     ) ?? []; // 保留非监听器类型的扩展属性，避免移除监听器时清空其他配置（如审批人等）。相关案例：https://gitee.com/yudaocode/yudao-ui-admin-vue3/issues/ICMSYC
   bpmnElementListeners.value =
-    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+    businessObject?.extensionElements?.values?.filter(
       (ex: any) => ex.$type === `${prefix}:ExecutionListener`,
     ) ?? [];
   elementListenersList.value = bpmnElementListeners.value.map((listener: any) =>
@@ -162,9 +167,12 @@ const removeListener = (index: number) => {
     okText: '确 认',
     cancelText: '取 消',
     onOk() {
+      const instances = bpmnInstances();
+      if (!instances || !instances.bpmnElement) return;
+
       bpmnElementListeners.value.splice(index, 1);
       elementListenersList.value.splice(index, 1);
-      updateElementExtensions(bpmnElement.value, [
+      updateElementExtensions(instances.bpmnElement, [
         ...otherExtensionList.value,
         ...bpmnElementListeners.value,
       ]);
@@ -179,11 +187,17 @@ const saveListenerConfig = async () => {
   // debugger
   const validateStatus = await listenerFormRef.value.validate();
   if (!validateStatus) return; // 验证不通过直接返回
+
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  const bpmnElement = instances.bpmnElement;
   const listenerObject = createListenerObject(
     listenerForm.value,
     false,
     prefix,
   );
+
   if (editingListenerIndex.value === -1) {
     bpmnElementListeners.value.push(listenerObject);
     elementListenersList.value.push(listenerForm.value);
@@ -201,10 +215,10 @@ const saveListenerConfig = async () => {
   }
   // 保存其他配置
   otherExtensionList.value =
-    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+    bpmnElement.businessObject?.extensionElements?.values?.filter(
       (ex: any) => ex.$type !== `${prefix}:ExecutionListener`,
     ) ?? [];
-  updateElementExtensions(bpmnElement.value, [
+  updateElementExtensions(bpmnElement, [
     ...otherExtensionList.value,
     ...bpmnElementListeners.value,
   ]);
@@ -219,6 +233,10 @@ const openProcessListenerDialog = async () => {
   processListenerDialogRef.value.open('execution');
 };
 const selectProcessListener = (listener: any) => {
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  const bpmnElement = instances.bpmnElement;
   const listenerForm = initListenerForm2(listener);
   const listenerObject = createListenerObject(listenerForm, false, prefix);
   bpmnElementListeners.value.push(listenerObject);
@@ -226,10 +244,10 @@ const selectProcessListener = (listener: any) => {
 
   // 保存其他配置
   otherExtensionList.value =
-    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+    bpmnElement.businessObject?.extensionElements?.values?.filter(
       (ex: any) => ex.$type !== `${prefix}:ExecutionListener`,
     ) ?? [];
-  updateElementExtensions(bpmnElement.value, [
+  updateElementExtensions(bpmnElement, [
     ...otherExtensionList.value,
     ...bpmnElementListeners.value,
   ]);
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
index f0b48f642..2788ef29c 100644
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
@@ -48,7 +48,6 @@ const fieldsListOfListener = ref<any[]>([]);
 const editingListenerIndex = ref(-1);
 const editingListenerFieldIndex = ref<any>(-1);
 const listenerFieldForm = ref<any>({});
-const bpmnElement = ref<any>();
 const bpmnElementListeners = ref<any[]>([]);
 const otherExtensionList = ref<any[]>([]);
 const listenerFormRef = ref<any>({});
@@ -57,13 +56,19 @@ const listenerFieldFormRef = ref<any>({});
 const bpmnInstances = () => (window as any)?.bpmnInstances;
 
 const resetListenersList = () => {
-  bpmnElement.value = bpmnInstances()?.bpmnElement;
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  // 直接使用原始BPMN元素，避免Vue响应式代理问题
+  const bpmnElement = instances.bpmnElement;
+  const businessObject = bpmnElement.businessObject;
+
   otherExtensionList.value =
-    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+    businessObject?.extensionElements?.values?.filter(
       (ex: any) => ex.$type !== `${prefix}:TaskListener`,
     ) ?? [];
   bpmnElementListeners.value =
-    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+    businessObject?.extensionElements?.values?.filter(
       (ex: any) => ex.$type === `${prefix}:TaskListener`,
     ) ?? [];
   elementListenersList.value = bpmnElementListeners.value.map((listener) =>
@@ -99,9 +104,12 @@ const removeListener = (_: any, index: number) => {
     title: '提示',
     content: '确认移除该监听器吗？',
   }).then(() => {
+    const instances = bpmnInstances();
+    if (!instances || !instances.bpmnElement) return;
+
     bpmnElementListeners.value.splice(index, 1);
     elementListenersList.value.splice(index, 1);
-    updateElementExtensions(bpmnElement.value, [
+    updateElementExtensions(instances.bpmnElement, [
       ...otherExtensionList.value,
       ...bpmnElementListeners.value,
     ]);
@@ -114,7 +122,13 @@ async function saveListenerConfig() {
   } catch {
     return;
   }
+
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  const bpmnElement = instances.bpmnElement;
   const listenerObject = createListenerObject(listenerForm.value, true, prefix);
+
   if (editingListenerIndex.value === -1) {
     bpmnElementListeners.value.push(listenerObject);
     elementListenersList.value.push(listenerForm.value);
@@ -131,10 +145,10 @@ async function saveListenerConfig() {
     );
   }
   otherExtensionList.value =
-    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+    bpmnElement.businessObject?.extensionElements?.values?.filter(
       (ex: any) => ex.$type !== `${prefix}:TaskListener`,
     ) ?? [];
-  updateElementExtensions(bpmnElement.value, [
+  updateElementExtensions(bpmnElement, [
     ...otherExtensionList.value,
     ...bpmnElementListeners.value,
   ]);
@@ -229,17 +243,21 @@ const openProcessListenerDialog = async () => {
   processListenerDialogRef.value.open('task');
 };
 const selectProcessListener = (listener: any) => {
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  const bpmnElement = instances.bpmnElement;
   const listenerForm = initListenerForm2(listener);
   const listenerObject = createListenerObject(listenerForm, true, prefix);
   bpmnElementListeners.value.push(listenerObject);
   elementListenersList.value.push(listenerForm);
 
   otherExtensionList.value =
-    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+    bpmnElement.businessObject?.extensionElements?.values?.filter(
       (ex: any) => ex.$type !== `${prefix}:TaskListener`,
     ) ?? [];
   updateElementExtensions(
-    bpmnElement.value,
+    bpmnElement,
     otherExtensionList.value?.concat(bpmnElementListeners.value),
   );
 };
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/properties/ElementProperties.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/properties/ElementProperties.vue
index 26a4267f6..cc96afa68 100644
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/properties/ElementProperties.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/properties/ElementProperties.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { inject, nextTick, ref, toRaw, watch } from 'vue';
+import { inject, nextTick, ref, watch } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 import { cloneDeep } from '@vben/utils';
@@ -35,7 +35,6 @@ const elementPropertyList = ref<Array<{ name: string; value: string }>>([]);
 const propertyForm = ref<{ name?: string; value?: string }>({});
 const editingPropertyIndex = ref(-1);
 const propertyFormModelVisible = ref(false);
-const bpmnElement = ref<any>();
 const otherExtensionList = ref<any[]>([]);
 const bpmnElementProperties = ref<any[]>([]);
 const bpmnElementPropertyList = ref<any[]>([]);
@@ -43,18 +42,21 @@ const attributeFormRef = ref<any>();
 const bpmnInstances = () => (window as any)?.bpmnInstances;
 
 const resetAttributesList = () => {
-  bpmnElement.value = bpmnInstances().bpmnElement;
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  // 直接使用原始BPMN元素，避免Vue响应式代理问题
+  const bpmnElement = instances.bpmnElement;
+  const businessObject = bpmnElement.businessObject;
+
   otherExtensionList.value = []; // 其他扩展配置
   bpmnElementProperties.value =
-    // bpmnElement.value.businessObject?.extensionElements?.filter((ex) => {
-    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
-      (ex: any) => {
-        if (ex.$type !== `${prefix}:Properties`) {
-          otherExtensionList.value.push(ex);
-        }
-        return ex.$type === `${prefix}:Properties`;
-      },
-    ) ?? [];
+    businessObject?.extensionElements?.values?.filter((ex: any) => {
+      if (ex.$type !== `${prefix}:Properties`) {
+        otherExtensionList.value.push(ex);
+      }
+      return ex.$type === `${prefix}:Properties`;
+    }) ?? [];
 
   // 保存所有的 扩展属性字段
   bpmnElementPropertyList.value = bpmnElementProperties.value.flatMap(
@@ -108,27 +110,26 @@ const removeAttributes = (
 const saveAttribute = () => {
   // console.log(propertyForm.value, 'propertyForm.value');
   const { name, value } = propertyForm.value;
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  const bpmnElement = instances.bpmnElement;
+
   if (editingPropertyIndex.value === -1) {
     // 新建属性字段
-    const newPropertyObject = bpmnInstances().moddle.create(
-      `${prefix}:Property`,
-      {
-        name,
-        value,
-      },
-    );
+    const newPropertyObject = instances.moddle.create(`${prefix}:Property`, {
+      name,
+      value,
+    });
     // 新建一个属性字段的保存列表
-    const propertiesObject = bpmnInstances().moddle.create(
-      `${prefix}:Properties`,
-      {
-        values: [...bpmnElementPropertyList.value, newPropertyObject],
-      },
-    );
+    const propertiesObject = instances.moddle.create(`${prefix}:Properties`, {
+      values: [...bpmnElementPropertyList.value, newPropertyObject],
+    });
     updateElementExtensions(propertiesObject);
   } else {
-    bpmnInstances().modeling.updateModdleProperties(
-      toRaw(bpmnElement.value),
-      toRaw(bpmnElementPropertyList.value)[toRaw(editingPropertyIndex.value)],
+    instances.modeling.updateModdleProperties(
+      bpmnElement,
+      bpmnElementPropertyList.value[editingPropertyIndex.value],
       {
         name,
         value,
@@ -140,10 +141,14 @@ const saveAttribute = () => {
 };
 
 const updateElementExtensions = (properties: any) => {
-  const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  const bpmnElement = instances.bpmnElement;
+  const extensions = instances.moddle.create('bpmn:ExtensionElements', {
     values: [...otherExtensionList.value, properties],
   });
-  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+  instances.modeling.updateProperties(bpmnElement, {
     extensionElements: extensions,
   });
 };
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/utils.ts b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/utils.ts
index f1c082f1a..b8bf53277 100644
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/utils.ts
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/utils.ts
@@ -1,5 +1,3 @@
-import { toRaw } from 'vue';
-
 const bpmnInstances = () => (window as any)?.bpmnInstances;
 // 创建监听器实例
 export function createListenerObject(options, isTask, prefix) {
@@ -76,7 +74,8 @@ export function updateElementExtensions(element, extensionList) {
   const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
     values: extensionList,
   });
-  bpmnInstances().modeling.updateProperties(toRaw(element), {
+  // 直接使用原始元素对象，不需要toRaw包装
+  bpmnInstances().modeling.updateProperties(element, {
     extensionElements: extensions,
   });
 }