工作流配置文件編輯系統的研究與實現

王 帥，詹舒波

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

0 引言

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

1 相關技術介紹

1.1 工作流簡介

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

1.2 Canvas 簡介

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

2 工作流配置文件編輯系統的設計

2.1 整體設計

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

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

圖1 系統整體架構圖 Fig.1 System architecture

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

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

2.2 節點生成模塊設計

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

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

圖2 節點配置文件結構 Fig.2 Structure of the node configuration file

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

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

2.3 流程編輯模塊設計

流程編輯模塊主要采用前端技術實現，系統使用VueJS+Canvas+ jsPlumb 技術棧實現。其中VueJS 提供了數據綁定的組件化開發框架，Canvas 用于節點庫節點的繪制，jsPlumb 是一個構建流程、連線、圖表的繪圖工具集。

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

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

2.4 配置文件生成模塊設計

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

2.5 工作流配置文件編輯系統的實現效果

系統的整體實現效果如圖6 所示。

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

3 結論

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

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