这是我参与更文挑战的第19天，活动详情查看： 更文挑战

业务场景

在工作流绘制的前端开发中, bpmn-js已是当下的热门选项, 但它本身使用的是Camunda模板

国内大部分工作流系统使用的是Activiti系, 目前已和Camunda成为敌对势力

简单的流程绘制自然没问题, 但设计到例如常规参数/监听器等相关属性时, bpmn-js的默认模板无法支持, 内置的Camunda才是首选

那我们应该怎么让bpmn-js支持Activiti呢?

方案

xml分析

Camunda生成的模板, 变量是这样定义的:

<bpmn2:userTask id="firstBranchTask" name="分支任务一" camunda:assignee="${assignee}">
复制代码

activiti是这样的:

<bpmn2:userTask id="firstBranchTask" name="分支任务一" activiti:assignee="${assignee}">
复制代码

笔者大致观察了下, 目前Camunda与Activiti的区别就在于变量的前缀

所以有一个较为讨巧的解决方案: 对xml文本进行手动替换

手动替换

首先, 我们需要这样生成流程编辑器:

import propertiesPanelModule from 'bpmn-js-properties-panel';
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda';

let bpmnModeler = new BpmnModeler({
    container: canvas,
    propertiesPanel: {
      parent: '#jpanel'
    },
    additionalModules: [
      propertiesProviderModule,
      propertiesPanelModule
    ],
     moddleExtensions: {
       camunda: camundaModdleDescriptor
    }
});
        
watch: {
    'bpmnFile': {
      handler(val) {
        const string = JSON.parse(JSON.stringify(this.bpmnFile));
      // string.replace(/camunda/, 'activiti');
      this.bpmnFile = string.replace(new RegExp('camunda:', 'g'), 'activiti:');
      }
    }
  }
复制代码

在引入xml文件时, 我们手动对关键字进行替换, 以支持变量的显示:

bpmnModeler.importXML(xml.replace(new RegExp('activiti:', 'g'), 'camunda:'), err => {
    if (!err) {
        addBpmnListener();
        addModelerListener();
        addEventBusListener();
    }
});
复制代码

笔者使用的是vue进行开发, 所以我们可以利用侦听方式, 在用户编辑流程的同时, 对xml中的关键字进行处理:

watch: {
    'xml': {
        handler(val) {
            const string = JSON.parse(JSON.stringify(val));
            this.xml = string.replace(new RegExp('camunda:', 'g'), 'activiti:');
        }
    }
}
复制代码

修改源码

其实, 仔细阅读代码我们可以发现, 想要支持自定义属性, 我们其实需要完成如下两个内容即可:

1. propertiesPanelModule: 自定义属性面板实现
2. propertiesProviderModule: 自定义属性模型

官方也有示例提供, 在exmaples中可以找到

因为目前Camunda与Activiti并无太大区别, 所以笔者对于Camunda相关内容进行统一替换并打包发布到npm

可以通过yarn进行安装: yarn add houtaroy-bpmn-js-properties-panel-activiti

之后修改导入内容即可使用:

import propertiesProviderModule from 'houtaroy-bpmn-js-properties-panel-activiti/lib/provider/activiti';
复制代码

总结

bpmn-js在笔者看来属于支持Camunda, 但官方支持自定义属性的拓展

国内这方面的内容较少

希望将来可以自己维护出一套适用于Activiti的自定义属性包, 到时候会继续更新我的npm内容(毕竟现在只是简单替换Camunda)