bpmn-js绘制activiti工作流

最新推荐文章于 2024-03-12 10:36:27 发布

peng_wei_kang

最新推荐文章于 2024-03-12 10:36:27 发布

阅读量4.3w

点赞数 2

分类专栏： JavaScript 文章标签： bpmn-js web绘制工作流 activiti工作流

本文链接：https://blog.csdn.net/peng_wei_kang/article/details/80715565

版权

JavaScript 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

今天想大家分享一款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>

展示效果如下：

peng_wei_kang

关注

2
点赞
踩
32

收藏

觉得还不错? 一键收藏
68
评论
bpmn-js绘制activiti工作流

今天想大家分享一款js工作流绘制框架，它就是bpmn-js，他的网站地址是点击打开链接，通过这个框架可以在网页上编写工作流，支持在线编写并绑定业务，使用方法如下：首先需要安装bpmn-jsnpm install bpmn-js --save-dev安装好这个只能支持在线绘制工作流，而不能对工作流上的每个节点进行属性设置，这个时候需要安装bpmn-js的一个panel插件。npm install ...
复制链接

扫一扫