From 5e6c5c096f90ba50e708ade44697cd0277fca6b5 Mon Sep 17 00:00:00 2001 From: zhanglc Date: Mon, 1 Dec 2025 10:16:42 +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?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../penal/listeners/ElementListeners.vue | 36 ++++++++++++---- .../penal/listeners/UserTaskListeners.vue | 42 +++++++++++++------ .../penal/properties/ElementProperties.vue | 37 ++++++++++------ .../bpmnProcessDesigner/package/utils.ts | 4 +- 4 files changed, 83 insertions(+), 36 deletions(-) diff --git a/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue b/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue index 1cceb2358..c8726abc2 100644 --- a/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue +++ b/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue @@ -282,7 +282,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() @@ -290,13 +289,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) => 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) => ex.$type === `${prefix}:ExecutionListener` ) ?? [] elementListenersList.value = bpmnElementListeners.value.map((listener) => @@ -378,10 +383,13 @@ const removeListener = (index) => { cancelButtonText: '取 消' }) .then(() => { + const instances = bpmnInstances() + if (!instances || !instances.bpmnElement) return + bpmnElementListeners.value.splice(index, 1) elementListenersList.value.splice(index, 1) updateElementExtensions( - bpmnElement.value, + instances.bpmnElement, otherExtensionList.value.concat(bpmnElementListeners.value) ) }) @@ -392,7 +400,13 @@ const saveListenerConfig = async () => { // debugger let 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) @@ -402,11 +416,11 @@ const saveListenerConfig = async () => { } // 保存其他配置 otherExtensionList.value = - bpmnElement.value.businessObject?.extensionElements?.values?.filter( + bpmnElement.businessObject?.extensionElements?.values?.filter( (ex) => ex.$type !== `${prefix}:ExecutionListener` ) ?? [] updateElementExtensions( - bpmnElement.value, + bpmnElement, otherExtensionList.value.concat(bpmnElementListeners.value) ) // 4. 隐藏侧边栏 @@ -420,6 +434,10 @@ const openProcessListenerDialog = async () => { processListenerDialogRef.value.open('execution') } const selectProcessListener = (listener) => { + 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) @@ -427,11 +445,11 @@ const selectProcessListener = (listener) => { // 保存其他配置 otherExtensionList.value = - bpmnElement.value.businessObject?.extensionElements?.values?.filter( + bpmnElement.businessObject?.extensionElements?.values?.filter( (ex) => ex.$type !== `${prefix}:ExecutionListener` ) ?? [] updateElementExtensions( - bpmnElement.value, + bpmnElement, otherExtensionList.value.concat(bpmnElementListeners.value) ) } diff --git a/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue b/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue index d950f5bfe..cea9f1b52 100644 --- a/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue +++ b/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue @@ -329,7 +329,6 @@ const listenerFieldFormModelVisible = ref(false) // 监听器 注入字段表单 const editingListenerIndex = ref(-1) // 监听器所在下标，-1 为新增 const editingListenerFieldIndex = ref(-1) // 字段所在下标，-1 为新增 const listenerFieldForm = ref({}) // 监听器 注入字段 详情表单 -const bpmnElement = ref() const bpmnElementListeners = ref() const otherExtensionList = ref() const listenerFormRef = ref() @@ -337,17 +336,21 @@ const listenerFieldFormRef = ref() const bpmnInstances = () => (window as any)?.bpmnInstances const resetListenersList = () => { - console.log( - bpmnInstances().bpmnElement, - 'window.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElement' - ) - bpmnElement.value = bpmnInstances().bpmnElement + const instances = bpmnInstances() + if (!instances || !instances.bpmnElement) return + + // 直接使用原始BPMN元素，避免Vue响应式代理问题 + const bpmnElement = instances.bpmnElement + const businessObject = bpmnElement.businessObject + + console.log(bpmnElement, 'bpmnElement - resetListenersList') + otherExtensionList.value = - bpmnElement.value.businessObject?.extensionElements?.values?.filter( + businessObject?.extensionElements?.values?.filter( (ex) => ex.$type !== `${prefix}:TaskListener` ) ?? [] // 保留非监听器类型的扩展属性，避免移除监听器时清空其他配置（如审批人等）。相关案例：https://gitee.com/yudaocode/yudao-ui-admin-vue3/issues/ICMSYC bpmnElementListeners.value = - bpmnElement.value.businessObject?.extensionElements?.values?.filter( + businessObject?.extensionElements?.values?.filter( (ex) => ex.$type === `${prefix}:TaskListener` ) ?? [] elementListenersList.value = bpmnElementListeners.value.map((listener) => @@ -385,10 +388,13 @@ const removeListener = (listener, index?) => { cancelButtonText: '取 消' }) .then(() => { + const instances = bpmnInstances() + if (!instances || !instances.bpmnElement) return + bpmnElementListeners.value.splice(index, 1) elementListenersList.value.splice(index, 1) updateElementExtensions( - bpmnElement.value, + instances.bpmnElement, otherExtensionList.value.concat(bpmnElementListeners.value) ) }) @@ -398,7 +404,13 @@ const removeListener = (listener, index?) => { const saveListenerConfig = async () => { let 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, true, prefix) + if (editingListenerIndex.value === -1) { bpmnElementListeners.value.push(listenerObject) elementListenersList.value.push(listenerForm.value) @@ -408,11 +420,11 @@ const saveListenerConfig = async () => { } // 保存其他配置 otherExtensionList.value = - bpmnElement.value.businessObject?.extensionElements?.values?.filter( + bpmnElement.businessObject?.extensionElements?.values?.filter( (ex) => ex.$type !== `${prefix}:TaskListener` ) ?? [] updateElementExtensions( - bpmnElement.value, + bpmnElement, otherExtensionList.value.concat(bpmnElementListeners.value) ) // 4. 隐藏侧边栏 @@ -464,6 +476,10 @@ const openProcessListenerDialog = async () => { processListenerDialogRef.value.open('task') } const selectProcessListener = (listener) => { + 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) @@ -471,11 +487,11 @@ const selectProcessListener = (listener) => { // 保存其他配置 otherExtensionList.value = - bpmnElement.value.businessObject?.extensionElements?.values?.filter( + bpmnElement.businessObject?.extensionElements?.values?.filter( (ex) => ex.$type !== `${prefix}:TaskListener` ) ?? [] updateElementExtensions( - bpmnElement.value, + bpmnElement, otherExtensionList.value.concat(bpmnElementListeners.value) ) } diff --git a/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue b/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue index 7bf4f0ea1..49c35aa67 100644 --- a/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue +++ b/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue @@ -67,7 +67,6 @@ const elementPropertyList = ref([]) const propertyForm = ref({}) const editingPropertyIndex = ref(-1) const propertyFormModelVisible = ref(false) -const bpmnElement = ref() const otherExtensionList = ref() const bpmnElementProperties = ref() const bpmnElementPropertyList = ref() @@ -75,16 +74,21 @@ const attributeFormRef = ref() 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) => { + businessObject?.extensionElements?.values?.filter((ex) => { if (ex.$type !== `${prefix}:Properties`) { otherExtensionList.value.push(ex) } return ex.$type === `${prefix}:Properties` - }) ?? []; + }) ?? [] // 保存所有的 扩展属性字段 bpmnElementPropertyList.value = bpmnElementProperties.value.reduce( @@ -123,10 +127,15 @@ const removeAttributes = (attr, index) => { 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) { - bpmnInstances().modeling.updateModdleProperties( - toRaw(bpmnElement.value), - toRaw(bpmnElementPropertyList.value)[toRaw(editingPropertyIndex.value)], + instances.modeling.updateModdleProperties( + bpmnElement, + bpmnElementPropertyList.value[editingPropertyIndex.value], { name, value @@ -134,12 +143,12 @@ const saveAttribute = () => { ) } else { // 新建属性字段 - const newPropertyObject = bpmnInstances().moddle.create(`${prefix}:Property`, { + const newPropertyObject = instances.moddle.create(`${prefix}:Property`, { name, value }) // 新建一个属性字段的保存列表 - const propertiesObject = bpmnInstances().moddle.create(`${prefix}:Properties`, { + const propertiesObject = instances.moddle.create(`${prefix}:Properties`, { values: bpmnElementPropertyList.value.concat([newPropertyObject]) }) updateElementExtensions(propertiesObject) @@ -148,10 +157,14 @@ const saveAttribute = () => { resetAttributesList() } const updateElementExtensions = (properties) => { - 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.concat([properties]) }) - bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), { + instances.modeling.updateProperties(bpmnElement, { extensionElements: extensions }) } diff --git a/src/components/bpmnProcessDesigner/package/utils.ts b/src/components/bpmnProcessDesigner/package/utils.ts index bb6c5d529..b5f0eec1f 100644 --- a/src/components/bpmnProcessDesigner/package/utils.ts +++ b/src/components/bpmnProcessDesigner/package/utils.ts @@ -1,4 +1,3 @@ -import { toRaw } from 'vue' const bpmnInstances = () => (window as any)?.bpmnInstances // 创建监听器实例 export function createListenerObject(options, isTask, prefix) { @@ -61,7 +60,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 }) }