CN115237295A - 一种可视化拖拽生成流程图的方法、电子设备及介质 - Google Patents

一种可视化拖拽生成流程图的方法、电子设备及介质 Download PDF

Info

Publication number
CN115237295A
CN115237295A CN202210650709.0A CN202210650709A CN115237295A CN 115237295 A CN115237295 A CN 115237295A CN 202210650709 A CN202210650709 A CN 202210650709A CN 115237295 A CN115237295 A CN 115237295A
Authority
CN
China
Prior art keywords
node
service flow
generating
connection
component
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202210650709.0A
Other languages
English (en)
Inventor
公雯
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Boc Financial Technology Co ltd
Original Assignee
Boc Financial Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Boc Financial Technology Co ltd filed Critical Boc Financial Technology Co ltd
Priority to CN202210650709.0A priority Critical patent/CN115237295A/zh
Publication of CN115237295A publication Critical patent/CN115237295A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04842Selection of displayed objects or displayed text elements

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明涉及一种可视化拖拽生成流程图的方法、电子设备及介质,方法包括:接收流程图创建请求,利用vuedraggable拖拽组件生成服务流程节点;生成服务流程模板,并存储至数据库;利用jsPlumb绘图组件监听节点连接事件,实时存储节点连线信息,所述的节点连接事件为点击起始节点并拖曳连线至目标节点的操作,所述的节点连线信息包括服务流程模板ID、服务流程起始节点ID和服务流程目标节点ID;根据服务流程模板ID从数据库中选择服务流程模板,并存储至服务流程节点,完成服务流程节点定义;接收节点基本信息修改信息,并更新节点基本信息;与现有技术相比,本发明具有可操作性高、操作难度低、可视化、效率高等优点。

Description

一种可视化拖拽生成流程图的方法、电子设备及介质
技术领域
本发明涉及研发管理领域,尤其是涉及一种可视化拖拽生成流程图的方法、电子设备及介质。
背景技术
办公领域总会涉及到各种各样的流程,以可视化方式描绘过程中不同活动的顺序后,能够更清晰地分步查看和理解过程,并识别重要决策、痛点和浪费。此外,还可轻松向他人传达所画出流程图的内容,并清晰查看人员和行动之间的关系。这种简单又有效的方式能够快速跟踪或改进过程。随着办公智能化的不断推进,办公流程通用化的需求愈加强烈。而现有技术下的流程设计不够直观,往往只有开发人员能看懂。
发明内容
本发明的目的就是为了克服上述现有技术存在的缺陷而提供一种可视化拖拽生成流程图的方法、电子设备及介质,可操作性高,操作难度低,可视化,效率高。
本发明的目的可以通过以下技术方案来实现:
一种可视化拖拽生成流程图的方法,包括以下步骤:
接收流程图创建请求,利用vuedraggable拖拽组件生成服务流程节点;
生成服务流程模板,并存储至数据库;
利用jsPlumb绘图组件监听节点连接事件,实时存储节点连线信息,所述的节点连接事件为点击起始节点并拖曳连线至目标节点的操作,所述的节点连线信息包括服务流程模板ID、服务流程起始节点ID和服务流程目标节点ID;
根据服务流程模板ID从数据库中选择服务流程模板,并存储至服务流程节点,完成服务流程节点定义;
接收节点基本信息修改信息,并更新节点基本信息;
所述的服务流程图制作完成。
进一步地,在利用vuedraggable拖拽组件生成服务流程节点时,触发jsPlumb绘图组件实例内置的makeSource组件和makeTarget组件,此时接收节点参数信息并输入makeSource组件和makeTarget组件,所述的节点参数信息包括节点形状和节点连线样式,生成服务流程节点图形,并将服务流程节点信息存储在数据库,所述的服务流程节点信息包括服务流程模板ID、服务流程节点ID、服务流程节点类型和服务流程节点名称。
进一步地,所述的服务流程节点类型的包括人工节点、自动节点、虚拟节点、定时节点、事件节点、子流程节点。
进一步地,所述的利用jsPlumb绘图组件监听节点连接事件的具体过程包括:
所述的jsPlumb绘图组件实例绑定connection组件,所述的connection组件监听节点连接事件,监听到节点连线事件时触发回调函数generatePathid{},获取到一个自增的连线ID,当节点形成连接关系时,所述的jsPlumb绘图组件实例监听到连接事件后触发connection回调函数,将连线起点节点ID和目标节点ID以及刚刚生成的连线ID存入数据库。
进一步地,所述的生成服务流程模板的具体过程包括:
根据服务流程自动生成xml格式的bpmn20流程建模文件。
进一步地,所述的服务流程节点中存储有多个服务流程模板时,所述的服务流程模板的调用策略为随机、轮询或权重中的任一种。
进一步地,所有服务流程模板中有且只有一个服务流程开始节点,有一个或多个流程服务结束节点。
进一步地,所述的节点基本信息包括节点ID、节点名称和节点备注信息。
一种可视化拖拽生成流程图的装置,包括存储器和处理器,所述存储器存储有计算机程序,所述处理器调用所述程序指令能够执行所述的可视化拖拽生成流程图的方法。
一种计算机可读存储介质,包括计算机程序,所述计算机程序能够被处理器执行以实现所述的可视化拖拽生成流程图的方法。
与现有技术相比,本发明具有以如下有益效果:
(1)本发明针对办公场景中设计流程的需求,提出一种可视化拖拽生成流程图的方法,接收到绘制流程图的需求后,自动生成起始点和结束点,基于jsPlumb技术,根据用户从画板中拖拽选取到画布上的的节点类型和线段类型,从起始点出发一直到终止点结束遍历得到一张完整的流程图,图中的每个节点以及每条线都可以设置相应的业务规则,流程图绘制后部署即可生效,简化了流程图绘制流程,降低了流程图绘制的门槛,操作难度低,让业务流程可视化,可以更快的生成流程图,效率高。
(2)本发明通过拖拽的方式去设计流程直观简洁,可操作性高,操作与实际得到的效果误差小。
附图说明
图1为本发明的方法流程图;
图2为流程图画板界面;
具体实施方式
下面结合附图和具体实施例对本发明进行详细说明。本实施例以本发明技术方案为前提进行实施,给出了详细的实施方式和具体的操作过程,但本发明的保护范围不限于下述的实施例。
实施例1
一种可视化拖拽生成流程图的方法,如图1,包括以下步骤:
S1、生成服务流程节点;
S2、关联服务流程节点;
S3、编辑节点基本信息;
S4、发布服务流程模板;
S5、添加服务流程节点资源。
步骤S1的具体过程包括:
S101、利用jsPlumb绘图组件在浏览器窗口加载时生成实例,用来绘制生成流程图;
S102、新建服务流程模板,选择服务流程节点类型,拖曳vuedraggable拖拽组件生成的节点至画布,触发jsPlumb绘图组件实例内置的makeSource和makeTarget参数方法,向上述两个方法传入参数,参数包括节点形状和节点连线样式,JsPlumb绘图组件实例根据传入的参数形成节点图形,并将服务流程节点信息存储在数据库,依次生成groovy、http、groovy类型的三个服务流程节点。
服务流程节点信息包括服务流程模板ID、服务流程节点ID、服务流程节点类型和服务流程节点名称,服务流程节点类型包括人工节点、自动节点、虚拟节点、定时节点、事件节点、子流程节点。
步骤S2的具体过程包括:
点击起始节点拖曳连线至目标节点,形成节点关联关系,利用jsPlumb绘图组件监听连接事件,实时存储节点连线信息。
节点连线信息包括服务流程模板ID、服务流程起始节点ID和服务流程目标节点ID。
利用jsPlumb绘图组件监听连接事件的代码为:jsPlumb.bind('connection',function(evt){generatePathid((”)).then((response)=>{})。
具体过程为:
jsPlumb绘图组件实例绑定connection事件,connection监听所有的节点连接事件,function(info){}为监听到节点连线事件时触发的回调函数,其中参数info中包含的信息有连线起点节点ID、目标节点ID,在generatePathid{}回调函数中写入将连线ID、连线起点节点ID、目标节点ID存入数据库的方法,当节点形成连接关系时,jsPlumb绘图组件实例监听到连接事件后触发connection回调函数,将连线ID、连线起点节点ID、目标节点ID等节点连线信息存入数据库。
步骤S3的具体过程包括:
点击节点信息编辑按钮修改节点基本信息,节点基本信息包括节点名称、节点备注信息。
步骤S4的具体过程包括:
发布服务流程模板,根据服务流程自动生成xml格式的bpmn20流程建模文件。
bpmn20流程建模文件能够加载解析xml格式的文本,根据“from”、“to”等xml标签进行消息的路由,获取服务流程模板ID,服务流程模板ID为路由的标识,将“uri="direct:template-”拼接服务流程模板ID并作为“from”标签的属性,生成xml格式的文本,存入数据库中,网关读取加载后,当调用某个路由模板时,bpmn20流程建模文件读取“direct:template-服务流程模板ID”的uri,将会定位路由至该路由模板,在步骤S4和S5中,所生成的规则引擎的路由规则以服务流程模板ID为标识供网关加载,并调用相应服务所绑定的资源。
步骤S5的具体过程包括:
为服务选择相应服务流程模板,点击节点添加资源,完成服务流程定义。
在步骤S5中,同一服务流程节点添加多个资源时,资源的调用策略为随机、轮询或权重中的任一种。
服务流程模板有且只有一个服务流程开始节点,环路会导致服务流程无开始节点和结束节点,形成死循环,因此服务流程不能出现环路。
图2为基于本实施例提出的生成流程图的方法设计的流程图画板界面,生成流程图的过程如下:
(1)画布初始化
请求:客户端向服务器发出生成新的流程图画板的需求;
响应:服务端响应上述请求,调用初始化流程图的方法,封装后发送给发出请求的客户端;
解析:客户端解析所述数据,生成新的流程图的数据;
展示:将数据传入图形化界面,封装为vue组件,展示流程图信息包括流程图名称,ID并在流程图上添加起始点和终止点。
(2)面板初始化
请求:客户端向服务器发出初始化流程图面板的需求;
响应:服务端响应上述请求,调用初始化流程图面板的方法,封装后发送给发出请求的客户端;
解析:客户端解析所述数据,生成新的流程图面板;
展示:将数据传入图形化界面,封装为vue组件,展示流程图面板信息,包括以下类型:
流程节点,分为人工节点、自动节点、虚拟节点、事件节点、定时节点等;
逻辑分支包括并行网关、相容网关、复杂网关、还有事件网关;
流程线可定义流转条件,并对经过该线时的所有事件进行监听。
(3)按钮展示
请求:客户端向服务器发出初始化流程图按钮的需求;
响应:服务端响应上述请求,调用初始化流程图画布的方法,封装后发送给发出请求的客户端;
解析:客户端解析所述数据,生成新的流程图按钮;
展示:将数据传入图形化界面,封装为vue组件,展示流程图画布信息,包括以下内容:
按钮模块:按钮包括保存、修改、删除、清空、撤回、生成图片、设置和json导出几个按钮。
(4)用户绘制流程图
请求:用户从面板上拖拽元素绘制流程图;
响应:服务端响应上述请求,将对应的元素作为一个实体储存到缓存中;
解析:客户端解析缓存中的实体数据,生成svg图形代表对应的实体;
展示:将数据传入图形化界面,封装为vue组件,展示流程图信息。
5.用户保存流程图
请求:客户端发出保存流程图请求给后台;
响应:服务端响应上述请求,对现有流程图进行规则校验。
解析:将拖拽产生的svg图形转换为json格式的语句,将其中点和线和逻辑判断的信息分别存入对应的数据表中;
展示:并在下一次用户调取保存的流程图信息时将数据表中的信息通过可视化svg图的形式展示出来。
本实施例提出的生成流程图的方法可通过拖拽的组件的方式生成元素到画布,组件之间通过线和逻辑分支形成关联关系,元素包含角色、用户、元素名称、元素id等基本信息,并可以关联表单,可保存表单进行图的逻辑校验,图的信息储存自动生成bpmn格式的工作流程文件。
实施例2
一种可视化拖拽生成流程图的装置,包括存储器和处理器,所述存储器存储有计算机程序,所述处理器调用所述程序指令能够执行实施例1所述的可视化拖拽生成流程图的方法。
实施例3
一种计算机可读存储介质,包括计算机程序,所述计算机程序能够被处理器执行以实现实施例1所述的可视化拖拽生成流程图的方法。
实施例1、实施例2和实施例3提出了一种可视化拖拽生成流程图的方法、电子设备及介质,满足了办公场景中设计流程的需求,在用户发出手动绘制流程图的需求后,自动生成起始点和结束点,基于jsPlumb技术,根据用户从画板中拖拽选取到画布上的的节点类型和线段类型,从起始点出发一直到终止点结束遍历得到一张完整的流程图。图中的每个节点以及每条线都可以设置相应的业务规则,流程图支持复制节点和线,支持子流程绘制,提供逻辑校验,流程图绘制后部署即可生效,降低了流程图绘制的门槛,简化流程图绘制流程,提高了工作效率。
以上详细描述了本发明的较佳具体实施例。应当理解,本领域的普通技术人员无需创造性劳动就可以根据本发明的构思作出诸多修改和变化。因此,凡本技术领域中技术人员依本发明的构思在现有技术的基础上通过逻辑分析、推理或者有限的实验可以得到的技术方案,皆应在由权利要求书所确定的保护范围内。

Claims (10)

1.一种可视化拖拽生成流程图的方法,其特征在于,包括以下步骤:
接收流程图创建请求,利用vuedraggable拖拽组件生成服务流程节点;
生成服务流程模板,并存储至数据库;
利用jsPlumb绘图组件监听节点连接事件,实时存储节点连线信息,所述的节点连接事件为点击起始节点并拖曳连线至目标节点的操作,所述的节点连线信息包括服务流程模板ID、服务流程起始节点ID和服务流程目标节点ID;
根据服务流程模板ID从数据库中选择服务流程模板,并存储至服务流程节点,完成服务流程节点定义;
接收节点基本信息修改信息,并更新节点基本信息;
所述的服务流程图制作完成。
2.根据权利要求1所述的一种可视化拖拽生成流程图的方法,其特征在于,在利用vuedraggable拖拽组件生成服务流程节点时,触发jsPlumb绘图组件实例内置的makeSource组件和makeTarget组件,此时接收节点参数信息并输入makeSource组件和makeTarget组件,所述的节点参数信息包括节点形状和节点连线样式,生成服务流程节点图形,并将服务流程节点信息存储在数据库,所述的服务流程节点信息包括服务流程模板ID、服务流程节点ID、服务流程节点类型和服务流程节点名称。
3.根据权利要求2所述的一种可视化拖拽生成流程图的方法,其特征在于,所述的服务流程节点类型的包括人工节点、自动节点、虚拟节点、定时节点、事件节点、子流程节点。
4.根据权利要求1所述的一种可视化拖拽生成流程图的方法,其特征在于,所述的利用jsPlumb绘图组件监听节点连接事件的具体过程包括:
所述的jsPlumb绘图组件实例绑定connection组件,所述的connection组件监听节点连接事件,监听到节点连线事件时触发回调函数generatePathid{},获取到一个自增的连线ID,当节点形成连接关系时,所述的jsPlumb绘图组件实例监听到连接事件后触发connection回调函数,将连线起点节点ID和目标节点ID以及刚刚生成的连线ID存入数据库。
5.根据权利要求1所述的一种可视化拖拽生成流程图的方法,其特征在于,所述的生成服务流程模板的具体过程包括:
根据服务流程自动生成xml格式的bpmn20流程建模文件。
6.根据权利要求1所述的一种可视化拖拽生成流程图的方法,其特征在于,所述的服务流程节点中存储有多个服务流程模板时,所述的服务流程模板的调用策略为随机、轮询或权重中的任一种。
7.根据权利要求1所述的一种可视化拖拽生成流程图的方法,其特征在于,所有服务流程模板中有且只有一个服务流程开始节点,有一个或多个流程服务结束节点。
8.根据权利要求1所述的一种可视化拖拽生成流程图的方法,其特征在于,所述的节点基本信息包括节点ID、节点名称和节点备注信息。
9.一种可视化拖拽生成流程图的装置,其特征在于,包括存储器和处理器,所述存储器存储有计算机程序,所述处理器调用所述程序指令能够执行如权利要求1至8任一所述的可视化拖拽生成流程图的方法。
10.一种计算机可读存储介质,其特征在于,包括计算机程序,所述计算机程序能够被处理器执行以实现如权利要求1-8任一所述的可视化拖拽生成流程图的方法。
CN202210650709.0A 2022-06-09 2022-06-09 一种可视化拖拽生成流程图的方法、电子设备及介质 Pending CN115237295A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210650709.0A CN115237295A (zh) 2022-06-09 2022-06-09 一种可视化拖拽生成流程图的方法、电子设备及介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210650709.0A CN115237295A (zh) 2022-06-09 2022-06-09 一种可视化拖拽生成流程图的方法、电子设备及介质

Publications (1)

Publication Number Publication Date
CN115237295A true CN115237295A (zh) 2022-10-25

Family

ID=83670022

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210650709.0A Pending CN115237295A (zh) 2022-06-09 2022-06-09 一种可视化拖拽生成流程图的方法、电子设备及介质

Country Status (1)

Country Link
CN (1) CN115237295A (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116192594A (zh) * 2023-04-21 2023-05-30 北京炎黄新星网络科技有限公司 业务流程编排组件的管理方法及系统
CN117369697A (zh) * 2023-10-13 2024-01-09 南京新联电子股份有限公司 一种通过拖拽实现能耗调节的方法和系统
CN117608554A (zh) * 2023-11-24 2024-02-27 上海浦东发展银行股份有限公司 一种可视化语音流程一键发布方法、系统及介质

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101587438A (zh) * 2009-06-18 2009-11-25 南京联创科技股份有限公司 Arp框架下的图形化流程模板绘制方法
CN111930372A (zh) * 2020-08-06 2020-11-13 科大国创云网科技有限公司 一种通过可拖拽流程图实现的服务编排解决方法及系统
CN114445049A (zh) * 2022-01-30 2022-05-06 北京立达政通科技集团有限公司 审批业务流程生成方法和装置、设备及存储介质

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101587438A (zh) * 2009-06-18 2009-11-25 南京联创科技股份有限公司 Arp框架下的图形化流程模板绘制方法
CN111930372A (zh) * 2020-08-06 2020-11-13 科大国创云网科技有限公司 一种通过可拖拽流程图实现的服务编排解决方法及系统
CN114445049A (zh) * 2022-01-30 2022-05-06 北京立达政通科技集团有限公司 审批业务流程生成方法和装置、设备及存储介质

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116192594A (zh) * 2023-04-21 2023-05-30 北京炎黄新星网络科技有限公司 业务流程编排组件的管理方法及系统
CN117369697A (zh) * 2023-10-13 2024-01-09 南京新联电子股份有限公司 一种通过拖拽实现能耗调节的方法和系统
CN117369697B (zh) * 2023-10-13 2024-04-26 南京新联电子股份有限公司 一种通过拖拽实现能耗调节的方法和系统
CN117608554A (zh) * 2023-11-24 2024-02-27 上海浦东发展银行股份有限公司 一种可视化语音流程一键发布方法、系统及介质

Similar Documents

Publication Publication Date Title
CN111930372B (zh) 一种通过可拖拽流程图实现的服务编排解决方法及系统
CN115237295A (zh) 一种可视化拖拽生成流程图的方法、电子设备及介质
CN104484189B (zh) 一种应用界面的构建及设计方法
CN105046408A (zh) 一种可配置工作流的实现方法及系统
CN114115852A (zh) 可视化服务编排方法、装置、设备及介质
US8239226B2 (en) Methods and apparatus for combining properties and methods from a plurality of different data sources
US20090112666A1 (en) Apparatus and method for generating a monitoring view of an executable business process
CN103984818A (zh) 基于Flex技术的AUV设计流程可视化建模方法
CN104216912A (zh) 一种无侵入式的业务表单工作流化的实现方法与装置
Moraitis et al. The GAIA2JADE process for multi-agent systems development
US8224853B2 (en) Methods and apparatus for updating a plurality of data fields in an electronic form
CN106686023A (zh) 一种流程设计方法、客户机、服务器侧装置及系统
EP2492806A1 (en) Unified interface for meta model checking, modifying, and reporting
CN112764736B (zh) 一种web端流程图建模方法、设备和系统
CN108874757B (zh) 报表生成方法及系统、计算机可读介质、电子设备
CN112433702B (zh) 一种轻量级流程设计系统及方法
CN111752723B (zh) 一种可视化的多源服务管理系统及其实现方法
WO2023082654A1 (zh) 一种业务交互图生成方法、装置、设备及存储介质
CN112149838A (zh) 实现自动构建模型的方法、装置、电子设备和存储介质
CN114594927A (zh) 低代码开发方法、装置、系统、服务器及存储介质
CN104166551B (zh) 一种应用接口开发方法和开发装置
KR20080035427A (ko) 논리 프로세스 및 물리 프로세스를 맵핑한 비즈니스프로세스를 생성하기 위한 시스템 및 방법
WO2007056656A2 (en) Methods and apparatus for processing business objects, electronic forms, and workflows
CN109343831A (zh) 一种html组件的管理方法及装置
Bozzon et al. A conceptual modeling approach to business service mashup development

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination