vue项目中使用bpmn-节点篇
时间:2020-04-21
本文章向大家介绍vue项目中使用bpmn-节点篇,主要包括vue项目中使用bpmn-节点篇使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前情提要
根据之前的操作,我们可以创建、导入、导出流程图,并对其进预览。通过此篇可以学到:
- 为节点添加点击、鼠标悬浮等事件
- 获取流程图内所有指定类型的节点
- 通过外部更新节点名字
- 获取节点实例的两种方法
step1:为节点添加点击、鼠标悬浮等事件
方案:bpmnModeler中的eventBus,只要你要,只要它有
代码:
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('鼠标经过节点啦~'); } } }); });
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即可运行!
<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 CustomPaletteProvider from './customPalette'; import customModule from './customPalette/custom'; 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: '' }; }, mounted() { this.containerEl = document.getElementById('container'); this.bpmnModeler = new BpmnModeler({ container: this.containerEl, moddleExtensions: {camunda: camundaExtension}, additionalModules: [CustomPaletteProvider, customModule] }); 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>
原文地址:https://www.cnblogs.com/lemoncool/p/12746217.html
- 仿微信聊天表情发送
- ASP.NET Web API对OData的支持
- 小技巧 - 简化你的泛型API
- 优化OEA中的聚合SQL
- Universal Image Loader for Android 使用实例
- 如何从 Ring Buffer 读取?
- OEA中的AutoUI重构(1) - Command自动生成
- 开源项目Universal Image Loader for Android
- android Universal Image Loader for Android 说明文档 (1)
- 修改android最小堆内存
- (转)ES6新特性概览
- 基于OEA框架的客户化设计(一) 总体设计
- 【致敬周杰伦】基于TensorFlow让机器生成周董的歌词(附源码)
- 关于Android N的那些事
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法