今天想大家分享一款js工作流绘制框架,它就是bpmn-js,他的网站地址是点击打开链接,通过这个框架可以在网页上编写工作流,支持在线编写并绑定业务,使用方法如下:
首先需要安装bpmn-js
npm install bpmn-js --save-dev
安装好这个只能支持在线绘制工作流,而不能对工作流上的每个节点进行属性设置,这个时候需要安装bpmn-js的一个panel插件。
npm install bpmn-js-properties-panel --save-dev
该程序需要通过webpack打包,安装webpack
npm install webpack --save-dev
编写 app/index.js
/** * Create by pengweikang on 2018/4/4. */ require("bpmn-js/dist/assets/diagram-js.css"); require("bpmn-js/dist/assets/bpmn-font/css/bpmn.css"); var BpmnModeler = require("bpmn-js/lib/Modeler"); //引入bpmn-js模型设计器,通过该模块可设计流程 var propertiesPanelModule = require('bpmn-js-properties-panel'), //引入bpmn-js面板模块,通过该面板可设计节点属性 propertiesProviderModule = require('bpmn-js-properties-panel/lib/provider/camunda'), camundaModdleDescriptor = require('camunda-bpmn-moddle/resources/camunda'); var $ = require("jquery/dist/jquery"); /** * pengweikang bpmn文件模版 * @type {string} */ var xml='<?xml version="1.0" encoding="UTF-8"?>\n' + '<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn">\n' + ' <bpmn2:process id="Process_1">\n' + ' <bpmn2:startEvent id="StartEvent_1"/>\n' + ' </bpmn2:process>\n' + ' <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' + ' <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' + ' <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">\n' + ' <dc:Bounds height="36.0" width="36.0" x="412.0" y="240.0"/>\n' + ' </bpmndi:BPMNShape>\n' + ' </bpmndi:BPMNPlane>\n' + ' </bpmndi:BPMNDiagram>\n' + '</bpmn2:definitions>'; // my BPMN 2.0 xml var viewer = new BpmnModeler({ container: 'body', propertiesPanel: { parent: '#js-properties-panel' }, additionalModules: [ propertiesPanelModule, propertiesProviderModule ], // needed if you'd like to maintain camunda:XXX properties in the properties panel moddleExtensions: { camunda: camundaModdleDescriptor } }); viewer.importXML(xml, function(err) { if (err) { console.log('error rendering', err); } else { console.log('rendered'); } }); document.getElementById("saveBpmn").onclick = function(){ viewer.saveXML({ format: true }, function(err, xml) { if (err) { return console.error('could not save BPMN 2.0 diagram', err); } console.log('DIAGRAM', xml); parent.$("#bpm-flow-add-value").val(xml); parent.$("#bpm-flow-add-value").click(); var index = parent.recognizeLayer.getFrameIndex(window.name); parent.recognizeLayer.close(index); }); };
webpack.config.js文件如下:
/** * Create by pengweikang on 2018/4/4. */ const path = require('path') module.exports = [{ entry: './app/index.js', // 入口文件 output: { path: path.resolve(__dirname, 'build'), // 必须使用绝对地址,输出文件夹 filename: "bundle.js", // 打包后输出文件的文件名 publicPath: '/build/' }, mode: 'development', module: { rules: [ {test: /\.css$/, loader: 'style-loader!css-loader'}, {test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'}, {test: /\.svg/, loader: 'svg-url-loader'}, { test: /\.(eot|woff|ttf)$/, loader: "file-loader", options:{ outputPath:"/font/" } } ] } }]
index.html代码如下:
<!DOCTYPE html> <html lang="en" style="height: 100%;"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="node_modules/bpmn-js/dist/assets/diagram-js.css"> <link rel="stylesheet" href="node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn.css"> <link rel="stylesheet" href="build/css/properties.css"> <link rel="stylesheet" href="build/css/index.css"> </head> <body style="height: 100%;"> <button id="saveBpmn">保存</button> <div id="js-properties-panel"></div> </body> <script src="./build/bundle.js"></script> </html>
展示效果如下: