bug

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue

@@ -89,7 +89,7 @@ const props = defineProps({
   },
   width: {
     type: Number,
-    default: 500
+    default: 480
   },
   idEditDisabled: {
     type: Boolean,

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue

@@ -45,7 +45,7 @@ const props = defineProps({
   model: Object // 流程模型的数据
 })
 const needProps = ref({})
-const bpmnElement = ref()
+let bpmnElement
 const elementBaseInfo = ref({})
 // 流程表单的下拉框的数据
 // const forms = ref([])
@@ -59,10 +59,10 @@ const resetBaseInfo = () => {
   console.log(window, 'window')
   console.log(bpmnElement, 'bpmnElement')
 
-  bpmnElement.value = window?.bpmnInstances?.bpmnElement
-  console.log(bpmnElement.value, 'resetBaseInfo11111111111')
-  elementBaseInfo.value = bpmnElement.value.businessObject
-  needProps.value['type'] = bpmnElement.value.businessObject.$type
+  bpmnElement = window?.bpmnInstances?.bpmnElement
+  console.log(bpmnElement, 'resetBaseInfo11111111111')
+  elementBaseInfo.value = bpmnElement.businessObject
+  needProps.value['type'] = bpmnElement.businessObject.$type
   // elementBaseInfo.value['typess'] = bpmnElement.value.businessObject.$type
 
   // elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject))
@@ -113,15 +113,15 @@ const updateBaseInfo = (key) => {
   if (key === 'id') {
     console.log('jinru')
     console.log(window, 'window')
-    console.log(bpmnElement.value, 'bpmnElement')
-    console.log(toRaw(bpmnElement.value), 'bpmnElement')
-    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
+    console.log(bpmnElement, 'bpmnElement')
+    console.log(toRaw(bpmnElement), 'bpmnElement')
+    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement), {
       id: elementBaseInfo.value[key],
       di: { id: `${elementBaseInfo.value[key]}_di` }
     })
   } else {
     console.log(attrObj, 'attrObj')
-    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, attrObj)
+    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement), attrObj)
   }
 }
 onMounted(() => {
@@ -165,6 +165,6 @@ watch(
 //   }
 // }
 onBeforeUnmount(() => {
-  bpmnElement.value = null
+  bpmnElement = null
 })
 </script>

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue

@@ -11,13 +11,12 @@
       />
       <el-table-column label="操作" width="90px">
         <template #default="scope">
-          <el-button size="small" type="text" @click="openListenerForm(scope.row, scope.$index)"
+          <el-button size="small" @click="openListenerForm(scope.row, scope.$index)"
             >编辑</el-button
           >
           <el-divider direction="vertical" />
           <el-button
             size="small"
-            type="text"
             style="color: #ff4d4f"
             @click="removeListener(scope.row, scope.$index)"
             >移除</el-button
@@ -395,10 +394,15 @@ const saveListenerConfig = async () => {
     bpmnElement.value.businessObject?.extensionElements?.values?.filter(
       (ex) => ex.$type !== `${prefix}:ExecutionListener`
     ) ?? []
-  // updateElementExtensions(
-  //   bpmnElement.value,
-  //   otherExtensionList.value.concat(bpmnElementListeners.value)
-  // )
+  console.log(bpmnElement.value.height, 'bpmnElement.value')
+  console.log(
+    otherExtensionList.value.concat(bpmnElementListeners.value),
+    'otherExtensionList.value.concat(bpmnElementListeners.value).value'
+  )
+  updateElementExtensions(
+    bpmnElement.value,
+    otherExtensionList.value.concat(bpmnElementListeners.value)
+  )
   // 4. 隐藏侧边栏
   listenerFormModelVisible.value = false
   listenerForm.value = {}
@@ -407,6 +411,7 @@ const saveListenerConfig = async () => {
 watch(
   () => props.id,
   (val) => {
+    console.log(val, 'propsId变化')
     val &&
       val.length &&
       nextTick(() => {

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue

@@ -25,13 +25,16 @@ const props = defineProps({
 const documentation = ref('')
 const bpmnElement = ref()
 const updateDocumentation = () => {
-  ;(bpmnElement.value && bpmnElement.value.id === props.id) ||
-    (bpmnElement.value = window.bpmnInstances.elementRegistry.get(props.id))
-  const documentation = window.bpmnInstances.bpmnFactory.create('bpmn:Documentation', {
+  if (bpmnElement.value && bpmnElement.value.id === props.id) {
+    bpmnElement.value = window.bpmnInstances.elementRegistry.get(props.id)
+  }
+  // (bpmnElement.value && bpmnElement.value.id === props.id) ||
+  //   (bpmnElement.value = window.bpmnInstances.elementRegistry.get(props.id))
+  const documentations = window.bpmnInstances.bpmnFactory.create('bpmn:Documentation', {
     text: documentation.value
   })
   window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
-    documentation: [documentation]
+    documentation: [documentations]
   })
 }
 onBeforeUnmount(() => {

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue

@@ -6,12 +6,14 @@
       <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
       <el-table-column label="操作" width="90px">
         <template #default="scope">
-          <el-button type="text" @click="openAttributesForm(scope, scope.$index)">编辑</el-button>
+          <el-button type="text" @click="openAttributesForm(scope.row, scope.$index)"
+            >编辑</el-button
+          >
           <el-divider direction="vertical" />
           <el-button
             type="text"
             style="color: #ff4d4f"
-            @click="removeAttributes(scope, scope.$index)"
+            @click="removeAttributes(scope.roww, scope.$index)"
             >移除</el-button
           >
         </template>
@@ -84,10 +86,10 @@ const resetAttributesList = () => {
   otherExtensionList.value = [] // 其他扩展配置
   bpmnElementProperties.value =
     bpmnElement.value.businessObject?.extensionElements?.values?.filter((ex) => {
-      if (ex.$type !== `${prefix.value}:Properties`) {
+      if (ex.$type !== `${prefix}:Properties`) {
         otherExtensionList.value.push(ex)
       }
-      return ex.$type === `${prefix.value}:Properties`
+      return ex.$type === `${prefix}:Properties`
     }) ?? []
 
   // 保存所有的 扩展属性字段
@@ -116,7 +118,7 @@ const removeAttributes = (attr, index) => {
       elementPropertyList.value.splice(index, 1)
       bpmnElementPropertyList.value.splice(index, 1)
       // 新建一个属性字段的保存列表
-      const propertiesObject = window.bpmnInstances.moddle.create(`${prefix.value}:Properties`, {
+      const propertiesObject = window.bpmnInstances.moddle.create(`${prefix}:Properties`, {
         values: bpmnElementPropertyList.value
       })
       updateElementExtensions(propertiesObject)
@@ -125,8 +127,8 @@ const removeAttributes = (attr, index) => {
     .catch(() => console.info('操作取消'))
 }
 const saveAttribute = () => {
+  console.log(propertyForm.value, 'propertyForm.value')
   const { name, value } = propertyForm.value
-  console.log(bpmnElementPropertyList.value)
   if (editingPropertyIndex.value !== -1) {
     window.bpmnInstances.modeling.updateModdleProperties(
       bpmnElement.value,
@@ -138,12 +140,12 @@ const saveAttribute = () => {
     )
   } else {
     // 新建属性字段
-    const newPropertyObject = window.bpmnInstances.moddle.create(`${prefix.value}:Property`, {
+    const newPropertyObject = window.bpmnInstances.moddle.create(`${prefix}:Property`, {
       name,
       value
     })
     // 新建一个属性字段的保存列表
-    const propertiesObject = window.bpmnInstances.moddle.create(`${prefix.value}:Properties`, {
+    const propertiesObject = window.bpmnInstances.moddle.create(`${prefix}:Properties`, {
       values: bpmnElementPropertyList.value.concat([newPropertyObject])
     })
     updateElementExtensions(propertiesObject)