bpmnjs如何创建ExtensionElements扩展属性与多实例MultiInstanceLoopCharacte

vue项目的bpmnjs流程设计器已经做完了，过程中稍微难点的是创建扩展属性与多实例，当然，最难的要算是自定义右侧审批界面以及事件交互；后期会继续讲各部分的自定义方法，今天先来讲，flowable前缀的扩展属性与多实例的实现方法，直接上代码：

//例子：创建扩展属性用于存放表单权限数据
export default{
    data()
        return{
            prefix:'flowable',
            moddle:'',
            currentElement:'',//当前选中的节点element值(shape)
            modeling:'',
            propertiesForm:{
                signType:''//串行/并行的值
            }
        }
    },
    computed:{
        descriptorPrefix(){
            return this.prefix +':'
        }
    },
    methods:{
        async createFormRightExtensionElements(options){
            if(options &&  options.formRight){
                let formRightData = await this.moddle.create(this.descriptorPrefix+'Formright',{
                    name:'formright',
                    uri:'http://'+this.prefix+'.org/bpmn',
                    body:JSON.stringify(options.formRight)
                })
                this.createExtensionElements([formRightData], this.descriptorPrefix+'Formright')
            }
        },
        async createExtensionElements(propertiesValues, type, targetElement){
            let originExtensionItems = await this.deleteExtensionElement(type, targetElement)
            originExtensionItems = propertiesValues.length?originExtensionItems.concat(propertiesValues):originExtensionItems
            if(originExtensionItems.length){
                const extensionItems = await this.moddle.create(this.descriptorPrefix+"Properties",{
                    values:originExtensionItems,
                    uri:"http://"+this.prefix+".org/bpmn"
                })
                const extensions = await this.moddle.create('bpmn:ExtensionElements',{values:[extensionItems]})
                this.updateExtensionElements(extensions, targetElement)
            }
        },
        async deleteExtensionElement(type, targetElement){
            let allExtensions = await this.getAllExtensions(targetElement)
            allExtensions.forEach((item,index)=>{
                if(item.$type == type){
                    allExtensions.splice(index,1)
                }
            })
            return allExtensions
        },
        async getAllExtensions(targetElement){
            targetElement = targetElement?targetElement:this.currentElement
            let extensions = targetElement.businessObject.extensionElements
            return extensions?.values?.[0]?.values
        },
        updateExtensionElements(extensions,targetElement){
            targetElement = targetElement?targetElement:this.currentElement
            this.modeling.updateProperties(targetElement,{extensionElements:extensions});
        },
        //以上方法是创建扩展属性的过程，下面的方法是创建多实例的过程
        updateMultiInstanceLoopCharacteristics(bool){
            if(bool){
                let loopCharacteristics = this.moddle.create("bpmn:MultiInstanceLoopCharacteristics")
                loopCharacteristics.$attrs[this.descriptorPrefix+'collection'] = 'assigneeList'
                loopCharacteristics.$attrs[this.descriptorPrefix+'elementVariable'] = 'assignee'
                let isSequential = this.propertiesForm.signType == "1"? true : false //true为串行一个个完成才通过
                //串行和并行
                loopCharacteristics['isSequential'] = isSequential //设置是串行还是并行
                loopCharacteristics.$attrs['isSequential'] = isSequential //属性
                let taskCondition = isSequential?'${flowTaskMultiInstance.accessCondition(execution1)}' : '${flowTaskMultiInstance.accessCondition(execution2)}'
                let completionCondition = this.bpmnFactory.create("bpmn:FormalExpression",{body:taskCondition})
                //let completionCondition = this.bpmnFactory.create("bpmn:FormalExpression",{body:'${nrOfCompletedInstances == 1}'})//一个通过就行
                completionCondition.$parent = this.currentElement
                loopCharacteristics['completionCondition'] = completionCondition
                //loopCharacteristics['inputDataItem'] = inputDataItem
                //loopCharacteristics['loopCardinality'] = loopCardinality

                this.modeling.updateProperties(this.currentElement,{loopCharacteristics:loopCharacteristics});
            }else{
                this.currentElement && delete this.currentElement.businessObject.loopCharacteristics
            }
        },
    }
}

基本的代码都在上面了，扩展属性是可以自定义标签名的，多实例是任务节点固有的一个标签，设置的时候是给loopCharacteristics赋值，都是用到this.modeling.updateProperties方法实现，就先讲这么多，快去试试吧

引导：

关于bpmnjs+vue的更多篇章，小编已经全部整理在这里：
bpmnjs+vue中文文档API常见方法使用总结