refactor: 通过ExtensionElements获取多实例类型

Author: LesanOuO

src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue

@@ -36,7 +36,7 @@
         key="multiInstance"
       >
         <template #title><Icon icon="ep:help-filled" />多实例（会签配置）</template>
-        <element-multi-instance :business-object="elementBusinessObject" :type="elementType" />
+        <element-multi-instance :id="elementId" :business-object="elementBusinessObject" :type="elementType" />
       </el-collapse-item>
       <el-collapse-item name="listeners" key="listeners">
         <template #title><Icon icon="ep:bell-filled" />执行监听器</template>

src/components/bpmnProcessDesigner/package/penal/custom-config/components/UserTask.vue

@@ -246,7 +246,7 @@ const resetCustomConfigList = () => {
     elExtensionElements.value.values?.filter(
       (ex) => ex.$type === `${prefix}:AssignEmptyUserIds`
     )?.[0] || bpmnInstances().moddle.create(`${prefix}:AssignEmptyUserIds`, { value: '' })
-  assignEmptyUserIds.value = assignEmptyUserIdsEl.value.value.split(',').map((item) => {
+  assignEmptyUserIds.value = assignEmptyUserIdsEl.value.value?.split(',').map((item) => {
     // 如果数字超出了最大安全整数范围，则将其作为字符串处理
     let num = Number(item)
     return num > Number.MAX_SAFE_INTEGER || num < -Number.MAX_SAFE_INTEGER ? item : num

src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue

@@ -106,7 +106,8 @@ defineOptions({ name: 'ElementMultiInstance' })
 
 const props = defineProps({
   businessObject: Object,
-  type: String
+  type: String,
+  id: String
 })
 const prefix = inject('prefix')
 const loopCharacteristics = ref('')
@@ -296,25 +297,17 @@ const changeConfig = (config) => {
 /**
  * -----新版本多实例-----
  */
-const approveMethod = ref(1)
+const approveMethod = ref()
 const approveRatio = ref(100)
-const getElementLoopNew = ({ loopCharacteristics }) => {
-  if (!loopCharacteristics) {
-    approveMethod.value = ApproveMethodType.RANDOM_SELECT_ONE_APPROVE
-    return
-  }
-  if (loopCharacteristics.isSequential) {
-    approveMethod.value = ApproveMethodType.SEQUENTIAL_APPROVE
-  } else {
-    if (loopCharacteristics.completionCondition.body === '${ nrOfCompletedInstances > 0 }') {
-      approveMethod.value = ApproveMethodType.ANY_APPROVE
-    }
-    if (
-      loopCharacteristics.completionCondition.body.includes('nrOfCompletedInstances/nrOfInstances')
-    ) {
-      approveMethod.value = ApproveMethodType.APPROVE_BY_RATIO
-    }
-  }
+const otherExtensions = ref()
+const getElementLoopNew = () => {
+  const extensionElements = bpmnElement.value.businessObject?.extensionElements ?? []
+  approveMethod.value = extensionElements.values.filter(
+    (ex) => ex.$type === `${prefix}:ApproveMethod`
+  )?.[0]?.value
+
+  otherExtensions.value =
+    extensionElements.values.filter((ex) => ex.$type !== `${prefix}:ApproveMethod`) ?? []
 }
 const onApproveMethodChange = () => {
   approveRatio.value = 100
@@ -324,57 +317,70 @@ const onApproveRatioChange = () => {
   updateLoopCharacteristics()
 }
 const updateLoopCharacteristics = () => {
+  // 根据ApproveMethod生成multiInstanceLoopCharacteristics节点
   if (approveMethod.value === ApproveMethodType.RANDOM_SELECT_ONE_APPROVE) {
     bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
       loopCharacteristics: null
     })
-    return
-  }
-  if (approveMethod.value === ApproveMethodType.APPROVE_BY_RATIO) {
-    multiLoopInstance.value = bpmnInstances().moddle.create(
-      'bpmn:MultiInstanceLoopCharacteristics',
-      { isSequential: false, collection: '${coll_userList}' }
-    )
-    multiLoopInstance.value.completionCondition = bpmnInstances().moddle.create(
-      'bpmn:FormalExpression',
-      {
-        body: '${ nrOfCompletedInstances/nrOfInstances >= ' + approveRatio.value / 100 + '}'
-      }
-    )
-  }
-  if (approveMethod.value === ApproveMethodType.ANY_APPROVE) {
-    multiLoopInstance.value = bpmnInstances().moddle.create(
-      'bpmn:MultiInstanceLoopCharacteristics',
-      { isSequential: false, collection: '${coll_userList}' }
-    )
-    multiLoopInstance.value.completionCondition = bpmnInstances().moddle.create(
-      'bpmn:FormalExpression',
-      {
-        body: '${ nrOfCompletedInstances > 0 }'
-      }
-    )
-  }
-  if (approveMethod.value === ApproveMethodType.SEQUENTIAL_APPROVE) {
-    multiLoopInstance.value = bpmnInstances().moddle.create(
-      'bpmn:MultiInstanceLoopCharacteristics',
-      { isSequential: true, collection: '${coll_userList}' }
-    )
-    multiLoopInstance.value.loopCardinality = bpmnInstances().moddle.create(
-      'bpmn:FormalExpression',
-      {
-        body: '1'
-      }
-    )
-    multiLoopInstance.value.completionCondition = bpmnInstances().moddle.create(
-      'bpmn:FormalExpression',
-      {
-        body: '${ nrOfCompletedInstances >= nrOfInstances }'
-      }
-    )
+  } else {
+    if (approveMethod.value === ApproveMethodType.APPROVE_BY_RATIO) {
+      multiLoopInstance.value = bpmnInstances().moddle.create(
+        'bpmn:MultiInstanceLoopCharacteristics',
+        { isSequential: false, collection: '${coll_userList}' }
+      )
+      multiLoopInstance.value.completionCondition = bpmnInstances().moddle.create(
+        'bpmn:FormalExpression',
+        {
+          body: '${ nrOfCompletedInstances/nrOfInstances >= ' + approveRatio.value / 100 + '}'
+        }
+      )
+    }
+    if (approveMethod.value === ApproveMethodType.ANY_APPROVE) {
+      multiLoopInstance.value = bpmnInstances().moddle.create(
+        'bpmn:MultiInstanceLoopCharacteristics',
+        { isSequential: false, collection: '${coll_userList}' }
+      )
+      multiLoopInstance.value.completionCondition = bpmnInstances().moddle.create(
+        'bpmn:FormalExpression',
+        {
+          body: '${ nrOfCompletedInstances > 0 }'
+        }
+      )
+    }
+    if (approveMethod.value === ApproveMethodType.SEQUENTIAL_APPROVE) {
+      multiLoopInstance.value = bpmnInstances().moddle.create(
+        'bpmn:MultiInstanceLoopCharacteristics',
+        { isSequential: true, collection: '${coll_userList}' }
+      )
+      multiLoopInstance.value.loopCardinality = bpmnInstances().moddle.create(
+        'bpmn:FormalExpression',
+        {
+          body: '1'
+        }
+      )
+      multiLoopInstance.value.completionCondition = bpmnInstances().moddle.create(
+        'bpmn:FormalExpression',
+        {
+          body: '${ nrOfCompletedInstances >= nrOfInstances }'
+        }
+      )
+    }
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      loopCharacteristics: toRaw(multiLoopInstance.value)
+    })
   }
 
+  // 添加ApproveMethod到ExtensionElements
+  const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
+    values: [
+      ...otherExtensions.value,
+      bpmnInstances().moddle.create(`${prefix}:ApproveMethod`, {
+        value: approveMethod.value
+      })
+    ]
+  })
   bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
-    loopCharacteristics: toRaw(multiLoopInstance.value)
+    extensionElements: extensions
   })
 }
 
@@ -384,11 +390,15 @@ onBeforeUnmount(() => {
 })
 
 watch(
-  () => props.businessObject,
+  () => props.id,
   (val) => {
-    bpmnElement.value = bpmnInstances().bpmnElement
-    // getElementLoop(val)
-    getElementLoopNew(val)
+    if (val) {
+      nextTick(() => {
+        bpmnElement.value = bpmnInstances().bpmnElement
+        // getElementLoop(val)
+        getElementLoopNew()
+      })
+    }
   },
   { immediate: true }
 )