前言
近期因工作需要，要用bpmn.js的绘制流程图并且美化，遂用了3、4个工作日从零开始学习并完成工作。由于在学习过程中，发现关于bpmn.js的资料不是一般的少，大多数还是基础遍，实际的业务应用更是凤毛麟角。所以特此记录本次业务应用过程。
本系列文章主要讲述业务实现，bpmn.js的基础请看参考资料
参考资料
看源码
- diagram-js 是一个工具箱，用于在 web 上显示和修改图表
- bpmn-js 构建在两个重要的库之上: diagram-js 和 bpmn-moddle
- examples一般在这里找
demo
需求
- 节点加入图标节点
- 节点底色改变、文字改变
- 线条改为虚线、颜色改变
- 网关用图片替换
- 以上需求均需根据是否审批完成的状态而呈现两种颜色或图片
- 点击图片弹出弹窗显示
效果图
思路
主要通过自定义renderer添加图片，增加class与css配合改变颜色，通过vuex把接口请求来的数据传到renderer类以用于区分是否审批完成的状态而呈现两种颜色或图片
完整文件目录展示
- custom 文件用于编写自定义renderer
- utils用于存储图片及文字数据
- customRenderer.vue是用于渲染流程图
开源链接
gitee：gitee.com/zh-howe/bpm…
