react-bpmn-design

react-flow-design

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

Index

• Usage
• API
• Compatibility
• License

Usage

安装

  npm install "react-flow-design"

示例

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>
  }
 
}

环境配置 用户及角色数据需要业务系统提供，需要进行如下设置。

import { Config } from "react-flow-design"
 
Config.set(Config.URL_USER_LIST, "/user/list")
Config.set(Config.URL_ROLE_LIST, "/role/list")
 

用户接口数据格式

[
  {
    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",
      },
    ],
  },
]
 
 

角色接口数据格式

[
  {
    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