# react-flow-design

react-flow-design提供了钉钉模式的一套流程设计组件，需搭配ant design组件库使用。

## Index

* [Usage](#usage)
* [API](#api)
* [Compatibility](#compatibility)
* [License](#license)

## Usage

安装
```html
  npm install "react-flow-design"
```


示例
```html
import React, { PureComponent } from "react"
import FlowDesign from "react-flow-design"

exports default class Example extends PureComponent{

  componentDidMount = () => {
    let editId = this.props.editId
    if (editId) {
      axios.get("/api/manage/design/approval/" + editId).then(res => {
        this.setState({
          basicInfo: res.data.returnObject.basicInfo,
          formDesign: JSON.parse(res.data.returnObject.formDesign),
          processesDesign: res.data.returnObject.processesDesign
        })
      })
    }
  }

  onFlowDesignChange = design => {
    this.state.processesDesign = design
  }

  render() {
    return <FlowDesign design={this.state.processesDesign} onChange={this.onFlowDesignChange}></FlowDesign>
  }

}
```

环境配置 
用户及角色数据需要业务系统提供，需要进行如下设置。
```js
import { Config } from "react-flow-design"

Config.set(Config.URL_USER_LIST, "/user/list")
Config.set(Config.URL_ROLE_LIST, "/role/list")

```
用户接口数据格式
```js
[
  {
    title: "部门01",
    value: "01",
    children: [
      {
        title: "用户001",
        value: "00001",
      },
      {
        title: "用户002",
        value: "00002",
      },
    ],
  },
  {
    title: "部门02",
    value: "02",
    children: [
      {
        title: "用户003",
        value: "00003",
      },
      {
        title: "用户004",
        value: "00004",
      },
      {
        title: "用户005",
        value: "00005",
      },
    ],
  },
]


```
角色接口数据格式
```js
[
  {
    title: "管理组01",
    value: "001",
  },
  {
    title: "审批组02",
    value: "002",
  },
]
```

## API
### FlowDesign
自定义流程设计展示，可拖拽配置生成所需流程。

| 参数     | 说明         | 类型         | 默认值 |
|----------|-------------|-------------|-------|
| design    | 流程设计数据源          | string | [] |
| onChange    | 监听流程设计数据变化          | (design)=>void  | - |

### Config
环境上下文信息配置，Key/Value形式。

| 参数     | 说明         | 类型         | 默认值 |
|----------|-------------|-------------|-------|
| set    | 给指定Key设置Value           | (string, string)=>void  | - |
| get    | 获取指定Key的Value           | (string)=>string  | - |

## Compatibility



## License

Licensed under the MIT License