easy-flow-ddd v2.2.0

easy-flow

演示地址

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

演示地址

效果图

项目介绍

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

功能

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

更新日志

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日

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

操作说明

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

数据格式

{
    name: '流程C',
    nodeList: [
        {
            id: 'nodeA',
            name: '流程B-节点A',
            type: 'task',
            left: '18px',
            top: '223px',
            ico: 'el-icon-user-solid',
            state: 'success'
        },
        {
            id: 'nodeB',
            type: 'task',
            name: '流程B-节点B',
            left: '351px',
            top: '96px',
            ico: 'el-icon-goods',
            state: 'error'
        },
        {
            id: 'nodeC',
            name: '流程B-节点C',
            type: 'task',
            left: '354px',
            top: '351px',
            ico: 'el-icon-present',
            state: 'warning'
        }, {
            id: 'nodeD',
            name: '流程B-节点D',
            type: 'task',
            left: '723px',
            top: '215px',
            ico: 'el-icon-present',
            state: 'running'
        }
    ],
    lineList: [
        {
            from: 'nodeA',
            to: 'nodeB',
            label: '条件A'
        }, {
            from: 'nodeB',
            to: 'nodeC',
            label: '条件B'
        }
    ]
}

data 参数说明

nodeList 参数说明

lineList 参数说明

使用说明

• 左侧的节点名称以及图标可以自定义，在tool.vue页面menuList变量中
• 左侧的节点展开时，子节点可以拖拽到右侧画布中即可添加
• 鼠标移动到画布中节点上，节点的右上角上显示【修改】、【删除】操作链接
• 将鼠标从画布节点的左上角图标上拖动时可以拖拽出连线，然后将鼠标移动到其他节点上即可连接
• 点击画布中节点之间的连线，可以进行连线删除

启动

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

# 安装依赖包
npm install

# 启动
npm run dev

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

github

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

交流群

QQ群：534446043

协议

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

学习资料