王 帥，詹舒波

(北京郵電大學(xué)網(wǎng)絡(luò)技術(shù)研究院，北京 100876)

0 引言

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

1 相關(guān)技術(shù)介紹

1.1 工作流簡介

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

1.2 Canvas 簡介

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

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

2.1 整體設(shè)計(jì)

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

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

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

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

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

2.2 節(jié)點(diǎn)生成模塊設(shè)計(jì)

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

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

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

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

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

2.3 流程編輯模塊設(shè)計(jì)

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

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

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

2.4 配置文件生成模塊設(shè)計(jì)

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

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

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

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

3 結(jié)論

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

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