王 帥，詹舒波

(北京郵電大學網(wǎng)絡技術研究院，北京 100876)

0 引言

隨著網(wǎng)絡技術的不斷發(fā)展，對結(jié)構(gòu)化表示信息的需求也越來越大。XML 規(guī)范已成為當前網(wǎng)絡應用中事實上的數(shù)據(jù)表達、交換的標準[1]，工作流業(yè)務中也使用XML 作為配置文件。工作流要解決的主要問題是：為實現(xiàn)某個業(yè)務目標，在多個參與者之間，按某種預定規(guī)則自動傳遞文檔、信息或者任務[2]?，F(xiàn)有的流程圖繪制工具主要分為兩類：單機版流程圖繪制工具（Word、Visio[3]、StarUML 等）和基于Web 的在線版流程圖繪制工具（Gliffy2，MxGraph3、DrawAnywhere4），它們雖能在一定程度上滿足用戶的需求，但隨著工業(yè)流程的日趨復雜以及用戶對流程圖附加信息要求的日益增多，現(xiàn)有的流程圖繪制工具已不能很好地完成任務。針對傳統(tǒng)的手工配置方式容易產(chǎn)生內(nèi)容嵌套復雜、屬性混亂、不易修改等問題，本文提出了使用JSON 文件配置工作流節(jié)點，結(jié)合前端技術實現(xiàn)工作流流程可視化編輯的方法，并介紹其實現(xiàn)。

1 相關技術介紹

1.1 工作流簡介

工作流（Workflow）就是“業(yè)務過程的部分或整體在計算機應用環(huán)境下的自動化”。簡單地說，工作流就是一系列相互銜接、自動進行的業(yè)務活動或任務。一個工作流包括一組任務（或活動）及它們的相互順序關系，還包括流程及任務（或活動）的啟動和終止條件，以及對每個任務（或活動）的描述[4]。工作流對于規(guī)范業(yè)務流程，實時跟蹤、監(jiān)控公司流程狀態(tài)，自動化市場、銷售和服務的過程，同時不斷改善、重組、優(yōu)化流程，提升企業(yè)核心競爭力，起到了非常重要的作用。

1.2 Canvas 簡介

HTML5 標準中支持的的 Canvas[5-6]對象使用 JavaScript 在網(wǎng)頁上繪制圖像。canvas 元素創(chuàng)造了一個固定大小的畫布，它公開了一個或多個渲染上下文，其可以用來繪制和處理要展示的內(nèi)容。畫布是一個矩形區(qū)域，可以控制區(qū)域內(nèi)的每一像素。canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

2 工作流配置文件編輯系統(tǒng)的設計

2.1 整體設計

工作流配置文件編輯系統(tǒng)（以下簡稱本系統(tǒng)）可以分為三個模塊：節(jié)點生成模塊，流程編輯模塊和配置文件生成模塊。不同企業(yè)和不同業(yè)務場景可能需要使用不同工作流配置，也可能需要使用不同的工作流節(jié)點，所以可配置的節(jié)點和可可視化編輯的工作流流程可以保障滿足不同企業(yè)不同業(yè)務的需求。

對配置文件操作主要分為首次生成和對已有配置文件的再次編輯。

圖1 系統(tǒng)整體架構(gòu)圖 Fig.1 System architecture

本系統(tǒng)在配置文件生成時，首先讀取配置好的JSON文件，生成可供選擇的節(jié)點庫，節(jié)點的名稱屬性在JSON文件中定義。然后用戶可以選擇一套工作流節(jié)點庫，使用節(jié)點庫中的節(jié)點和本系統(tǒng)提供的線型可視化地編輯工作流流程，并配置節(jié)點的屬性，系統(tǒng)會根據(jù)節(jié)點的JSON 配置文件中設定規(guī)則對節(jié)點的屬性的合法性進行檢測，不合法時做出提示。然后根據(jù)工作流流程圖中的線型信息和節(jié)點信息拼接成XML 文件。同時可以選擇在XML 文件中加入一個元素儲存流程的原始JSON 信息，以便后續(xù)再次編輯。

本系統(tǒng)在配置文件編輯時，先檢查XML 文件中是否有元素，在該元素存在時，讀取流程的原始JSON 信息，以便可視化復現(xiàn)在頁面中供再次編輯保存。

2.2 節(jié)點生成模塊設計

系統(tǒng)使用一個JSON 配置文件，該文件中可以包含多套工作流程的配置，格式如圖2 所示。

圖2 中表示有兩套工作流流程的節(jié)點庫，分別為工單轉(zhuǎn)派流程和測試分揀流程。每套節(jié)點庫下定義了不同的節(jié)點，這些節(jié)點可以自定義，不過自定義的節(jié)點需要CCWF的支持。通常CCWF 支持的常用的節(jié)點包括開始、結(jié)束、數(shù)學運算、數(shù)據(jù)庫操作（SQL）、流程控制（順序執(zhí)行、條件分支、跳轉(zhuǎn)）、網(wǎng)絡交互、流程的分離和合并等節(jié)點。以條件分支節(jié)點的配置為例，其對應的XML 格式可能如圖3所示，而節(jié)點的原始JSON 配置如圖4 所示。

圖2 節(jié)點配置文件結(jié)構(gòu) Fig.2 Structure of the node configuration file

圖3 條件分支節(jié)點的XML 格式 Fig.3 XML format of conditional branch nodes

圖4 條件分支節(jié)點的JSON 配置 Fig.4 JSON configuration of conditional branch nodes

2.3 流程編輯模塊設計

流程編輯模塊主要采用前端技術實現(xiàn)，系統(tǒng)使用VueJS+Canvas+ jsPlumb 技術棧實現(xiàn)。其中VueJS 提供了數(shù)據(jù)綁定的組件化開發(fā)框架，Canvas 用于節(jié)點庫節(jié)點的繪制，jsPlumb 是一個構(gòu)建流程、連線、圖表的繪圖工具集。

工作流流程定義映射出企業(yè)業(yè)務流程最終所要達到的目標。工作流流程定義除了一般的工作流信息外，還應包括“活動”、“連接”、“路由”、“參與者”、“角色”、“數(shù)據(jù)源”等幾方面信息[7]。這些信息在可視化方案中可以用節(jié)點、節(jié)點屬性和線型進行承載。在節(jié)點生成模塊生成的一套節(jié)點庫中，每個節(jié)點都有節(jié)點名稱、節(jié)點屬性、節(jié)點出入口控制。在流程編輯模塊中，用戶可以直接拖動節(jié)點庫中的節(jié)點到編輯區(qū)域內(nèi)，進行屬性的配置，并用連線設置節(jié)點在工作流流程中的執(zhí)行關系。在配置節(jié)點的屬性時，系統(tǒng)會根據(jù)節(jié)點的JSON 配置文件中對屬性值的類型、范圍進行檢查以作出反饋。

圖5 XML 配置文件生成過程 Fig.5 Generation process of XML configuration files

2.4 配置文件生成模塊設計

在進行流程編輯之后，可視化的工作流流程體現(xiàn)在了DOM（文本對象模型）對象上，而DOM 對象可以進一步由JavaScript 中的JSON對象進行表示。該JSON 對象可以儲存流程中的節(jié)點信息和線型信息。節(jié)點信息包括節(jié)點類型、節(jié)點屬性、節(jié)點出入口控制。線型信息包括起始結(jié)點標識、目的節(jié)點標識、連線類型。系統(tǒng)封裝一個由JSON 文件轉(zhuǎn)換成XML 文件的函數(shù)，函數(shù)思想如圖5 所示。主要是遍歷JSON 文件里的屬性，拼接成符合XML 規(guī)范的字符串，再把字符串寫入XML 文件中。

2.5 工作流配置文件編輯系統(tǒng)的實現(xiàn)效果

系統(tǒng)的整體實現(xiàn)效果如圖6 所示。

可以在左側(cè)選擇一套由節(jié)點生成模塊生成的節(jié)點庫，然后在編輯區(qū)域進行流程的設計，最終生成XML 格式的配置文件。

3 結(jié)論

本文設計了一種可以實現(xiàn)節(jié)點可配置，流程可視化編輯的工作流流程配置文件生成和編輯的方案，利用前端技術簡化流程配置的難度，利用JSON 格式和XML 規(guī)范進行數(shù)據(jù)信息的轉(zhuǎn)換。在企業(yè)的經(jīng)營過程中，根據(jù)企業(yè)內(nèi)部的規(guī)章制度和具體的業(yè)務流程，一項事務往往會由多個業(yè)務部門按照一定順序串行或并行合作執(zhí)行來完成企業(yè)的經(jīng)營目標[8]，使用該系統(tǒng)可以提高CRM 業(yè)務中工作流配置的效率。

該方案可以獨立運行，也可整合到CRM 系統(tǒng)中使用[9]。同時本系統(tǒng)也可以用作不局限于CRM 的其他系統(tǒng)的流程文件的可視化編輯[10]。這種高可用、高可擴展、高可配置的特點的方案將會有越來越廣泛的用途。