springboot+activiti7+react实现模仿钉钉功能的审批流(一、开篇)

前言  

• 写点文章记录下自己流程平台完成的过程，一是做点笔记，以后用到的话随时查阅，二是其中部分实现本人觉得不是最优方案，拿出来交流学习下，欢迎评论和交流一起学习进步。
• 从20年4月份开始做技术选型，我也是从那时候开始接触流程引擎和activiti，所以直接就用了最新的版本7，然后一步一步的研究和摸索。一个人前后端全套做下来，核心功能开发前前后后总的大概花了4个多月吧，基本上是995+自己周末花时间研究的，后面也陆续在修改bug和功能优化，现目前核心功能基本可用，其他功能还在不断打磨、补充和优化。。。
• 因为是自己一个人苦逼的前后端全栈式开发，就选了自己最熟悉的技术栈了；当然，全栈开发的好处是省了前后端沟通的时间，审批流和流程引擎的业务还是有点麻烦的，特别是bpmn规范上，如果是前后端不是一个人开发的话，前后端都要知道bpmn规范。
• 鸣谢一下：刚接触的时候连bpmn规范都不清楚，从头开始学的，开发中也遇到很多问题，得到了很多技术大佬的耐心解答，其中技术上得感谢下 放肆@的青春 ，很多问题得到了答复，使我少走了很多弯路。

阅读建议

• 建议先了解bpmn规范和用下钉钉流程，本系列文章不做activiti基础部分讲解，请自行查阅其他资料；

技术栈:

• 后端: SpringBoot + activiti7
• 数据库: mysql
• 前端: React (umi、dva、Ant Design、Ant Design Pro、less、typescript) 阿里React前端全家桶组件，真的好用，安利一波^_^
• 流程设计器: bpmn-moddle，
• 动态表单拖拽: react-dnd

不用bpmnjs？
bpmn-moddle和bpmnjs在github上都属于bpmn.io，他俩是一个github圈子，bpmn-moddle本身就是一个能对bpmn规范的xml进行对象化操作的工具库，bpmnjs也是是基于bpmn-moddle实现的的流程设计器，所以不需要bpmnjs。

开发自定义流程设计器的原因：
软件领域，一直都是没有最好的方案，只有最适合的方案，单说方案，没有任何意义，要结合应用场景，不然就不会有这么多的开发语言、技术框架，早就被最好的一统江湖了。
目前比较流行的设计器：
1.activiti-modeler：
    优点：灵活，可以实现各种bpmn流程设计操作；
    缺点：学习成本高，容易配置出错，配置流程只能由熟悉这套逻辑的人，甚至是只有开发人员才能配置，人工成本高；
    适用场景：流程灵活复杂的场景；
2.bpmn.js：
    优点：灵活度适中，可定制开发；
    缺点：若扩展功能，需额外开发成本；学习成本稍低，但也需要熟悉bpmn规范，配置流程只能由熟悉这套逻辑的人配置，人工成本稍高；
    适用场景：流程不复杂，只需要简易的bpmn流程功能的场景；
3.类似钉钉的流程设计器：
    优点：流程配置简单，学习成本低，普通用户容易上手；
    缺点：开发成本高，只能配置简易的流程；
    适用场景：流程简单，需C端用户自己配置流程的场景；

这里先开个篇，后面再分章节写完整套实现逻辑和思路，还有总结下其中遇到的坑，果然，码字还是比码代码累啊.....

未待完善功能规划和实现思路：

• 发起人可选审批人：发起表单里面预览一个多选审批人、角色、主管的表单项，提交时候设置到表单assign变量字段，实现起来可能有点复杂；
• 通讯录管理：类似钉钉的通讯录实现；

实现类似钉钉的对接其他系统方案：

• http方式：已实现，适合内部和外部系统使用，比较通用；方式和钉钉相同，提供对外rest api接口和接口签名sign，其他系统通过接口对接；流程结束或任务指派可通过回调方式通知其他系统，专业术语叫最大努力通知--回调+提供查询接口；项目开发时候，已写了一个类似钉钉的sdk api开发对接jar包，其他系统对接很方便(签名和提交请求数据)；
• MQ消息：未实现，适合内部系统，通过引入rabbit、rocketmq等消息中间件，做流程回调的异步通知，失败之后也可延迟通知；
• rpc方式：未实现，适合内部系统使用，spring cloud的rest、dubbo的rpc框架内部调用，效率高。

界面浏览 (为了方便演示，直接用了antd pro框架上面的logo和主题)

主界面：

创建表单：

表单设计

流程设计

这里遇到的坑：刚开始没写条件分支时候，我一直按链表来写，写到条件分支(网关)时候，我发现错了，这特么原来是一个有向图结构！！！赶紧把结构换成邻接表，终于理解bpmn结构其实就是xml表示的点和线组成的有向图，然后就写了bpmn和邻接表有向图结构的相互转换，编辑时候从xml->邻接表，编辑完从邻接表->xml直接存库，过程中前端用的库是bpmn-moddle。

可查看和编辑表单设计和流程设计

高级点的流程设计-支持多种审批人

发起审批

我发起的审批单：

待我审批的：审批流程、查看已审批

抄送我的：

查看所有审批单(管理员使用)：可查看整个系统所有审批单，可操作待办任务的转移