做網(wǎng)站賺錢 知乎騰訊企點(diǎn)客服
一.背景
需要使用流程引擎開發(fā)項(xiàng)目，沒有使用flowable、activiti這類的國外流程引擎，想使用國內(nèi)的引擎二次開發(fā)，缺少單例模式的流程畫圖程序，都是vue、react、angluer的不適合，從網(wǎng)上找了antx6、logicflow、bpmn.js。感覺最容易使用的是logicflow（滴滴開源的），所以翻模了官方示例（官方使用的react）。
二.代碼
gitee鏈接地址：logicflow: logicflow流程圖
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>流程實(shí)例</title>
? ? <!-- 引入 core包 -->
? ? <link rel="stylesheet" href="./logicflow/core/dist/style/index.css" />
? ? <script src="./logicflow/core/dist/logic-flow.js"></script>
? ? <!-- 引入 extension包樣式 -->
? ? <link rel="stylesheet" href="./logicflow/extension/lib/style/index.css" />
? ? <!-- 插件支持單個(gè)引入，這里以菜單插件為例 -->
? ? <script src="./logicflow/extension/lib/Menu.js"></script>
? ? <!-- 拖拽 -->
? ? <script src="./logicflow/extension/lib/DndPanel.js"></script>
? ?
? ? <script src="./logicflow/extension/lib/Control.js"></script>
? ? <!--選中項(xiàng)-->
? ? <script src="./logicflow/extension/lib/SelectionSelect.js"></script>
? ?
? ? <script src="./logicflow/extension/lib/BpmnAdapter.js"></script>
? ?
? ? <script src="./logicflow/extension/lib/BpmnElement.js"></script>
? ? <!--下載截圖-->
? ? <script src="./logicflow/extension/lib/Snapshot.js"></script>
? ? <!-- 小地圖 -->
? ? <script src="./logicflow/extension/lib/MiniMap.js"></script>
? ? <script src="./logicflow/extension/lib/NodeResize.js"></script>
? ? <script src="./logicflow/extension/lib/CurvedEdge.js"></script>
? ? <!-- 內(nèi)容轉(zhuǎn)換 xml 或者 json -->
? ? <script src="./logicflow/extension/lib/lfJson2Xml.js"></script>
? ? <script src="./logicflow/extension/lib/lfXml2Json.js"></script>
? ?
? ? <!--基礎(chǔ)節(jié)點(diǎn)信息 -->
? ? <script src="./js/node.js"></script>
? ? <link rel="stylesheet" href="./css/index.css" />
? ? <style type="text/css">
? ? ? ? html,body{
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 100%;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? margin: 0;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="container">
? ? ? ? <!-- 按鈕操作 -->
? ? ? ? <div class="example-header">
? ? ? ? ? ? <div class="content" >
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? <button>保存</button>
? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="tools">
? ? ? ? ? ? ? ? <span>logicflow 流程信息111</span>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <!--繪制中間圖形-->
? ? ? ? <div class="bpmn-example-container" >
? ? ? ? ? ? <div id="graph" class="viewport" ></div>
? ? ? ? </div>
? ? ? ? <!--屬性面板-->
? ? ? ? <div class="property-panel" ?id="test" style="display: none;" >
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <h2>屬性面板</h2>
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <h3>......</h3>
? ? ? ? ? ? ? ? <h3>業(yè)務(wù)屬性可根據(jù)需要進(jìn)行自定義擴(kuò)展</h3>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <div class="property-panel-footer">
? ? ? ? ? ? ? ? ? ? <button class="property-panel-footer-hide"
? ? ? ? ? ? ? ? ? ? type="primary"
? ? ? ? ? ? ? ? ? ? οnclick="hidePropertyPanel()">
? ? ? ? ? ? ? ? ? ? 收起
? ? ? ? ? ? ? ? ? ? </button>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <!--操作模型-->
? ? ? ? <div class="graph-io">
? ? ? ? ? ? <span
? ? ? ? ? ? title="下載 XML"
? ? ? ? ? ? οnclick="downloadXml()">
? ? ? ? ? ? <img src="./img/download.png" alt="下載XML" />
? ? ? ? ? ? </span>
? ? ? ? ? ? <span
? ? ? ? ? ? id="download-img"
? ? ? ? ? ? title="下載圖片"
? ? ? ? ? ? οnclick="downloadImage()">
? ? ? ? ? ? <img src="./img/img.png" alt="下載圖片" />
? ? ? ? ? ? </span>
? ? ? ? ? ? <span
? ? ? ? ? ? id="upload-xml"
? ? ? ? ? ? title="上傳 XML">
? ? ? ? ? ? <input type="file" class="upload" accept=".xml" οnchange="uploadXml(event)"/>
? ? ? ? ? ? <img src="./img/upload.png" alt="上傳XML" />
? ? ? ? ? ? </span>
? ? ? ? </div>
? ? </div>
</body>
<script type="text/javascript">
? ? // LogicFlow.use(Control); // 控制面板
? ? // LogicFlow.use(Menu); // 右鍵菜單
? ? // LogicFlow.use(DndPanel); // 拖拽面板
? ? // LogicFlow.use(SelectionSelect); // 拖拽面板
? ? const lf = new LogicFlow({
? ? ? ? container: document.querySelector("#graph"),
? ? ? ? stopScrollGraph: true,
? ? ? ? stopZoomGraph: true,
? ? ? ? metaKeyMultipleSelected: true,
? ? ? ? grid: {
? ? ? ? ? ? size: 10,
? ? ? ? ? ? type: 'dot',
? ? ? ? },
? ? ? ? keyboard: {
? ? ? ? ? ? enabled: true,
? ? ? ? },
? ? ? ? snapline: true,
? ? ? ? //引入插件
? ? ? ? plugins: [Menu,DndPanel, SelectionSelect,BpmnAdapter,BpmnElement,MiniMap,Control,NodeResize,Snapshot]
? ? });
? ? //設(shè)置拖轉(zhuǎn)節(jié)點(diǎn)
? ? lf.extension.dndPanel.setPatternItems(modelNode);
? ? // const data = lfJson2Xml(jsonData);
? ? // lf.render(data);
? ? // const xml = lfJson2Xml(lf.getGraphData());
? ? //渲染內(nèi)容
? ? lf.render(graphData);
? ? //小地圖
? ? lf.extension.control.addItem({
? ? ? ? key: 'mini-map',
? ? ? ? iconClass: "custom-minimap",
? ? ? ? title: "",
? ? ? ? text: "導(dǎo)航",
? ? ? ? onMouseEnter: (lf, ev) => {
? ? ? ? ? ? const position = lf.getPointByClient(ev.x, ev.y);
? ? ? ? ? ? lf.extension.miniMap.show(
? ? ? ? ? ? position.domOverlayPosition.x - 120,
? ? ? ? ? ? position.domOverlayPosition.y + 35
? ? ? ? ? ? );
? ? ? ? },
? ? ? ? onClick: (lf, ev) => {
? ? ? ? ? ? const position = lf.getPointByClient(ev.x, ev.y);
? ? ? ? ? ? lf.extension.miniMap.show(
? ? ? ? ? ? position.domOverlayPosition.x - 120,
? ? ? ? ? ? position.domOverlayPosition.y + 35
? ? ? ? ? ? );
? ? ? ? },
? ? });
? ? //lf.extension.miniMap.show(0, 0);
? ? //圖片處理渲染，下載圖片有用
? ? lf.extension.snapshot.useGlobalRules = false;
? ? lf.extension.snapshot.customCssRules = `
? ? ? ? .lf-node-text-auto-wrap-content{
? ? ? ? line-height: 1.2;
? ? ? ? background: transparent;
? ? ? ? text-align: center;
? ? ? ? word-break: break-all;
? ? ? ? width: 100%;
? ? ? ? }
? ? ? ? .lf-canvas-overlay {
? ? ? ? background: #ffffff;
? ? ? ? }
? ? `;
? ? //點(diǎn)擊事件
? ? lf.on("node:click,edge:click", (data) => {
? ? ? ? console.log(data);
? ? ? ? hidePropertyPanel();
? ? });
? ? //切換顯示隱藏屬性面板
? ? function hidePropertyPanel()
? ? {
? ? ? ? var traget = document.getElementById('test');//選取id為test的div元素
? ? ? ? if(traget.style.display=="none"){
? ? ? ? ? ? traget.style.display="block";
? ? ? ? }else{
? ? ? ? ? ? traget.style.display="none";
? ? ? ? }
? ? }
? ? //下載內(nèi)容
? ? function download(filename, text) {
? ? ? ? var element = document.createElement('a');
? ? ? ? element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
? ? ? ? element.setAttribute('download', filename);
? ? ? ? element.style.display = 'none';
? ? ? ? document.body.appendChild(element);
? ? ? ? element.click();
? ? ? ? document.body.removeChild(element);
? ? }
? ? //下載xml
? ? function downloadXml()
? ? {
? ? ? ? const data = lf.getGraphData();
? ? ? ? download('logic-flow.xml', lfJson2Xml(data));
? ? }
? ? //下載截圖
? ? function downloadImage()
? ? {
? ? ? ? lf.getSnapshot();
? ? }
? ? //上傳xml渲染
? ? function uploadXml(event) {
? ? ? ? const file = event.target.files[0];
? ? ? ? const reader = new FileReader()
? ? ? ? reader.readAsText(file, 'UTF-8');
? ? ? ? reader.onload = function(e){
? ? ? ? ? ? if (e.target) {
? ? ? ? ? ? ? ? const xml = e.target.result;
? ? ? ? ? ? ? ? console.log(xml);
? ? ? ? ? ? ? ? //將xml轉(zhuǎn)成json渲染
? ? ? ? ? ? ? ? lf.render(lfXml2Json(xml));
? ? ? ? ? ? }
? ? ? ? }
? ? }
</script>
</html>
三.效果圖
可以下載bpm的xml模型，也可以上傳xml模型使用
