流程設(shè)計器項目介紹

從事過BPM行業(yè)的大佬必然對流程建模工具非常熟悉，做為WFMC三大體系結(jié)構(gòu)模型中的核心模塊，它是工作流的能力模型，其他模塊都圍繞工作流定義來構(gòu)建。

成熟的建模工具通過可視化的操作界面和行業(yè)BPMN規(guī)范描述用戶容易理解的工作流的各種構(gòu)成圖元，例如圓圈表示事件，方框表示活動。

流程設(shè)計器技術(shù)選型

前端框架

VUE3 + TS + Ant Design Vue

選擇TS做為首選語言我們是經(jīng)過充分考慮和驗證的，并不是單純的因為TS比較流行、時髦而去無腦應(yīng)用。流程設(shè)計器是對流程的建模，必然涉及到大量的業(yè)務(wù)屬性數(shù)據(jù)建模，這些屬性可以通過類的方式抽象、繼承、維護，也就是面向?qū)ο箝_發(fā)，而這恰好是TS的優(yōu)勢。我們的項目中大概有80多個業(yè)務(wù)模型，如果用JS去表示，那將是何種場景！在驗證的過程中我們發(fā)現(xiàn)，使用TS開發(fā)可以簡化開發(fā)復(fù)雜度和提高產(chǎn)品的成功率。

VUE3 + TS 使用的過程中并不是很順暢，主要是類型檢查方面做的并不是很好。如 vuex、混入 等。

圖編輯組件

AntV X6

對于流程圖基本的圖形繪制能力，我們調(diào)研過多個開源的框架，最終選擇了 X6。下面附上調(diào)研結(jié)果，僅當參考（作者對這些框架都帶著敬畏之心，并沒有惡意，如有不適，勿噴）。

底層技術(shù)瀏覽器支持情況事件處理渲染效果SVGIE9++、Edge、Chrome、Safari、Opera、360、Firefox友好適合復(fù)雜度低的流程圖CanvasIE9++、Edge、Chrome、Safari、Opera、360、Firefox基于位置的定位事件不友好更適合圖像密集型的游戲應(yīng)用框架底層技術(shù)文檔地址協(xié)議點評SVG.JSSVGhttps://svgjs.dev/docs/3.0/shape-elements/#svg-lineMIT license僅支持基礎(chǔ)的圖形繪制能力G6 圖可視化引擎canvashttps://g6.antv.vision/zhMIT license上手容易，功能面廣X6 圖可視化引擎SVGhttps://x6.antv.vision/zh/examples/showcase/practices#bpmnMIT license上手容易，比較專注流程圖領(lǐng)域D3.jsSVGhttps://d3js.org/?https://github.com/d3/d3/wiki/API--中文手冊BSD license復(fù)雜度高，難上手。logic-flowSVGhttp://logic-flow.org/Apache-2.0 License上手容易，更專注流程圖領(lǐng)域，功能不全，較為粗超bpmn.jsSVGhttps://bpmn.io/toolkit/bpmn-js/Apache-2.0 License專業(yè)的流程繪制框架，沒文檔，完全遵循BPMN2.0

輔助框架

class-transformer

普通JS對象與TS對象互轉(zhuǎn)利器

class-validator

流程模型驗證利器，類似 C# 中 Attribute，java 中的注解，通過在屬性上加注解實現(xiàn)驗證。

擴展圖元

BPMN2.0規(guī)范中對圖元做了定義，如圓圈表示事件、方框表示人工任務(wù)、菱形表示網(wǎng)關(guān)。但是我們的BPM產(chǎn)品主要面對的是國內(nèi)的客戶，規(guī)范中的圖元太抽象，不適合國內(nèi)，基于X6基礎(chǔ)圖形我們定義了一套新圖元。

混入實現(xiàn)組件遞歸重置

右側(cè)的屬性面板是配置業(yè)務(wù)的區(qū)域，右下角有保存和重置兩個按鈕。點擊重置后需要對屬性面板內(nèi)所有組件的內(nèi)容進行重新初始化，因為組件不止一個，多是多級嵌套的，所以需要遞歸重置。
項目中我們采用vue局部混入的方式，在每個組件上傳遞 currentUUID props 的方式，層層下鉆通知子組件重新初始化內(nèi)容。

vue3 + ts 使用混入比較繁瑣惡心，下面是核心代碼：

點擊查看代碼

發(fā)布訂閱模式實現(xiàn)組件遞歸驗證

右側(cè)的屬性面板在點擊保存時需要驗證數(shù)據(jù)的完整性，而這些數(shù)據(jù)又分布在不同的子組件內(nèi)，所以需要每個子組件自己完成數(shù)據(jù)驗證。項目中我們采用混入 + 發(fā)布訂閱設(shè)計模式完成該功能。

子組件在 mounted 時訂閱驗證事件，unmounted 時刪除訂閱，點擊保存時發(fā)布驗證事件，每個子組件完成自身的驗證后返回一個 Promise，當所有子組件都驗證完成后，再將數(shù)據(jù)保存到數(shù)據(jù)庫。

點擊查看代碼

設(shè)計器產(chǎn)品展示

文章標題：Type Script 在流程設(shè)計器的落地實踐
文章鏈接：https://www.dianjilingqu.com/628015.html