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

起初

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

基本用法

  • 安装依赖包
yarn add bpmn-jsyarn add bpmn-js-properties-panelyarn 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 例子