vue 项目的bpmnjs流程设计器已经做完了，过程中稍微难点的是创建扩展属性与多实例，当然，最难的要算是自定义右侧审批界面以及事件交互；后期会继续讲各部分的自定义方法，今天先来讲，flowable 前缀的扩展属性与多实例的实现方法，直接上代码：
<code class="lang-javascript"><span class="com">//例子：创建<a href="https://www.lushuiwan.com/tag/%e6%89%a9%e5%b1%95%e5%b1%9e%e6%80%a7" title="查看更多关于扩展属性的文章" target="_blank">扩展属性</a>用于存放表单权限数据</span>
<span class="kwd">export</span> <span class="kwd">default</span><span class="pun">{</span><span class="pln">
data</span><span class="pun">()</span>
<span class="kwd">return</span><span class="pun">{</span><span class="pln">
prefix</span><span class="pun">:</span><span class="str">'flowable'</span><span class="pun">,</span><span class="pln">
moddle</span><span class="pun">:</span><span class="str">''</span><span class="pun">,</span><span class="pln">
currentElement</span><span class="pun">:</span><span class="str">''</span><span class="pun">,</span><span class="com">//当前选中的节点 element 值(shape)</span><span class="pln">
modeling</span><span class="pun">:</span><span class="str">''</span><span class="pun">,</span><span class="pln">
propertiesForm</span><span class="pun">:{</span><span class="pln">
signType</span><span class="pun">:</span><span class="str">''</span><span class="com">//串行/并行的值</span>
<span class="pun">}</span>
<span class="pun">}</span>
<span class="pun">},</span><span class="pln">
computed</span><span class="pun">:{</span><span class="pln">
descriptorPrefix</span><span class="pun">(){</span>
<span class="kwd">return</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">prefix </span><span class="pun">+</span><span class="str">':'</span>
<span class="pun">}</span>
<span class="pun">},</span><span class="pln">
methods</span><span class="pun">:{</span><span class="pln">
async createFormRight<a href="https://www.lushuiwan.com/tag/extensionelements" title="查看更多关于 ExtensionElements 的文章" target="_blank">ExtensionElements</a></span><span class="pun">(</span><span class="pln">options</span><span class="pun">){</span>
<span class="kwd">if</span><span class="pun">(</span><span class="pln">options </span><span class="pun">&&</span><span class="pln"> options</span><span class="pun">.</span><span class="pln">formRight</span><span class="pun">){</span><span class="pln">
let formRightData </span><span class="pun">=</span><span class="pln"> await </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">moddle</span><span class="pun">.</span><span class="pln">create</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">descriptorPrefix</span><span class="pun">+</span><span class="str">'Formright'</span><span class="pun">,{</span><span class="pln">
name</span><span class="pun">:</span><span class="str">'formright'</span><span class="pun">,</span><span class="pln">
uri</span><span class="pun">:</span><span class="str">'http://'</span><span class="pun">+</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">prefix</span><span class="pun">+</span><span class="str">'.org/bpmn'</span><span class="pun">,</span><span class="pln">
body</span><span class="pun">:</span><span class="pln">JSON</span><span class="pun">.</span><span class="pln">stringify</span><span class="pun">(</span><span class="pln">options</span><span class="pun">.</span><span class="pln">formRight</span><span class="pun">)</span>
<span class="pun">})</span>
<span class="kwd">this</span><span class="pun">.</span><span class="pln">create<a href="https://www.lushuiwan.com/tag/extensionelements" title="查看更多关于 ExtensionElements 的文章" target="_blank">ExtensionElements</a></span><span class="pun">([</span><span class="pln">formRightData</span><span class="pun">],</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">descriptorPrefix</span><span class="pun">+</span><span class="str">'Formright'</span><span class="pun">)</span>
<span class="pun">}</span>
<span class="pun">},</span><span class="pln">
async create<a href="https://www.lushuiwan.com/tag/extensionelements" title="查看更多关于 ExtensionElements 的文章" target="_blank">ExtensionElements</a></span><span class="pun">(</span><span class="pln">propertiesValues</span><span class="pun">,</span><span class="pln"> type</span><span class="pun">,</span><span class="pln"> targetElement</span><span class="pun">){</span><span class="pln">
let originExtensionItems </span><span class="pun">=</span><span class="pln"> await </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">deleteExtensionElement</span><span class="pun">(</span><span class="pln">type</span><span class="pun">,</span><span class="pln"> targetElement</span><span class="pun">)</span><span class="pln">
originExtensionItems </span><span class="pun">=</span><span class="pln"> propertiesValues</span><span class="pun">.</span><span class="pln">length</span><span class="pun">?</span><span class="pln">originExtensionItems</span><span class="pun">.</span><span class="pln">concat</span><span class="pun">(</span><span class="pln">propertiesValues</span><span class="pun">):</span><span class="pln">originExtensionItems
</span><span class="kwd">if</span><span class="pun">(</span><span class="pln">originExtensionItems</span><span class="pun">.</span><span class="pln">length</span><span class="pun">){</span>
<span class="kwd">const</span><span class="pln"> extensionItems </span><span class="pun">=</span><span class="pln"> await </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">moddle</span><span class="pun">.</span><span class="pln">create</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">descriptorPrefix</span><span class="pun">+</span><span class="str">"Properties"</span><span class="pun">,{</span><span class="pln">
values</span><span class="pun">:</span><span class="pln">originExtensionItems</span><span class="pun">,</span><span class="pln">
uri</span><span class="pun">:</span><span class="str">"http://"</span><span class="pun">+</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">prefix</span><span class="pun">+</span><span class="str">".org/bpmn"</span>
<span class="pun">})</span>
<span class="kwd">const</span><span class="pln"> extensions </span><span class="pun">=</span><span class="pln"> await </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">moddle</span><span class="pun">.</span><span class="pln">create</span><span class="pun">(</span><span class="str">'bpmn:<a href="https://www.lushuiwan.com/tag/extensionelements" title="查看更多关于 ExtensionElements 的文章" target="_blank">ExtensionElements</a>'</span><span class="pun">,{</span><span class="pln">values</span><span class="pun">:[</span><span class="pln">extensionItems</span><span class="pun">]})</span>
<span class="kwd">this</span><span class="pun">.</span><span class="pln">update<a href="https://www.lushuiwan.com/tag/extensionelements" title="查看更多关于 ExtensionElements 的文章" target="_blank">ExtensionElements</a></span><span class="pun">(</span><span class="pln">extensions</span><span class="pun">,</span><span class="pln"> targetElement</span><span class="pun">)</span>
<span class="pun">}</span>
<span class="pun">},</span><span class="pln">
async deleteExtensionElement</span><span class="pun">(</span><span class="pln">type</span><span class="pun">,</span><span class="pln"> targetElement</span><span class="pun">){</span><span class="pln">
let allExtensions </span><span class="pun">=</span><span class="pln"> await </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">getAllExtensions</span><span class="pun">(</span><span class="pln">targetElement</span><span class="pun">)</span><span class="pln">
allExtensions</span><span class="pun">.</span><span class="pln">forEach</span><span class="pun">((</span><span class="pln">item</span><span class="pun">,</span><span class="pln">index</span><span class="pun">)=>{</span>
<span class="kwd">if</span><span class="pun">(</span><span class="pln">item</span><span class="pun">.</span><span class="pln">$type </span><span class="pun">==</span><span class="pln"> type</span><span class="pun">){</span><span class="pln">
allExtensions</span><span class="pun">.</span><span class="pln">splice</span><span class="pun">(</span><span class="pln">index</span><span class="pun">,</span><span class="lit">1</span><span class="pun">)</span>
<span class="pun">}</span>
<span class="pun">})</span>
<span class="kwd">return</span><span class="pln"> allExtensions
</span><span class="pun">},</span><span class="pln">
getAllExtensions</span><span class="pun">(</span><span class="pln">targetElement</span><span class="pun">){</span><span class="pln">
targetElement </span><span class="pun">=</span><span class="pln"> targetElement</span><span class="pun">?</span><span class="pln">targetElement</span><span class="pun">:</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">currentElement
let extensions </span><span class="pun">=</span><span class="pln"> targetElement</span><span class="pun">.</span><span class="pln">businessObject</span><span class="pun">.</span><span class="pln">extensionElements
</span><span class="com">//这里也可以用 get()方法获取所有的<a href="https://www.lushuiwan.com/tag/%e6%89%a9%e5%b1%95%e5%b1%9e%e6%80%a7" title="查看更多关于扩展属性的文章" target="_blank">扩展属性</a>值</span>
<span class="kwd">return</span> <span class="pun">(</span><span class="pln">extensions </span><span class="pun">&&</span><span class="pln">
extensions</span><span class="pun">.</span><span class="pln">values </span><span class="pun">&&</span><span class="pln">
extensions</span><span class="pun">.</span><span class="pln">values</span><span class="pun">[</span><span class="lit">0</span><span class="pun">]</span> <span class="pun">&&</span><span class="pln">
extensions</span><span class="pun">.</span><span class="pln">values</span><span class="pun">[</span><span class="lit">0</span><span class="pun">].</span><span class="pln">values </span><span class="pun">&&</span><span class="pln">
extensions</span><span class="pun">.</span><span class="pln">values</span><span class="pun">[</span><span class="lit">0</span><span class="pun">].</span><span class="pln">values</span><span class="pun">[</span><span class="lit">0</span><span class="pun">]</span> <span class="pun">&&</span><span class="pln">
extensions</span><span class="pun">.</span><span class="pln">values</span><span class="pun">[</span><span class="lit">0</span><span class="pun">].</span><span class="pln">values </span><span class="pun">)</span> <span class="pun">||</span> <span class="pun">[]</span>
<span class="pun">},</span><span class="pln">
update<a href="https://www.lushuiwan.com/tag/extensionelements" title="查看更多关于 ExtensionElements 的文章" target="_blank">ExtensionElements</a></span><span class="pun">(</span><span class="pln">extensions</span><span class="pun">,</span><span class="pln">targetElement</span><span class="pun">){</span><span class="pln">
targetElement </span><span class="pun">=</span><span class="pln"> targetElement</span><span class="pun">?</span><span class="pln">targetElement</span><span class="pun">:</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">currentElement
</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">modeling</span><span class="pun">.</span><span class="pln">updateProperties</span><span class="pun">(</span><span class="pln">targetElement</span><span class="pun">,{</span><span class="pln">extensionElements</span><span class="pun">:</span><span class="pln">extensions</span><span class="pun">});</span>
<span class="pun">},</span>
<span class="com">//以上方法是创建<a href="https://www.lushuiwan.com/tag/%e6%89%a9%e5%b1%95%e5%b1%9e%e6%80%a7" title="查看更多关于扩展属性的文章" target="_blank">扩展属性</a>的过程，下面的方法是创建<a href="https://www.lushuiwan.com/tag/%e5%a4%9a%e5%ae%9e%e4%be%8b" title="查看更多关于多实例的文章" target="_blank">多实例</a>的过程</span><span class="pln">
update<a href="https://www.lushuiwan.com/tag/multiinstanceloopcharacte" title="查看更多关于 MultiInstanceLoopCharacte 的文章" target="_blank">MultiInstanceLoopCharacte</a>ristics</span><span class="pun">(</span><span class="pln">bool</span><span class="pun">){</span>
<span class="kwd">if</span><span class="pun">(</span><span class="pln">bool</span><span class="pun">){</span><span class="pln">
let loopCharacteristics </span><span class="pun">=</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">moddle</span><span class="pun">.</span><span class="pln">create</span><span class="pun">(</span><span class="str">"bpmn:<a href="https://www.lushuiwan.com/tag/multiinstanceloopcharacte" title="查看更多关于 MultiInstanceLoopCharacte 的文章" target="_blank">MultiInstanceLoopCharacte</a>ristics"</span><span class="pun">)</span><span class="pln">
loopCharacteristics</span><span class="pun">.</span><span class="pln">$attrs</span><span class="pun">[</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">descriptorPrefix</span><span class="pun">+</span><span class="str">'collection'</span><span class="pun">]</span> <span class="pun">=</span> <span class="str">'assigneeList'</span><span class="pln">
loopCharacteristics</span><span class="pun">.</span><span class="pln">$attrs</span><span class="pun">[</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">descriptorPrefix</span><span class="pun">+</span><span class="str">'elementVariable'</span><span class="pun">]</span> <span class="pun">=</span> <span class="str">'assignee'</span><span class="pln">
let isSequential </span><span class="pun">=</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">propertiesForm</span><span class="pun">.</span><span class="pln">signType </span><span class="pun">==</span> <span class="str">"1"</span><span class="pun">?</span> <span class="kwd">true</span> <span class="pun">:</span> <span class="kwd">false</span> <span class="com">//true 为串行一个个完成才通过</span>
<span class="com">//串行和并行</span><span class="pln">
loopCharacteristics</span><span class="pun">[</span><span class="str">'isSequential'</span><span class="pun">]</span> <span class="pun">=</span><span class="pln"> isSequential </span><span class="com">//设置是串行还是并行</span><span class="pln">
loopCharacteristics</span><span class="pun">.</span><span class="pln">$attrs</span><span class="pun">[</span><span class="str">'isSequential'</span><span class="pun">]</span> <span class="pun">=</span><span class="pln"> isSequential </span><span class="com">//属性</span><span class="pln">
let taskCondition </span><span class="pun">=</span><span class="pln"> isSequential</span><span class="pun">?</span><span class="str">'${flowTaskMultiInstance.accessCondition(execution1)}'</span> <span class="pun">:</span> <span class="str">'${flowTaskMultiInstance.accessCondition(execution2)}'</span><span class="pln">
let completionCondition </span><span class="pun">=</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">bpmnFactory</span><span class="pun">.</span><span class="pln">create</span><span class="pun">(</span><span class="str">"bpmn:FormalExpression"</span><span class="pun">,{</span><span class="pln">body</span><span class="pun">:</span><span class="pln">taskCondition</span><span class="pun">})</span>
<span class="com">//let completionCondition = this.bpmnFactory.create("bpmn:FormalExpression",{body:'${nrOfCompletedInstances == 1}'})//一个通过就行</span><span class="pln">
completionCondition</span><span class="pun">.</span><span class="pln">$parent </span><span class="pun">=</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">currentElement
loopCharacteristics</span><span class="pun">[</span><span class="str">'completionCondition'</span><span class="pun">]</span> <span class="pun">=</span><span class="pln"> completionCondition
</span><span class="com">//loopCharacteristics['inputDataItem'] = inputDataItem</span>
<span class="com">//loopCharacteristics['loopCardinality'] = loopCardinality</span>
<span class="kwd">this</span><span class="pun">.</span><span class="pln">modeling</span><span class="pun">.</span><span class="pln">updateProperties</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">currentElement</span><span class="pun">,{</span><span class="pln">loopCharacteristics</span><span class="pun">:</span><span class="pln">loopCharacteristics</span><span class="pun">});</span>
<span class="pun">}</span><span class="kwd">else</span><span class="pun">{</span>
<span class="kwd">this</span><span class="pun">.</span><span class="pln">currentElement </span><span class="pun">&&</span> <span class="kwd">delete</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">currentElement</span><span class="pun">.</span><span class="pln">businessObject</span><span class="pun">.</span><span class="pln">loopCharacteristics
</span><span class="pun">}</span>
<span class="pun">},</span>
<span class="pun">}</span>
<span class="pun">}</span></code>
基本的代码都在上面了，扩展属性是可以自定义标签名的，多实例是任务节点固有的一个标签，设置的时候是给 loopCharacteristics 赋值，都是用到 this.modeling.updateProperties 方法实现，就先讲这么多，快去试试吧
露水湾 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：bpmnjs如何创建ExtensionElements扩展属性与多实例MultiInstanceLoopCharacte
转载请注明原文链接：bpmnjs如何创建ExtensionElements扩展属性与多实例MultiInstanceLoopCharacte
