Watch 1 Star 0 Fork 134

上帝门口的排队 / easy-flowJavaScript

forked from 萌级小菜鸟 / easy-flow 
Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
基于VUE+JsPlumb的流程设计器 spread retract

Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

easy-flow

效果图

项目介绍

easy-flow 基于VUE+ElementUI+JsPlumb的流程设计器,通过 vuedraggable 插件来实现左侧菜单的拖拽,拖拽结束后回调end方法, 根据鼠标所在的位置添加一个节点信息,使用jsplumb来管理该节点,设置该节点可拖拽、连线 并注册相关的事件。

功能

  • 支持拖拽添加节点
  • 鼠标移入到节点中显示 编辑、删除 操作
  • 不支持节点线连接自己
  • 不支持节点A与节点B之间线互连
  • 点击线进行删除
  • 支持给定数据加载流程图

操作说明

  • 左侧菜单子节点可以拖拽,将其拖拽到右侧画板中松开鼠标即可添加一个节点
  • 鼠标移动到画板中的节点上,节点的右上角出现 【删除】、【编辑】图标,点击对应的图标可进行删除、编辑操作
  • 节点分为2部分,图标在左上角侧,文字在下侧,鼠标从图标上可以拖拽出连线,可以连接其他节点,拖动图标意外位置可以改变节点在页面的位置

数据格式


{
    name: '流程C',
    nodeList: [
        {
            id: 'nodeA',
            name: '流程C-节点A',
            left: '400px',
            top: '15px',
            ico: 'el-icon-user-solid',
            show: true
        },
        {
            id: 'nodeB',
            name: '流程C-节点B',
            left: '400px',
            top: '200px',
            ico: 'el-icon-goods',
            show: true
        },
        {
            id: 'nodeC',
            name: '流程C-节点C',
            left: '400px',
            top: '378px',
            ico: 'el-icon-present',
            show: true
        }
    ],
    lineList: [
        {
            from: 'nodeA',
            to: 'nodeB'
        }, {
            from: 'nodeB',
            to: 'nodeC'
        }
    ]
}

data 参数说明

参数 描述
name 流程图名称

nodeList 参数说明

参数 描述
id 标识唯一的节点、可以与业务ID相结合
name 节点名称
left 节点在页面上的X坐标
top 节点在页面上的Y坐标
ico 节点显示的图标
show 为了解决节点删除问题

lineList 参数说明

参数 描述
from 连线的起始节点的ID
to 连线的终点节点ID

使用说明

  • 左侧的节点名称以及图标可以自定义,在tool.vue中 menuList 中
  • 左侧的节点展开时,子节点可以拖拽到右侧画布中即可添加
  • 鼠标移动到节点上,节点的右上角上显示【修改】、【删除】链接
  • 将鼠标从节点的左上角的图标上拖动时可以进行节点直接创建连线
  • 点击节点之间的连线,可以进行连线删除

启动

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

# 安装依赖包
npm install

# 启动
npm run dev

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

TODO

  • 支持多种节点
  • 节点图标自定义
  • 节点样式自定义
  • 提供保存JSON格式功能
  • 提供Java版本数据解析工具包

目前正在开发中,功能还未完善

github

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

协议

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

Comments ( 0 )

Sign in for post a comment

JavaScript
1
https://gitee.com/kulou54/easy-flow.git
git@gitee.com:kulou54/easy-flow.git
kulou54
easy-flow
easy-flow
master

Search