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 的表單拖拽設計組件（準備中...）。
