CN109683868A - 一种基于jsPlumb技术的web流程设计方法 - Google Patents
一种基于jsPlumb技术的web流程设计方法 Download PDFInfo
- Publication number
- CN109683868A CN109683868A CN201811621521.3A CN201811621521A CN109683868A CN 109683868 A CN109683868 A CN 109683868A CN 201811621521 A CN201811621521 A CN 201811621521A CN 109683868 A CN109683868 A CN 109683868A
- Authority
- CN
- China
- Prior art keywords
- node
- jsplumb
- event
- setting
- condition
- 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
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
- G06F8/24—Object-oriented
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明公开了一种基于jsPlumb技术的web流程设计方法,包括以下步骤:S1、节点拖拽:调用jsPlumb内置draggable方法初始化节点,并指定节点的helper属性为clone、scop为当前web流程设计器容器;S2、连线,为各个节点设置连线功能;S3、设置开始节点;S4、设置人工任务节点;S5、设置自动审批节点;S6、设置网关节点;S7、设置条件;S8、设置事件。本发明的web流程设计方法能够提高在浏览器上设计流程设计的兼容性,简化设计流程,降低流程设计的使用难度;并且将流程设计内容以json的格式存放,便于扩展节点或流程属性。
Description
技术领域
本发明属于图像处理技术领域,特别涉及一种基于jsPlumb技术的web流程设计方法。
背景技术
jsPlumb是一个功能较强大的绘图组件,它提供了一种方法,主要用于连接网页上的元素。在现代浏览器中,它使用SVG或者Canvas技术,而对于IE8以下(含IE8)的浏览器,则使用VML技术。能兼容主流浏览器。
发明内容
本发明的目的在于克服现有技术的不足,提供一种能够提高在浏览器上设计流程设计的兼容性,简化设计流程,降低流程设计的使用难度;并且将流程设计内容以json的格式存放,便于扩展节点或流程属性的基于jsPlumb技术的web流程设计方法。
本发明的目的是通过以下技术方案来实现的:一种基于jsPlumb技术的web流程设计方法,包括以下步骤:
S1、节点拖拽:调用jsPlumb内置draggable方法初始化节点,并指定节点的helper属性为clone、scop为当前web流程设计器容器;
S2、连线,为各个节点设置连线功能;
S3、设置开始节点:对任意节点按照步骤S1的方法进行初始化,然后指定该节点的类型为开始节点类型,并绑定开始节点属性点击事件;
S4、设置人工任务节点,对另一自由节点按照步骤S1的方法进行初始化,然后指定该节点的类型为人工任务节点,并绑定人工任务节点属性点击事件;
S5、设置自动审批节点,对另一自由节点按照步骤S1的方法进行初始化,指定该节点的类型为自动审批节点,并绑定自动审批属性点击事件;
S6、设置网关节点:对另一自由节点按照步骤S1的方法进行初始化,指定该节点的类型为网关节点,并绑定网关节点属性点击事件;
S7、设置条件:web流程设计器容器初始化时,主动调用jsPlumb实例对象的bind方法来注册连线的鼠标单击属性事件;
S8、设置事件,事件为当前流程的全局事件,当配置完事件内容后,主动将事件内容保存到内存中,以便在最终生成流程的json或xml时使用。
进一步地,所述开始节点,用于作为流程流动的入口,任何一条流程都只有一个开始节点,并且在该节点上绑定发起人需要填报的表单。
进一步地,所述人工任务节点,用于对审批人员进行绑定;即可根据人员ID指定,也可通过角色、职务等指定审批人。
进一步地,所述自动审批节点,用于编写自动审批的条件,当流程流动至自动审批节点,执行审批条件,满足审批条件则继续往下流动;否则等待预设时长之后重新执行审批条件,直至满足条件或执行次数达到阀值为止。
进一步地,所述网关节点,包括并行网关和排他网关;并行网关设置为满足该节点前所有分支条件,才能往下流动;排他网关设置为只需满足该节点前一个条件分支即可往下流动。
进一步地,所述条件用于绑定从一个节点到另一个节点的流动条件,从两个节点之间的连线即为条件。
进一步地,所述事件定义为流程流动过程中需要执行的事件。
本发明的有益效果是:本发明的web流程设计方法能够提高在浏览器上设计流程设计的兼容性,简化设计流程,降低流程设计的使用难度;并且将流程设计内容以json的格式存放,便于扩展节点或流程属性。
具体实施方式
下面进一步说明本发明的技术方案。
本发明提供的一种基于jsPlumb技术的web流程设计方法,使用jsPlumb技术通过拖拽、连线配置开始节点、人工任务节点、自动审批节点、网关节点、条件和事件,并生成JSON字符串或XML保存至存储介质中;具体包括以下步骤:
S1、节点拖拽:调用jsPlumb内置draggable方法初始化节点,并指定节点的helper属性为clone、scop为当前web流程设计器容器;
S2、连线,为各个节点设置连线功能;
S3、设置开始节点:对任意节点按照步骤S1的方法进行初始化,然后指定该节点的类型为开始节点类型,并绑定开始节点属性点击事件;
S4、设置人工任务节点,对另一自由节点按照步骤S1的方法进行初始化,然后指定该节点的类型为人工任务节点,并绑定人工任务节点属性点击事件;
S5、设置自动审批节点,对另一自由节点按照步骤S1的方法进行初始化,指定该节点的类型为自动审批节点,并绑定自动审批属性点击事件;
S6、设置网关节点:对另一自由节点按照步骤S1的方法进行初始化,指定该节点的类型为网关节点,并绑定网关节点属性点击事件;
S7、设置条件:web流程设计器容器初始化时,主动调用jsPlumb实例对象的bind方法来注册连线的鼠标单击属性事件;
S8、设置事件,事件为当前流程的全局事件,当配置完事件内容后,主动将事件内容保存到内存中,以便在最终生成流程的json或xml时使用。
进一步地,所述开始节点,用于作为流程流动的入口,任何一条流程都只有一个开始节点,并且在该节点上绑定发起人需要填报的表单。
进一步地,所述人工任务节点,用于对审批人员进行绑定;即可根据人员ID指定,也可通过角色、职务等指定审批人。
进一步地,所述自动审批节点,用于编写自动审批的条件,当流程流动至自动审批节点,执行审批条件,满足审批条件则继续往下流动;否则等待预设时长之后重新执行审批条件,直至满足条件或执行次数达到阀值为止。
进一步地,所述网关节点,包括并行网关和排他网关;并行网关设置为满足该节点前所有分支条件,才能往下流动;排他网关设置为只需满足该节点前一个条件分支即可往下流动。
进一步地,所述条件用于绑定从一个节点到另一个节点的流动条件,从两个节点之间的连线即为条件。
进一步地,所述事件定义为流程流动过程中需要执行的事件。
本领域的普通技术人员将会意识到,这里所述的实施例是为了帮助读者理解本发明的原理,应被理解为本发明的保护范围并不局限于这样的特别陈述和实施例。本领域的普通技术人员可以根据本发明公开的这些技术启示做出各种不脱离本发明实质的其它各种具体变形和组合,这些变形和组合仍然在本发明的保护范围内。
Claims (7)
1.一种基于jsPlumb技术的web流程设计方法,其特征在于,包括以下步骤:
S1、节点拖拽:调用jsPlumb内置draggable方法初始化节点,并指定节点的helper属性为clone、scop为当前web流程设计器容器;
S2、连线,为各个节点设置连线功能;
S3、设置开始节点:对任意节点按照步骤S1的方法进行初始化,然后指定该节点的类型为开始节点类型,并绑定开始节点属性点击事件;
S4、设置人工任务节点,对另一自由节点按照步骤S1的方法进行初始化,然后指定该节点的类型为人工任务节点,并绑定人工任务节点属性点击事件;
S5、设置自动审批节点,对另一自由节点按照步骤S1的方法进行初始化,指定该节点的类型为自动审批节点,并绑定自动审批属性点击事件;
S6、设置网关节点:对另一自由节点按照步骤S1的方法进行初始化,指定该节点的类型为网关节点,并绑定网关节点属性点击事件;
S7、设置条件:web流程设计器容器初始化时,主动调用jsPlumb实例对象的bind方法来注册连线的鼠标单击属性事件;
S8、设置事件,事件为当前流程的全局事件,当配置完事件内容后,主动将事件内容保存到内存中,以便在最终生成流程的json或xml时使用。
2.根据权利要求1所述的一种基于jsPlumb技术的web流程设计方法,其特征在于,所述开始节点,用于作为流程流动的入口,任何一条流程都只有一个开始节点,并且在该节点上绑定发起人需要填报的表单。
3.根据权利要求1所述的一种基于jsPlumb技术的web流程设计方法,其特征在于,所述人工任务节点,用于对审批人员进行绑定;即可根据人员ID指定,也可通过角色、职务等指定审批人。
4.根据权利要求1所述的一种基于jsPlumb技术的web流程设计方法,其特征在于,所述自动审批节点,用于编写自动审批的条件,当流程流动至自动审批节点,执行审批条件,满足审批条件则继续往下流动;否则等待预设时长之后重新执行审批条件,直至满足条件或执行次数达到阀值为止。
5.根据权利要求1所述的一种基于jsPlumb技术的web流程设计方法,其特征在于,所述网关节点,包括并行网关和排他网关;并行网关设置为满足该节点前所有分支条件,才能往下流动;排他网关设置为只需满足该节点前一个条件分支即可往下流动。
6.根据权利要求1所述的一种基于jsPlumb技术的web流程设计方法,其特征在于,所述条件用于绑定从一个节点到另一个节点的流动条件,从两个节点之间的连线即为条件。
7.根据权利要求1所述的一种基于jsPlumb技术的web流程设计方法,其特征在于,所述事件定义为流程流动过程中需要执行的事件。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201811621521.3A CN109683868A (zh) | 2018-12-28 | 2018-12-28 | 一种基于jsPlumb技术的web流程设计方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201811621521.3A CN109683868A (zh) | 2018-12-28 | 2018-12-28 | 一种基于jsPlumb技术的web流程设计方法 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN109683868A true CN109683868A (zh) | 2019-04-26 |
Family
ID=66190909
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201811621521.3A Pending CN109683868A (zh) | 2018-12-28 | 2018-12-28 | 一种基于jsPlumb技术的web流程设计方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN109683868A (zh) |
Cited By (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110348820A (zh) * | 2019-07-18 | 2019-10-18 | 北京聚通达科技股份有限公司 | 一种智能工作流管理系统 |
CN111880837A (zh) * | 2020-07-21 | 2020-11-03 | 上海伯俊软件科技有限公司 | 一种支持动态扩展及可视化配置的业务流程引擎系统 |
CN111930372A (zh) * | 2020-08-06 | 2020-11-13 | 科大国创云网科技有限公司 | 一种通过可拖拽流程图实现的服务编排解决方法及系统 |
CN112365226A (zh) * | 2020-10-27 | 2021-02-12 | 北京聚通达科技股份有限公司 | 一种软件服务业务管理系统 |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20120066583A1 (en) * | 2010-09-10 | 2012-03-15 | Evan Priestley | Efficient event delegation in browser scripts |
CN102486730A (zh) * | 2010-12-06 | 2012-06-06 | 上海协讯软件有限公司 | 可自定义定制流程的工作流实现方法及工作流系统 |
CN102663569A (zh) * | 2012-05-07 | 2012-09-12 | 广东优迈信息通信技术有限公司 | 一种可视化工作流引擎系统 |
CN107273122A (zh) * | 2017-06-07 | 2017-10-20 | 深圳市卓讯信息技术有限公司 | 基于解耦机制的可迭代组建业务系统的方法及其终端 |
-
2018
- 2018-12-28 CN CN201811621521.3A patent/CN109683868A/zh active Pending
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20120066583A1 (en) * | 2010-09-10 | 2012-03-15 | Evan Priestley | Efficient event delegation in browser scripts |
CN102486730A (zh) * | 2010-12-06 | 2012-06-06 | 上海协讯软件有限公司 | 可自定义定制流程的工作流实现方法及工作流系统 |
CN102663569A (zh) * | 2012-05-07 | 2012-09-12 | 广东优迈信息通信技术有限公司 | 一种可视化工作流引擎系统 |
CN107273122A (zh) * | 2017-06-07 | 2017-10-20 | 深圳市卓讯信息技术有限公司 | 基于解耦机制的可迭代组建业务系统的方法及其终端 |
Non-Patent Citations (1)
Title |
---|
JACK_MENG: ""JS组件系列——JsPlumb流程图及相关效果详解"", 《HTTPS://WWW.CNBLOGS.COM/MQ0036/P/7942139.HTML》 * |
Cited By (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110348820A (zh) * | 2019-07-18 | 2019-10-18 | 北京聚通达科技股份有限公司 | 一种智能工作流管理系统 |
CN110348820B (zh) * | 2019-07-18 | 2022-11-15 | 北京聚通达科技股份有限公司 | 一种智能工作流管理系统 |
CN111880837A (zh) * | 2020-07-21 | 2020-11-03 | 上海伯俊软件科技有限公司 | 一种支持动态扩展及可视化配置的业务流程引擎系统 |
CN111880837B (zh) * | 2020-07-21 | 2024-02-20 | 上海伯俊软件科技有限公司 | 一种支持动态扩展及可视化配置的业务流程引擎系统 |
CN111930372A (zh) * | 2020-08-06 | 2020-11-13 | 科大国创云网科技有限公司 | 一种通过可拖拽流程图实现的服务编排解决方法及系统 |
CN111930372B (zh) * | 2020-08-06 | 2022-09-20 | 科大国创云网科技有限公司 | 一种通过可拖拽流程图实现的服务编排解决方法及系统 |
CN112365226A (zh) * | 2020-10-27 | 2021-02-12 | 北京聚通达科技股份有限公司 | 一种软件服务业务管理系统 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN109683868A (zh) | 一种基于jsPlumb技术的web流程设计方法 | |
Pacheco-López | A new interpretation of Kaldor's first growth law for open developing economies | |
CN106841974B (zh) | 一种fpga测试平台及方法 | |
Paul et al. | The Remittance-GDP Relationship in the Liberalized Regime of Bangladesh: Cointegration and Innovation Accounting. | |
CN110045956A (zh) | 组件的配置方法、装置、设备及可读存储介质 | |
CN107329849A (zh) | 一种基于Java系统的数据校验方法及系统 | |
CN108984208A (zh) | 一种功能文件生成方法、装置及系统 | |
CN107391130A (zh) | Api自动管理和sdk、文档自动生成方法 | |
CN103246782B (zh) | 一种合理的自由选择工作流网到msvl的转换方法 | |
CN103246503A (zh) | 一种企业管理软件的应用开发架构 | |
CN106126299A (zh) | 业务插件的处理方法及装置 | |
CN106997411A (zh) | 基于着色Petri网能力使命线程形式描述与验证方法 | |
CN103324776B (zh) | 基于抽象解释的线性混成系统不变式的生成方法 | |
CN105786787A (zh) | 基于Java的高效PDF报表测试方法 | |
CN103810088B (zh) | 一种业务管道的业务阀门测试方法和装置 | |
Basit ur Rahim et al. | Translating activity diagram from duration calculus for modeling of real-time systems and its formal verification using UPPAAL and DiVinE | |
CN106296037A (zh) | 基于大数据技术的造价数据收集方法 | |
CN106408157A (zh) | 一种建筑工程进度及造价管理系统 | |
CN107544901A (zh) | 数据格式检验方法及装置 | |
Nazaruk | Kaon regeneration | |
CN109032931A (zh) | 带时间、资源、输入输出约束的工作流系统建模方法 | |
CN106327086A (zh) | 一种基于互联网技术的造价数据收集系统 | |
He et al. | Workflow Model Design based on N-tree for Process Management in PDM | |
Bylund | Interpreting age effects in language acquisition and attrition. | |
Krolikoski | That's not our job![Standards] |
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 | ||
RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190426 |
|
RJ01 | Rejection of invention patent application after publication |