代码拉取完成，页面将自动刷新
感谢码云平台给了一个免费的Gitee Pages服务, 可能访问有点慢
easy-flow 基于VUE+ElementUI+JsPlumb的流程设计器，通过 vuedraggable 插件来实现节点拖拽。
2020年11月12日
2020年8月6日
2020年8月6日
2020年6月14日
2020年5月10日
2020年5月6日
2020年3月14日
2019年12月09日
2019年12月08日
2019年11月26日
2019年11月25日
2019年08月23日
2019年08月22日
{
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: '默认连线样式,动态锚点'
}
]
}
| 参数 | 描述 |
|---|---|
| name | 流程图名称 |
| 参数 | 必填 | 描述 | 可选值 |
|---|---|---|---|
| id | 是 | 标识唯一的节点、可以与业务ID相结合 | |
| name | 是 | 节点名称 | |
| type | 是 | 节点类型，可以和业务相结合做处理 | |
| left | 是 | 节点在页面上的X坐标，以px结尾 | |
| top | 是 | 节点在页面上的Y坐标，以px结尾 | |
| ico | 是 | 节点显示的图标，标识 | |
| state | 否 | 状态，状态不同右侧展示的图标不同 | success、error、warning、running |
| viewOnly | 否 | 是否仅用于浏览，true: 不可拖拽 | true 、false |
| 参数 | 必填 | 备注 | 可选值 |
|---|---|---|---|
| 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/lettersporter/easy-flow.git
# 安装依赖包
npm install
# 启动
npm run dev
# 访问地址
http://localhost:8080
https://github.com/lettersporter/easy-flow
https://gitee.com/xiaoka2017/easy-flow
QQ群：534446043
符合项目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说明 |
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。