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: ネットワーク データのロードを監視し、データのロード後に 2 番目のパラメータ メソッドを通じてネットワークデータを設定します。
set - onChooseAssignee: ユーザーの選択操作を監視し、ユーザーの選択後に 2 番目のパラメーターメソッドを通じて設定します。
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 に基づくフォームのドラッグ アンド ドロップ設計コンポーネント (準備中...)。