工作流配置文件编辑系统的研究与实现

王 帅，詹舒波

(北京邮电大学网络技术研究院，北京 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]。这种高可用、高可扩展、高可配置的特点的方案将会有越来越广泛的用途。