1 Unstar Star 4 Fork 0

萌级小菜鸟 / easy-flow-sdk

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.
Nothing here. 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是基于vue+elementUI实现的一款前端流程绘制的组件,在使用过程中除了前端需要进行开发,还涉及到数据如何存储以及加载的问题,为了方便快速的进行开发,easy-flow-sdk提供了基本的操作

目录结构说明

案例是基于SpringBoot + MyBatisPlus 开发,使用的是MySQL数据库,脚本在src/main/resources/sql/easy-flow.sql中。

如何启动

找到 com.xioaka.easy.flow.sdk.App 类,然后执行里面的main方法即可

获取流程数据接口

请求接口: /project/data/{projectId}

请求方式: get

返回数据样例:

{
  "code": 0,
  "desc": null,
  "data": {
    "name": "测试",
    "nodeList": [
      {
        "id": "1264194018334486530",
        "projectId": "1264186026780315650",
        "name": "节点B",
        "type": "task",
        "left": "200px",
        "top": "100px",
        "ico": "task",
        "state": "success"
      },
      {
        "id": "1264194078472417282",
        "projectId": "1264186026780315650",
        "name": "节点A",
        "type": "task",
        "left": "100px",
        "top": "300px",
        "ico": "task",
        "state": "success"
      }
    ],
    "lineList": [
      {
        "id": "1264194173825724417",
        "projectId": "1264186026780315650",
        "from": "1264194078472417282",
        "to": "1264194018334486530",
        "label": "hello"
      }
    ]
  }
}

上面的返回数据中的data即easy-flow 页面需要的数据结构,在页面中调用 this.dataReload(data) 即可。

SQL脚本

通过看下数据库的脚本(src/main/resources/sql/easy-flow.sql)应该就知道是什么意思了,和前端的数据结构几乎一样。

DROP TABLE IF EXISTS `flow_project`;
CREATE TABLE `flow_project` (
  `id` varchar(64) NOT NULL COMMENT 'ID',
  `name` varchar(100) NOT NULL COMMENT '项目名称',
  PRIMARY KEY (`id`)
);

DROP TABLE IF EXISTS `flow_node`;
CREATE TABLE `flow_node` (
  `id` varchar(64) NOT NULL COMMENT 'ID',
  `project_id` varchar(64) NOT NULL COMMENT '项目ID',
  `type` varchar(100) NOT NULL COMMENT '类型',
  `name` varchar(100) NOT NULL COMMENT '名称',
  `left` varchar(100) NOT NULL COMMENT '坐标',
  `top` varchar(100) NOT NULL COMMENT '坐标',
  `ico` varchar(100) NOT NULL COMMENT '图标',
  `state` varchar(100) NOT NULL COMMENT '状态',
  PRIMARY KEY (`id`)
);

DROP TABLE IF EXISTS `flow_line`;
CREATE TABLE `flow_line` (
  `id` varchar(64) NOT NULL COMMENT 'ID',
  `project_id` varchar(64) NOT NULL COMMENT '项目ID',
  `from` varchar(64) NOT NULL COMMENT '开始节点ID',
  `to` varchar(64) NOT NULL COMMENT '结束节点ID',
  `label` varchar(100) NOT NULL COMMENT '条件',
  PRIMARY KEY (`id`),
  unique  key  `uni_line`(`from`,`to`)
);
  • flow_project: 不同的节点组成的一个流程这里被称之为项目。一个项目下可以包含多种节点和连线。
  • flow_node: 通过project_id和项目进行关联。
  • flow_line: 通过project_id和项目进行关联。同时设置了约束(两个节点之间不能存在多个相同的连线)。

业务扩展

上面的表结构只是easy-flow需要的一些必须的字段信息,在实际业务中还需要存储其他的业务信息,比如Node中除了需要记录名称之外,可能还需要记录一些调用的接口信息、流程处理人信息等。针对这种需求可以分为2种方法解决。

不改变上面的表结构的条件下,将新增的字段放入新建的另一个表中,通过node_id进行关联。

将上诉的表结构进行下改变、将新增的字段放入到上面的node表中。

Comments ( 1 )

Sign in for post a comment

1
https://gitee.com/xiaoka2017/easy-flow-sdk.git
git@gitee.com:xiaoka2017/easy-flow-sdk.git
xiaoka2017
easy-flow-sdk
easy-flow-sdk
master

Search