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

简单说明一下功能:写了两个demo,一个简单一些的,一个复杂一些的,包括对拖动节点的设置,限制条件,缩放功能,保存(在控制台可以看数据,项目中使用直接把数据传给后台即可!),元素的删除,线的删除,流程下载为图片功能;复杂项目里面还可以进行拖动区域的判断,部分区域里面元素的自适应。

大致说一下页面功能模块吧:首先进入咱们要绘制的页面(.vue文件,进行组件注册,及默认参数设置),然后进入ef下面找到对应的组件,可以通过该组件里面引入的功能模块,按照先后顺序使用即可,其他的都可以不用去研究

原创不易,有喜欢的小伙伴帮忙start加转发一下,谢谢了,最后附上代码地址:https://github.com/WangHao1221/jsplumbWithVue

转发请记得是说明出处,谢谢!

jsplumbWithVue实现流程编排的更多相关文章

  1. xxl-job之实现流程任务编排思路

    背景   某一天一如既往的上班"旅途"中,我的领导在开早会的时候,说我最近没啥事,于是让我研究一下Activiti工作流引擎与Drools规则引擎,当时也不知道后边具体要做什么,管 ...

  2. 低代码平台--基于surging开发微服务编排流程引擎构思

    前言 微服务对于各位并不陌生,在互联网浪潮下不是在学习微服务的路上,就是在使用改造的路上,每个人对于微服务都有自己理解,有用k8s 就说自己是微服务,有用一些第三方框架spring cloud, du ...

  3. 基于 Jenkins+Docker+Git 的CI流程初探

    在如今的互联网时代,随着软件开发复杂度的不断提高,软件开发和发布管理也越来越重要.目前已经形成一套标准的流程,最重要的组成部分就是持续集成(Continuous Integration,CI)及持续部 ...

  4. 基于通用jar、动态配置、组件编排的会员任务中心系统设计

    # 一.聊聊本文想说什么:   为更好帮助商家的会员快速成长,保持用户活性,完善用户的成长体系,有赞用户中心-会员成长团队基于现有的业务场景,设计了一套较完备任务中心系统.同时也有很多通用技术组件能够 ...

  5. Jenkins+GitLab+SonnarQube搭建CI/CD全流程

    1. CI/CD 1.1 CI - 持续集成 持续集成( Continuous integration , 简称 CI )指的是,频繁地(一天多次)将代码集成到主干.持续集成的目的就是让产品可以快速迭 ...

  6. 技术调研,IDEA 插件怎么开发「脚手架、低代码可视化编排、接口生成测试」?

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 不踩些坑,根本不是成熟的码农! 你觉得肯德基全家桶是什么?一家人一起吃的桶吗,就那么 ...

  7. Businessworks的设计思想

    Businessworks的设计思想基于一下三篇ATA: <从Eclipse平台看交易平台化>,强调微内核和扩展机制实现 <Google Guice平台模块化开发的果汁>,讨论 ...

  8. 李学斌:论复杂系统中的应用间协作V3

    说明 本文主要讨论了巨型复杂业务系统的一种构建思路,力图实现决策意志的快速.准确.一致的下传并简化实施成本提供实施效率.通过全业务领域的即时流程编排,实现全网业务IT系统的快速建设与迭代.本文所讲的方 ...

  9. 基于WS-BPEL2.0的服务组合研究

    http://tech.it168.com/soadocument/2008-01-03/200801031332376.shtml WS-BPEL是为组合Web服务而制定的一项规范.它的前身是由IB ...

随机推荐

  1. JAVA类加载器一 父类委托机制

    感谢原文作者:不将就! 原文链接:https://www.cnblogs.com/byron0918/p/5770653.html 类加载器负责将.class文件加载到内存中,并为之生成对应的Clas ...

  2. Linux 内核引导参数简介

    概述 内核引导参数大体上可以分为两类:一类与设备无关.另一类与设备有关.与设备有关的引导参数多如牛毛,需要你自己阅读内核中的相应驱动程序源码以获取其能够接受的引导参数.比如,如果你想知道可以向 AHA ...

  3. Nginx+Tomcat负载均衡、动静分离群集

    Nginx+Tomcat负载均衡.动静分离群集 目录 Nginx+Tomcat负载均衡.动静分离群集 一.Tomcat 1. Tomcat简介 2. Tomcat重要目录 二.Nginx负载均衡原理 ...

  4. Feign的异步调用或者MQ调用与Security的问题处理;

    两大踩坑点: 一:部分框架自带有查询当前登录人的信息工具,无需各种本地线程栈ThreadLocals取Request啥的折磨自己: 二:Security自带有uri匹配的工具,没事多翻翻源码,原创方法 ...

  5. ConcurrentHashMap (jdk1.7)源码学习

    一.介绍 1.Segment(分段锁) 1.1 Segment 容器里有多把锁,每一把锁用于锁容器其中一部分数据,那么当多线程访问容器里不同数据段的数据时,线程间就不会存在锁竞争,从而可以有效的提高并 ...

  6. 面向对象—继承(Day19)

    初识继承 继承是一种创建新类的方式,在python中新类可以继承一个或多个父类,父类又可称为基类或超类,新建的类为派生类或子类.(类与类之间的关系是什么是什么的关系.) 继承语法: class Par ...

  7. leetcode算法1.两数之和

    哈喽!大家好,我是[学无止境小奇],一位热爱分享各种技术的博主! [学无止境小奇]的创作宗旨:每一条命令都亲自执行过,每一行代码都实际运行过,每一种方法都真实实践过,每一篇文章都良心制作过. [学无止 ...

  8. 非对称加解密 Asymmetric encryption 对称加密和非对称加密的区别

    考虑这样一个问题:一切的装备文件都存储在 Git 长途库房,RAR密码破解装备文件中的一些信息又是比较灵敏的.所以,我们需求对这些灵敏信息进行加密处理.首要的加密方法分为两种:一种是同享密钥加 密(对 ...

  9. SpringBoot+MybatisPlus+Mysql+Sharding-JDBC分库分表实践

    一.序言 在实际业务中,单表数据增长较快,很容易达到数据瓶颈,比如单表百万级别数据量.当数据量继续增长时,数据的查询性能即使有索引的帮助下也不尽如意,这时可以引入数据分库分表技术. 本文将基于Spri ...

  10. Linux下/目录 、/home目录 、~目录的区别

    / :根目录 ,所有目录的最顶层目录,从任何用户执行该命令都会进入同一个目录,即所有用户共享.如下图: /home:/下面的home目录,名为家目录,但是很多人叫为用户列表目录,因为/home下是这台 ...