VUE+BPMN.JS右侧属性栏自定义功能

博主最近项目需求要实现BPMN+VUE实现流程自定义,

在完成基础功能后,要求右侧属性栏内的一些属性需要根据后端返回内容进行动态渲染,

这时候,用原来的属性栏明显就不满足需求,我找到的大部分博客包括官方都是建议你根据项目需求来全部重写一个属性栏.但是项目时间紧的情况下这种方式不可取

于是我们的思路就变为了基于BPMN原有属性栏上进行二次封装,

由于博主项目是VUE2+ElementUI+BPMN.js,我就按照我的项目为例来讲

我们的思路是,第一步:用ElementUI写一个模态框(或者抽屉或者页面),在页面上与后端交互,拿到数据,这里就不描述了,有点基础的同学应该都会写,博主这里实现图如下

,

第二步:根据我们的需求,拿到需要的属性栏内的input框,博主这里需求是拿到用户任务里的代理人,候选用户,候选组,

博主的思路是:在页面画出组件的时候,我们通过查看他的html结构,能拿到属性栏在页面上的数据,通过获取他的id,拿到这个input框,

首先, this.bpmnModeler为BPMN实例,通过实例里面的eventBUS.on方法开启事件总线,对eventTypes(这里博主定义的是点击事件和change事件)进行监听,通过测试我们得知,创建新流程每一步都会触发change事件

需要注意的是foreach方法会让this指向进行改变,我们需要先拿到vue实例,即下列代码中的_this

具体代码如下

然后,加个判断条件(如果eventType=='element.Changed')的时候,我们拿到节点,即shape

通过测试的值,节点的type(类型)为bpmn:UserTask的时候,是名为用户任务的节点,然后在这里我们拿到三个输入框(代理人,候选人,候选组),这里用setTimeout是因为在changeed第一时间节点并没有渲染出来,必须等节点渲染出来后再去拿到节点

然后在图一的界面中对数据进行更改,

第三步:让数据与节点数据进行交互

在emelent的自带关闭函数中

我们进行操作,在页面关闭的时候,我们通过,get方法拿到图形注册表,通过图形注册表拿到当前节点,

然后通过get方法拿到modeing实例,通过万能的updateProperties方法来对数据进行替换

modeling.updateProperties(当前节点,{

需要替换的属性名字:'数据'

})

代码如下:

这样就完成交互