用qq空间做网站,网站建网站建设企业,南通海洲建设集团网站,wordpress 黄聪一.背景
需要使用流程引擎开发项目#xff0c;没有使用flowable、activiti这类的国外流程引擎#xff0c;想使用国内的引擎二次开发#xff0c;缺少单例模式的流程画图程序#xff0c;都是vue、react、angluer的不适合#xff0c;从网上找了antx6、logicflow、bpmn.js。感…一.背景
需要使用流程引擎开发项目没有使用flowable、activiti这类的国外流程引擎想使用国内的引擎二次开发缺少单例模式的流程画图程序都是vue、react、angluer的不适合从网上找了antx6、logicflow、bpmn.js。感觉最容易使用的是logicflow滴滴开源的所以翻模了官方示例官方使用的react。
二.代码
gitee链接地址logicflow: logicflow流程图 !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title流程实例/title !-- 引入 core包 -- link relstylesheet href./logicflow/core/dist/style/index.css / script src./logicflow/core/dist/logic-flow.js/script !-- 引入 extension包样式 -- link relstylesheet href./logicflow/extension/lib/style/index.css / !-- 插件支持单个引入这里以菜单插件为例 -- script src./logicflow/extension/lib/Menu.js/script !-- 拖拽 -- script src./logicflow/extension/lib/DndPanel.js/script script src./logicflow/extension/lib/Control.js/script !--选中项-- 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 !-- 内容转换 xml 或者 json -- script src./logicflow/extension/lib/lfJson2Xml.js/script script src./logicflow/extension/lib/lfXml2Json.js/script !--基础节点信息 -- script src./js/node.js/script link relstylesheet href./css/index.css / style typetext/css html,body{ width: 100%; height: 100%; padding: 0; margin: 0; } /style /head body div classcontainer !-- 按钮操作 -- div classexample-header div classcontent div button保存/button /div /div div classtools spanlogicflow 流程信息111/span /div /div !--绘制中间图形-- div classbpmn-example-container div idgraph classviewport /div /div !--属性面板-- div classproperty-panel idtest styledisplay: none; div h2属性面板/h2 div h3....../h3 h3业务属性可根据需要进行自定义扩展/h3 /div div classproperty-panel-footer button classproperty-panel-footer-hide typeprimary οnclickhidePropertyPanel() 收起 /button /div /div /div !--操作模型-- div classgraph-io span title下载 XML οnclickdownloadXml() img src./img/download.png alt下载XML / /span span iddownload-img title下载图片 οnclickdownloadImage() img src./img/img.png alt下载图片 / /span span idupload-xml title上传 XML input typefile classupload accept.xml οnchangeuploadXml(event)/ img src./img/upload.png alt上传XML / /span /div /div /body script typetext/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] }); //设置拖转节点 lf.extension.dndPanel.setPatternItems(modelNode); // const data lfJson2Xml(jsonData); // lf.render(data); // const xml lfJson2Xml(lf.getGraphData()); //渲染内容 lf.render(graphData); //小地图 lf.extension.control.addItem({ key: mini-map, iconClass: custom-minimap, title: , text: 导航, 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; } ; //点击事件 lf.on(node:click,edge:click, (data) { console.log(data); hidePropertyPanel(); }); //切换显示隐藏属性面板 function hidePropertyPanel() { var traget document.getElementById(test);//选取id为test的div元素 if(traget.style.displaynone){ traget.style.displayblock; }else{ traget.style.displaynone; } } //下载内容 function download(filename, text) { var element document.createElement(a); element.setAttribute(href, data:text/plain;charsetutf-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转成json渲染 lf.render(lfXml2Json(xml)); } } } /script /html 三.效果图
可以下载bpm的xml模型也可以上传xml模型使用 四.后续还需要程序的扩展。
