如何在项目中集成bpmn-process-designer

一、bpmn-process-designer是什么？

bpmn-process-designer是一个基于 bpmn.js，Vue 2.x 和 ElementUI 开发的流程设计器（前端部分），支持监听器，扩展属性，表单等配置，可自由扩展。我们都知道bpmn.js是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成。但是它的属性栏并不友好，例如界面不美观、没有集成前端框架，用起来不方便、UserTask的用户不支持选择，只能手动填写、各种操作功能提供了api但还是得自己去写，如下载、读取xml文件等。而bpmn-process-designer则完美的解决了这些。并且将界面美化了很多，增加了打开文件、下载文件、预览、模拟、对齐、缩放、历史记录、旋转等试图操作，支持对用户进行下拉框选择等等。总之需要的功能都有了。
可以查看示例：https://miyuesc.github.io/process-designer/
使用介绍：https://gitee.com/MiyueSC/bpmn-process-designer#https://github.com/bpmn-io/bpmn-js

二、使用步骤

1.将下面地址的代码下载到本地

https://gitee.com/MiyueSC/bpmn-process-designer#https://github.com/bpmn-io/bpmn-js

2.替换dependencies和devDependencies

打开下载的代码，找到package.json里的dependencies，将自己缺少的复制到自己dependencies，另外需要将devDependencies内的bpmn-js和bpmn-js-properties-panel复制到自己的devDependencies内，否则会报错，重新npm install

3.拷贝package目录

将package目录拷贝到您的项目中，如放在src下。这个package是核心文件夹，如果要定制化，都到这里面找。

4.在main.js引入代码

// 加载基础ElementUI，如果您的项目是基于elementUI，则这段代码不需要
import ElementUI from “element-ui”;
Vue.use(ElementUI);
import “…/package/theme/element-variables.scss”;

// 引入highlight，代码高亮插件
import { vuePlugin } from “@/highlight”;
import “highlight.js/styles/atom-one-dark-reasonable.css”;
Vue.use(vuePlugin);

// 引入bpmn-process-designer插件
import ‘@/package/theme/index.scss’
import MyPD from ‘@/package’
Vue.use(MyPD);

// 引入bpmn插件
import “bpmn-js/dist/assets/diagram-js.css”;
import “bpmn-js/dist/assets/bpmn-font/css/bpmn.css”;
import “bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css”;
注意，当引入theme/index.scss时，样式可能会冲突，进入theme，打开process-panel.scss，将 .process-panel__container 样式的结束“}”放到文件最末尾，也就是将里面的样式都包含在它里面，就不会有冲突了。

5.拷贝src

将下载的src里面的文件都拷贝到自己项目的src下面，修改引入地址即可。

5.拷贝App.vue代码

下载的src目录的App.vue就是流程图文件了，将里面的代码拷贝到自己需要使用的文件中，修改引用地址，即集成成功

注意事项

1、运行后终端会报错，注意process-designer.scss里面import的地址

2、在引入的项目中，使用ES6的新语法（?? 和 ?:），百度查目前vue 2.x不支持ES6的新语法，目前解决方法是将??改成||，?:改成:

3、面板右下角的弹窗使用的是el-drawer，其最低的element版本应为2.11.1，否则报错；用默认的关闭方法会报错，需手动设置@close

4、打开文件是通过文件名判断是否导入，若相同文件名则不再导入，在ProcessDesigner.vue内的importLocalFile方法内每次加载后清空input的value值

5、导入文件或者创建用户任务，设置任务内容时，控制台报错，原因是UserTask.vue内的参数在flowbleDescriptor.json内的name：“Assignable”没有添加相对应的参数

6、在UserTask.vue改变相对应的输入框或者选择器参数时，需要在flowbleDescriptor.json内的name：“Assignable”进行对应的修改或者添加，防止报错并且这样才会回填

7、需要引入常规等地方新的参数时，可以在flowbleDescriptor.json内引入新参数（可参考initiator）

文章有不足之处，欢迎指出改进！

参考文献：http://www.5imoban.net/jiaocheng/jquery/202107194900.html