Merge pull request #204 from zhanglc0618/fix/lost-properties

fix: 【bpm】bpmn设计器: 组件部分属性第一次失去焦点丢失数据问题

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)
   )
 }

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<any>({}) // 监听器 注入字段 详情表单
-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(
+  const instances = bpmnInstances()
-    bpmnInstances().bpmnElement,
+  if (!instances || !instances.bpmnElement) return
-    'window.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElement'
+
-  )
+  // 直接使用原始BPMN元素，避免Vue响应式代理问题
-  bpmnElement.value = bpmnInstances().bpmnElement
+  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)
   )
 }

src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue

@@ -67,7 +67,6 @@ const elementPropertyList = ref<any[]>([])
 const propertyForm = ref<any>({})
 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) => {
+    businessObject?.extensionElements?.values?.filter((ex) => {
-    bpmnElement.value.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(
+    instances.modeling.updateModdleProperties(
-      toRaw(bpmnElement.value),
+      bpmnElement,
-      toRaw(bpmnElementPropertyList.value)[toRaw(editingPropertyIndex.value)],
+      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
   })
 }

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
   })
 }