fix: 冲突解决

2025-12-07 21:22:27 +08:00
parent 89f93d0291 2a4c774aca
commit cfb9a9b3c9
61 changed files with 2009 additions and 3203 deletions
--- 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
@@ -48,20 +48,25 @@ 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();
 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) =>
@@ -126,9 +131,11 @@ const removeListener = (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,
    ]);
@@ -146,6 +153,12 @@ const saveListenerConfig = async () => {
    false,
    prefix,
  );
+
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  const bpmnElement = instances.bpmnElement;
+
  if (editingListenerIndex.value === -1) {
    bpmnElementListeners.value.push(listenerObject);
    elementListenersList.value.push(listenerForm.value);
@@ -162,10 +175,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,
  ]);
@@ -266,6 +279,10 @@ const openProcessListenerDialog = async () => {
  processListenerSelectModalApi.setData({ type: 'execution' }).open();
 };
 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);
@@ -273,10 +290,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,
  ]);
--- 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 fieldTypeObject = ref(fieldType);
 const fieldsListOfListener = ref<any[]>([]);
 const editingListenerIndex = ref(-1);
 const editingListenerFieldIndex = ref<any>(-1);
-const bpmnElement = ref<any>();
 const bpmnElementListeners = ref<any[]>([]);
 const otherExtensionList = ref<any[]>([]);
 const listenerFormRef = ref<any>({});
@@ -56,13 +55,19 @@ const listenerFormRef = 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) =>
@@ -98,9 +103,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,
    ]);
@@ -113,7 +121,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);
@@ -130,10 +144,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,
  ]);
@@ -209,6 +223,10 @@ const openProcessListenerDialog = async () => {
  processListenerSelectModalApi.setData({ type: 'task' }).open();
 };
 const selectProcessListener = (listener: any) => {
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  const bpmnElement = instances.bpmnElement;
  const listenerForm = initListenerForm2(listener);
  listenerForm.id = listener.id;
  const listenerObject = createListenerObject(listenerForm, true, prefix);
@@ -216,11 +234,11 @@ const selectProcessListener = (listener: any) => {
  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),
  );
 };
--- 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 { confirm, useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
@@ -27,7 +27,6 @@ const prefix = inject('prefix');
 const elementPropertyList = ref<Array<{ name: string; value: string }>>([]);
 const propertyForm = ref<{ name?: string; value?: string }>({});
 const editingPropertyIndex = ref(-1);
-const bpmnElement = ref<any>();
 const otherExtensionList = ref<any[]>([]);
 const bpmnElementProperties = ref<any[]>([]);
 const bpmnElementPropertyList = ref<any[]>([]);
@@ -35,17 +34,21 @@ const attributeFormRef = ref<any>();
 const bpmnInstances = () => (window as any)?.bpmnInstances;

 const resetAttributesList = () => {
-  bpmnElement.value = bpmnInstances().bpmnElement;
-  otherExtensionList.value = [];
+  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?.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(
    (current: any) => current.values,
@@ -83,27 +86,26 @@ const saveAttribute = async () => {
  }

  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,
@@ -115,10 +117,14 @@ const saveAttribute = async () => {
 };

 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,
  });
 };
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/signal-message/SignalAndMessage.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/signal-message/SignalAndMessage.vue
@@ -50,7 +50,6 @@ const generateStandardId = (type: string): string => {
 };

 const initDataList = () => {
-  // console.log(window, 'window');
  rootElements.value = bpmnInstances().modeler.getDefinitions().rootElements;
  messageIdMap.value = {};
  signalIdMap.value = {};
@@ -143,6 +142,8 @@ const addNewObject = async () => {
    }
  }
  modelModalApi.close();
+  // 触发建模器更新以保存更改。
+  saveChanges();
  initDataList();
 };

@@ -166,6 +167,39 @@ const removeObject = (type: any, row: any) => {
  });
 };

+// 触发建模器更新以保存更改
+const saveChanges = () => {
+  const modeler = bpmnInstances().modeler;
+  if (!modeler) return;
+
+  try {
+    // 获取 canvas，通过它来触发图表的重新渲染
+    const canvas = modeler.get('canvas');
+
+    // 获取根元素（Process）
+    const rootElement = canvas.getRootElement();
+
+    // 触发 changed 事件，通知建模器数据已更改
+    const eventBus = modeler.get('eventBus');
+    if (eventBus) {
+      eventBus.fire('root.added', { element: rootElement });
+      eventBus.fire('elements.changed', { elements: [rootElement] });
+    }
+
+    // 标记建模器为已修改状态
+    const commandStack = modeler.get('commandStack');
+    if (commandStack && commandStack._stack) {
+      // 添加一个空命令以标记为已修改
+      commandStack.execute('element.updateProperties', {
+        element: rootElement,
+        properties: {},
+      });
+    }
+  } catch (error) {
+    console.warn('保存更改时出错:', error);
+  }
+};
+
 const [MessageGrid, messageGridApi] = useVbenVxeGrid({
  gridOptions: {
    columns: [
--- 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,
  });
 }