天天看點
傳回

vue項目中使用bpmn-節點篇（為節點添加點選事件、根據id找節點執行個體、更新節點名字、擷取指定類型的所有節點）

為節點添加點選、懸浮事件，通過點選節點擷取執行個體，引申：根據id擷取流程圖中元素，擷取所有指定類型使用者節點， 更新節點名字

内容概述

本系列 “vue項目中使用bpmn-xxxx” 分為七篇，均為自己使用過程中用到的執行個體，手工原創，目前陸續更新中。主要包括vue項目中bpmn使用執行個體、應用技巧、基本知識點總結和需要注意事項，具有一定的參考價值，需要的朋友可以參考一下。如果轉載或通過爬蟲直接爬的，格式特别醜，請來原創看：我是作者原文

前情提要

根據之前的操作，我們可以建立、導入、導出流程圖，并對其進預覽。通過此篇可以學到：

  • 為節點添加點選、滑鼠懸浮等事件
  • 擷取流程圖内所有指定類型的節點
  • 通過外部更新節點名字
  • 擷取節點執行個體的兩種方法，根據節點id拿到元素執行個體

來看一眼效果圖

vue項目中使用bpmn-節點篇（為節點添加點選事件、根據id找節點執行個體、更新節點名字、擷取指定類型的所有節點）

step1：為節點添加點選、滑鼠懸浮等事件

方案：bpmnModeler中的eventBus，隻要你要，隻要它有

代碼：

vue項目中使用bpmn-節點篇（為節點添加點選事件、根據id找節點執行個體、更新節點名字、擷取指定類型的所有節點）
vue項目中使用bpmn-節點篇（為節點添加點選事件、根據id找節點執行個體、更新節點名字、擷取指定類型的所有節點）
const eventBus = this.bpmnModeler.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;
      } else if (eventType === 'element.hover') {
        // 滑鼠滑過節點後想要做的處理
        console.log('滑鼠經過節點啦~');
      }
    }
  });
});

View Code

step2：擷取流程圖内所有指定類型的節點

場景：需要擷取流程圖裡所有的使用者節點資訊，以清單形式展示在另外地方。查了很多文檔，并沒有找到。事實證明，源碼才是王道！　　

方案：elementRegistry提供了方案，并且支援過濾

const elementRegistry = this.bpmnModeler.get('elementRegistry');
const userTaskList = elementRegistry.filter(
  (item) => item.type === 'bpmn:UserTask'
);

step3 : 通過外部更新節點名字

方案：bpmnModeler的modeling，提供了updateLabel方法，modeling.updateLabel(節點id,新名字);

step4: 擷取節點執行個體的兩種方法　　

4.1 通過step1中的點選事件等，可以直接拿到目标對象e，e.element就是節點執行個體

eventBus.on('element.click', (e) => {console.log(e.element);})

4.2  沒有任何事件可以觸發，手裡空空隻有一個節點id

　　方案：bpmnModeler的elementRegistry來解圍！

const elementRegistry = this.bpmnModeler.get('elementRegistry');
console.log(elementRegistry.get(節點id));

後續

上文代碼都是片段，特此附上完整代碼：老規矩：data中的chart變量流程圖xml檔案資料，由于行數過多，附在了附件中（點我！點我），使用時，将附件内容複制過來，指派給chart即可運作！

vue項目中使用bpmn-節點篇（為節點添加點選事件、根據id找節點執行個體、更新節點名字、擷取指定類型的所有節點）
vue項目中使用bpmn-節點篇（為節點添加點選事件、根據id找節點執行個體、更新節點名字、擷取指定類型的所有節點）
<template>
    <div class="containerBox">
        <div style="margin-left: 250px">
            通過輸入框更改節點名稱：
            <el-input
                    v-model.trim="nodeName"
                    placeholder="請輸入節點名稱"
                    clearable
                    @input="inputChange"
                    style="width: 200px">
            </el-input>
        </div>
        <div id="container"></div>
    </div>
</template>
<script>
    import BpmnModeler from 'bpmn-js/lib/Modeler';
    import camundaExtension from './resources/camunda';
    import {tempDetail, saveCanvas} from '@api/processConfig';

    export default {
        name: 'index',
        data() {
            return {
                containerEl: null,
                bpmnModeler: null,
                currentElement: {},
                nodeName: "",
                // chart變量流程圖xml檔案資料，由于行數過多，附在了附件中，使用時，将附件整個指派給chart即可
                chart: '<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="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:camunda="http://camunda.org/schema/1.0/bpmn" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn">\n' +
                    '<bpmn:process id="Process_1" isExecutable="false">\n' +
                    '<bpmn:startEvent id="StartEvent_1">\n' +
                    '<bpmn:outgoing>Flow_021z3si</bpmn:outgoing>\n' +
                    '</bpmn:startEvent>\n' +
                    '<bpmn:serviceTask id="Activity_1fru9kc" name="我是第一個節點">\n' +
                    '<bpmn:incoming>Flow_021z3si</bpmn:incoming>\n' +
                    '<bpmn:outgoing>Flow_1hwj8kv</bpmn:outgoing>\n' +
                    '</bpmn:serviceTask>\n' +
                    '<bpmn:sequenceFlow id="Flow_021z3si" sourceRef="StartEvent_1" targetRef="Activity_1fru9kc"> </bpmn:sequenceFlow>\n' +
                    '<bpmn:userTask id="Activity_0ozmm5p" name="第二名">\n' +
                    '<bpmn:incoming>Flow_1hwj8kv</bpmn:incoming>\n' +
                    '<bpmn:outgoing>Flow_1tbnntc</bpmn:outgoing>\n' +
                    '</bpmn:userTask>\n' +
                    '<bpmn:sequenceFlow id="Flow_1hwj8kv" sourceRef="Activity_1fru9kc" targetRef="Activity_0ozmm5p"> </bpmn:sequenceFlow>\n' +
                    '<bpmn:sequenceFlow id="Flow_1tbnntc" sourceRef="Activity_0ozmm5p" targetRef="Event_03kmy6i"> </bpmn:sequenceFlow>\n' +
                    '<bpmn:endEvent id="Event_03kmy6i">\n' +
                    '<bpmn:incoming>Flow_1tbnntc</bpmn:incoming>\n' +
                    '</bpmn:endEvent>\n' +
                    '</bpmn:process>\n' +
                    '<bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +
                    '<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' +
                    '<bpmndi:BPMNEdge id="Flow_021z3si_di" bpmnElement="Flow_021z3si">\n' +
                    '<di:waypoint x="209" y="120"/>\n' +
                    '<di:waypoint x="290" y="120"/>\n' +
                    '</bpmndi:BPMNEdge>\n' +
                    '<bpmndi:BPMNEdge id="Flow_1hwj8kv_di" bpmnElement="Flow_1hwj8kv">\n' +
                    '<di:waypoint x="390" y="120"/>\n' +
                    '<di:waypoint x="480" y="120"/>\n' +
                    '</bpmndi:BPMNEdge>\n' +
                    '<bpmndi:BPMNEdge id="Flow_1tbnntc_di" bpmnElement="Flow_1tbnntc">\n' +
                    '<di:waypoint x="580" y="120"/>\n' +
                    '<di:waypoint x="672" y="120"/>\n' +
                    '</bpmndi:BPMNEdge>\n' +
                    '<bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">\n' +
                    '<dc:Bounds x="173" y="102" width="36" height="36"/>\n' +
                    '</bpmndi:BPMNShape>\n' +
                    '<bpmndi:BPMNShape id="Activity_1fru9kc_di" bpmnElement="Activity_1fru9kc">\n' +
                    '<dc:Bounds x="290" y="80" width="100" height="80"/>\n' +
                    '</bpmndi:BPMNShape>\n' +
                    '<bpmndi:BPMNShape id="Activity_0ozmm5p_di" bpmnElement="Activity_0ozmm5p">\n' +
                    '<dc:Bounds x="480" y="80" width="100" height="80"/>\n' +
                    '</bpmndi:BPMNShape>\n' +
                    '<bpmndi:BPMNShape id="Event_03kmy6i_di" bpmnElement="Event_03kmy6i">\n' +
                    '<dc:Bounds x="672" y="102" width="36" height="36"/>\n' +
                    '</bpmndi:BPMNShape>\n' +
                    '<bpmndi:BPMNShape id="Activity_0lkkmka_di">\n' +
                    '<dc:Bounds x="820" y="80" width="100" height="80"/>\n' +
                    '</bpmndi:BPMNShape>\n' +
                    '<bpmndi:BPMNEdge id="Flow_1t2mucq_di">\n' +
                    '<di:waypoint x="920" y="120"/>\n' +
                    '<di:waypoint x="1012" y="120"/>\n' +
                    '</bpmndi:BPMNEdge>\n' +
                    '</bpmndi:BPMNPlane>\n' +
                    '</bpmndi:BPMNDiagram>\n' +
                    '</bpmn:definitions>'
            };
        },
        mounted() {
            this.containerEl = document.getElementById('container');
            this.bpmnModeler = new BpmnModeler({
                container: this.containerEl,
                moddleExtensions: {camunda: camundaExtension}
            });
            this.showChart();
        },
        methods: {
            getShapeById() {
                const elementRegistry = this.bpmnModeler.get('elementRegistry');
                console.log(elementRegistry.get('Activity_0ozmm5p'));
            },
            inputChange(val) {
                const modeling = this.bpmnModeler.get('modeling');
                if (JSON.stringify(this.currentElement) === '{}') {
                    this.$message.info('請保證要更改的節點處于選中狀态!');
                    return false;
                } else {
                    modeling.updateLabel(this.currentElement, val);
                }
            },
            // 流程圖回顯
            showChart() {
                this.bpmnModeler.importXML(this.chart, (err) => {
                    if (!err) {
                        this.addEventBusListener();
                        this.getNodeInfoList();
                        this.getShapeById();
                    }
                });
            },
            // 擷取流程圖中所有節點資訊
            getNodeInfoList() {
                const elementRegistry = this.bpmnModeler.get('elementRegistry');
                const userTaskList = elementRegistry.filter(
                    (item) => item.type === 'bpmn:UserTask'
                );
                // 此時得到的userTaskList 便是流程圖中所有的使用者節點的集合
                console.log(userTaskList);
            },
            addEventBusListener() {
                const eventBus = this.bpmnModeler.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;
                            } else if (eventType === 'element.hover') {
                                // 滑鼠滑過節點後想要做的處理
                                console.log('滑鼠經過節點啦~');
                            }
                        }
                    });
                });
            }
        }
    };
</script>
<style lang="scss">
    .containerBox {
        height: calc(100vh - 220px);
        position: relative;

        #container {
            height: calc(100% - 50px);
        }
    }
</style>

 想擷取完整源碼或有問題，歡迎大家關注我的公粽号，掃下面二維碼或微信搜“前端便利貼”，即可擷取~

可愛的你可能還需要

  • vue項目中使用bpmn-番外篇(留言問題總結)
  • vue項目中使用bpmn-流程圖json屬性轉xml（七篇更新完成）
  • vue項目中使用bpmn-流程圖xml檔案中節點屬性轉json結構
  • vue項目中使用bpmn-自定義platter
  • vue項目中使用bpmn-流程圖預覽篇
  • vue項目中使用bpmn-節點添加顔色
  • vue項目中使用bpmn-基礎篇

作者：Lemoncool

出處：https://www.cnblogs.com/lemoncool/

更多：沒有辦法維護原創版權，歡迎關注我的公粽号：前端便利貼，文章更早、更全，免費擷取完整代碼

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連結，否則保留追究法律責任的權利.

上一篇: Beta第一天
下一篇: 事後諸葛亮