流程设计器项目介绍
从事过BPM行业的大佬必然对流程建模工具非常熟悉，做为WFMC三大体系结构模型中的核心模块，它是工作流的能力模型，其他模块都围绕工作流定义来构建。
成熟的建模工具通过可视化的操作界面和行业BPMN规范描述用户容易理解的工作流的各种构成图元，例如圆圈表示事件，方框表示活动。
流程设计器技术选型
前端框架
VUE3 + TS + Ant Design Vue
选择TS做为首选语言我们是经过充分考虑和验证的，并不是单纯的因为TS比较流行、时髦而去无脑应用。流程设计器是对流程的建模，必然涉及到大量的业务属性数据建模，这些属性可以通过类的方式抽象、继承、维护，也就是面向对象开发，而这恰好是TS的优势。我们的项目中大概有80多个业务模型，如果用JS去表示，那将是何种场景！在验证的过程中我们发现，使用TS开发可以简化开发复杂度和提高产品的成功率。
VUE3 + TS 使用的过程中并不是很顺畅，主要是类型检查方面做的并不是很好。如 vuex、混入 等。
图编辑组件
AntV X6
对于流程图基本的图形绘制能力，我们调研过多个开源的框架，最终选择了 X6。下面附上调研结果，仅当参考（作者对这些框架都带着敬畏之心，并没有恶意，如有不适，勿喷）。
辅助框架
class-transformer
普通JS对象与TS对象互转利器
class-validator
流程模型验证利器，类似 C# 中 Attribute，java 中的注解，通过在属性上加注解实现验证。
扩展图元
BPMN2.0规范中对图元做了定义，如圆圈表示事件、方框表示人工任务、菱形表示网关。但是我们的BPM产品主要面对的是国内的客户，规范中的图元太抽象，不适合国内，基于X6基础图形我们定义了一套新图元。
混入实现组件递归重置
右侧的属性面板是配置业务的区域，右下角有保存和重置两个按钮。点击重置后需要对属性面板内所有组件的内容进行重新初始化，因为组件不止一个，多是多级嵌套的，所以需要递归重置。
项目中我们采用vue局部混入的方式，在每个组件上传递 currentUUID props 的方式，层层下钻通知子组件重新初始化内容。
vue3 + ts 使用混入比较繁琐恶心，下面是核心代码：
发布订阅模式实现组件递归验证
右侧的属性面板在点击保存时需要验证数据的完整性，而这些数据又分布在不同的子组件内，所以需要每个子组件自己完成数据验证。项目中我们采用混入 + 发布订阅设计模式完成该功能。
子组件在 mounted 时订阅验证事件，unmounted 时删除订阅，点击保存时发布验证事件，每个子组件完成自身的验证后返回一个 Promise，当所有子组件都验证完成后，再将数据保存到数据库。
设计器产品展示
关于作者：本人从事BPM开发多年，欢迎有志同道合之友来扰！