从事过BPM行业的大佬必然对流程建模工具非常熟悉,做为WFMC三大体系结构模型中的核心模块,它是工作流的能力模型,其他模块都围绕工作流定义来构建。
成熟的建模工具通过可视化的操作界面和行业BPMN规范描述用户容易理解的工作流的各种构成图元,例如圆圈表示事件,方框表示活动。
VUE3 + TS + Ant Design Vue
选择TS做为首选语言我们是经过充分考虑和验证的,并不是单纯的因为TS比较流行、时髦而去无脑应用。流程设计器是对流程的建模,必然涉及到大量的业务属性数据建模,这些属性可以通过类的方式抽象、继承、维护,也就是面向对象开发,而这恰好是TS的优势。我们的项目中大概有80多个业务模型,如果用JS去表示,那将是何种场景!在验证的过程中我们发现,使用TS开发可以简化开发复杂度和提高产品的成功率。
VUE3 + TS 使用的过程中并不是很顺畅,主要是类型检查方面做的并不是很好。如 vuex、混入 等。
AntV X6
对于流程图基本的图形绘制能力,我们调研过多个开源的框架,最终选择了 X6。下面附上调研结果,仅当参考(作者对这些框架都带着敬畏之心,并没有恶意,如有不适,勿喷)。
底层技术
浏览器支持情况
事件处理
渲染效果
SVG
IE9++、Edge、Chrome、Safari、Opera、360、Firefox
友好
适合复杂度低的流程图
Canvas
IE9++、Edge、Chrome、Safari、Opera、360、Firefox
基于位置的定位事件不友好
更适合图像密集型的游戏应用
框架
底层技术
文档地址
协议
点评
SVG.JS
SVG
https://svgjs.dev/docs/3.0/shape-elements/#svg-line
MIT license
仅支持基础的图形绘制能力
G6 图可视化引擎
canvas
MIT license
上手容易,功能面广
X6 图可视化引擎
SVG
https://x6.antv.vision/zh/examples/showcase/practices#bpmn
MIT license
上手容易,比较专注流程图领域
D3.js
SVG
https://d3js.org/ https://github.com/d3/d3/wiki/API--中文手册
BSD license
复杂度高,难上手。
logic-flow
SVG
Apache-2.0 License
上手容易,更专注流程图领域,功能不全,较为粗超
bpmn.js
SVG
https://bpmn.io/toolkit/bpmn-js/
Apache-2.0 License
专业的流程绘制框架,没文档,完全遵循BPMN2.0
普通JS对象与TS对象互转利器
流程模型验证利器,类似 C# 中 Attribute,java 中的注解,通过在属性上加注解实现验证。
BPMN2.0规范中对图元做了定义,如圆圈表示事件、方框表示人工任务、菱形表示网关。但是我们的BPM产品主要面对的是国内的客户,规范中的图元太抽象,不适合国内,基于X6基础图形我们定义了一套新图元。
右侧的属性面板是配置业务的区域,右下角有保存和重置两个按钮。点击重置后需要对属性面板内所有组件的内容进行重新初始化,因为组件不止一个,多是多级嵌套的,所以需要递归重置。
项目中我们采用vue局部混入的方式,在每个组件上传递 currentUUID props 的方式,层层下钻通知子组件重新初始化内容。
vue3 + ts 使用混入比较繁琐恶心,下面是核心代码:
点击查看代码
declare module 'vue' {
interface ComponentCustomProperties {
/* 定义更新当前组件ID的混入方法 */
updateCurrentUUID: (from: string) => void
}
}
export default defineComponent({
props: {
/** 父组件的UUID */
parentUUID: {
type: Object
}
},
data () {
return {
/** 当前组件的UUID */
currentUUID: {
uuid: v4(),
from: '' // 驱动来源
},
/** 支持的级联更新来源 */
supportFroms: [
'propertyReset', // 属性面板重置
'ruleChange'
]
}
},
methods: {
/** 初始化数据,要求所有子组件的初始化都放到该方法内 */
initComponentData () {
/* 子组件数据初始化的方法 */
},
/** 更新当前组件UUID */
updateCurrentUUID (from: string) {
this.currentUUID.from = from
this.currentUUID.uuid = v4()
}
},
watch: {
/** */
parentUUID: {
handler: function (val) {
// 如果来源在 supportFroms 集合中,才支持重新初始化
if (this.supportFroms.indexOf(val.from) > -1) {
this.initComponentData()
this.$forceUpdate()
this.$nextTick(() => {
this.updateCurrentUUID(val.from)
})
}
},
deep: true
}
}
})
右侧的属性面板在点击保存时需要验证数据的完整性,而这些数据又分布在不同的子组件内,所以需要每个子组件自己完成数据验证。项目中我们采用混入 + 发布订阅设计模式完成该功能。
子组件在 mounted 时订阅验证事件,unmounted 时删除订阅,点击保存时发布验证事件,每个子组件完成自身的验证后返回一个 Promise,当所有子组件都验证完成后,再将数据保存到数据库。
点击查看代码
declare module 'vue' {
interface ComponentCustomProperties {
componentValidate: (data?: any) => Promise<ValidateResult>
}
}
/**
* 组件验证结果
*/
export interface ValidateResult {
/** 是否验证通过 */
isOk: boolean,
/** 验证失败的消息 */
msgs?: string[]
}
export default defineComponent({
props: {
},
data () {
return {
}
},
mounted () {
const pubSub = inject<PubSub>('pubSub')
if (pubSub) {
unref(pubSub).on(this.currentUUID.uuid, this.componentValidate)
}
},
beforeUnmount () {
const pubSub = inject<PubSub>('pubSub')
if (pubSub) {
unref(pubSub).off(this.currentUUID.uuid)
}
},
unmounted () {
const pubSub = inject<PubSub>('pubSub')
if (pubSub) {
unref(pubSub).off(this.currentUUID.uuid)
}
},
methods: {
/** 组件验证 */
componentValidate (data?: any): Promise<ValidateResult> {
return Promise.resolve({
isOk: true
})
}
}
})
<template>
<div>
</div>
</template>
<script lang="ts">
export default defineComponent({
name: 'BaseTabView',
mixins: [resetMixin], // 混入组件验证模块
props: {
},
data () {
return {
}
},
setup () {
},
mounted () {
},
methods: {
componentValidate (data?: any): Promise<ValidateResult> {
const result: ValidateResult = {
isOk: true,
msgs: []
}
return Promise.resolve(result)
}
}
})
</script>
export class PubSub {
// eslint-disable-next-line @typescript-eslint/ban-types
handles: Map<string, Function> = new Map<string, Function>()
/** 订阅事件 */
on (eventType: string, handle: any) {
if (this.handles.has(eventType)) {
throw new Error('重复注册的事件')
}
if (!handle) {
throw new Error('缺少回调函数')
}
this.handles.set(eventType, handle)
return this
}
/** 发布事件 所有事件 */
emitAll (data?: any): Promise<any[]> {
const result: Promise<any>[] = []
this.handles.forEach(item => {
// eslint-disable-next-line prefer-spread
result.push(item.apply(null, data))
})
return Promise.all(result)
}
/** 发布事件 */
emit (eventType: string, data?: any) {
if (!this.handles.has(eventType)) {
throw new Error(`"${eventType}"事件未注册`)
}
const handle = this.handles.get(eventType)!
// eslint-disable-next-line prefer-spread
handle.apply(null, data)
}
/** 删除事件 */
off (eventType: string) {
this.handles.delete(eventType)
}
}
关于作者:本人从事BPM开发多年,欢迎有志同道合之友来扰!
手机扫一扫
移动阅读更方便
你可能感兴趣的文章