• -------------------------------------------------------------
  • ====================================

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

技能 dewbay 2年前 (2022-01-12) 1397次浏览 已收录 0个评论 扫描二维码

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
喜欢 (0)
[]
分享 (0)
关于作者:
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址