jsplumbWithVue实现流程编排
最近业务需求,通过拖拽,实现流程编排,包括编排元素中的各种属性,刚开始拿到这个需求,一头雾水啊,找度娘渡了好久,FQ翻了很久,各种博客CSDN搜索,最终技术选型还是定在了jsplumb,这要感谢@萌级小菜鸟在码云上关于jsplumb的贡献了,基于up主的一些封装,我做了一些改造和升级,完全对业务够用,话不多说,先看下效果吧:



简单说明一下功能:写了两个demo,一个简单一些的,一个复杂一些的,包括对拖动节点的设置,限制条件,缩放功能,保存(在控制台可以看数据,项目中使用直接把数据传给后台即可!),元素的删除,线的删除,流程下载为图片功能;复杂项目里面还可以进行拖动区域的判断,部分区域里面元素的自适应。
大致说一下页面功能模块吧:首先进入咱们要绘制的页面(.vue文件,进行组件注册,及默认参数设置),然后进入ef下面找到对应的组件,可以通过该组件里面引入的功能模块,按照先后顺序使用即可,其他的都可以不用去研究

原创不易,有喜欢的小伙伴帮忙start加转发一下,谢谢了,最后附上代码地址:https://github.com/WangHao1221/jsplumbWithVue
转发请记得是说明出处,谢谢!
jsplumbWithVue实现流程编排的更多相关文章
- xxl-job之实现流程任务编排思路
背景 某一天一如既往的上班"旅途"中,我的领导在开早会的时候,说我最近没啥事,于是让我研究一下Activiti工作流引擎与Drools规则引擎,当时也不知道后边具体要做什么,管 ...
- 低代码平台--基于surging开发微服务编排流程引擎构思
前言 微服务对于各位并不陌生,在互联网浪潮下不是在学习微服务的路上,就是在使用改造的路上,每个人对于微服务都有自己理解,有用k8s 就说自己是微服务,有用一些第三方框架spring cloud, du ...
- 基于 Jenkins+Docker+Git 的CI流程初探
在如今的互联网时代,随着软件开发复杂度的不断提高,软件开发和发布管理也越来越重要.目前已经形成一套标准的流程,最重要的组成部分就是持续集成(Continuous Integration,CI)及持续部 ...
- 基于通用jar、动态配置、组件编排的会员任务中心系统设计
# 一.聊聊本文想说什么: 为更好帮助商家的会员快速成长,保持用户活性,完善用户的成长体系,有赞用户中心-会员成长团队基于现有的业务场景,设计了一套较完备任务中心系统.同时也有很多通用技术组件能够 ...
- Jenkins+GitLab+SonnarQube搭建CI/CD全流程
1. CI/CD 1.1 CI - 持续集成 持续集成( Continuous integration , 简称 CI )指的是,频繁地(一天多次)将代码集成到主干.持续集成的目的就是让产品可以快速迭 ...
- 技术调研,IDEA 插件怎么开发「脚手架、低代码可视化编排、接口生成测试」?
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 不踩些坑,根本不是成熟的码农! 你觉得肯德基全家桶是什么?一家人一起吃的桶吗,就那么 ...
- Businessworks的设计思想
Businessworks的设计思想基于一下三篇ATA: <从Eclipse平台看交易平台化>,强调微内核和扩展机制实现 <Google Guice平台模块化开发的果汁>,讨论 ...
- 李学斌:论复杂系统中的应用间协作V3
说明 本文主要讨论了巨型复杂业务系统的一种构建思路,力图实现决策意志的快速.准确.一致的下传并简化实施成本提供实施效率.通过全业务领域的即时流程编排,实现全网业务IT系统的快速建设与迭代.本文所讲的方 ...
- 基于WS-BPEL2.0的服务组合研究
http://tech.it168.com/soadocument/2008-01-03/200801031332376.shtml WS-BPEL是为组合Web服务而制定的一项规范.它的前身是由IB ...
随机推荐
- linux计划任务之cron
目录 cron计划任务之用户级 cron计划任务之系统级 cron计划任务之用户级 1.安装crond centos7 执行命令: # yum install -y crontabs /bin/sys ...
- 为什么后台给前台Date是时间戳,而前台给后台则直接是时间字符串?
一.因为时间的格式有很多种,不同的页面可能对不同的时间显示需求不同.比如: 05-8-8 上午9:17 2005-8-8 9:17:42 2005年8月8日 上午09时17分42秒 2005年8月8日 ...
- DNS域名解析之正向解析
DNS域名解析之正向解析 1.DNS介绍 2.DNS正向解析实验 1.DNS定义:DNS是"域名系统"的英文缩写.它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便地 ...
- Java 给Word每一页设置不同文字水印效果
Word中设置水印时,可预设的文字或自定义文字设置为水印效果,但通常添加水印效果时,会对所有页面都设置成统一效果,如果需要对每一页或者某个页面设置不同的水印效果,则可以参考本文中的方法.下面,将以Ja ...
- 通过修改注册表将右alt键映射为application键
通过修改注册表将右alt键映射为application键的方法有许多键盘没有APPLICATION(上下文菜单)键,本文将教您如何把右ALT键映射为apps键.1.映射请将以下注册表信息用记事本保存为 ...
- 主机磁盘使用率超过85%导致es索引变为只读模式
[ type=cluster_block_exception, reason=index [ index_name ] FORBIDDEN/12/index read-only / allow del ...
- JVM基础学习(一):JVM内存模型
在Java进阶知识的学习中,JVM都是避不过去的一关,我个人对于JVM的理解其实就是相当于在操作系统的外层再加了一层中间层,从来屏蔽了具体硬件之间的不同实现,使得Java实现了最重要的特性:一次编译, ...
- MyBatis功能点二:plugins插件使用
MyBatis自定义插件使用步骤(已有pojo及mapper的基础上) 一.自定义插件,实现Interceptor接口 二.核心配置文件sqlMapConfig.xml文件增加插件相关内容 测试 测试 ...
- 『无为则无心』Python面向对象 — 46、类和对象
目录 1.理解类和对象 2.类 3.对象 4.Python中的对象 5.类和对象的定义 (1)定义类 (2)创建对象 (3)练习 6.拓展:isinstance() 函数 1.理解类和对象 (1)类和 ...
- Vue 源码解读(5)—— 全局 API
目标 深入理解以下全局 API 的实现原理. Vue.use Vue.mixin Vue.component Vue.filter Vue.directive Vue.extend Vue.set V ...