一种X6流程图的组件封装方法及系统

摘要

本发明涉及一种X6流程图的组件封装方法及系统，包括如下步骤：S1、根据业务场景需求，构建相应的表单；S2、基于vue框架，将表单封装成相应的实际业务组件；S3、针对同一种类型的流程图节点，构建相应的抽象函数，并且，配置抽象函数的参数；S4、根据构建的抽象函数，构造一个虚拟vue组件，将实际业务组件挂载到虚拟vue组件内部，从而得到相应的具有实际业务组件的vue组件节点；S5、通过vue的template方法，从而构造虚拟vue组件内部的渲染模板和样式，实际业务组件通过vue的v‑model方法实现数据双向绑定，使得vue组件节点内的数据，可以同步到流程图的数据结构上。

权利要求

1.一种X6流程图的组件封装方法，其特征在于，包括如下步骤：

S1、根据业务场景需求，构建相应的表单；

S2、基于vue框架，将表单封装成相应的实际业务组件；

S3、针对同一种类型的流程图节点，构建相应的抽象函数，并且，配置抽象函数的参数；

S4、根据构建的抽象函数，构造一个虚拟vue组件，将实际业务组件挂载到虚拟vue组件内部，得到相应的具有实际业务组件的vue组件节点；所述虚拟vue组件通过抽象封装对应的节点生成逻辑，通过直接调用所述虚拟vue组件抽象封装的节点生成逻辑，批量生成动态节点；

S5、通过vue的template方法，构造虚拟vue组件内部的渲染模板和样式，虚拟vue组件引用实际业务组件，并通过vue的components方法进行赋值，实际业务组件通过vue的v‑model方法实现数据双向绑定，使得vue组件节点内的数据可以同步到流程图的数据结构上，获得实现数据绑定的vue组件节点，使得vue组件节点可应用于相应业务场景。

2.如权利要求1所述的方法，其特征在于，步骤S3中，配置的抽象函数的参数包括：流程图节点的图对象、需要初始化给该节点的数据对象、节点的名称、节点的大小、节点位于图上的位置、节点必须的方法集合。

3.如权利要求1所述的方法，其特征在于，步骤S3中，所述抽象函数的函数入参包括需要添加该节点的图对象、需要初始化给该节点的数据对象。

4.如权利要求1所述的方法，其特征在于，步骤S5中，vue的template方法具体包括：将对应的节点html代码当作字符串，传入vue编译器的template属性，编译器将字符串按着html语言规范转化成抽象词法树，将抽象词法树优化后，再将其转换成可执行的代码。

5.一种X6流程图的组件封装系统，其特征在于,所述系统包括：

表单生成模块：用于根据业务场景需求，构建相应的表单；

实际业务组件模块：用于基于vue框架，将表单封装成相应的实际业务组件；

抽象函数模块：用于针对同一种类型的流程图节点，构建相应的抽象函数，并且，配置抽象函数的参数；

挂载模块：用于根据构建的抽象函数，构造一个虚拟vue组件，将实际业务组件挂载到虚拟vue组件内部，得到相应的具有实际业务组件的vue组件节点；所述虚拟vue组件通过抽象封装对应的节点生成逻辑，通过直接调用所述虚拟vue组件抽象封装的节点生成逻辑，批量生成动态节点；

数据双向绑定模块：用于通过vue的template方法，构造虚拟vue组件内部的渲染模板和样式，虚拟vue组件引用实际业务组件，并通过vue的components方法进行赋值，实际业务组件通过vue的v‑model方法实现数据双向绑定，使得vue组件节点内的数据可以同步到流程图的数据结构上，获得实现数据绑定的vue组件节点，使得vue组件节点可应用于相应业务场景。

6.如权利要求5所述的系统，其特征在于，所述抽象函数模块还包括参数配置模块，所述参数配置模块包括流程图节点的图对象、需要初始化给流程图节点的数据对象、流程图节点的名称、流程图节点的大小、流程图节点位于图上的位置、流程图节点必须的部分方法集合。

7.如权利要求5所述的系统，其特征在于，所述抽象函数模块还包括函数入参模块，所述函数入参模块包括需要添加流程图节点的图对象、需要初始化给流程图节点的数据对象。

说明书

一种X6流程图的组件封装方法及系统

技术领域

[0001] 本发明涉及antvX6应用技术领域，特别涉及一种X6流程图的组件封装方法及系统。

背景技术

[0002] Antv X6是一个简单易用的图可视化引擎，antv X6在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案，通过借助antv X6能帮助开发者搭建属于自己的图形分析应用或是图编辑器应用。

[0003] 但是，antv X6原生提供的图形能力为传统的canvas方式，使得其具有调用困难、开发效率低等缺点；antvX6流程图官方仅有react组件支持库，无通用的vue组件库，导致antvX6无对应vue组件库拓展；而且，使用vue技术的开发者数量较为庞大，在一些业务场景中，也需要使用相应的流程图控件功能；因此，传统的canvas方式生成节点不但开发效率慢，而且无法支持某些复杂业务逻辑。

[0004] 目前，使用X6流程图的x6‑vue‑shape延伸库，能够将vue组件置于流程图节点上，但是，该方案存在以下缺陷：延伸库生成的vue组件节点是封闭的，内部数据无法导出，当进行保存或缓存整图数据时，无法将节点内部的数据一并缓存，因此，无法满足业务场景诉求；

[0005] 若不同节点使用同一组件，只会创建一个组件实例，不同节点内部数据无法做到互相隔离，会互相影响；若不同节点创建并使用不同组件，则同类组件无法抽象，导致开发、维护工作量大增，也无法支持动态增加同类型节点；

[0006] 由于抽象程度较低，对于需要动态增加节点的场景，需要不断编写重复增加的新节点的代码，增加了开发成本、维护成本。

发明内容

[0007] 基于此，有必要提供一种X6流程图的组件封装方法及系统。

[0008] 本发明实施例一方面提供一种X6流程图的组件封装方法，包括如下步骤：S1、根据业务场景需求，构建相应的表单；

[0009] S2、基于vue框架，将表单封装成相应的实际业务组件；

[0010] S3、针对同一种类型的流程图节点，构建相应的抽象函数，并且，配置抽象函数的参数；

[0011] S4、根据构建的抽象函数，构造一个虚拟vue组件，将实际业务组件挂载到虚拟vue组件内部，从而得到相应的具有实际业务组件的vue组件节点；

[0012] S5、通过vue的template方法，从而构造虚拟vue组件内部的渲染模板和样式，虚拟vue组件引用实际业务组件，并通过vue的components方法进行赋值，实际业务组件通过vue的v‑model方法实现数据双向绑定，使得vue组件节点内的数据，可以同步到流程图的数据结构上，从而获得实现数据绑定的vue组件节点，使得vue组件节点可应用于相应业务场景。

[0013] 优选地，步骤S3中，配置的抽象函数的参数包括：流程图节点的图对象、需要初始化给该节点的数据对象、节点的名称、节点的大小、节点位于图上的位置、节点必须的方法集合。

[0014] 优选地，步骤S3中，所述抽象函数的函数入参包括需要添加该节点的图对象、需要初始化给该节点的数据对象。

[0015] 优选地，步骤S4中，所述虚拟vue组件通过抽象封装对应的节点生成逻辑，通过直接调用所述虚拟vue组件抽象封装的节点生成逻辑，从而批量生成动态节点。

[0016] 优选地，步骤S5中，vue的template方法具体包括：将对应的节点html代码当作字符串，传入Vue编译器的template属性。编译器将字符串按着html语言规范转化成抽象词法树，将抽象词法树优化后，再将其转换成可执行的代码。

[0017] 本发明还提供一种X6流程图的组件封装系统，所述系统包括：

[0018] 实际业务组件模块：用于根据业务场景需求，构建相应的表单，并且，基于vue框架，将表单封装成相应的实际业务组件，

[0019] 抽象函数模块：用于针对同一种类型的流程图节点，构建一个抽象函数，并且，配置抽象函数的参数，并且，根据构建的抽象函数，构造一个虚拟vue组件，并抽象封装对应的节点生成逻辑，然后，将实际业务组件挂载到该虚拟vue组件内部；

[0020] 赋值模块：用于通过vue的template方法，从而构造虚拟组件内部的渲染模板、样式，所述虚拟vue组件引用实际业务组件，并通过vue的components方法进行赋值；

[0021] 数据双向绑定模块：用于实际业务组件通过vue的v‑model方法实现数据双向绑定，使得vue组件节点内的数据可以同步到流程图的数据结构上。

[0022] 优选地，所述抽象函数模块还包括参数配置模块，所述参数配置模块包括流程图节点的图对象、需要初始化给该流程图节点的数据对象、流程图节点的名称、流程图节点的大小、流程图节点位于图上的位置、流程图节点必须的部分方法集合。

[0023] 优选地，所述抽象函数模块还包括函数入参模块，所述函数入参模块包括需要添加该流程图节点的图对象、需要初始化给该流程图节点的数据对象。

[0024] 优选地，所述抽象函数模块还包括动态节点生成模块，所述动态节点生成模块通过直接调用所述虚拟vue组件抽象封装的节点生成逻辑，从而批量生成动态节点。

[0025] 本发明为开发者提供便于使用的vue组件，用来实现基于vue基础搭建的图形分析应用或者图编辑器应用，从而辅助开发者快速、便捷搭建相应应用，能够降低开发门槛，提升开发效率；

[0026] 与普通vue组件节点相比，一方面，vue组件节点内部数据互相独立、vue组件节点相互隔离，不会互相影响，另一方面，vue组件节点内部数据可以导出，实现与流程图整体数据的同步；对于整体项目而言，代码抽象程度高，节点支持动态生成，代码量低，开发、维护成本较低。

附图说明

[0027] 通过附图中所示的本发明优选实施例更具体说明，本发明上述及其它目的、特征和优势将变得更加清晰。在全部附图中相同的附图标记指示相同的部分，且并未刻意按实际尺寸等比例缩放绘制附图，重点在于示出本申请的主旨。

[0028] 图1为本发明实施例的方法的流程图；

[0029] 图2为本发明优选实施例的方法的数据双向绑定的数据隔离、同步示意图。

具体实施方式

[0030] 下面结合附图和具体实施例对本发明技术方案作进一步的详细描述，以使本领域的技术人员可以更好地理解本发明并能予以实施，但所举实施例不作为对本发明的限定。

[0031] 如图附图1和图2所示，本发明实施例一方面提供一种X6流程图的组件封装方法，包括如下步骤：

[0032] S1、根据业务场景需求，构建相应的表单；

[0033] S2、基于vue框架，将表单封装成相应的实际业务组件；在实际业务中，除了普通的常见流程图节点（纯文字表达，无任何交互场景），常常还遇到一些与业务有关联的流程图节点。如在某流程图中，因业务要求，需要在其中的节点中动态修改节点名称、对应属性等字段。我们将这类场景诉求抽象成不同的表单字段，先将对应的场景封装成一个小型的表单控件，在通过节点构造方法将其构造成流程图节点——这样的好处是，流程图功能与表单功能完全解耦，拓展性和可维护性更强。

[0034] S3、针对同一种类型的流程图节点，构建相应的抽象函数，并且，配置抽象函数的参数；该抽象函数，将构造一个虚拟的vue组件实例，并抽象封装对应的节点生成方法，该方法仅生成了一个空白的vue实例。

[0035] S4、根据构建的抽象函数，构造一个虚拟vue组件，将实际业务组件挂载到虚拟vue组件内部，从而得到相应的具有实际业务组件的vue组件节点，将得到的vue组件节点应用于流程图业务场景；

[0036] S5、通过vue的template方法，从而构造虚拟vue组件内部的渲染模板和样式，虚拟vue组件引用实际业务组件，并通过vue的components方法进行赋值，实际业务组件通过vue的v‑model方法实现数据双向绑定，使得vue组件节点内的数据，可以同步到流程图的数据结构上，从而获得实现数据绑定的vue组件节点，使得vue组件节点可应用于相应业务场景。

[0037] 对于业务组件，在最外层监听DOM元素的input事件，当发出事件后，将事件获取到的$event.target.value值赋值给外层变量。当外层变量修改时，触发浏览器的object.definedProperty中的set方法，将data中的当前变量进行赋值。这样，vue组件节点内的数据，可以同步到图的数据结构上。此应用场景在于，如节点组件需要实现一个复杂的表单，可以通过vue的数据双向绑定模型，实时将数据同步到流程图主数据上，以此实现多节点数据联动、其他外层组件数据联动。同时，针对组件内部需要由复杂表单构建的场景，此方案较传统方法能更简便、更安全、更可控的同步数据流动。

[0038] 此外，使用此方案，对图形结构数据进行序列化时，可以简单的将组件节点内部的数据同步渲染，不会丢失临时操作产生的数据。相较传统方案，如要同步图内组件节点内部数据信息，需要单独缓存节点数据，并通过额外操作复制，效率较低，同时操作繁琐、维护成本高。对图形数据接口反序列化时，也可以通过此方法，将组件内数据同步至图形结构内，实现数据动态缓存，不会丢失用户操作、编辑流程图时产生的行为数据。

[0039] 此外，使用此方法创建动态组件时，针对同一类型节点，可以使用相同基础元组件，可如同正常创建vue组件一样创建相应节点组件，组件包含正常vue组件对应生命周期。

[0040] 对于需要动态增加节点的场景，通过封装抽象方法，可以通过直接调用该方法，批量生成动态节点。

[0041] 并且，因为使用了vue的runtime模式，节点内部的数据保存在不同vue实例上，互相独立，不会互相干扰，操作单一节点数据变化，不会影响其他节点内部数据变化，籍此，可以实现组件互相动态独立。

[0042] 在优选实施例中，步骤S1中，配置的抽象函数的参数包括：

[0043] 流程图节点的图对象、需要初始化给该节点的数据对象、节点的名称、节点的大小、节点位于图上的位置、节点必须的部分方法集合。

[0044] 在优选实施例中，步骤S3中，所述抽象函数的函数入参包括需要添加该节点的图对象、需要初始化给该节点的数据对象。

[0045] 与普通vue组件节点相比，一方面，vue组件节点内部数据互相独立、vue组件节点相互隔离，不会互相影响，另一方面，vue组件节点内部数据可以导出，实现与流程图整体数据的同步，例如，保存、缓存整图数据时，可以将节点内部的数据一并缓存。

[0046] 在优选实施例中，步骤S4中，所述虚拟vue组件通过抽象封装对应的节点生成逻辑，通过直接调用所述虚拟vue组件对应的节点生成逻辑，从而批量生成动态节点。由于代码抽象程度高，代码量低，节点支持动态生成。

[0047] 在优选实施例中，步骤S5中，vue的template方法具体包括：将对应的节点html代码当作字符串，传入Vue编译器的template属性。编译器将字符串按着html语言规范转化成抽象词法树，将抽象词法树优化后，再将其转换成可执行的代码。

[0048] 使用本方法获得的具有实际业务组件的流程图节点，有以下优点：

[0049] 1、组件内部数据可以一并序列化至流程图主数据上；同时，节点组件内部数据也可以通过反序列化复原，使得其能够方便的应用于需要整理缓存图数据的一些场景中；

[0050] 2、对一些需要批量创建相同形式、相同类型组件的场景，能够快速、批量创建节点组件；同时，每个节点内部互相独立，数据结构不会互相影响，数据不会互相污染。节点支持动态生成，代码量低；

[0051] 3、对于整体项目而言，代码抽象程度高，开发、维护成本较低。

[0052] 本发明还提供一种X6流程图的组件封装系统，所述系统包括：

[0053] 实际业务组件模块：用于根据业务场景需求，构建相应的表单，并且，基于vue框架，将表单封装成相应的实际业务组件，

[0054] 抽象函数模块：用于针对同一种类型的流程图节点，构建一个抽象函数，并且，配置抽象函数的参数，并且，根据构建的抽象函数，构造一个虚拟vue组件，并抽象封装对应的节点生成逻辑，然后，将实际业务组件挂载到该虚拟vue组件内部；

[0055] 赋值模块：用于通过vue的template方法，从而构造虚拟组件内部的渲染模板、样式，所述虚拟vue组件引用实际业务组件，并通过vue的components方法进行赋值；

[0056] 数据双向绑定模块：用于实际业务组件通过vue的v‑model方法实现数据双向绑定，使得vue组件节点内的数据可以同步到流程图的数据结构上。

[0057] 在优选实施例中，所述抽象函数模块还包括参数配置模块，所述参数配置模块包括流程图节点的图对象、需要初始化给该流程图节点的数据对象、流程图节点的名称、流程图节点的大小、流程图节点位于图上的位置、流程图节点必须的部分方法集合。

[0058] 在优选实施例中，所述抽象函数模块还包括函数入参模块，所述函数入参模块包括需要添加该流程图节点的图对象、需要初始化给该流程图节点的数据对象。

[0059] 在优选实施例中，所述抽象函数模块还包括动态节点生成模块，所述动态节点生成模块通过直接调用所述虚拟vue组件抽象封装的节点生成逻辑，从而批量生成动态节点。

[0060] 以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。