代码拉取完成,页面将自动刷新
同步操作将从 萌级小菜鸟/easy-flow 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
效果图
easy-flow
基于VUE+ElementUI+JsPlumb的流程设计器,通过 vuedraggable 插件来实现左侧菜单的拖拽,拖拽结束后回调end方法,
根据鼠标所在的位置添加一个节点信息,使用jsplumb来管理该节点,设置该节点可拖拽、连线 并注册相关的事件。
{
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'
}
]
}
参数 | 描述 |
---|---|
name | 流程图名称 |
参数 | 描述 |
---|---|
id | 标识唯一的节点、可以与业务ID相结合 |
name | 节点名称 |
left | 节点在页面上的X坐标 |
top | 节点在页面上的Y坐标 |
ico | 节点显示的图标 |
show | 为了解决节点删除问题 |
参数 | 描述 |
---|---|
from | 连线的起始节点的ID |
to | 连线的终点节点ID |
# 下载工程
git clone https://github.com/BiaoChengLiu/easy-flow.git
# 安装依赖包
npm install
# 启动
npm run dev
# 访问地址
http://localhost:8080
目前正在开发中,功能还未完善
https://github.com/BiaoChengLiu/easy-flow
符合项目package.json中使用的插件中规定的协议即可
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。