圆月山庄资源网 Design By www.vgjia.com
内容概述
bpmn是比较方便的绘制流程图的插件,官方demo https://github.com/bpmn-io/bpmn-js-examples
本文主要包括vue项目中bpmn使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前情提要
上文我们已经实现了在外部更改节点名。此时又有新玩法:在流程图中,根据节点状态为其标记不同颜色。例如:已完成:黄色,正在进行:绿色,本次我们通过两种方式来实现该需求。效果:
方式1:modeling.setColor
modeling.setColor接受两个参数:参数1:节点实例,可以是单个元素,也可是多个节点组成的数组,参数2:class类
let modeling = this.bpmnModeler.get('modeling'); modeling.setColor(节点实例, { stroke: 'green', fill: 'yellow' });
方式2:Overlay
个人理解,overlay是通过定位方式在元素正上方添加一层带颜色的蒙板
const $overlayHtml = $('<div class="highlight-overlay">').css({ width: shape.width, height: shape.height }); overlays.add(节点id, { position: {top: 0, left: 0}, html: $overlayHtml });
highlight-overlay:css中声明好的class类名
overlays.add将创建好的蒙板定位到指定节点位置,此时节点id就是目标节点的唯一身份!
注意事项
上述两种方式均能实现为节点添加颜色。但方式2有一点副作用,如果此时你为节点注册了点击事件,在节点被点击的时候要做某些处理。此时方式2会使节点点击事件失效。
原因:方式2中,此时节点上方有一层蒙板,并且和节点等宽等高,相当于节点被蒙板完全覆盖。所以点击节点的时候,点击的是蒙版,不是节点。
不要慌,有解决办法!此时为蒙板注册了点击事件,将点击节点要做的操作给蒙板也来一份,哈哈
import $ from 'jquery'; // 引入jquery $(".djs-container").on("click", ".djs-overlays", (e) => { const parentEle = e.target.parentElement.parentElement; const shapeId = parentEle.getAttribute('data-container-id'); const temp = this.nodeList.filter( (item) => item.id === shapeId )[0]; // 此时temp就是蒙板下方的节点,要点击节点做什么,此刻尽管拿去用 ........ });
后续
上文代码都是片段,特此附上完整代码:老规矩:data中的chart变量流程图xml文件数据,由于行数过多,附在了附件中(点我!点我),使用时,将附件内容复制过来,赋值给chart即可运行!
<template> <div class="containerBox"> <div id="container"></div> <div style="margin-left: 200px">看我!我是点击的节点名称啊~ <span style="color: #eaae00">{{nodeName}}</span> </div> </div> </template> <script> import BpmnModeler from 'bpmn-js/lib/Modeler'; import camundaExtension from './resources/camunda'; import {tempDetail, saveCanvas} from '@api/processConfig'; import $ from 'jquery'; export default { name: 'index', data() { return { containerEl: null, bpmnModeler: null, nodeName: '', nodeList: [], // chart变量流程图xml文件数据,由于行数过多,附在了附件中,使用时,将附件整个赋值给chart即可 chart: '' }; }, mounted() { this.containerEl = document.getElementById('container'); this.bpmnModeler = new BpmnModeler({ container: this.containerEl, moddleExtensions: {camunda: camundaExtension} }); this.showChart(); }, methods: { // 流程图回显 showChart() { this.bpmnModeler.importXML(this.chart, (err) => { if (!err) { this.addEventBusListener(); this.setNodeColor(); } }); }, setNodeColor() { // 目的:为第一个节点添加绿色,为第二个节点添加黄色 // 实现步骤:1、找到页面里所有节点 const elementRegistry = this.bpmnModeler.get('elementRegistry'); this.nodeList = elementRegistry.filter ( (item) => item.type === 'bpmn:UserTask' || item.type === 'bpmn:ServiceTask' ); // 此时得到的userTaskList 便是流程图中所有的节点的集合 console.log(this.nodeList); // 步骤2 :为节点添加颜色 // 方式1 :modeling.setColor(参数1:节点,可以是单个元素实例,也可是多个节点组成的数组,参数2:class类); let modeling = this.bpmnModeler.get('modeling'); modeling.setColor(this.nodeList[0], { stroke: 'green', fill: 'yellow' }); // 方式2 :添加蒙板 const overlays = this.bpmnModeler.get('overlays'); const shape = elementRegistry.get(this.nodeList[1].id); if (shape) { const $overlayHtml = $('<div class="highlight-overlay">').css({ width: shape.width, height: shape.height }); overlays.add(this.nodeList[1].id, { position: {top: 0, left: 0}, html: $overlayHtml }); } // 此方法为了解决方式2造成的节点点击事件失效问题,如果采用方式1,可忽略此方法 this.overlayClick(); }, overlayClick() { $(".djs-container").on("click", ".djs-overlays", (e) => { const parentEle = e.target.parentElement.parentElement; const shapeId = parentEle.getAttribute('data-container-id'); const temp = this.nodeList.filter( (item) => item.id === shapeId )[0]; this.nodeName = temp "scss"> .containerBox { height: calc(100vh - 220px); position: relative; #container { height: calc(100% - 50px); } .highlight-overlay { background-color: green; opacity: 0.4; border-radius: 10px; } } </style>
圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]