bpmn-js绘制activiti工作流

今天想大家分享一款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='\n' +
    '\n' +
    '  \n' +
    '    \n' +
    '  \n' +
    '  \n' +
    '    \n' +
    '      \n' +
    '        \n' +
    '      \n' +
    '    \n' +
    '  \n' +
    ''; // 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代码如下:

html>
<html lang="en" style="height: 100%;">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>

展示效果如下:

bpmn-js绘制activiti工作流_第1张图片

你可能感兴趣的:(JavaScript)