js项目中使用bpmn

最新推荐文章于 2024-02-15 12:12:13 发布

四月_h

最新推荐文章于 2024-02-15 12:12:13 发布

阅读量467

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_46389242/article/details/128973309

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流程图</title>
</head>
<!-- required modeler styles -->
<link rel="stylesheet" href="./flowcss/diagram-js.css" />
<link rel="stylesheet" href="./flowcss/bpmn-js.css" />
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@9.0.3/dist/assets/bpmn-font/css/bpmn.css" />
<script src="./lib/jquery-3.3.1.min.js"></script>
<script src="./lib/bpmn.js"></script>
<script src="./lib/customTranslate.js"></script>
<style>
    html {
        height: 100%;
        overflow: hidden;
    }
    
    body {
        height: 100%;
    }
    
    #canvas {
        width: 100%;
        height: 75%;
    }
    
    .bjs-powered-by {
        display: none;
    }
</style>

<body>
    <div id="canvas">

    </div>
    <button id="save">
        保存
    </button>
</body>

</html>
<script>
    var BpmnModeler = window.BpmnJS;
    //此处为汉化对象
    var customTranslateModule = {
        translate: ['value', customTranslate]
    };
    var xml = "<?xml version='1.0' encoding='UTF-8'?><definitions xmlns='http://www.omg.org/spec/BPMN/20100524/MODEL' xmlns:bpmndi='http://www.omg.org/spec/BPMN/20100524/DI' xmlns:omgdi='http://www.omg.org/spec/DD/20100524/DI' xmlns:omgdc='http://www.omg.org/spec/DD/20100524/DC' xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' id='sid-38422fae-e03e-43a3-bef4-bd33b32041b2' targetNamespace='http://bpmn.io/bpmn' exporter='bpmn-js (https://demo.bpmn.io)' exporterVersion='5.1.2'><process id='Process_1' isExecutable='false'><startEvent id='StartEvent_1y45yut' name='开始'><outgoing>SequenceFlow_0h21x7r</outgoing></startEvent><task id='Task_1hcentk' name='审批'><incoming>SequenceFlow_0h21x7r</incoming><outgoing>SequenceFlow_06o0wf0</outgoing></task><sequenceFlow id='SequenceFlow_0h21x7r' sourceRef='StartEvent_1y45yut' targetRef='Task_1hcentk' /><task id='Task_13intos' fill='red' name='下一节点'><incoming>SequenceFlow_06o0wf0</incoming><outgoing>SequenceFlow_1oydyx4</outgoing></task><sequenceFlow id='SequenceFlow_06o0wf0' sourceRef='Task_1hcentk' targetRef='Task_13intos' /><endEvent id='EndEvent_0aot3cz' name='结束'><incoming>SequenceFlow_1oydyx4</incoming></endEvent><sequenceFlow id='SequenceFlow_1oydyx4' sourceRef='Task_13intos' targetRef='EndEvent_0aot3cz' /></process><bpmndi:BPMNDiagram id='BpmnDiagram_1'><bpmndi:BPMNPlane id='BpmnPlane_1' bpmnElement='Process_1'><bpmndi:BPMNShape id='StartEvent_1y45yut_di' bpmnElement='StartEvent_1y45yut'><omgdc:Bounds x='152' y='102' width='36' height='36' /><bpmndi:BPMNLabel><omgdc:Bounds x='160' y='145' width='22' height='14' /></bpmndi:BPMNLabel></bpmndi:BPMNShape><bpmndi:BPMNShape id='Task_1hcentk_di' bpmnElement='Task_1hcentk'><omgdc:Bounds x='240' y='80' width='100' height='80' /></bpmndi:BPMNShape><bpmndi:BPMNEdge id='SequenceFlow_0h21x7r_di' bpmnElement='SequenceFlow_0h21x7r'><omgdi:waypoint x='188' y='120' /><omgdi:waypoint x='240' y='120' /></bpmndi:BPMNEdge><bpmndi:BPMNShape id='Task_13intos_di' bpmnElement='Task_13intos'><omgdc:Bounds x='400' y='80' width='100' height='80' /></bpmndi:BPMNShape><bpmndi:BPMNEdge id='SequenceFlow_06o0wf0_di' bpmnElement='SequenceFlow_06o0wf0'><omgdi:waypoint x='340' y='120' /><omgdi:waypoint x='400' y='120' /></bpmndi:BPMNEdge><bpmndi:BPMNShape id='EndEvent_0aot3cz_di' bpmnElement='EndEvent_0aot3cz'><omgdc:Bounds x='562' y='102' width='36' height='36' /><bpmndi:BPMNLabel><omgdc:Bounds x='569' y='145' width='22' height='14' /></bpmndi:BPMNLabel></bpmndi:BPMNShape><bpmndi:BPMNEdge id='SequenceFlow_1oydyx4_di' bpmnElement='SequenceFlow_1oydyx4'><omgdi:waypoint x='500' y='120' /><omgdi:waypoint x='562' y='120' /></bpmndi:BPMNEdge></bpmndi:BPMNPlane></bpmndi:BPMNDiagram></definitions>";
    var modeler = new BpmnModeler({
        container: '#canvas',
        additionalModules: [
            customTranslateModule
        ]
    });

    modeler.importXML(xml, function(err) {
        if (err) {
            console.log('error rendering', err);
        } else {
            console.log('rendered');
        }
    });

    // bpmn点击节点和hover节点事件
    const eventBus = modeler.get('eventBus');
    // 注册节点事件，eventTypes中可以写多个事件
    const eventTypes = ['element.click', 'element.hover'];
    eventTypes.forEach((eventType) => {
        eventBus.on(eventType, (e) => {
            const {
                element
            } = e;
            if (!element.parent) return;
            if (!e || element.type === 'bpmn:Process') {
                return false;
            } else {
                if (eventType === 'element.click') {
                    // 节点点击后想要做的处理
                    // 此时想要点击节点后，拿到节点实例，通过外部输入更新节点名称
                    this.currentElement = element;
                    console.log(this.currentElement)
                } else if (eventType === 'element.hover') {
                    // 鼠标滑过节点后想要做的处理
                    console.log('鼠标经过节点啦~');
                }
            }
        });
    });

    $('#save').on('click', function() {

        console.log(modeler.get("elementFactory")) //获取所有节点
        modeler.saveXML({
            format: true
        }, (err, xml) => {
            if (!err) {
                // console.log(xml)
            }
        });
    })
</script>