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 = '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '';

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
});