CN110377209A - 一种通过拖拽实现可视化流程配置的方法及装置 - Google Patents

Abstract

本发明实施例提供一种通过拖拽实现可视化流程配置的方法及装置，该方法包括：获取第一流程节点在拖拽发生时的第一位置，根据第一流程节点的拖拽属性信息获取第一拖拽对象并进行拖拽操作；若拖拽操作结束则获取第一流程节点当前所在的第二位置；判断第二位置是否存在第二流程节点，若不存在则结束；若存在则根据第二流程节点的拖拽属性信息获取第二拖拽对象，并将第二拖拽对象自动拖拽至第一位置；更新第一拖拽对象和第二拖拽对象位置存储信息。本发明实施例提供的通过拖拽实现可视化流程配置的方法及装置，实现了通过拖拽进行可视化流程配置，且配置过程简单方便，不易出错，提高了可视化流程配置的自动化水平及效率，节省了人力，提高了可靠性。

Description

一种通过拖拽实现可视化流程配置的方法及装置

技术领域

本发明实施例涉及计算机技术领域，具体涉及一种通过拖拽实现可视化流程配置的方法及装置。

背景技术

在web应用的开发中，经常需要显示一些可视化的流程。目前针对不同城市、不同产品的可视化流程，需要逐一手动地对被配置的信息添加顺序的相应优先级值，通过此值来确定相应数据信息的顺序。具体地，针对不同城市、不同产品，对需要配置顺序的数据信息手动填写表示顺序的字段，使用此数据信息时通过此字段来判断顺序。

但是，随着需要配置的信息量不断增长，手动逐个配置顺序字段，操作复杂且造成很大的人力负担。

发明内容

为解决现有可视化流程配置复杂、人力消耗大的问题，本发明实施例提供一种通过拖拽实现可视化流程配置的方法及装置。

第一方面，本发明实施例提供一种通过拖拽实现可视化流程配置的方法，包括：获取第一流程节点在拖拽发生时的第一位置的信息，并根据所述第一流程节点的拖拽属性信息获取第一拖拽对象，针对所述第一拖拽对象进行拖拽操作；判断针对所述第一拖拽对象的拖拽操作是否结束，若结束，则获取所述第一流程节点当前所在的第二位置的信息；并进一步判断所述第二位置是否存在第二流程节点，若不存在，则结束；若存在，则根据所述第二流程节点的拖拽属性信息获取第二拖拽对象，并且将所述第二拖拽对象自动拖拽至所述第一位置；更新所述第一拖拽对象和所述第二拖拽对象的位置存储信息第一位置的信息第二位置的信息。

进一步地，在所述第一流程节点的拖拽属性信息为单节点拖拽时，所述第一拖拽对象为所述第一流程节点；在所述第一流程节点的拖拽属性信息为组件拖拽时，所述第一拖拽对象为所述第一流程节点及隶属于所述第一流程节点的子流程节点；在所述第二流程节点的拖拽属性信息为单节点拖拽时，所述第二拖拽对象为所述第二流程节点；在所述第二流程节点的拖拽属性信息为组件拖拽时，所述第二拖拽对象为所述第二流程节点及隶属于所述第二流程节点的子流程节点。

进一步地，所述更新所述第一拖拽对象和所述第二拖拽对象的位置存储信息，具体包括：在表示位置存储信息的数组中，将所述第一流程节点的数据信息存储入表示所述第二位置的信息的数组元素中，并将所述第二流程节点的数据信息存储入表示所述第一位置的信息的数组元素中；若所述第一拖拽对象包括子流程节点，则根据所述子流程节点与所述第一流程节点的位置关系及数组针对多级流程节点预设的存储方式，将所述第一流程节点的子流程节点的数据信息存储入与所述表示第二位置的信息的数组元素对应的数组元素中；若所述第二拖拽对象包括子流程节点，则根据所述子流程节点与所述第二流程节点的位置关系及所述数组针对多级流程节点预设的存储方式，将所述第二流程节点的子流程节点的数据信息存储入与所述表示第一位置的信息的数组元素对应的数组元素中。

进一步地，在所述获取所述第一流程节点当前所在的第二位置的信息之后，所述进一步判断所述第二位置是否存在第二流程节点之前，所述方法还包括：判断所述第二位置是否符合所述第一流程节点的预设拖拽范围，若是，则执行后续步骤；若否，则取消对所述第一拖拽对象的拖拽操作。

进一步地，所述方法还包括：对于包含子流程节点的各个流程节点，将每个流程节点及对应的子流程节点封装成可拖拽组件，并将所述包含子流程节点的各个流程节点的所述拖拽属性信息设置为所述组件拖拽；则在所述包含子流程节点的各个流程节点被拖拽时，对相应流程节点及所包含的子流程节点同时执行拖拽操作；对于不包含子流程节点的各个流程节点，将所述拖拽属性信息设置为所述单节点拖拽，则在相应的流程节点被拖拽时，只对所述流程节点自身执行拖拽操作。

进一步地，所述流程节点的级别由高到低分为第1至第N级别，所述对于包含子流程节点的各个流程节点，将每个流程节点及对应的子流程节点封装成可拖拽组件，具体包括：根据所述第N-1级别的所述流程节点及其包含的第N级别的所述流程节点，建立第N-1级可拖拽组件，实现在所述第N-1级别的所述流程节点被拖拽时，其包含的所述第N级别的所述流程节点同时被拖拽；根据所述第N-2级别的所述流程节点及所述第N-1级可拖拽组件，建立第N-2级可拖拽组件，实现在所述第N-2级别的所述流程节点被拖拽时，其包含的所述第N-1级别的所述流程节点同时被拖拽；根据所述N-3级别的所述流程节点及所述第N-2级可拖拽组件，建立第N-3级可拖拽组件，实现在所述第N-3级别的所述流程节点被拖拽时，其包含的所述第N-2级别的所述流程节点同时被拖拽；以此类推，直至最终实现建立第1级可拖拽组件。

进一步地，在建立任意一级可拖拽组件时，首先建立任意一个本级可拖拽组件；然后采取循环遍历的方式建立其余的本级可拖拽组件。

第二方面，本发明实施例提供一种通过拖拽实现可视化流程配置的装置，包括：第一拖拽模块，用于获取第一流程节点在拖拽发生时的第一位置的信息，并根据所述第一流程节点的拖拽属性信息获取第一拖拽对象，针对所述第一拖拽对象进行拖拽操作；第二拖拽模块，用于判断针对所述第一拖拽对象的拖拽操作是否结束，若结束，则获取所述第一流程节点当前所在的第二位置的信息；并进一步判断所述第二位置是否存在第二流程节点，若不存在，则结束；若存在，则根据所述第二流程节点的拖拽属性信息获取第二拖拽对象，并且将所述第二拖拽对象自动拖拽至所述第一位置；位置信息更新模块，用于更新所述第一拖拽对象和所述第二拖拽对象的位置存储信息第一位置的信息第二位置的信息。

第三方面，本发明实施例提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如第一方面所提供的方法的步骤。

第四方面，本发明实施例提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如第一方面所提供的方法的步骤。

本发明实施例提供的通过拖拽实现可视化流程配置的方法及装置，实现了通过拖拽进行可视化流程配置，且配置过程简单方便，不易出错，提高了可视化流程配置的自动化水平及效率，节省了人力，提高了可靠性。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例提供的通过拖拽实现可视化流程配置的方法流程图；

图2是本发明实施例提供的通过拖拽实现可视化流程配置的方法中一可视化流程示意图；

图3是本发明实施例提供的通过拖拽实现可视化流程配置的方法中另一可视化流程的示意图；

图4是对图3的流程节点A11拖向A12的结果示意图；

图5是对图3的流程节点B2拖向B3的结果示意图；

图6是对图3流程节点A拖向B的结果示意图；

图7是本发明实施例提供的通过拖拽实现可视化流程配置的装置结构示意图；

图8是本发明实施例提供的电子设备的实体结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整的描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

图1是本发明实施例提供的通过拖拽实现可视化流程配置的方法流程图。如图1所示，所述方法包括：

步骤101、获取第一流程节点在拖拽发生时的第一位置的信息，并根据所述第一流程节点的拖拽属性信息获取第一拖拽对象，针对所述第一拖拽对象进行拖拽操作第一位置的信息；

所述第一流程节点是一可视化流程中的任一节点。其中，当针对第一流程节点的拖拽发生时，获取所述第一流程节点在拖拽发生时的第一位置的信息。因此，拖拽发生时的第一位置的信息即第一流程节点的初始位置信息。也即，第一位置即第一流程节点被拖拽时的初始位置。

根据所述第一流程节点的拖拽属性信息获取第一拖拽对象，针对所述第一拖拽对象进行拖拽操作。对于第一流程节点进行拖拽操作，并不一定只实现对第一流程节点的拖拽，实际的拖拽对象为第一拖拽对象，第一拖拽对象可以只为第一流程节点，还可以包括除第一流程节点之外的其余节点，具体包含哪些其余流程节点可以预先设定。

所述拖拽属性信息可以表示在第一流程节点被拖拽时，是只对第一流程节点进行拖拽还是对第一流程节点及预设的其余流程节点同时进行拖拽。若所述拖拽属性信息表示在第一流程节点被拖拽时，只对第一流程节点进行拖拽，则第一拖拽对象是第一流程节点；若所述拖拽属性信息表示在第一流程节点被拖拽时对第一流程节点及预设的其余节点同时进行拖拽，则第一拖拽对象为第一流程节点及预设的其余流程节点。

因此，根据第一流程节点的拖拽属性信息可以获取第一拖拽对象，获取到第一拖拽对象后，针对所述第一拖拽对象进行拖拽操作。所述第一拖拽对象即实际被拖拽的对象。

步骤102、判断针对所述第一拖拽对象的拖拽操作是否结束，若结束，则获取所述第一流程节点当前所在的第二位置的信息；并进一步判断所述第二位置是否存在第二流程节点，若不存在，则结束；若存在，则根据所述第二流程节点的拖拽属性信息获取第二拖拽对象，并且将所述第二拖拽对象自动拖拽至所述第一位置；

拖拽操作结束的判断可以通过拖拽第一流程节点的鼠标松开进行判断。若判断获知所述拖拽事件结束，则获取所述第一流程节点当前所在的第二位置的信息。所述第二位置的信息即拖拽操作结束时第一流程节点所在位置的信息，也即，第二位置即拖拽操作结束时第一流程节点的所在位置。

根据第一拖拽对象的拖拽属性信息的不同，所述第一拖拽对象可能只包括所述第一流程节点，也可能还包括除所述第一流程节点外的其余流程节点。无论上述哪种情况，在对第一拖拽对象进行拖拽操作时，会将第一流程节点拖拽至第二位置。若第一拖拽对象还包括除第一流程节点外的其余流程节点，则其余流程节点同时被拖动，且其余流程节点与第一流程节点在可视化流程中的位置关系不变。

获取到第一流程节点当前所在的第二位置的信息之后，进一步判断所述第二位置是否存在第二流程节点，即所述第二位置是否存在原流程节点，若不存在，则结束拖拽；若存在，则根据原处于第二位置的第二流程节点的拖拽属性信息获取第二拖拽对象。第二流程节点可以是可视化流程中除第一流程节点外的其余任一流程节点。所述拖拽属性信息可以表示在第二流程节点被拖拽时，是只对第二流程节点进行拖拽还是对第二流程节点及预设的其余流程节点同时进行拖拽。若所述拖拽属性信息表示在第二流程节点被拖拽时，只对第二流程节点进行拖拽，则第二拖拽对象是第二流程节点；若所述拖拽属性信息表示在第二流程节点被拖拽时对第二流程节点及预设的其余流程节点同时进行拖拽，则第二拖拽对象为第二流程节点及预设的其余流程节点。

因此，根据第二流程节点的拖拽属性信息可以获取第二拖拽对象，获取到第二拖拽对象后，自动触发针对所述第二拖拽对象的拖拽操作。

所述第二拖拽对象进行拖拽操作包括将所述第二流程节点拖拽至第一位置。根据第二拖拽对象的拖拽属性信息的不同，所述第二拖拽对象可能只包括所述第二流程节点，也可能还包括除所述第二流程节点外的其余流程节点。无论上述哪种情况，在对第二拖拽对象进行拖拽操作时，会将第二流程节点拖拽至第一位置。若第二拖拽对象还包括除第二流程节点外的其余流程节点，则其余流程节点同时被拖动，且其余流程节点与第二流程节点在可视化流程中的位置关系不变。

若不存在第二流程节点，则完成拖拽。可见，若第二位置存在第二流程节点，则经过上述过程，实现了第一流程节点和第二流程节点的位置互换。并且，若第一流程节点或第二流程节点具有预设的同时发生拖拽的其余节点，则其余节点同时被拖拽。

步骤103、更新所述第一拖拽对象和所述第二拖拽对象的位置存储信息；

由于对第一拖拽对象和第二拖拽对象均产生了拖拽操作，因此需要更新所述第一拖拽对象和所述第二拖拽对象的位置存储信息，以完成可视化流程配置的拖拽配置。

本发明实施例能够利用简单高效可视的交互方法，以解决不同城市不同流程改变配置数据顺序的处理需求，对于不同城市不同流程，只需要对需要配置的对应数据展示部分，通过拖拽调整到目标位置，实现操作简单高效配置。

本发明实施例实现了通过拖拽进行可视化流程配置，且配置过程简单方便，不易出错，提高了可视化流程配置的自动化水平及效率，节省了人力，提高了可靠性。

进一步地，基于上述实施例，在所述第一流程节点的拖拽属性信息为单节点拖拽时，所述第一拖拽对象为所述第一流程节点；在所述第一流程节点的拖拽属性信息为组件拖拽时，所述第一拖拽对象为所述第一流程节点及隶属于所述第一流程节点的子流程节点；在所述第二流程节点的拖拽属性信息为单节点拖拽时，所述第二拖拽对象为所述第二流程节点；在所述第二流程节点的拖拽属性信息为组件拖拽时，所述第二拖拽对象为所述第二流程节点及隶属于所述第二流程节点的子流程节点。

流程节点的所述拖拽属性信息包括单节点拖拽及组件拖拽两种。单节点拖拽表示只对相应流程节点进行拖拽，组件拖拽表示除对相应的流程节点进行拖拽外，还对预设的其余流程节点进行拖拽。由于通常需要在某个流程节点改变位置时，其子流程节点随之变动，因此，预设的其余流程节点可以设置为相应流程节点的子流程节点。

因此，在所述第一流程节点的拖拽属性信息为单节点拖拽时，所述第一拖拽对象为所述第一流程节点；在所述第一流程节点的拖拽属性信息为组件拖拽时，所述第一拖拽对象为所述第一流程节点及隶属于所述第一流程节点的子流程节点；在所述第二流程节点的拖拽属性信息为单节点拖拽时，所述第二拖拽对象为所述第二流程节点；在所述第二流程节点的拖拽属性信息为组件拖拽时，所述第二拖拽对象为所述第二流程节点及隶属于所述第二流程节点的子流程节点。

在上述实施例的基础上，本发明实施例通过设定流程节点的拖拽属性信息为单节点拖拽及组件拖拽，在拖拽属性信息为单节点拖拽时，只对相应的流程节点进行拖拽，在拖拽属性信息为组件拖拽时，对相应的流程节点及其包含的子流程节点同时进行拖拽，满足了应用需求，提高了实用性。

进一步地，基于上述实施例，所述更新所述第一拖拽对象和所述第二拖拽对象的位置存储信息，具体包括：在表示位置存储信息的数组中，将所述第一流程节点的数据信息存储入表示所述第二位置的信息的数组元素中，并将所述第二流程节点的数据信息存储入表示所述第一位置的信息的数组元素中；若所述第一拖拽对象包括子流程节点，则根据所述子流程节点与所述第一流程节点的位置关系及数组针对多级流程节点预设的存储方式，将所述第一流程节点的子流程节点的数据信息存储入与所述表示第二位置的信息的数组元素对应的数组元素中；若所述第二拖拽对象包括子流程节点，则根据所述子流程节点与所述第二流程节点的位置关系及所述数组针对多级流程节点预设的存储方式，将所述第二流程节点的子流程节点的数据信息存储入与所述表示第一位置的信息的数组元素对应的数组元素中。

可视化流程中各个流程节点的位置信息可以用数组表示，数组中包括多个数组元素，每个数组元素可以表示相应的位置信息。可以将流程节点的数据信息(如节点标识)存储入相应的数组元素，则相应数组元素的位置信息即为此流程节点的位置信息。在更新页面或重新打开页面时，相应流程节点便在可视化流程中的相应位置进行显示。

由于在可视化流程中，经常会出现某个流程节点包括子流程节点的情况，也可以说流程节点具有级别之分。那么，在数组中，需要为不同级别的流程节点设定存储方式，比如，以包含两级流程节点为例，设置1级流程节点的存储的第一数组元素，并相应地设置1级流程节点的子流程节点即2级流程节点所存储的第二数组元素，第一数组元素和第二数组元素具有预设的位置相对关系。对于某个流程节点的子流程节点的识别，可以通过查询页面元素树实现。

因此，若针对第一拖拽对象和所述第二拖拽对象发生了拖拽操作，则需要对第一拖拽对象和第二拖拽对象所涉及到的流程节点的位置存储信息进行更新。若第一拖拽对象包括第一流程节点和其包含的子流程节点，更新第一拖拽对象的位置存储信息后，便可相应地更新其包含的子流程节点的位置存储信息。同理，若第二拖拽对象包括第二流程节点和其包含的子流程节点，更新第二拖拽对象的位置存储信息后，便可相应地更新其包含的子流程节点的位置存储信息。

因此，更新所述第一拖拽对象和所述第二拖拽对象的位置存储信息，可以在表示位置存储信息的数组中，将所述第一流程节点的数据信息存储入表示所述第二位置的信息的数组元素中，并将所述第二流程节点的数据信息存储入表示所述第一位置的信息的数组元素中，即实现第一流程节点和第二流程节点的位置存储信息的更新。

若所述第一拖拽对象包括子流程节点，则根据所述子流程节点与所述第一流程节点的位置关系(子流程节点可能还分多个级别)，将所述第一流程节点的子流程节点的数据信息存储入与所述表示第二位置的信息的数组元素对应的数组元素中(根据数组针对多级流程节点预设的存储方式进行存储)。

若所述第二拖拽对象包括子流程节点，则根据所述子流程节点与所述第二流程节点的位置关系，将所述第二流程节点的子流程节点的数据信息存储入与所述表示第一位置的信息的数组元素对应的数组元素中。

在上述实施例的基础上，本发明实施例通过在数组中更新第一流程节点和第二流程节点的位置存储信息，并根据数组针对多级流程节点预设的存储方式更新子流程节点的位置存储信息，实现了拖拽后位置发生变动的流程节点的位置存储信息更新的便利化，提高了处理效率。

进一步地，基于上述实施例，在所述获取所述第一流程节点当前所在的第二位置的信息之后，所述进一步判断所述第二位置是否存在第二流程节点之前，所述方法还包括：判断所述第二位置是否符合所述第一流程节点的预设拖拽范围，若是，则执行后续步骤；若否，则取消对所述第一拖拽对象的拖拽操作。

由于可视化流程中的某些流程节点的相对位置关系是不能变化的，比如对于房产交易流程中的“登记面签结果”是“面签”流程节点的子流程节点，“登记网签结果”则是“网签”流程节点的子流程节点，因此“登记面签结果”和“登记网签结果”的位置关系不能互换。因此，若发生了将“登记面签结果”流程节点拖拽到“登记网签结果”的操作，则是错误操作。为避免上述错误操作，针对可视化流程中的各个流程节点预先设置了拖拽范围，即所述预设拖拽范围。

图2是本发明实施例提供的通过拖拽实现可视化流程配置的方法中一可视化流程示意图。如图2所示，图2表示商业贷款房产交易的一个流程图，对于此流程图中的各个流程节点，可以预先设置为“受理”、“网签”、“缴税”、“过户”、“出不动产证”、“面签”流程节点之间可以拖拽互换，而“受理”、“网签”、“缴税”、“过户”、“出不动产证”、“面签”各自下的子流程节点的拖拽范围不超过相应的母流程节点，只在同属于某流程节点的子流程节点之间进行拖拽互换。

因此，在所述获取所述第一流程节点所在的第二位置的信息之后，首先判断所述第二位置是否符合所述第一流程节点的预设拖拽范围，若是，则执行后续步骤；若否，则取消对所述第一拖拽对象的拖拽操作。

在上述实施例的基础上，本发明实施例通过对流程节点预先设定拖拽范围，在符合拖拽范围要求时才允许实现拖拽操作，提高了可视化流程配置的可靠性。

进一步地，基于上述实施例，所述方法还包括：对于包含子流程节点的各个流程节点，将每个流程节点及对应的子流程节点封装成可拖拽组件，并将所述包含子流程节点的各个流程节点的所述拖拽属性信息设置为所述组件拖拽；则在所述包含子流程节点的各个流程节点被拖拽时，对相应流程节点及所包含的子流程节点同时执行拖拽操作；对于不包含子流程节点的各个流程节点，将所述拖拽属性信息设置为所述单节点拖拽，则在相应的流程节点被拖拽时，只对所述流程节点自身执行拖拽操作。

在进行拖拽操作之前，需要对各个流程节点配置拖拽属性信息，并且，为了支持某个流程节点被拖拽时，其包含的子流程节点同时被拖拽，可以将所述流程节点及其包含的子流程节点设置成可拖拽组件。具体地，可以通过开源工具实现，如可以基于react-dnd实现。

在一个设置好的拖拽组件中，并不是其中的任意一个流程节点被拖拽时，拖拽组件中的其余节点均同时被拖拽。以图2为例，若将“网签”、“登记网签结果”和“解抵押”封装成了可拖拽组件，其中，“登记网签结果”和“解抵押”是“网签”流程节点的子流程节点。可见，只需在拖拽“网签”流程节点时，“登记网签结果”和“解抵押”随之被拖拽，而在拖拽“登记网签结果”或“解抵押”流程节点时，“网签”流程节点不能被拖拽。因此，除了设置可拖拽组件外，还需设置流程节点的拖拽属性信息。

因此，继续上例，可以将“网签”流程节点的拖拽属性信息设置为组件拖拽，在“网签”流程节点被拖拽时，相应的子流程节点“登记网签结果”和“解抵押”同时被拖拽。若“登记网签结果”和“解抵押”均没有进一步包含的子流程节点，则可以将“登记网签结果”和“解抵押”的拖拽属性信息设置为单节点拖拽，则在将“登记网签结果”或“解抵押”拖拽时，只对被拖拽的流程节点自身发生拖拽操作。若“登记网签结果”或“解抵押”具有进一步包含的子流程节点，比如“登记网签结果”还具有进一步包含的子流程节点，则需要将“登记网签结果”的拖拽属性信息设置为组件拖拽，在“登记网签结果”被拖拽时，其与其包含的子流程节点同时被拖拽。相应地，“登记网签结果”和其包含的子流程节点也需要设置成一个可拖拽组件。

因此，在进行拖拽操作之前，对于包含子流程节点的各个流程节点，将每个流程节点及对应的子流程节点封装成可拖拽组件，并将所述包含子流程节点的各个流程节点的所述拖拽属性信息设置为所述组件拖拽；实现在所述包含子流程节点的各个流程节点被拖拽时，对相应流程节点及所包含的子流程节点同时执行拖拽操作；对于不包含子流程节点的各个流程节点，将所述拖拽属性信息设置为所述单节点拖拽，则在相应的流程节点被拖拽时，只对所述流程节点自身执行拖拽操作。

在上述实施例的基础上，本发明实施例通过封装可拖拽组件及配置各个流程节点的拖拽属性信息，有助于实现通过拖拽实现单节点拖拽配置及多节点同步拖拽配置。

进一步地，基于上述实施例，所述流程节点的级别由高到低分为第1至第N级别，所述对于包含子流程节点的各个流程节点，将每个流程节点及对应的子流程节点封装成可拖拽组件，具体包括：根据所述第N-1级别的所述流程节点及其包含的第N级别的所述流程节点，建立第N-1级可拖拽组件，实现在所述第N-1级别的所述流程节点被拖拽时，其包含的所述第N级别的所述流程节点同时被拖拽；根据所述第N-2级别的所述流程节点及所述第N-1级可拖拽组件，建立第N-2级可拖拽组件，实现在所述第N-2级别的所述流程节点被拖拽时，其包含的所述第N-1级别的所述流程节点同时被拖拽；根据所述N-3级别的所述流程节点及所述第N-2级可拖拽组件，建立第N-3级可拖拽组件，实现在所述第N-3级别的所述流程节点被拖拽时，其包含的所述第N-2级别的所述流程节点同时被拖拽；以此类推，直至最终实现建立第1级可拖拽组件。

可视化流程中的各个流程节点具有级别之分，其中，第1级别的级别最高，与第1级别直接相连的子流程节点则为第2级别的流程节点，与第2级别的流程节点直接相连的子流程节点则为第3级别的流程节点，以此类推，可以将设所述流程节点的级别由高到低分为第1至第N级别。

对于包含子流程节点的流程节点，需要将所述流程节点和其包含的子流程节点封装成可拖拽组件。对于包含子流程节点的各个流程节点，将每个流程节点及对应的子流程节点封装成可拖拽组件时，可以从最低级别的包含子流程节点的流程节点开始实施。由于第N级别的流程节点必然不包括子流程节点，因此，可以首先针对第N-1级别的所述流程节点及其包含的子流程节点即第N级别的所述流程节点，进行可拖拽组件的封装。从而，根据所述第N-1级别的所述流程节点及其包含的第N级别的所述流程节点，建立第N-1级可拖拽组件，实现在所述第N-1级别的所述流程节点被拖拽时，其包含的所述第N级别的所述流程节点同时被拖拽。

在得到第N-1级可拖拽组件后，根据所述第N-2级别的所述流程节点及其包含的子流程节点，建立第N-2级可拖拽组件时，可以通过组件传入的方式，通过传入建立好的第N-1级可拖拽组件，建立第N-2级可拖拽组件。因此，根据所述第N-2级别的所述流程节点及所述第N-1级可拖拽组件，建立第N-2级可拖拽组件，实现在所述第N-2级别的所述流程节点被拖拽时，其包含的所述第N-1级别的所述流程节点同时被拖拽。在所述第N-2级别的所述流程节点被拖拽时，其包含的所述第N-1级别的所述流程节点同时被拖拽，而第N-1级别的所述流程节点被拖拽，同时实现第N级别的流程节点被拖拽。因此，便实现了在第N-2级别的所述流程节点被拖拽时，其包含的子流程节点(直接相连或间接相连)同时被拖拽，从而建立好第N-2级可拖拽组件。

同理，在得到第N-2级可拖拽组件后，根据所述第N-3级别的所述流程节点及其包含的子流程节点，建立第N-3级可拖拽组件时，可以通过组件传入的方式，通过传入建立好的第N-2级可拖拽组件，建立第N-3级可拖拽组件。因此，根据所述第N-3级别的所述流程节点及所述第N-2级可拖拽组件，建立第N-3级可拖拽组件，实现在所述第N-3级别的所述流程节点被拖拽时，其包含的所述第N-2级别的所述流程节点同时被拖拽。在所述第N-3级别的所述流程节点被拖拽时，其包含的所述第N-2级别的所述流程节点同时被拖拽，而第N-2级别的所述流程节点被拖拽，同时实现第N-1级别的流程节点被拖拽,而第N-1级别的所述流程节点被拖拽，同时实现第N级别的流程节点被拖拽。因此，便实现了在第N-3级别的所述流程节点被拖拽时，其包含的子流程节点(直接相连或间接相连)同时被拖拽，从而建立好第N-3级可拖拽组件。

……

以此类推，直至建立好第1级可拖拽组件，实现对于包含子流程节点的各个流程节点，将每个流程节点及对应的子流程节点封装成可拖拽组件。

在上述实施例的基础上，本发明实施例通过基于流程节点的级别，从流程的末端节点开始对各个流程节点及包含的子流程节点建立可拖拽组件，并通过组件传入的方式，依次建立更高级别的可拖拽组件，实现了可拖拽组件的快速建立。

进一步地，基于上述实施例，在建立任意一级可拖拽组件时，首先建立任意一个本级可拖拽组件；然后采取循环遍历的方式建立其余的本级可拖拽组件。

在建立任意一级可拖拽组件时，可根据包含子流程节点的本级流程节点的数量逐个建立可拖拽组件。为进一步提高可拖拽组件的建立速度和实现的简便性，可以首先建立任意一个本级可拖拽组件；然后采取循环遍历的方式建立其余的本级可拖拽组件。在建立好的任意一个本级可拖拽组件后，通过循环遍历页面元素树获取其他包含子流程节点的本级流程节点HTML结构(本级流程节点与其包含的子流程节点所构成的结构)，并将所述任意建立的本级可拖拽组件的配置赋予其他本级流程节点，进而实现其他本级可拖拽组件的快速建立。

以基于react-dnd实现上述功能为例，其步骤可以包括：

1、基于react-dnd技术编写基础的可拖动组件SortableChild，并配置上组件需要的属性，如data、index等。

2、基于SortableChild编写Sortable组件，从而实现多个SortableChild组件的建立。

3、在流程配置页面，引用sortable组件并传入相应的数据，可根据各个SortableChild组件的设置情况进行拖拽配置。

在上述实施例的基础上，本发明实施例通过在建立任意一级可拖拽组件时，首先建立任意一个本级可拖拽组件；然后采取循环遍历的方式建立其余的本级可拖拽组件，进一步提高了可拖拽组件的建立效率。

下面通过具体的实例来说明本发明实施例提供的通过拖拽实现可视化流程配置的方法的功能。

图3是本发明实施例提供的通过拖拽实现可视化流程配置的方法中另一可视化流程的示意图。如图3所示的可视化流程，包括三级流程节点，其中第1级流程节点包括节点A和节点B，第2级流程节点包括节点A1、节点A2、节点A3、节点A4、节点B1、节点B2、节点B3及节点B4，其中，节点A1、节点A2、节点A3及节点A4是节点A的直接子流程节点，节点B1、节点B2、节点B3及节点B4是节点B的直接子流程节点。三级节点包括节点A11、A12、A21、A22、A31、A32、A41，B11、B12、B21、B31、B32、B41及B42。其中，节点A11、A12是节点A1的直接子流程节点，节点A21、A22是节点A2的直接子流程节点，节点A31、A32是节点A3的直接子流程节点，节点A41是节点A4的直接子流程节点，节点B11、B12是节点B1的直接子流程节点，节点B21是节点B2的直接子流程节点，节点B31、B32是节点B3的直接子流程节点，节点B41、B42是节点B4的直接子流程节点。节点A11、A12、A21、A22、A31、A32、A41均是节点A的间接子流程节点。节点B11、B12、B21、B31、B32、B41及B42均是节点B的间接子流程节点。各个包含子流程节点的流程节点需要和其子流程节点封装成可拖拽组件，并将包含子流程节点的流程节点的拖拽属性信息设置为组件拖拽，在相应的流程节点被拖拽时，其子流程节点同时被拖拽；将不包含子流程节点的流程节点的拖拽属性信息设置为单节点拖拽，在相应的流程节点被拖拽时，只发送自身被拖拽。

图4是对图3的流程节点A11拖向A12的结果示意图，如图4所示，实现了流程节点A11和A12位置的互换。

图5是对图3的流程节点B2拖向B3的结果示意图，如图5所示，实现了流程节点B2和B3及相应子流程节点的同时互换。

图6是对图3流程节点A拖向B的结果示意图，如图6所示，实现了流程节点A和B及相应子流程节点的同时互换。

图7是本发明实施例提供的通过拖拽实现可视化流程配置的装置结构示意图。如图7所示，所述装置包括第一拖拽模块10、第二拖拽模块20及位置信息更新模块30，其中：

第一拖拽模块10用于获取第一流程节点在拖拽发生时的第一位置的信息，并根据所述第一流程节点的拖拽属性信息获取第一拖拽对象，针对所述第一拖拽对象进行拖拽操作第一位置的信息；第二拖拽模块20用于判断针对所述第一拖拽对象的拖拽操作是否结束，若结束，则获取所述第一流程节点当前所在的第二位置的信息；并进一步判断所述第二位置是否存在第二流程节点，若不存在，则结束；若存在，则根据所述第二流程节点的拖拽属性信息获取第二拖拽对象，并且将所述第二拖拽对象自动拖拽至所述第一位置；位置信息更新模块30用于更新所述第一拖拽对象和所述第二拖拽对象的位置存储信息。

本发明实施例实现了通过拖拽进行可视化流程配置，且配置过程简单方便，不易出错，提高了可视化流程配置的自动化水平及效率，节省了人力，提高了可靠性。

进一步地，基于上述实施例，在所述第一流程节点的拖拽属性信息为单节点拖拽时，所述第一拖拽对象为所述第一流程节点；在所述第一流程节点的拖拽属性信息为组件拖拽时，所述第一拖拽对象为所述第一流程节点及隶属于所述第一流程节点的子流程节点；在所述第二流程节点的拖拽属性信息为单节点拖拽时，所述第二拖拽对象为所述第二流程节点；在所述第二流程节点的拖拽属性信息为组件拖拽时，所述第二拖拽对象为所述第二流程节点及隶属于所述第二流程节点的子流程节点。

在上述实施例的基础上，本发明实施例通过设定流程节点的拖拽属性信息为单节点拖拽及组件拖拽，在拖拽属性信息为单节点拖拽时，只对相应的流程节点进行拖拽，在拖拽属性信息为组件拖拽时，对相应的流程节点及其包含的子流程节点同时进行拖拽，满足了应用需求，提高了实用性。

进一步地，基于上述实施例，所述位置信息更新模块30具体用于：在表示位置存储信息的数组中，将所述第一流程节点的数据信息存储入表示所述第二位置的信息的数组元素中，并将所述第二流程节点的数据信息存储入表示所述第一位置的信息的数组元素中；若所述第一拖拽对象包括子流程节点，则根据所述子流程节点与所述第一流程节点的位置关系及数组针对多级流程节点预设的存储方式，将所述第一流程节点的子流程节点的数据信息存储入与所述表示第二位置的信息的数组元素对应的数组元素中；若所述第二拖拽对象包括子流程节点，则根据所述子流程节点与所述第二流程节点的位置关系及所述数组针对多级流程节点预设的存储方式，将所述第二流程节点的子流程节点的数据信息存储入与所述表示第一位置的信息的数组元素对应的数组元素中。

在上述实施例的基础上，本发明实施例通过在数组中更新第一流程节点和第二流程节点的位置存储信息，并根据数组针对多级流程节点预设的存储方式更新子流程节点的位置存储信息，实现了拖拽后位置发生变动的流程节点的位置存储信息更新的便利化，提高了处理效率。

进一步地，基于上述实施例，所述第二拖拽模块20在用于获取所述第一流程节点当前所在的第二位置的信息之后，进一步判断所述第二位置是否存在第二流程节点之前，还用于：判断所述第二位置是否符合所述第一流程节点的预设拖拽范围，若是，则执行后续步骤；若否，则取消对所述第一拖拽对象的拖拽操作。

在上述实施例的基础上，本发明实施例通过对流程节点预先设定拖拽范围，在符合拖拽范围要求时才允许实现拖拽操作，提高了可视化流程配置的可靠性。

进一步地，基于上述实施例，所述装置还包括可拖拽组件建立及拖拽属性信息配置模块，用于：对于包含子流程节点的各个流程节点，将每个流程节点及对应的子流程节点封装成可拖拽组件，并将所述包含子流程节点的各个流程节点的所述拖拽属性信息设置为所述组件拖拽；则在所述包含子流程节点的各个流程节点被拖拽时，对相应流程节点及所包含的子流程节点同时执行拖拽操作；对于不包含子流程节点的各个流程节点，将所述拖拽属性信息设置为所述单节点拖拽，则在相应的流程节点被拖拽时，只对所述流程节点自身执行拖拽操作。

在上述实施例的基础上，本发明实施例通过封装可拖拽组件及配置各个流程节点的拖拽属性信息，有助于实现通过拖拽实现单节点拖拽配置及多节点同步拖拽配置。

进一步地，基于上述实施例，所述流程节点的级别由高到低分为第1至第N级别，所述可拖拽组件建立及拖拽属性信息配置模块在用于对于包含子流程节点的各个流程节点，将每个流程节点及对应的子流程节点封装成可拖拽组件时，具体用于：根据所述第N-1级别的所述流程节点及其包含的第N级别的所述流程节点，建立第N-1级可拖拽组件，实现在所述第N-1级别的所述流程节点被拖拽时，其包含的所述第N级别的所述流程节点同时被拖拽；根据所述第N-2级别的所述流程节点及所述第N-1级可拖拽组件，建立第N-2级可拖拽组件，实现在所述第N-2级别的所述流程节点被拖拽时，其包含的所述第N-1级别的所述流程节点同时被拖拽；根据所述N-3级别的所述流程节点及所述第N-2级可拖拽组件，建立第N-3级可拖拽组件，实现在所述第N-3级别的所述流程节点被拖拽时，其包含的所述第N-2级别的所述流程节点同时被拖拽；以此类推，直至最终实现建立第1级可拖拽组件。

在上述实施例的基础上，本发明实施例通过基于流程节点的级别，从流程的末端节点开始对各个流程节点及包含的子流程节点建立可拖拽组件，并通过组件传入的方式，依次建立更高级别的可拖拽组件，实现了可拖拽组件的快速建立。

进一步地，基于上述实施例，所述可拖拽组件建立及拖拽属性信息配置模块在用于建立任意一级可拖拽组件时，首先建立任意一个本级可拖拽组件；然后采取循环遍历的方式建立其余的本级可拖拽组件。

在上述实施例的基础上，本发明实施例通过在建立任意一级可拖拽组件时，首先建立任意一个本级可拖拽组件；然后采取循环遍历的方式建立其余的本级可拖拽组件，进一步提高了可拖拽组件的建立效率。

本发明实施例提供的装置是用于上述方法的，具体功能可参照上述方法流程，此处不再赘述。

图8是本发明实施例提供的电子设备的实体结构示意图。如图8所示，该电子设备可以包括：处理器(processor)810、通信接口(Communications Interface)820、存储器(memory)830和通信总线840，其中，处理器810，通信接口820，存储器830通过通信总线840完成相互间的通信。处理器810可以调用存储器830中的逻辑指令，以执行如下方法：获取第一流程节点在拖拽发生时的第一位置的信息，并根据所述第一流程节点的拖拽属性信息获取第一拖拽对象，针对所述第一拖拽对象进行拖拽操作；判断针对所述第一拖拽对象的拖拽操作是否结束，若结束，则获取所述第一流程节点当前所在的第二位置的信息；并进一步判断所述第二位置是否存在第二流程节点，若不存在，则结束；若存在，则根据所述第二流程节点的拖拽属性信息获取第二拖拽对象，并且将所述第二拖拽对象自动拖拽至所述第一位置；更新所述第一拖拽对象和所述第二拖拽对象的位置存储信息第一位置的信息第二位置的信息。

此外，上述的存储器830中的逻辑指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种通过拖拽实现可视化流程配置的方法，其特征在于，包括：

获取第一流程节点在拖拽发生时的第一位置的信息，并根据所述第一流程节点的拖拽属性信息获取第一拖拽对象，针对所述第一拖拽对象进行拖拽操作；

判断针对所述第一拖拽对象的拖拽操作是否结束，若结束，则获取所述第一流程节点当前所在的第二位置的信息；并进一步判断所述第二位置是否存在第二流程节点，若不存在，则结束；若存在，则根据所述第二流程节点的拖拽属性信息获取第二拖拽对象，并且将所述第二拖拽对象自动拖拽至所述第一位置；

更新所述第一拖拽对象和所述第二拖拽对象的位置存储信息。

2.根据权利要求1所述的方法，其特征在于，在所述第一流程节点的拖拽属性信息为单节点拖拽时，所述第一拖拽对象为所述第一流程节点；

在所述第一流程节点的拖拽属性信息为组件拖拽时，所述第一拖拽对象为所述第一流程节点及隶属于所述第一流程节点的子流程节点；

在所述第二流程节点的拖拽属性信息为单节点拖拽时，所述第二拖拽对象为所述第二流程节点；

在所述第二流程节点的拖拽属性信息为组件拖拽时，所述第二拖拽对象为所述第二流程节点及隶属于所述第二流程节点的子流程节点。

3.根据权利要求2所述的方法，其特征在于，所述更新所述第一拖拽对象和所述第二拖拽对象的位置存储信息，具体包括：

在表示位置存储信息的数组中，将所述第一流程节点的数据信息存储入表示所述第二位置的信息的数组元素中，并将所述第二流程节点的数据信息存储入表示所述第一位置的信息的数组元素中；

若所述第一拖拽对象包括子流程节点，则根据所述子流程节点与所述第一流程节点的位置关系及数组针对多级流程节点预设的存储方式，将所述第一流程节点的子流程节点的数据信息存储入与所述表示第二位置的信息的数组元素对应的数组元素中；

若所述第二拖拽对象包括子流程节点，则根据所述子流程节点与所述第二流程节点的位置关系及所述数组针对多级流程节点预设的存储方式，将所述第二流程节点的子流程节点的数据信息存储入与所述表示第一位置的信息的数组元素对应的数组元素中。

4.根据权利要求1所述的方法，其特征在于，在所述获取所述第一流程节点当前所在的第二位置的信息之后，所述进一步判断所述第二位置是否存在第二流程节点之前，所述方法还包括：

判断所述第二位置是否符合所述第一流程节点的预设拖拽范围，若是，则执行后续步骤；若否，则取消对所述第一拖拽对象的拖拽操作。

5.根据权利要求2所述的方法，其特征在于，所述方法还包括：

对于包含子流程节点的各个流程节点，将每个流程节点及对应的子流程节点封装成可拖拽组件，并将所述包含子流程节点的各个流程节点的所述拖拽属性信息设置为所述组件拖拽；则在所述包含子流程节点的各个流程节点被拖拽时，对相应流程节点及所包含的子流程节点同时执行拖拽操作；

对于不包含子流程节点的各个流程节点，将所述拖拽属性信息设置为所述单节点拖拽，则在相应的流程节点被拖拽时，只对所述流程节点自身执行拖拽操作。

6.根据权利要求5所述的方法，其特征在于，所述流程节点的级别由高到低分为第1至第N级别，所述对于包含子流程节点的各个流程节点，将每个流程节点及对应的子流程节点封装成可拖拽组件，具体包括：

根据所述第N-1级别的所述流程节点及其包含的第N级别的所述流程节点，建立第N-1级可拖拽组件，实现在所述第N-1级别的所述流程节点被拖拽时，其包含的所述第N级别的所述流程节点同时被拖拽；

根据所述第N-2级别的所述流程节点及所述第N-1级可拖拽组件，建立第N-2级可拖拽组件，实现在所述第N-2级别的所述流程节点被拖拽时，其包含的所述第N-1级别的所述流程节点同时被拖拽；

根据所述N-3级别的所述流程节点及所述第N-2级可拖拽组件，建立第N-3级可拖拽组件，实现在所述第N-3级别的所述流程节点被拖拽时，其包含的所述第N-2级别的所述流程节点同时被拖拽；

以此类推，直至最终实现建立第1级可拖拽组件。

7.根据权利要求6所述的方法，其特征在于，在建立任意一级可拖拽组件时，首先建立任意一个本级可拖拽组件；然后采取循环遍历的方式建立其余的本级可拖拽组件。

8.一种通过拖拽实现可视化流程配置的装置，其特征在于，包括：

第一拖拽模块，用于获取第一流程节点在拖拽发生时的第一位置的信息，并根据所述第一流程节点的拖拽属性信息获取第一拖拽对象，针对所述第一拖拽对象进行拖拽操作第一位置的信息；

第二拖拽模块，用于判断针对所述第一拖拽对象的拖拽操作是否结束，若结束，则获取所述第一流程节点当前所在的第二位置的信息；并进一步判断所述第二位置是否存在第二流程节点，若不存在，则结束；若存在，则根据所述第二流程节点的拖拽属性信息获取第二拖拽对象，并且将所述第二拖拽对象自动拖拽至所述第一位置；

位置信息更新模块，用于更新所述第一拖拽对象和所述第二拖拽对象的位置存储信息。

9.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1至7任一项所述方法的步骤。

10.一种非暂态计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时实现如权利要求1至7任一项所述方法的步骤。