react+bpmn-js+flowable問題解決記錄

最近在做表單流程基礎服務平臺，流程設計器選用了react+bpmn-js實現，流程引擎采用flowable，實現自定義流程過程中遇到了不少坑，現將踩坑過程記錄如下，供道友們參考。

實現過程中主要參考了以下幾篇文章，在此表示感謝！
文章1：Bpmn.js 中文文檔(一)
文章2：bpmn-js（五） 線條上添加決策表達式
文章3：全網最詳bpmn.js教材-properties-panel篇(上)
文章4：前端vue+bpmn-js實現activiti的流程設計器，后端Springboot+Activiti開發工作流

一、屬性面板無法顯示問題

最初按照文章3配置，屬性面板一直不顯示，未提示任何錯誤，后來排查多次方才發現，additionalModules屬性應為數組 [propertiesPanelModule,propertiesProviderModule]，原先給寫成了對象 {propertiesPanelModule,propertiesProviderModule}，汗。。。。

二、自定義屬性面板

bpmn-js官方示例中，按照文章3 引入'bpmn-js-properties-panel/lib/provider/camunda'，添加 camunda-bpmn-moddle后，繪制流程圖生成的xml標簽都是類似"camunda:candidateUsers"，是適配camunda流程引擎的，使用xml字符串在flowable流程引擎中雖然也能部署成功，但是存在代理人、候選用戶等設置的變量${user}，流程引擎無法自動將下一步人員更新到流程中，所以自己實現flowable屬性。

1、先將需要引入的空xml模板調整為flowable定義的，我這里需要自定義流程id和名稱，就采用了下邊這種方式實現：

const xmlStr = '<?xml version="1.0" encoding="UTF-8"?>' +
    '<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" ' +
    'xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ' +
    'xmlns:xsd="http://www.w3.org/2001/XMLSchema" ' +
    'xmlns:flowable="http://flowable.org/bpmn" ' +
    'xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" ' +
    'xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" ' +
    'xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" ' +
    'typeLanguage="http://www.w3.org/2001/XMLSchema" ' +
    'expressionLanguage="http://www.w3.org/1999/XPath" ' +
    'targetNamespace="http://www.flowable.org/processdef">' +
    '<process id="$ProcessId$" name="$ProcessNm$" isExecutable="true">' +
    '</process>' +
    '<bpmndi:BPMNDiagram id="BpmnDiagram_$ProcessId$">' +
    '<bpmndi:BPMNPlane id="BpmnPlane_$ProcessId$" bpmnElement="$ProcessId$">' +
    '</bpmndi:BPMNPlane>' +
    '</bpmndi:BPMNDiagram>' +
    '</definitions>';

export const InitXml = (processId, processNm) => {
    return xmlStr.replace(/\$ProcessId\$/g, processId).replace(/\$ProcessNm\$/g, processNm);
}

2、自己寫provider，替換原來的propertiesProviderModule，直接上代碼

需要以下4個文件，BpmnPropertiesProvider.js 中定義了選項卡、屬性組，具體屬性在 AssignableProps.js 和 MultiInstanceProps.js中，對應我這里配置的用戶分配和會簽兩個屬性組。

文件結構

BpmnPropertiesProvider.js：

import inherits from 'inherits';
import {is} from 'bpmn-js/lib/util/ModelUtil';
import PropertiesActivator from 'bpmn-js-properties-panel/lib/PropertiesActivator';
import processProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/ProcessProps';
import eventProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/EventProps';
import linkProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/LinkProps';
import documentationProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/DocumentationProps';
import idProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/IdProps';
import nameProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/NameProps';
import executableProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/ExecutableProps';
import assignableProps from './Parts/AssignableProps';
import multiInstanceProps from './Parts/MultiInstanceProps';

function getIdOptions(element) {
    if (is(element, 'bpmn:Participant')) {
        return {id: 'participant-id', label: 'Participant Id'};
    }
}

function getNameOptions(element) {
    if (is(element, 'bpmn:Participant')) {
        return {id: 'participant-name', label: 'Participant Name'};
    }
}

function createGeneralTabGroups(element, canvas, bpmnFactory, elementRegistry, translate) {
    let generalGroup = {
        id: 'general',
        label: translate('General'),
        entries: []
    };
    idProps(generalGroup, element, translate, getIdOptions(element));
    nameProps(generalGroup, element, bpmnFactory, canvas, translate, getNameOptions(element));
    processProps(generalGroup, element, translate);
    // executableProps(generalGroup, element, translate);

    let detailsGroup = {
        id: 'details',
        label: translate('Details'),
        entries: []
    };
    linkProps(detailsGroup, element, translate);
    eventProps(detailsGroup, element, bpmnFactory, elementRegistry, translate);

    let documentationGroup = {
        id: 'documentation',
        label: translate('Documentation'),
        entries: []
    };
    documentationProps(documentationGroup, element, bpmnFactory, translate);

    let assignableGroup = {
        id: 'assignable',
        label: translate('task assignable'),
        entries: []
    }
    assignableProps(assignableGroup, element, translate);

    let multiInstanceGroup = {
        id: 'multiInstance',
        label: translate('multiInstance loopCharacteristics'),
        entries: []
    }
    multiInstanceProps(multiInstanceGroup, element, translate);

    return [
        generalGroup,
        detailsGroup,
        // documentationGroup
        assignableGroup,
        multiInstanceGroup
    ];
}

function createCustomizeTabGroups(element, canvas, bpmnFactory, elementRegistry, translate) {
    return [];
}

function BpmnPropertiesProvider(eventBus, canvas, bpmnFactory, elementRegistry, translate) {
    PropertiesActivator.call(this, eventBus);

    this.getTabs = function (element) {
        let generalTab = {
            id: 'general',
            label: translate('General'),
            groups: createGeneralTabGroups(element, canvas, bpmnFactory, elementRegistry, translate)
        };

/*
        let customizeTab = {
            id: 'customize',
            label: translate('customize'),
            groups: createCustomizeTabGroups(element, canvas, bpmnFactory, elementRegistry, translate)
        };
*/

        return [
            generalTab,
            // customizeTab
        ];
    };
}

BpmnPropertiesProvider.$inject = [
    'eventBus',
    'canvas',
    'bpmnFactory',
    'elementRegistry',
    'translate'
];

inherits(BpmnPropertiesProvider, PropertiesActivator);
export default BpmnPropertiesProvider;

AssignableProps.js：


import entryFactory from 'bpmn-js-properties-panel/lib/factory/EntryFactory';
import { is } from 'bpmn-js/lib/util/ModelUtil';

export default function(group, element, translate) {
    if (is(element, 'bpmn:UserTask')) {
        // 用戶任務節點
        group.entries.push(entryFactory.textField(translate, {
            id : 'assignee',
            label : translate('Assignee'),
            modelProperty : 'flowable:assignee'
        }));

        group.entries.push(entryFactory.textField(translate, {
            id : 'candidateUsers',
            label : translate('Candidate Users'),
            modelProperty : 'flowable:candidateUsers'
        }));
    }
}

MultiInstanceProps.js：

import entryFactory from 'bpmn-js-properties-panel/lib/factory/EntryFactory';
import {is} from 'bpmn-js/lib/util/ModelUtil';

export default function (group, element, translate) {
    if (is(element, 'bpmn:UserTask')) {
        // 用戶任務節點
        group.entries.push(entryFactory.selectBox(translate, {
            id: 'countersign',
            label: translate('countersign task'),
            selectOptions: [
                {value: 'false', name: translate('false')},
                {value: 'sequential', name: translate('sequential')},
                {value: 'synchronize', name: translate('synchronize')}
            ],
            modelProperty : 'flowable:countersign'
        }));
    }
}

由于設置會簽節點屬性設置比較復雜，為了減輕用戶使用難度，我在MultiInstanceProps中自定義了flowable:countersign標簽，通過監聽此標簽值的變化，自動設置取消會簽屬性，詳見問題四。

index.js：

import BpmnPropertiesProvider from './BpmnPropertiesProvider';

export default {
    __init__: [ 'propertiesProvider' ],
    propertiesProvider: [ 'type', BpmnPropertiesProvider ]
};

3、最后在初始化BpmnModeler時引入。

import propertiesProviderModule from './Provider/bpmn';

this.bpmnModeler = new BpmnModeler({
    container: '#canvas',
    propertiesPanel: {
        parent: '#properties'
    },
    height: '100vh',
    additionalModules: [
        propertiesPanelModule,
        propertiesProviderModule //在此引入
    ]
})

三、刪除屬性問題

根據文章2，通過 modeling.updateProperties(element, { 'flowable:assignee': '${user01}'}) 可以設置元素屬性，那么如何刪除已設置的屬性呢，多次嘗試發現，更新為 undefined 即可刪除：

const modeling = this.bpmnModeler.get('modeling');
let ele = internalEvent.element;
modeling.updateProperties(ele, { 'flowable:assignee': undefined})

四、會簽屬性配置問題

文章4中說明了如何設置多實例（會簽），但是 collection 和 elementVariable 屬性無法更新到xml中，flowable的屬性都是在 $attrs 中，所以應該這么設置：

loopCharacteristics = bpmnFactory.create('bpmn:MultiInstanceLoopCharacteristics');
loopCharacteristics['isSequential'] = isSequential;
//flowable屬性需要在$attrs中設置?。。?loopCharacteristics.$attrs['flowable:collection'] = collectionUsers;
loopCharacteristics.$attrs['flowable:elementVariable'] = elementVariable;
loopCharacteristics['completionCondition'] = lementHelper.createElement('bpmn:Expression', {body: '${nrOfCompletedInstances/nrOfInstances>=0.99}'}, loopCharacteristics, bpmnFactory);

modeling.updateProperties(ele, {
    'flowable:assignee': assignableUsers,
    'flowable:candidateUsers': undefined,
    loopCharacteristics: loopCharacteristics
});
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
禁止轉載，如需轉載請通過簡信或評論聯系作者。

推薦閱讀更多精彩內容