一个超级棒的VUE流程设计器

大家好，我是为广大程序员兄弟操碎了心的小编，每天推荐一个小工具/源码，装满你的收藏夹，每天分享一个小技巧，让你轻松节省开发效率，实现不加班不熬夜不掉头发，是我的目标！

今天小编推荐一款流程设计器easy-flow， easy-flow基于VUE+ElementUI+JsPlumb的流程设计器，通过 vuedraggable 插件来实现节点拖拽。

功能介绍

支持拖拽添加节点
点击线进行设置条件
支持给定数据加载流程图
支持画布拖拽
支持连线样式、锚点、类型自定义覆盖
支持力导图

如何集成

在自己的vue工程中找到package.json，并引入如下依赖（不用额外引入jsplumb）

  "element-ui": "2.9.1","lodash": "4.17.15","vue": "^2.5.2","vue-codemirror": "^4.0.6","vuedraggable": "2.23.0"

将easy-flow/src/components/ef 目录复制到自己工程的一个目录下（如/src/views）

修改main.js，引入elementUI和easy-flow样式

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '@/这个为复制后的目录，src就不要写了/ef/index.css'
Vue.use(ElementUI, {size: 'small'})

数据格式

 {name: '流程D',nodeList: [{id: 'nodeA',name: '流程D-节点A',type: 'task',left: '18px',top: '223px',ico: 'el-icon-user-solid',state: 'success'},{id: 'nodeB',type: 'task',name: '流程D-节点B',left: '351px',top: '96px',ico: 'el-icon-goods',viewOnly: true,state: 'error'},{id: 'nodeC',name: '流程D-节点C',type: 'task',left: '354px',top: '351px',ico: 'el-icon-present',state: 'warning'}, {id: 'nodeD',name: '流程D-节点D',type: 'task',left: '723px',top: '215px',ico: 'el-icon-present',state: 'running'}],lineList: [{from: 'nodeA',to: 'nodeB',label: '直线,自定义线样式,固定锚点',connector: 'Straight',anchors: ['Top', 'Bottom'],paintStyle: {strokeWidth: 2, stroke: '#1879FF'}}, {from: 'nodeA',to: 'nodeC',label: '贝塞尔曲线,固定锚点',connector: 'Bezier',anchors: ['Bottom', 'Left']}, {from: 'nodeB',to: 'nodeD',label: '默认连线样式,动态锚点'}, {from: 'nodeC',to: 'nodeD',label: '默认连线样式,动态锚点'}]
}

启动

# 下载工程
git clone  https://github.com/BiaoChengLiu/easy-flow.git# 安装依赖包
npm install# 启动
npm run dev# 访问地址http://localhost:8080

截图

结尾

本期就分享到这里，我是小编南风吹，专注分享好玩有趣、新奇、实用的开源项目及开发者工具、学习资源！
希望能与大家共同学习交流,欢迎关注我的公众号**【Github导航站】**。

一个超级棒的VUE流程设计器相关推荐

springcloudspringboot+vue+elementui+flowable+自定义表单+VUE流程设计器
源码 springboot:https://gitee.com/zjm16/zjmzxfzhl springcloud:https://gitee.com/zjm16/zjmzxfzhl-cloud ...
flowable实战（十五）关于流程设计器 bpmn.js与vue的整合
一.前言: 由于flowable本身带的Moder风格实在与前端页面风格不一样,同时由于Modeler采用Angular.js写的,改造起来相对有一定的难度,所以打算换成bpmn.js当成流程设计器. ...
bpmn-js：vue集成bpmn-js流程设计器并汉化
最近工作转到工作流模块开发了,需要开发一个流程设计器. 于是就开始接触到bpmn-js,搜索了不少资料,整合demo.现在总结一下如何在vue工程中集成bpmn-js流程设计器. 集成的效果: 目前这 ...
【工作流引擎】Flowable流程设计器基于bpmnjs开发的vue组件
[工作流引擎]Flowable流程设计器基于bpmnjs开发的vue组件设计器介绍集成设计器设计器介绍 bpmn.js官网 bpmn.js 是一个BPMN2.0渲染工具包和web建模器, 使得 ...
写了一个在线流程设计器，效果很炫[Siverlight版本]
组件描述让流程配置不在繁琐死板,UI界面效果极炫,设计流程图(工作流)就像使用Office Visio,所见即所得,让您以及您的客户眼前为之一亮,要想看到在线DEMO,下载Siverlight 3以 ...
基于bpmn-js的流程设计器
文章目录基于bpmn-js的流程设计器一.技术栈二.功能列表三.代码 1.package.json 2.路由 3.样式 4.高亮 5.下载文件 6.国际化 7.vue组件参考资料基于bpm ...
基于J2EE+JBPM3.x/JBPM4.3+Flex流程设计器+Jquery+授权认证)企业普及版贝斯OA与工作流系统...
基于J2EE+JBPM3.x/JBPM4.3+Flex流程设计器+Jquery+授权认证)企业普及版贝斯OA与工作流系统课程学习地址:http://***/goods.php?id=173 本项目是 ...
F2工作流引擎之-纯JS Web在线可拖拽的流程设计器（八）
Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员还 ...
web 流程设计器探究
BPM也罢,工作流(Workflow)也好,发展也有些年头了.至于 BPM 和 Workflow 的区别,一时难以论定,自有人评说. 今天在此不说别的,只说说 Web 化的模型设计问题. 1)实现形式 ...

一个超级棒的VUE流程设计器

功能介绍

如何集成

数据格式

启动

截图

结尾

一个超级棒的VUE流程设计器相关推荐

最新文章

热门文章