內部管理系統需要多種流程設計，方便在 Web PC 手動設計業務流程，保證單個業務可以設計多個流程，並且可以進行流程跟蹤的綜合要求。
起初
後端有一套自己的流程引擎，解析相應的 xml，然後部署業務流程。
起初後端是想直接用 activiti-designeer 做流程設計，該方法基本滿足業務需求，但後期發現這樣做太麻煩，於是推薦前端使用 BPMN插件，放在管理系統中使用，生成 xml 及 svg 字符串傳給接口，保存改業務流程。
基本用法
- 安裝依賴包
yarn add bpmn-js
yarn add bpmn-js-properties-panel
yarn add camunda-bpmn-moddle- 初始化
let xml; // 我的BPMN 2.0 xml
let viewer = new BpmnJS({
container: '#canvas',
height: 400,
});
viewer.importXML(xml, function(err) {
if (err) {
console.log('error rendering: ', err)
} else {
console.log('rendered:')
}
});React 中用法
使用了 ant-design-pro 最初搭建好的後臺項目(非 ts 版本) 搭建的項目：
BPMN React 例子
ProcessManage
流程管理：包括看板與表單輸入的流程管理實例
processTrace
流程跟蹤：可點擊審批節點，獲取節點id，從而可獲取當前節點詳細信息的實例
遇到的問題
- 自定義節點信息表單
官網提供了一些 BPMN 實例，可以自定義單個表單(inout、select、checkbox...)
import entryFactory from 'bpmn-js-properties-panel/lib/factory/EntryFactory';
// 編號
const BaseInfoProps = (group, element, bpmnFactory, translate) => {
group.entries.push(
entryFactory.textField({
id: 'id',
label: translate('編號'),
modelProperty: 'id',
})
);
group.entries.push(
entryFactory.textField({
id: 'name',
label: translate('名稱'),
modelProperty: 'name',
validate: function(element, values) {
let validationResult = {};
if (!values.name) {
validationResult.name = '請輸入節點名稱';
}
if (values.name && values.name.length > 30) {
validationResult.name = '名稱最多30個字';
}
return validationResult;
},
})
);
}
export default BaseInfoProps;No provider for "e"!
在本地聯調部署都沒有問題，打包到正式環境的時候，進入初始化截斷，開始報以下錯誤:
Error: No provider for "e"! (Resolving: colorPicker -> e)
起初以爲 colorPicker 中的代碼不夠完善，反正這個也不用，就刪了吧，上線要緊，結果錯誤總是驚人的相似，又出現以下錯誤：
Error: No provider for "e"! (Resolving: propertiesPanel -> propertiesProvider -> e)No provider for "e"! (Resolving: colorPicker -> e)
於是找到了這個網站 BPMN問題網站，裏面有一些解釋，意思就是：定義的函數需要使用 $inject 來註釋服務 annotate your service.
export default function ColorPicker(eventBus, contextPad, commandStack) {
// ...
}
ColorPicker.$inject = [
'eventBus',
'contextPad',
'commandStack',
];-
生成的 xml 位置不能進行調節，但是
svg可以關於 viewBox preserveAspectRatio
viewBox="x, y, width, height"
更形象的解釋就是：`SVG` 就像是我們的顯示器屏幕，`viewBox` 就是截屏工具選中的那個框框，最終的呈現就是把框框中的截屏內容再次在顯示器中全屏顯示！
- `preserveAspectRatio="xMinYMin meet"`
`preserveAspectRatio` 屬性的值爲空格分隔的兩個值組合而成。例如，上面的 `xMidYMid` 和 `meet`.
第1個值表示, `viewBox` 如何與` SVG viewport `對齊;
其中，第1個值又是由兩部分組成的。前半部分表示x方向對齊，後半部分表示y方向對齊
| -- 值 -- | -- 含義 -- |
| xMin | viewport 和 viewBox左邊對齊 |
| xMid | viewport 和 viewBox x軸中心對齊 |
| xMax | viewport 和 viewBox右邊對齊 |
| YMin | viewport 和 viewBox上邊緣對齊。注意Y是大寫。 |
| YMid | viewport 和 viewBox y軸中心點對齊。注意Y是大寫。 |
| YMax | viewport 和 viewBox下邊緣對齊。注意Y是大寫。 |
第2個值表示，如何維持高寬比（如果有）。
| -- 值 -- | -- 含義 -- |
| meet | 保持縱橫比縮放viewBox適應viewport |
| slice | 保持縱橫比同時比例小的方向放大填滿viewport |
| none | 扭曲縱橫比以充分適應viewport，變態 |