CN113900636A - 一种自助化渠道业务流程开发***及其开发方法 - Google Patents

Abstract

本发明公开了一种自助化渠道业务流程开发***及其开发方法，所述开发***至少包括流程可视化编辑器、业务管理器、组件管理器，其中，流程可视化编辑器以可视化形式进行业务流程的编辑与展示。本发明通过将持久化服务器以插件方式注入前端集成开发环境，实现了业务组件等内存数据的本地存储与处理；针对可视化引擎，通过采用MVVM框架构建开发***中流程可视化编辑器的可视化区域布局，并通过跨域通讯机制与持久化服务器之间建立通讯关系，从而开发***通过持久化服务器可以快速从本地获取到相关数据，且在开发***设计业务流程时的相关数据得以本地存储，进而构建了一套轻量化、流程化、可视化的开发***，提供了业务流程可视化开发的新工具。

Description

一种自助化渠道业务流程开发***及其开发方法

技术领域

本发明属于开发***技术领域，具体涉及一种自助化渠道业务流程开发***及其开发方法。

背景技术

随着互联网快速发展，新型智能设备层出不穷，设备在行业中对实现跨***、跨厂商设备的需求日益明显，新型智能设备上的创新应用也越来越广泛。现阶段自助行业软件面临实施项目任务多，周期长，对实施人员专业化要求高等问题，各企业面临对软件的平台标准化、及二次开发效率不断提升的挑战。

目前主流的业界自助领域业务***中，多采用前后端分离架构，应用流程业务更多下移至浏览器前端，导致前端代码日趋复杂、业务流程链长；而对应组件管理是通过后端***集中配置管理，流程持久化通过后端***入库持久化，无法动态、轻量的在本地集成开发环境使用。因此，自助领域业务***的开发模式以及工具还有待进一步优化。

发明内容

本发明针对现有技术的问题，提供一种自助化渠道业务流程开发***及其开发方法，所述开发***通过将持久化服务器以插件方式注入前端集成开发环境，实现了业务组件等内存数据的本地存储与处理，不需要后端***的整体部署环境，于前端集成开发环境中完成数据的存储与处理；针对可视化引擎，通过采用MVVM框架构建开发***中流程可视化编辑器的可视化区域布局，并通过跨域通讯机制与持久化服务器之间建立通讯关系，从而开发***通过持久化服务器可以快速从本地获取到相关数据，且在开发***设计业务流程时的相关数据得以本地存储，如在可视化流程可视化编辑器中编辑的业务流程对应的流程设计文件、流程定义等数据，通过持久化服务器可以在本地入库持久化，进而构建了一套轻量化、流程化、可视化的开发***，提供了业务流程可视化开发的新工具。

一方面，本发明提供的一种自助化渠道业务流程开发***，其至少包括流程可视化编辑器、业务管理器、组件管理器；

其中，所述流程可视化编辑器以可视化形式进行业务流程的编辑与展示；

所述组件管理器用于管理业务组件；

所述业务管理器用于实现新建业务、和/或继承业务、和/或导入业务、和/或导出业务，每个业务对应存在业务目录，所述业务目录下的子目录下存在对应业务组件信息；

其中，所述开发***将持久化服务器以插件方式注入前端集成开发环境，使得基于所述持久化服务器能以实现将数据存储在前端集成开发环境中；

所述流程可视化编辑器是可视化引擎嵌于MVVM框架中，利用MVVM框架构建流程可视化编辑器的可视化区域布局，并通过跨域通讯机制与持久化服务器之间建立通讯关系，得以获取数据实现业务流程可视化。

本发明所述开发***利用MVVM框架、跨域通讯机制以及持久化服务器，实现了利用持久化服务器获取前端工程路径下的流程定义文件、流程设计文件，从而在可视化引擎中实现业务流程可视化呈现；反之，也将在可视化编辑器中构建的业务流程对应的流程设计文件存储在本地的流程设计文件中，以及将流程定义信息存储在本地的流程定义文件中。同样机理，利用持久化服务器获取本地存储的业务组件文件，从而使得能够在可视化编辑器中进行基于业务组件的业务流程的构建。

可选地，所述持久化服务器调用抽象语法树进行本地组件的描述抽取与持久化。

可选地，所述流程可视化编辑器中可视化区域至少包括：构件区、画布区、属性编辑区；

所述构件区包括原子构件列表、基础组件列表和二次开发组件列表，其中，利用所述持久化服务器并通过跨域通讯机制得到业务组件数据形成所述构件区；

所述画布区为当前业务流程的所有业务结点展示、编辑的区域；

所述属性编辑区用于编辑业务组件节点的属性；

其中，利用所述持久化服务器并通过跨域通讯机制得到本地存储的业务组件数据、业务流程数据，进而实现流程可视化；以及基于所述画布区、所述属性编辑区上编辑操作反向获取数据进行本地存储。

可选地，所述***还包括：工程管理器、和/或文档帮助管理器、和/或可视化配置器；

其中，所述工程管理器为可视化工程管理模块，用于实现工程目录展现、和/或工程新建、工程打开、和/或工程导入、和/或工程导出；

所述文档帮助管理器用于文档资源的统一展现、管理；

所述可视化配置器用于实现配置文件的可视化配置。

第二方面，本发明提供的一种基于所述***的业务流程开发方法，其包括以下步骤：

步骤1：创建业务组件；

步骤2：打开可视化集成开发环境，新建流程定义文件或预览已存在的流程定义文件，自动生成流程设计文件(流程定义文件和流程设计文件皆采用通用的结构化的xml文件格式，其中流程定义文件仅负责定义业务流程，流程设计文件则包含了所有的可视化节点形状、位置信息等)，打开业务流程进入流程可视化编辑器；

其中，基于所述持久化服务器和跨域通讯机制装载业务组件到所述流程可视化编辑器的构件区形成基础组件列表和二次开发组件列表；

步骤3：在所述流程可视化编辑器中，按照业务规则进行业务组件的组合和配置，形成可视化业务流程，并保存对应的流程设计文件、流程定义信息至流程定义文件中。

可选地，所述业务流程开发方法还包括调试步骤，调试过程如下：

A：持久化服务器启动websocket服务，监听来自运行浏览器的信息；

B：浏览器启动，访问应用地址，在调试模式下，通过websocket客户端通知持久化服务器当前业务组件的组件运行状态信息；

C：持久化服务器接收到组件运行状态信息后，通过跨域通讯机制通知可视化流程引擎，进行当前业务组件节点的状态的动态化改变，使得浏览器中业务组件跳转时同步在当前可视化流程中动态显示。

可选地，所述流程可视化编辑器的可视化引擎为一种JS绘图组件，适用于需要在网页中设计/编辑Workflow/BPM流程图、图表、网络图和普通图形的Web应用程序，其组结构的设计为：一个业务子流程映射成一个组结构中的子图，利用组结构中下钻、递升，可分别进入子流程的编辑、展示和返回父流程的编辑、展示；其过程如下：

生成组合时，将组合内的业务数据节点移入新的业务子流程，同时键入新的流程标识作为新的业务子流程的唯一标识；父流程与子流程之间仍保留入口的节点；

下钻到组合内部时，进入新的子流程的设计、编辑；递升到组合外部时，返回父流程的设计、编辑；

解除组合时，将组合内的业务子流程的流程节点还原到父流程，通过父流程与子流程之间仍保留入口的节点作为连结点，重新汇入父流程。

可选地，所述流程可视化编辑器的可视化引擎为一种JS绘图组件，所述业务流程开发方法还包括将现有流程设计文件逆向生成所述可视化引擎可识别的流程设计文件；

其中，将现有流程设计文件中的业务数据节点包装成用户对象，将其可视化的位置、形状信息通过用户对象嵌入子节点中。

有益效果

本发明提供的一种自助化渠道业务流程开发***及其开发方法，其通过将持久化服务器以插件方式注入前端集成开发环境，实现了业务组件等内存数据的本地存储与处理，不需要后端***的整体部署环境，于前端集成开发环境中完成数据的存储与处理；针对可视化引擎，通过采用MVVM框架构建开发***中流程可视化编辑器的可视化区域布局，并通过跨域通讯机制与持久化服务器之间建立通讯关系，从而开发***通过持久化服务器可以快速从本地获取到相关数据，且在开发***设计业务流程时的相关数据得以本地存储，如通过持久化服务器访问本地存储的流程定义文件和流程设计文件，进而纯前端的可视化流程引擎得以展示整个业务流程、通过持久化服务器访问本地存储的业务组件描述列表得以在可视化流程引擎中实现基于业务组件的可视化的业务流程设计，有效解决以往可视化开发是需要前端开发人员通过浏览器网页的方式进行可视化开发的问题，真正实现了一种轻量化、流程化、可视化的开发工具。

附图说明

图1是本发明实施例提供的开发***的可视化界面设计示意图；

图2是本发明实施例提供的流程可视化编辑器的原理示意图；

图3是本发明提供的在流程可视化编辑器中可视化业务流程的开发过程示意图；

图4是本发明提供的流程可视化编辑器的实例操作的示意图。

具体实施方式

本发明提供的一种自助化渠道业务流程开发***，其主要是实现了业务流程可视化编辑，为了实现上述功能，本发明的流程可视化编辑器将持久化服务器以插件方式注入前端集成开发环境，实现了业务组件等内存数据的本地存储与处理，并采用MVVM框架构建开发***中流程可视化编辑器的可视化区域布局，并通过跨域通讯机制与持久化服务器之间建立通讯关系。

譬如，所设定的跨域通讯机制为：

发送事件到持久化服务器：window.parent.postMessage；

监听持久化服务器事件：window.addEventLister。

譬如，网页展示中采用流行的MVVM框架进行整个界面的UI布局和组件构建，结合可视化流程展示引擎，绘制业务可视化流程。

持久化服务器为纯脚本实现的插件，包括：

(1).流程可视化编辑器的整体网页展示装载框架；

(2).关联文档查看器装载框架；

(3).配置工具；

(4).编辑器管理器，管理生成多类型(文本、二进制)编辑器；

(5).二进制编辑器提供者；

(6).文本编辑器提供者；

(7).编辑器实例对象，封装编辑器处理动作和事件；

(8).插件入口。

基于上述技术理论，下面将结合实施例对本发明做进一步的说明。

本发明提供的一种自助化渠道业务流程开发***包括：工程管理器、流程可视化编辑器、可视化配置器、业务管理器、组件管理器以及文档帮助管理器。

其中，工程管理器是一个提供针对整个可视化工程管理模块，具体包括工程目录展现、工程新建、工程打开、工程导入、工程导出等功能。其管理整个工程资源管理，将原先的纯目录及文件名以工程树形结构展示，提供导入、导出整个工程及依赖。

本实施例中设定在工程管理器树形结构上，右键选择组件管理器，针对二次开发自开发组件进行新增组件、拷贝组件、继承组件、删除组件等操作，完成业务流程设计过程中所关联的业务组件的开发。

其中，业务组件定义为：一组包含界面模板、样式和业务逻辑的独立的业务过程处理及展现单元，组件提供输入参数、输出参数供流程串接。

新增组件是通过右键菜单点击新增组件增加一个新开发的业务组件，自动生成到业务目录的views子目录下并自动注入路由中。拷贝组件是通过在组件文件右键菜单点击拷贝组件拷贝当前选择业务组件(一般用于从业务场景中拷贝到当前业务开发目录)，自动生成到业务目录的views子目录下并自动注入路由中。继承组件是通过右键菜单点击继承组件增加一个继承于选择的父类组件的业务组件，自动生成到业务目录的views子目录下并自动注入路由中；删除组件是通过在组件文件右键菜单点击删除组件删除当前选择业务组件，同时删除路由中的组件引用。应当理解，上述设置仅是本实施例的举例说明，其他可行的实施例中，可以对操作设置和功能进行调整。

在工程管理器树形结构上，右键选择流程可视化编辑器，根据工程管理器中的列出的流程设计文件(或逆向流程定义文件生成流程设计文件)，打开可视化视图，对业务流程进行可视化编辑和展示。其中，流程可视化编辑器为本发明的核心，下文将重点陈述。

在工程管理器树形结构上，右键选择业务管理器，可针对一个完整的业务范例进行原子操作，包括新建业务、继承业务、导入业务、导出业务。

新建业务用于初始化一个空白的业务目录，生成业务目录下所需的所有子目录及文件，如流程文件、路由文件、api请求、国际化资源文件；继承业务选择完一个父业务后，以此业务流程为父模板，生成一个新的业务目录；导入业务用于从一个之前导出的业务压缩包导入到当前工程；导出业务用于从一个当前以开发完毕的业务目录导出到一个业务压缩包中。应当理解，上述设置仅是本实施例的举例说明，其他可行的实施例中，可以对操作设置和功能进行调整。

最后，开发过程中，可配合菜单中的文档帮助管理器对多种帮助文档资源的统一展现、管理，包括API手册速查、二次开发手册、开发文档模块、邮件反馈、需求墙、支持等。其中，API手册速查包含技术组件、业务组件、常用工具集的API接口说明；二次开发手册包含二次开发的基本流程及相应示例；开发文档模块包含所有相关的服务接口等文档的详细说明；邮件反馈提供编写邮件反馈当前发明的使用问题；需求墙提供当前发明的需求查看和提需求的网页入口；支持提供开发人员的支持方式；关于展示当前发明的版本信息、作者信息等。

可视化配置器是针对自助渠道平台工程中可配置文件进行可视化的配置，包括但不限于全局配置、字典配置、设备模拟等。

基于上述功能模块构成了本发明所述的开发***，以供开发人员利用所述开发***实现业务流程构建，应当理解，在不脱离本发明构思的基础上，对上述开发***的部分功能的删减或者调整均是可行的，仍视为在本发明的保护范围内。

可视化流程可视化编辑器：

如图2所示，本发明为了实现可视化开发，将持久化服务器以插件方式注入前端集成开发环境，实现了业务组件等内存数据的本地存储与处理；针对可视化引擎，通过采用MVVM框架构建开发***中流程可视化编辑器的可视化区域布局，并通过跨域通讯机制与持久化服务器之间建立通讯关系，从而开发***通过持久化服务器可以快速从本地获取到相关数据，且在开发***设计业务流程时的相关数据得以本地存储。

如图1所示，从功能角度来看，本实施例中的可视化流程可视化编辑器包括：构件区、画布区、属性编辑区以及可视化编辑工具栏。

其中，构件区包括原子构件列表、基础组件列表和二次开发组件列表。原子构件列表中包含开始、新建通用组件、新建规则引擎组件和结束三种元素；基础组件列表包括业务组件库中的所有的基础业务组件；二次开发组件列表包括二次开发工程下的新开发的业务组件。

画布区为当前业务流程的所有结点展现、编辑的区域，包括业务组件节点、跳转箭头、高亮当前选择组件、组件右键菜单。

属性编辑区为选中业务组件节点后，弹出的当前业务组件节点的属性配置弹出菜单区域，包括增加属性、删除属性、修改属性、显示属性。

可视化编辑工具栏位于画布区的顶上区域，提供流程可视化编辑器的快捷工具栏功能，包括保存文件、导入文件、导出svg文件、放大、缩小、实际大小、撤销、重做、删除、组合、解除组合、自动布局(从左往右/自顶向下)、网格显示、预览模式与编辑模式切换、画布背景颜色定制。

构件区：

构件区中的列表数据生成是通过抽象语法树解析目前工程中已存在的业务组件，将列表数据保存至json文件中；构件列表数据传输由持久化服务器从json中获取数据，通过跨域消息通讯，传输到流程可视化编辑器页面中；构件列表数据展示，借由MVVM网页框架，刷新对应分类的弹性面板中数组，渲染到构件区。

本实施例中还进一步针对开发***(开发工具)的构件区设置如下内容：弹性面板默认收缩，可点击弹性面板标题栏弹开或者收缩；每个弹性面板中包含一个输入框，可输入关键字对已有业务组件进行智能模糊匹配，输入框绑定change事件，输入框内容变更时即进行实时匹配；构件列表中所有组件页面元素绑定mousedown.native(鼠标操作)与touchstart.native(触摸屏操作)事件，此两事件处理中进行业务组件的选择，达到拖放组件的目的。应当理解，本发明的开发工具并不局限于上述配置以及设置。

画布区：

画布生成是基于模板配置文件生成整个画布，模板配置文件包含如下元素的模板定义：编辑器布局样式、默认分组、默认连线、分组形状、连线形状、开始节点形状、结束节点形状、通用组件节点形状、预定义动作、条件判断器、右键菜单。

其中，画布生成过程如下：

网页加载，调用可视化流程引擎，导入模板配置文件，创建流程可视化编辑器；关联网页div对象到流程可视化编辑器容器；创建缩略图；创建构件区；高亮显示默认连线。

流程可视化编辑器创建完毕后，触发初始化完成事件，事件中绑定动作方法，并通过跨域消息通讯通知持久化服务器，进行流程定义文件的初始化导入；跨域消息***中监听到加载事件时，调用流程可视化编辑器的读取图形模型方法，将流程定义文件注入到流程可视化编辑器中，并触发画布自动布局，完成预定义的流程定义文件的可视化展现。

属性编辑区：为拖放到画布区的构件的属性编辑区域，选中后即可弹出属性编辑框，可针对业务组件的属性进行定制修改。可视化编辑工具栏位于画布区的顶上区域，提供流程可视化编辑器的快捷工具栏功能，包括保存文件、导入文件、导出svg文件、放大(放大当前画布中所有元素)、缩小(缩小当前画布中所有元素)、实际大小(重置当前画布中所有元素的大小为其实际大小)、撤销、重做、删除、组合、解除组合、自动布局(从左往右/自顶向下)、网格显示、预览模式与编辑模式切换、画布背景颜色定制。其中：组合是将多个元素(节点)到同一个组合框的能力，可收起变为一个小的组合框，也可以展示组合框内所有元素(节点)；可右键菜单选择进入当前组合，则当前只显示组合框选定的元素，流程中其它元素不显示；解除组合为组合的反向操作，解除之前组合框内的元素组合关系，恢复成之前流程中元素的散列关系；自动布局(从左往右/自顶向下)，提供自动布局当前流程的功能，按钮默认为从左往右布局，点击后变为自顶向下布局，再点击恢复为从左往右布局；网格显示，提供画布切换显示网格和隐藏网格的功能；预览模式与编辑模式切换,可在预览与编辑两种模式下来回切换(默认为编辑模式)，当切换为预览模式时，画布中所有元素不可移动、不可编辑；当切换为编辑模式时，画布中元素可移动、可编辑。

如图3和图4所示，基于上述功能的流程可视化编辑器，本发明提供的一种业务流程开发方法包括以下步骤：

步骤1：创建新的业务组件(手工)

其中，业务组件的文件命名、组件内data属性name和路由path，去掉分隔符后，需保证完全一致。

步骤2：打开可视化集成环境，新建流程定义文件(定义流程节点及其关系的xml文件，或者预览已存在的流程定义文件，自动生成流程设计文件，打开业务流程进入流程可视化编辑器，流程可视化编辑器将会装载(基于上述技术实现过程)组件库中业务组件、二次开发自开发业务组件到构件列表中。

业务组件节点与业务组件节点之间通过拖放(从一个节点左键点击按住，拖放到另一个节点上)即可完成两个业务组件的业务关联，双击连接的箭头线，可通过修改label，完成跳转链接的具化绑定，也可以通过点击当前业务节点后弹出的属性区域，增加*Link属性完成跳转链接的具化绑定；

创建开始节点：将原子构件列表中的开始构件拖放到画布上即可生成开始节点；开始节点与其它业务组件节点默认为startLink，节点必须具有流程标识的属性，作为当前业务流程的流程唯一标识。

创建业务组件节点：选中原子构件列表中的创建组件拖放到画布，将弹出创建组件的对话框，对话框中必须填入组件ID、组件名称和选择继承类，非必填组件描述，选择完继承类后，展示即将生成的组件源码，源码可编辑修改，点击创建按钮即可完成业务组件的创建，创建完成，则自动创建生成业务组件于当前业务模块下的views子目录，自动将此组件添加到流程定义文件中，并自动注入路由。

复用组件库中基础业务组件和已有的二次开发业务组件：将基础组件列表和二次开发组件列表中对应组件拖放到画布中，通过拖放以及跳转链接绑定可完成组件编入流程定义文件；对于组件库中的基础业务组件，右键菜单与新创建及二次开发组件不同，源码更换为文档，可跳转到对应基础业务组件的设计、示例文档进行查看，而对于二次开发组件，右键菜单与新创建的组件一致。

创建结束节点：将原子构件列表中的结束构件拖放到画布上即可生成结束节点；结束节点的入线label包含前一个业务组件节点的链接Link名称和目标组件名称。

步骤3：在流程可视化编辑器中，利用构件工具箱中的业务组件按照业务规则进行业务组件组合和配置编排，形成可视化的业务流程，对应保存流程定义文件。其中，部分操作简述如下：

A.流程编排过程中，可通过工具栏功能和右键菜单对画布和画布内元素进行操作(具体功能见上)；右键按住画布可拖动所有画布内元素；可通过缩略图快速滚动画布和区域转换。

B.节点与节点之间通过拖(放置于起始节点)放(放置于目标节点)生成跳转链接，label代表链接的前缀,label＝”submit”，生成的链接为submitLink；箭头线分不同的颜色，其中submit线为主线(粗实线)，其它线为辅线(细透明线)；连线事件会自动触发自动布局，重新按最优的元素布局重新分布元素(布局方向默认从左往右，工具栏中自动布局可切换为自顶向下)；

C.当选中一个组件时，会同时高亮其上游的第一个组件和下游的第一个组件以及它们之间的箭头线；

D.选中一个组件或者右键菜单选择编辑数据，会弹出属性数据编辑框，可以编辑组件注入的数据，包括链接、普通属性等。

步骤4：流程定义文件和报文定义文件持久化到工程流程路径后，触发调试服务重新编译，即可打开浏览器进入流程展示验证。

其中，为关联开发过程中调试步骤与当前流程设计文件，验证运行流程绑定到当前可视化流程，动态显示当前业务及每个业务组件跳转的状态，即浏览器中业务组件跳转时同时动态显示在当前可视化流程中，每跳转切换一个页面，则节点步进一次，高亮闪动当前组件节点步骤的状态，实现过程如下：

A.持久化服务器启动websocket服务，监听来自运行浏览器的消息；

B.浏览器启动，访问应用地址，在调试模式下，通过websocket客户端通知持久化服务器当前业务组件的组件运行状态信息；

C.持久化服务器接收到组件运行状态信息后，通过跨域通讯机制通知可视化流程引擎，进行当前业务组件节点的状态的动态化改变。

综上所述，流程可视化编辑器是一套针对业务流程进行可视化展现、编辑的工具集，其包括构件区、画布区、属性编辑区以及可视化编辑工具栏，从构件区中拖放构件到画布区，连线后，则形成流程设计文件并本地保存。区别常规开发***，本发明的开发***能轻便的打开可视化流程编辑视图，方便的导航到子流程、源代码及相关文档，调试时通过可视化动态展现调试过程。

为了实现上述功能，本发明的流程可视化编辑器的可视化引擎，其借助持久化服务器可以实现将流程可视化编辑器的内存数据进行本地存储与处理，包括流程定义文件、流程设计文件、组件清单等数据的保存与读取。以插件方式注入集成开发环境，则不需要后端***的整体部署环境，于前端集成开发环境中即可完成数据的存储与处理。具体的，持久化服务器调用抽象语法树进行本地组件的描述抽取与持久化，通过扫描当前工程目录下的本地存储的组件文件，经抽象语法树解析，获取组件清单列表，然后将其存储在组件清单文件中。此外，MVVM框架通过跨域通讯机制与持久化服务器建立通讯，获取本地组件描述列表，进行组件构件区的生成；可视化流程引擎嵌于MVVM框架中，通过访问持久化服务器获取流程定义文件内容、流程设计文件，将业务流程进行可视化呈现，从而构建了能够实现可视化业务流程构建的开发***。

此外，本实施例中所选用的可视化引擎为一种JS绘图组件，其关键架构模型包括：可视化图形模型、事务模型、图元对象模型以及组结构。其中，可视化图形模型中对图形结构的添加，更改和清除是通过图模型API来完成的。图元对象模型表示节点和连线的图元对象。组结构：在可视化流程引擎中，分组的概念就是逻辑上将一个图元与另一个进行关联。在许多的图形开发库中，这通常被成为子图。在图形模型的数据结构中，分组就是把一个或更多的连线或节点变成一个父节点或连线的子图元。由于可视化引擎为现有架构，因此，对其不进行过多陈述。

由于一个业务子流程映射成一个组结构中的子图，因此利用组结构中下钻、递升，可分别进入子流程的编辑、展示和返回父流程的编辑、展示；其过程如下：

生成组合时，将组合内的业务数据节点移入新的业务子流程，同时键入新的流程标识作为新的业务子流程的唯一标识；父流程与子流程之间仍保留入口的节点；

下钻到组合内部时，进入新的子流程的设计、编辑；递升到组合外部时，返回父流程的设计、编辑；

解除组合时，将组合内的业务子流程的流程节点还原到父流程，通过父流程与子流程之间仍保留入口的节点作为连结点，重新汇入父流程。

基于上述组合原理，可以解决业务开发过程中子业务流程快捷的复用、快速导航、组合及拆除组合的问题。

此外，基于上述可视化流程引擎的核心架构，特别是用户对象，可直接兼容嵌入渠道流程节点(业务数据节点)到流程定义文件，且不会变更渠道运行平台的流程的主节点；同时可基于已有的人工编辑生成的流程定义文件，根据流程跳转链接，逆向生成可视化流程引擎可识别可编辑的画布定义文件(流程设计文件)，实现可逆向配置。其具体是将渠道流程节点(业务数据节点)包装成用户对象，将其可视化的位置、形状信息通过用户对象嵌入子节点中。此外，基于用户对象的动态化，可以方便将规则引擎节点动态嵌入到业务流程，实现业务关注点分离。

综上所述，本发明提供的一种自助化渠道业务流程开发***及其开发方法实现了业务流程的可视化开发，在纯前端的可视化流程引擎展示整个业务流程。

需要强调的是，本发明所述的实例是说明性的，而不是限定性的，因此本发明不限于具体实施方式中所述的实例，凡是由本领域技术人员根据本发明的技术方案得出的其他实施方式，不脱离本发明宗旨和范围的，不论是修改还是替换，同样属于本发明的保护范围。

Claims (8)

1.一种自助化渠道业务流程开发***，其特征在于：至少包括流程可视化编辑器、业务管理器、组件管理器；

其中，所述流程可视化编辑器以可视化形式进行业务流程的编辑与展示；

所述组件管理器用于管理业务组件；

所述业务管理器用于实现新建业务、和/或继承业务、和/或导入业务、和/或导出业务，每个业务对应存在业务目录，所述业务目录下的子目录下存在对应业务组件信息；

其中，所述开发***将持久化服务器以插件方式注入前端集成开发环境，使得基于所述持久化服务器能以实现将数据存储在前端集成开发环境中；

所述流程可视化编辑器是将可视化引擎嵌于MVVM框架中，利用MVVM框架构建流程可视化编辑器的可视化区域布局，并通过跨域通讯机制与持久化服务器之间建立通讯关系，得以获取数据实现业务流程可视化。

2.根据权利要求1所述的***，其特征在于：所述持久化服务器调用抽象语法树进行本地组件的描述抽取与持久化。

3.根据权利要求1所述的***，其特征在于：所述流程可视化编辑器中可视化区域至少包括：构件区、画布区、属性编辑区；

所述构件区包括原子构件列表、基础组件列表和二次开发组件列表，其中，利用所述持久化服务器并通过跨域通讯机制得到业务组件数据形成所述构件区；

所述画布区为当前业务流程的所有业务结点展示、编辑的区域；

所述属性编辑区用于编辑业务组件节点的属性；

其中，利用所述持久化服务器并通过跨域通讯机制得到本地存储的业务组件数据、业务流程数据，进而实现流程可视化；以及基于所述画布区、所述属性编辑区上编辑操作反向获取数据进行本地存储。

4.根据权利要求1所述的***，其特征在于：所述***还包括：工程管理器、和/或文档帮助管理器、和/或可视化配置器；

其中，所述工程管理器为可视化工程管理模块，用于实现工程目录展现、和/或工程新建、工程打开、和/或工程导入、和/或工程导出；

所述文档帮助管理器用于文档资源的统一展现、管理；

所述可视化配置器用于实现配置文件的可视化配置。

5.一种基于权利要求1-4任一项所述***的业务流程开发方法，其特征在于：包括以下步骤：

步骤1：创建业务组件；

步骤2：打开可视化集成开发环境，新建流程定义文件或预览已存在的流程定义文件，自动生成流程设计文件，打开业务流程进入流程可视化编辑器；

其中，基于所述持久化服务器和跨域通讯机制装载业务组件到所述流程可视化编辑器的构件区形成基础组件列表和二次开发组件列表；

步骤3：在所述流程可视化编辑器中，按照业务规则进行业务组件的组合和配置，形成可视化业务流程，并保存对应的流程设计文件、流程定义信息至流程定义文件中。

6.根据权利要求1所述的业务流程开发方法，其特征在于：还包括调试步骤，调试过程如下：

A：持久化服务器启动websocket服务，监听来自运行浏览器的信息；

B：浏览器启动，访问应用地址，在调试模式下，通过websocket客户端通知持久化服务器当前业务组件的组件运行状态信息；

C：持久化服务器接收到组件运行状态信息后，通过跨域通讯机制通知可视化流程引擎，进行当前业务组件节点的状态的动态化改变，使得浏览器中业务组件跳转时同步在当前可视化流程中动态显示。

7.根据权利要求5所述的业务流程开发方法，其特征在于：所述流程可视化编辑器的可视化引擎为一种JS绘图组件，其组结构的设计为：一个业务子流程映射成一个组结构中的子图，利用组结构中下钻、递升，可分别进入子流程的编辑、展示和返回父流程的编辑、展示；其过程如下：

生成组合时，将组合内的业务数据节点移入新的业务子流程，同时键入新的流程标识作为新的业务子流程的唯一标识；父流程与子流程之间仍保留入口的节点；

下钻到组合内部时，进入新的子流程的设计、编辑；递升到组合外部时，返回父流程的设计、编辑；

解除组合时，将组合内的业务子流程的流程节点还原到父流程，通过父流程与子流程之间仍保留入口的节点作为连结点，重新汇入父流程。

8.根据权利要求5所述的业务流程开发方法，其特征在于：所述流程可视化编辑器的可视化引擎为一种JS绘图组件，所述业务流程开发方法还包括将现有流程设计文件逆向生成所述可视化引擎可识别的流程设计文件；

其中，将现有流程设计文件中的业务数据节点包装成用户对象，将其可视化的位置、形状信息通过用户对象嵌入子节点中。

Images