内容字号: 默认 大号 超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到宋体切换到微软雅黑

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

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

//例子:创建扩展属性用于存放表单权限数据
export default{
        data(){
                return{
                      prefix:'flowable',
                      moddle:'',
                      currentElement:'',
                      modeling:'',
                      propertiesForm:{
                            isSequential:''//串行/并行
                      }
                }

        },
        computed:{
              descriptorPrefix(){
                        return this.prefix +':'
              }  
        },
        methods:{
                async createFormExtensionElements(options){
	                if(options &&  options.formRights){
		                let formRightData = await this.moddle.create(this.descriptorPrefix+'Formrights',{
			                name:'formrights',
			                uri:'http://'+this.prefix+'.org/bpmn',
			                body:JSON.stringify(options.formRights)
		                })
		                this.createExtensionElements([formRightData], this.descriptorPrefix+'Formrights')
	                }
				
                },
                async createExtensionElements(propertiesValues, type, target){
		        let originExtensionItems = await this.deleteExtensionElement(type, target)
			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, target)
			}
		},
                async deleteExtensionElement(type, target){
			let allExtensions = await this.getAllExtensions(target)
			allExtensions.forEach((item,index)=>{
			        if(item.$type == type){
					allExtensions.splice(index,1)
				}
			})
			return allExtensions
		},
                getAllExtensions(target){
			target = target?target:this.currentElement
			let extensions = target.businessObject.extensionElements
                        //这里也可以用get()方法获取所有的扩展属性值
			return (extensions &&
					extensions.values && 
					extensions.values[0] &&
					extensions.values[0].values &&
					extensions.values[0].values[0] &&
					extensions.values[0].values ) || []
		},
                updateExtensionElements(extensions,target){
			target = target?target:this.currentElement
			this.modeling.updateProperties(target,{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.isSequential== "1"? true : false //true为串行/一个个完成才通过
					
				//串行和并行
				loopCharacteristics['isSequential'] = isSequential //设置是串行还是并行
				loopCharacteristics.$attrs['isSequential'] = isSequential //属性

				let taskCondition = isSequential?'${condition}' : '${condition}'
	
				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方法实现,就先讲这么多,快去试试吧

前端新手交流群
欢迎加入web前端新手交流qq群:734802480

更多文章

相关文章

评论

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。


Copyright © 2014-2021 seozhijia.net 版权所有-粤ICP备13087626号-4