【源创会预告】1024 程序员节（的前两天），相约开源中国办公室，我们一起聊 AI！>>>

antd-bpmn

一个基于 React + Ant.design + bpmn.js 编写的工作流高阶组件。

已完成功能

•  基于 bpmn.js 的基础画图功能
•  XML 预览
•  XML 保存
•  对齐方式：向右对齐，左右居中，向左对齐，向上对齐，上下居中，向下对齐
•  放大、缩小
•  撤销、重做
•  小地图、快捷键
•  重写工具栏（更符合国人习惯）
•  重写元素菜单（更符合国人习惯）
•  属性面板的设置

如何使用

安装：

 npm i @codeflex/antd-bpmn

 

示例代码：

 function App() {     const config: AntdBpmnConfig = {         deptDataUrl: "/xxxx",         deptDataUrl: "bpmn.demo.xml",         onLoad: (url, set) => {             console.log("onLoad", url)             // 加载 xml 数据             if (url === "bpmn.demo.xml") {                 fetch(url).then(response => set(response.text()))                     .catch(err => console.log(err));             }             // 加载部门数据             else {                 set([                     {value: 'dept1', label: '北京分公司'},                     {value: 'dept2', label: '上海分公司'},                     {value: 'dept3', label: '-- 上海研发部'},                 ])             }         },          onChooseAssignee: (set) => {             set(Math.random(), "Michael");         },     };     return <AntdBpmn config={config}/>; }

 

AntdBpmnConfig 说明：

• xmlDataUrl: 获取 bpmn xml 数据的 URL
• deptDataUrl: 获取部门数据的 URL
• onLoad: 监听加载网络数据，数据加载完毕后通过第二个参数 set 方法来设置
• onChooseAssignee: 监听选择用户操作，选择用户后通过第二个参数 set 方法来设置

运行测试

 git clone https://gitee.com/antdadmin/antd-bpmn.git  npm install npm run dev 

AntdAdmin 介绍

AntdAdmin 是一个致力于 中国信创 产业的前端开源框架，其底层技术栈主要以 React + Ant.design 为主。AntdAdmin 开源（或者计划开源）的产品主要如下：

• antd-admin：一个基于 React + Ant.Design 的中（后）台 UI 框架（准备中...）。
• antd-crud：一个基于 React + Ant.Design 的增删改查高级组件（已开源：https://gitee.com/antdadmin/antd-crud ）。
• antd-bpmn：一个基于 React + Ant.Design 的工作流设计组件（已开源：https://gitee.com/antdadmin/antd-bpmn ）。
• antd-builder：一个基于 React + Ant.Design 的表单拖拽设计组件（准备中...）。