# advanced-flow

**Repository Path**: bosn1995/advanced-flow

## Basic Information

- **Project Name**: advanced-flow
- **Description**: 工作流进阶版--自动化营销
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 1
- **Created**: 2021-04-10
- **Last Updated**: 2024-12-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# advance-flow

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn serve
```

### Compiles and minifies for production
```
yarn build
```

### Run your unit tests
```
yarn test:unit
```

### Lints and fixes files
```
yarn lint
```

## 效果图

![](https://gitee.com/bosn1995/advanced-flow/raw/main/src/assets/groups.png)

![](https://gitee.com/bosn1995/advanced-flow/raw/main/src/assets/demo0.png)

![](https://gitee.com/bosn1995/advanced-flow/raw/main/src/assets/demo.png)

![](https://gitee.com/bosn1995/advanced-flow/raw/main/src/assets/demo2.png)

![](https://gitee.com/bosn1995/advanced-flow/raw/main/src/assets/demo4.png)

![](https://gitee.com/bosn1995/advanced-flow/raw/main/src/assets/demo5.png)

![](https://gitee.com/bosn1995/advanced-flow/raw/main/src/assets/demo6.png)

### 
基于`easy-flow`进行的二次开发，
easy-flow [git地址](https://gitee.com/xiaoka2017/easy-flow)
参考easy-flow [演示地址](http://xiaoka2017.gitee.io/easy-flow/#?_blank)

### 升级功能
*  支持键盘delete删除节点及连线事件。
*  实现画布切换线条的功能
*  实现分支节点等相对复杂的业务逻辑

## 操作说明
* 左侧菜单子节点可以拖拽，将其拖拽到右侧画板中松开鼠标即可添加一个节点
* 节点可双击打开弹框。

## 数据格式
``` json

 {
    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: '默认连线样式,动态锚点'
    }
    ]
}

```
## data 参数说明
|    参数    |      描述      |
| :--------: | :------------: |
|  name  |     流程图名称      |

## nodeList 参数说明
|    参数    |    必填    |      描述      |      可选值      |
| :--------: | :------------: | ---------- | ---------- |
|  id  |  是  |     标识唯一的节点、可以与业务ID相结合      |           |
|  name  |  是  |   节点名称      |         |
|  type | 是 | 节点类型，可以和业务相结合做处理 |  |
|  left  |  是  | 节点在页面上的X坐标，以px结尾  |         |
|  top  |  是  |  节点在页面上的Y坐标，以px结尾 |         |
|  ico  |  是  |   节点显示的图标，标识   |         |
|  state  |  否  |   状态，状态不同右侧展示的图标不同   | success、error、warning、running |
|  viewOnly  |  否  |   是否仅用于浏览，true: 不可拖拽   | true 、false|




## lineList 参数说明
|    参数    |    必填    |      备注      |      可选值      |
| :--------: | :------------: | -------------- | -------------- |
|  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 |




### 工作流工程所需插件

1. jsplumb插件 yarn add jsplumb

2. 左侧拖拽使用插件 vuedraggable ，yarn add vuedraggable

3. 实现深拷贝，使用lodash插件，lodash.cloneDeep();yarn add lodash;

   #### 工作流相关基础配置JS

   1. Jsplumb 基础setting 在mixin.js
   2. 与工作流节点相关method在common-mixin.js
   3. 分支节点相关的子分支节点的替换，新增，删除操作在branch-mixin.js
   4. 对右侧弹框的drawerForm进行保存时的验证在general-mixin.js

## 学习资料
| 名称        | 地址                                             | 说明                         |
| ----------- | ------------------------------------------------ | ---------------------------- |
| 后端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说明           |