/easy-flow

基于VUE+JsPlumb的流程设计器

Primary LanguageJavaScriptApache License 2.0Apache-2.0

easy-flow

演示地址

感谢码云平台给了一个免费的Gitee Pages服务, 可能访问有点慢

演示地址

效果图

项目介绍

easy-flow 基于VUE+ElementUI+JsPlumb的流程设计器,通过 vuedraggable 插件来实现节点拖拽。

功能介绍

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

更新日志

2020年11月12日

  • 新增力导图自适应布局,只需要提供节点、节点和节点之间的关系即可自动计算坐标(比没有坐标好些)

2020年8月6日

  • 新增自连接样例

2020年8月6日

  • 新增缩放(还存在一些问题)
  • 新增使用说明
  • 新增拖拽回调
  • 节点新增viewOnly参数,可以控制节点是否只读

2020年6月14日

  • 新增:连线自定义类型
  • 新增:连线自定义锚点
  • 新增:连线制自定义样式

2020年5月10日

  • 修改jsplumb源码
  • 支持label设置和修改
  • 新增节点状态

2020年5月6日

  • 新增: 连线条件支持
  • 重构: 布局重构
  • 删除: show控制显示参数
  • 新增: 画布拖拽

2020年3月14日

  • 页面样式调整
  • 新增类型参数
  • 新增菜单样式调整

2019年12月09日

  • 修复移动节点位置后,点击【流程信息】时节点信息位置未更新问题

2019年12月08日

  • 去除_this定义,使用箭头函数

2019年11月26日

  • 修复: 修复删除节点时把其他的线也删除了
  • 优化: 优化代码结构
  • 修改版本: 修改lodash版本为4.17.15

2019年11月25日

  • 修复加载数据时nodeId不唯一问题

2019年08月23日

  • 修改IE 11.316版本下无法拖拽问题
  • 新增演示环境地址, 演示地址

2019年08月22日

  • 修改火狐浏览器下不能够拖拽问题

操作说明

  • 左侧菜单子节点可以拖拽,将其拖拽到右侧画板中松开鼠标即可添加一个节点
  • 节点分为3部分,左边为标识节点的图标,中间节点的描述,右变为节点的状态图标,鼠标从左变图标上可以拖拽出连线,可以连接其他节点,拖动左侧图标以外位置可以改变节点在页面的位置

数据格式

 {
    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: '默认连线样式,动态锚点'
    }
    ]
}

data 参数说明

参数 描述
name 流程图名称

nodeList 参数说明

参数 必填 描述 可选值
id 标识唯一的节点、可以与业务ID相结合
name 节点名称
type 节点类型,可以和业务相结合做处理
left 节点在页面上的X坐标,以px结尾
top 节点在页面上的Y坐标,以px结尾
ico 节点显示的图标,标识
state 状态,状态不同右侧展示的图标不同 success、error、warning、running
viewOnly 是否仅用于浏览,true: 不可拖拽 true 、false

lineList 参数说明

参数 必填 备注 可选值
from 连线的起始节点的ID
to 连线的终点节点ID
label 连线上的描述信息
anchors 连线的起始锚点位置,如:["Top","Right"] ['Top', 'TopCenter', 'TopRight', 'TopLeft', 'Right', 'RightMiddle', 'Bottom', 'BottomCenter', 'BottomRight', 'BottomLeft', 'Left', 'LeftMiddle'],
connector 连线类型 StateMachine、Flowchart,Bezier、Straight

如何集成

  • 下载源码

  • 在自己的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'})

启动

# 下载工程
git clone  https://github.com/BiaoChengLiu/easy-flow.git

# 安装依赖包
npm install

# 启动
npm run dev

# 访问地址
 http://localhost:8080

github

https://github.com/BiaoChengLiu/easy-flow

码云

https://gitee.com/xiaoka2017/easy-flow

交流群

QQ群:534446043

avatar

协议

符合项目package.json中使用的插件中规定的协议即可

学习资料

名称 地址 说明
后端SDK https://gitee.com/xiaoka2017/easy-flow-sdk 一个后端数据存储、操作的案例
学习资料 https://www.cnblogs.com/mq0036/p/7942139.html
jsplumb官网 http://jsplumb.github.io/jsplumb/home.html#setup jsplumb官网api说明