浅谈BPMNJS前端流程设计器

<script src=\"https://unpkg.com/bpmn-js@6.0.2/dist/bpmn-viewer.development.js\"></script>

npm i bpmn-js --save-D

<template>    <div class=\"containers\">        <div ref=\"bpmnRef\" class=\"bpmnRef\" />    </div></template><script>// 引入相关的依赖import BpmnModeler from \'bpmn-js/lib/Modeler\';import {    xmlStr} from \'../mock/xmlStr\'; // 这里是直接引用了xml字符串export default {    name: \'\',    components: {},    data() {        return {            // bpmn建模器            bpmnModeler: null        };    },    mounted() {        this.init();    },    methods: {        init() {            // 获取到属性ref为\"bpmnRef\"的dom节点            const bpmnRef = this.$refs.bpmnRef;            // 建模            this.bpmnModeler = new BpmnModeler({                container: bpmnRef            });            this.createNewDiagram();        },        createNewDiagram() {            // 将字符串转换成图显示出来            this.bpmnModeler.importXML(xmlStr, (err) => {                if (err) {                    // console.error(err)                } else {                    // 这里是成功之后的回调, 可以在这里做一系列事情                    this.success();                }            });        },        success() {            // console.log(\'创建成功!\')        }    }};</script>

// CustomPalette.jsexport default class CustomPalette {    constructor(bpmnFactory, create, elementFactory, palette, translate) {        this.bpmnFactory = bpmnFactory;        this.create = create;        this.elementFactory = elementFactory;        this.translate = translate;        palette.registerProvider(this);    }    getPaletteEntries(element) {        const {            bpmnFactory,            create,            elementFactory,            translate        } = this;        function createTask() {            return function(event) {                const businessObject = bpmnFactory.create(\'bpmn:Task\');                const shape = elementFactory.createShape({                    type: \'bpmn:Task\',                    businessObject                });                create.start(event, shape);            };        }        return {            \'create.custom-task\': {                group: \'model\',                className: \'icon-custom custom-task\',                title: translate(\'创建一个类型为custom-task的任务节点\'),                action: {                    dragstart: createTask(),                    click: createTask()                }            }        };    }}CustomPalette.$inject = [    \'bpmnFactory\',    \'create\',    \'elementFactory\',    \'palette\',    \'translate\'];

// index.jsimport CustomPalette from \'./CustomPalette\';export default {    __init__: [\'customPalette\'],    customPalette: [\'type\', CustomPalette]}

<!--custom-palette.vue--><script>import BpmnModeler from \'bpmn-js/lib/Modeler\';import propertiesProviderModule from \'bpmn-js-properties-panel/lib/provider/camunda\';import customModule from \'./custom\';this.bpmnModeler = new BpmnModeler({    additionalModules: [        // 左边工具栏以及节点        propertiesProviderModule,        // 自定义的节点        customModule    ]});</script>

/** * A palette that allows you to create BPMN _and_ custom elements. */export default function PaletteProvider(palette, create, elementFactory, globalConnect) {    this.create = create;    this.elementFactory = elementFactory;    this.globalConnect = globalConnect;    palette.registerProvider(this);}PaletteProvider.$inject = [    \'palette\',    \'create\',    \'elementFactory\',    \'globalConnect\'];PaletteProvider.prototype.getPaletteEntries = function(element) { // 此方法和上面案例的一样    const {        create,        elementFactory    } = this;    function createTask() {        return function(event) {            const shape = elementFactory.createShape({                type: \'bpmn:Task\'            });            console.log(shape); // 只在拖动或者点击时触发            create.start(event, shape);        };    }    return {        \'create.custom-task\': {            group: \'model\',            className: \'icon-custom custom-task\',            title: \'创建一个类型为custom-task的任务节点\',            action: {                dragstart: createTask(),                click: createTask()            }        }    };};

// index.jsimport CustomPalette from \'./CustomPalette\';export default {    __init__: [\'paletteProvider\'],    paletteProvider: [\'type\', CustomPalette]};

// customModeler/index.jsimport Modeler from \'bpmn-js/lib/Modeler\';import inherits from \'inherits\';import CustomModule from \'./custom\';export default function CustomModeler(options) {    Modeler.call(this, options);    this._customElements = [];}inherits(CustomModeler, Modeler);CustomModeler.prototype._modules = [].concat(    CustomModeler.prototype._modules, [        CustomModule    ]);

<!--custom-modeler.vue--><script>import CustomModeler from \'./customModeler\';this.bpmnModeler = new CustomModeler({ // 原本是用BpmnModeler    additionalModules: [] // 可以不用引用任何东西});</script>