BPMN使用小结

内部管理系统需要多种流程设计，方便在 Web PC 手动设计业务流程，保证单个业务可以设计多个流程，并且可以进行流程跟踪的综合要求。

起初

后端有一套自己的流程引擎，解析相应的 xml，然后部署业务流程。
起初后端是想直接用 activiti-designeer 做流程设计，该方法基本满足业务需求，但后期发现这样做太麻烦，于是推荐前端使用 BPMN 插件，放在管理系统中使用，生成 xml 及 svg 字符串传给接口，保存改业务流程。

基本用法

• 安装依赖包

yarn add bpmn-js
yarn add bpmn-js-properties-panel
yarn add camunda-bpmn-moddle

• 初始化

let xml; // 我的 BPMN 2.0 xml 
let viewer =  new  BpmnJS({
    container: '#canvas',
    height: 400,
});

viewer.importXML(xml, function(err) {if (err) {console.log('error rendering:', err)
    } else {console.log('rendered:')
    }
});

React 中用法

使用了 ant-design-pro 最初搭建好的后台项目 (非 ts 版本) 搭建的项目：
BPMN React 例子

• ProcessManage

流程管理：包括看板与表单输入的流程管理实例

• processTrace

流程跟踪：可点击审批节点，获取节点 id，从而可获取当前节点详细信息的实例

遇到的问题

• 自定义节点信息表单

官网提供了一些 BPMN 实例，可以自定义单个表单 (inout、select、checkbox…)

import entryFactory from 'bpmn-js-properties-panel/lib/factory/EntryFactory';

// 编号
const BaseInfoProps = (group, element, bpmnFactory, translate) => {
    group.entries.push(
        entryFactory.textField({
            id: 'id',
            label: translate('编号'),
            modelProperty: 'id',
        })
    );

    group.entries.push(
        entryFactory.textField({
            id: 'name',
            label: translate('名称'),
            modelProperty: 'name',
            validate: function(element, values) {let validationResult = {};

                if (!values.name) {validationResult.name = '请输入节点名称';}

                if (values.name && values.name.length > 30) {validationResult.name = '名称最多 30 个字';}

                return validationResult;
            },
        })
    );
}

export default BaseInfoProps;

• No provider for "e"!

在本地联调部署都没有问题，打包到正式环境的时候，进入初始化截断，开始报以下错误:

Error: No provider for "e"! (Resolving: colorPicker -> e)

起初以为 colorPicker 中的代码不够完善，反正这个也不用，就删了吧，上线要紧，结果错误总是惊人的相似，又出现以下错误：

Error: No provider for "e"! (Resolving: propertiesPanel -> propertiesProvider -> e)
No provider for "e"! (Resolving: colorPicker -> e)

于是找到了这个网站 BPMN 问题网站，里面有一些解释，意思就是：定义的函数需要使用 $inject 来注释服务 annotate your service.

export default function ColorPicker(eventBus, contextPad, commandStack) {// ...}
ColorPicker.$inject = [
    'eventBus',
    'contextPad',
    'commandStack',
];

• 生成的 xml 位置不能进行调节，但是 svg 可以

  关于 viewBox preserveAspectRatio

  • viewBox="x, y, width, height"

 更形象的解释就是：`SVG` 就像是我们的显示器屏幕，`viewBox` 就是截屏工具选中的那个框框，最终的呈现就是把框框中的截屏内容再次在显示器中全屏显示！- `preserveAspectRatio="xMinYMin meet"`

`preserveAspectRatio` 属性的值为空格分隔的两个值组合而成。例如，上面的 `xMidYMid` 和 `meet`.

第 1 个值表示, `viewBox` 如何与 ` SVG viewport ` 对齐; 
其中，第 1 个值又是由两部分组成的。前半部分表示 x 方向对齐，后半部分表示 y 方向对齐

| -- 值 -- | -- 含义 -- |
| xMin | viewport 和 viewBox 左边对齐 |
| xMid | viewport 和 viewBox x 轴中心对齐 |
| xMax | viewport 和 viewBox 右边对齐 |
| YMin | viewport 和 viewBox 上边缘对齐。注意 Y 是大写。|
| YMid | viewport 和 viewBox y 轴中心点对齐。注意 Y 是大写。|
| YMax | viewport 和 viewBox 下边缘对齐。注意 Y 是大写。|

第 2 个值表示，如何维持高宽比（如果有）。| -- 值 -- | -- 含义 -- |
| meet | 保持纵横比缩放 viewBox 适应 viewport | 
| slice | 保持纵横比同时比例小的方向放大填满 viewport | 
| none | 扭曲纵横比以充分适应 viewport，变态 | 

网址

• BPMN 官网
• BPMN Github
• BPMN 实例
• BPMN React 例子
• BPMN React 例子