# easy-flow **Repository Path**: magicfish/easy-flow ## Basic Information - **Project Name**: easy-flow - **Description**: 基于VUE+JsPlumb的流程设计器 - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 626 - **Created**: 2019-06-27 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # easy-flow > 基于VUE+ElementUI+JsPlumb的流程设计器 ![](https://gitee.com/xiaoka2017/resource/raw/master/easy-flow/1.png) ![](https://gitee.com/xiaoka2017/resource/raw/master/easy-flow/2.png) ![](https://gitee.com/xiaoka2017/resource/raw/master/easy-flow/3.png) ## 功能 * 支持拖拽添加节点 * 鼠标移入到节点中显示 编辑、删除 操作 * 不支持节点线连接自己 * 不支持节点A与节点B之间线互连 * 点击线进行删除 ## 节点数据格式 ``` json [ { "id": "nodeA", "name": "节点A", "left": "400px", "top": "15px", "ico": "el-icon-user-solid" }, { "id": "nodeB", "name": "节点B", "left": "400px", "top": "200px", "ico": "el-icon-goods" }, { "id": "nodeC", "name": "节点C", "left": "800px", "top": "200px", "ico": "el-icon-present" } ] ``` ## 参数说明 | 参数 | 描述 | | :--------: | :------------: | | id | 标识唯一的节点、可以与业务ID相结合 | | name | 节点名称 | | left | 节点在页面上的X坐标 | | top | 节点在页面上的Y坐标 | | ico | 节点显示的图标 | ## 节点连线数据格式 ``` json [ { "from": "nodeA", "to": "nodeB" }, { "from": "nodeB", "to": "nodeC" } ] ``` ## 参数说明 | 参数 | 描述 | | :--------: | :------------: | | from | 连线的起始节点的ID | | to | 连线的终点节点ID | ## 使用说明 * 左侧的节点名称以及图标可以自定义,在tool.vue中 menuList 中 * 左侧的节点展开时,子节点可以拖拽到右侧画布中即可添加 * 鼠标移动到节点上,节点的右上角上显示【修改】、【删除】链接 * 将鼠标从节点的左上角的图标上拖动时可以进行节点直接创建连线 * 点击节点之间的连线,可以进行连线删除 ## 启动 ``` bash # 下载工程 git clone https://github.com/BiaoChengLiu/easy-flow.git # 安装依赖包 npm install # 启动 npm run dev # 访问地址 http://localhost:8080 ``` ## TODO * 支持多种节点 * 节点图标自定义 * 节点样式自定义 * 提供保存JSON格式功能 * 提供根据JSON数据加载功能 * 提供Java版本数据解析工具包 > 目前正在开发中,功能还未完善