文章目录
一、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