项目中集成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、在上面的地址中将代码拷贝到本地

2、打开下载的代码，找到package.json，将dependencies依赖都安装到项目中

3、将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下面，修改引入地址即可。

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