react-bpmn-design

react-bpmn-design 提供了 BPMN2.0 规范的流程设计器组件。

发布流程

• 修改package.json中的版本号version
• 编译工程npm run build
• 登录镜像仓库

$ npm login
Username: zhanghq23531
Password:
Email: (this IS public) [email protected]
Logged in as zhanghq23531 on http://sinopia.yunrong.cn:4873/.

• 执行发布npm publish

• 在仓库中查看包是否已更新

版本描述

2.0.9

在选定的委派用户或角色上加移除功能

2.0.7&2.0.8

修复configs的bug问题

2.0.6

去掉html，body的默认字体大小，以防组件引用时和页面所设字体大小产生冲突

2.0.5

派件模式和审批方式选项支持自定义

2.0.4

人工领单时效必填
修复图形颜色和展示

2.0.3

流程状态图线条绘制

2.0.2

流程状态图着色

2.0.1

修复根据派件模式选择展示人工领单时效
流程状态轨迹图

2.0.0

增加审批参数：派件模式&人工领单时效（分钟）
支持Viewer模式展示
支持流程状态轨迹图

1.1.19

支持国际化，进行中文翻译

1.1.22

添加中继节点，且可配置属性和监听器
决策节点：支持监听器

Index

• Usage
• API
• Compatibility
• License

Usage

安装

npm install "react-bpmn-design"

示例

let xml = '<?xml version="1.0" encoding="UTF-8"?>↵...</bpmn2:definitions>';
let propertyPanel = {
  processTypeList: [{
    name: "类型AA",
    value: "AA"
  }, {
    name: "类型BB",
    value: "BB"
  }],
  listenerClassList: [{
    name: "com.aaa.bbb.OBJAAA",
    value: "com.aaa.bbb.OBJAAA"
  }, {
    name: "com.aaa.bbb.OBJBBB",
    value: "com.aaa.bbb.OBJBBB"
  }]
};

<BpmnDesigner
    type='view'
    // records={['start']}
    recordNames={['开始','风控主管审批','没有缴纳保证金']}
    design={xml||this.state.bpmnDesign}
    onChange={this.onBpmnDesignChange}
    configs={{propertyPanel:propertyPanel}}
    userChoose={()=>{}}
/>

API

BpmnDesigner

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

| 参数 | 说明 | 类型 | 默认值 | |-------------|--------------------------------------------------------------|----------------|-------| | design | 流程设计数据源 | string | - | | onChange | 监听流程设计数据变化 | (design)=>void | - | | configs | 面板参数配置 | Object | - | | type | 展示方式：'view'以 SVG 视图详情展示，支持流程状态轨迹；默认是可编辑的状态 | string | - | | records | 流程流转状态记录，匹配 xml 中的 id | array | - | | recordNames | 流程流转状态记录，匹配 xml 中的 name ，如果 records 有值则此参数无效 | array | - |

Compatibility

License

Licensed under the MIT License