目标:集成在线流程编辑器bpmnjs
到目前为止,项目还缺少一个制作流程文件的功能。可以通过eclipse、idea中按装相应的插件制作流程图,但是本项目的目标是可以通过项目页面绘制流程图并且部署,所以需要集成web版的流程编辑器,现在有两个选择,一个是Activiti Designer,另一个是bpmnjs。别的不说,直接看效果对比。
Activiti Designer长这样,长得有点复古,并且之前用过,发现汉化的不够好,我又不会做汉化这块,所以不喜欢。
bpmnjs长这样,所以当然选bpmn了
bpmn的获取渠道:
官网:https://bpmn.io/
github:https://github.com/bpmn-io/bpmn-js-examples
因为还需要做一些改造,才能使其适用于activiti,所以我提供一个改造好的放到了码云上:https://gitee.com/study_badcat/activiti_bpmnjs
感谢慕课网“汪汪对”老师的activiti课程,我码云上的bpmnjs代码由此而来。
使用这个代码需要有点node.js、webpack和npm基础,可以了解一下。
下面开始集成进项目中。
一、下载bpmnjs代码,将文件夹改名成bpmnjs(这个无所谓,改成自己喜欢的名就行),放到activiti模块下的static目录下,如图
里边的dist和node_modules是下一步中打包出来的,这一步不应该有。
二、在bpmnjs目录下执行npm install和npm run dev命令就会出现上一步说的dist和node_modules了。其实这里bpmn下只需要dist文件夹就可以了,完全可以将bpmnjs这个项目放到别的地方去开发,开发好后打包将dist文件夹粘过来。不过因为嫌麻烦,索性就都放这了。
三、启动项目,新政一个菜单配置,请求路径这样写/bpmnjs/dist/index.html,效果如图:
至此我们初步集成了页面流程编辑器,可以在页面上绘制流程了,后边会再做一些改造,以适应需求。
这部分代码放到了码云https://gitee.com/study_badcat/ry_mp_activiti,v2.2分支。