基于Bpmn-js的流程设计器校验实现

需求来源

最近一直在搞bpmn，突发奇想。既然创建流程为提高用户体验及业务的完整性应该需要校验流程的完整性，并且现实中的业务需求也需要做完整性校验。所以开始着手准备并查找资料。

同时也感谢，易样

其他废话不多说开搞

1.官方示例

npm install
npm run dev

运行效果:

基本满足也无需求

2.分析使用

结合示例源码查看分析,核心代码

new BpmnModeler() //这个地方是不是很熟悉

结合易样提供的第一种方案,进行配置

1.下载依赖

在package.json中加入如下依赖

"bpmnlint": "^6.4.0",
"bpmn-js-bpmnlint": "^0.15.0",
"bpmnlint-loader": "^0.1.4",
"file-drops": "^0.4.0",

2.新建规则文件

在项目中新建.bpmnlintrc文件，并使用该extends块从通用配置继承：

{
  "extends": "bpmnlint:recommended"
}

3*.在配置中加载程序`webpack.config.js`(这个地方跟我们项目有区别,我们使用的是vue)

在配置中加载程序`vue.config.js`

module.exports = {
     chainWebpack(config) {
         config.module
              .rule('bpmnlintrc')
              .test(/\.bpmnlintrc$/)
              .use('bpmnlint-loader')
              .loader('bpmnlint-loader')
              .end()
     }
}

这将确保您的构建可以使用bpmnlint配置文件。

4.将linter集成到bpmn-js中

import lintModule from 'bpmn-js-bpmnlint';

import BpmnModeler from 'bpmn-js/lib/Modeler';

import bpmnlintConfig from './.bpmnlintrc';//这个地方注意需要指向刚刚新建的.bpmnlintrc

var modeler = new BpmnModeler({
  linting: {
    bpmnlint: bpmnlintConfig
  },
  additionalModules: [
    lintModule
  ]
});

下边开始不一样的操作 fileDrop Vue中没听过,看下代码这不就个事件监听嘛,搞他

菜单创建一个按钮

在CustomModeler中监听事件回调

 handlerIntegrityCheck () {

      const linting = this.bpmnModeler.get('linting')
      linting.toggle(true);
    },

ok,基本效果出来了.虽然效果样式存在问题,但是已经实现检查的功能了

加入CSS样式

我看源码中引入了一个css样式我们把他复制到我们的项目中并引用

引入到我们的项目

最终效果

关注我，下一篇继续优化基于Bpmn-js的流程设计器校验实现