用通义灵码帮助实现校验bpmn.js当前画布上只能有一个开始节点的功能
最终代码:
const elementRegistry = this.bpmnModeler.get('elementRegistry');// 获取所有元素const allElements = elementRegistry.getAll();// 过滤出开始节点const startEvents = allElements.filter(element => element.type === 'bpmn:StartEvent');// 校验开始节点的数量if (startEvents.length !== 1) {alert('画布上必须且只能有一个开始节点');return;}
实现过程:
我:bpmn.js如何实现校验当前画布上只能有一个开始节点
通义灵码:
要在 bpmn.js 中实现校验当前画布上只能有一个开始节点,可以在 saveFlow 方法中进行检查。以下是一个示例代码,展示了如何实现这一功能:
- 获取所有元素:使用
modeling服务获取当前画布上的所有元素。 - 过滤开始节点:从所有元素中过滤出开始节点。
- 校验数量:检查开始节点的数量是否为1。
<template><div id="app"><!-- 你的 BPMN 画布和其他组件 --></div>
</template><script>
import BpmnModeler from 'bpmn-js/lib/Modeler';
import propertiesPanelModule from 'bpmn-js-properties-panel';
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';export default {data() {return {bpmnModeler: null,};},mounted() {this.initBpmnModeler();},methods: {initBpmnModeler() {this.bpmnModeler = new BpmnModeler({container: '#app',additionalModules: [propertiesPanelModule,propertiesProviderModule]});// 加载你的 BPMN 文件this.bpmnModeler.importXML(yourBpmnXml, (err) => {if (err) {console.error('Failed to load BPMN file', err);} else {console.log('BPMN file loaded successfully');}});},saveFlow() {const { modeling, elementRegistry } = this.bpmnModeler.get('modeling');// 获取所有元素const allElements = elementRegistry.getAll();// 过滤出开始节点const startEvents = allElements.filter(element => element.type === 'bpmn:StartEvent');// 校验开始节点的数量if (startEvents.length !== 1) {alert('画布上必须且只能有一个开始节点');return;}// 如果校验通过,继续保存流程this.bpmnModeler.saveXML({ format: true }, (err, { xml }) => {if (err) {console.error('Failed to save BPMN file', err);} else {console.log('BPMN file saved successfully', xml);// 你可以在这里将 XML 发送到服务器}});}}
};
</script><style>
/* 你的样式 */
</style>
解释
- 初始化
BpmnModeler:- 在
mounted生命周期钩子中初始化BpmnModeler,并加载 BPMN 文件。
- 在
saveFlow方法:- 获取
modeling和elementRegistry服务。 - 使用
elementRegistry.getAll()获取画布上的所有元素。 - 使用
filter方法过滤出类型为bpmn:StartEvent的元素。 - 检查过滤后的数组长度是否为1,如果不是,则弹出提示并返回。
- 如果校验通过,调用
saveXML方法保存 BPMN 文件。
- 获取
这样,你就可以确保在保存流程之前,画布上只有一个开始节点。
我:报错:TypeError: Cannot read properties of undefined (reading 'getAll')
通义灵码:
报错 TypeError: Cannot read properties of undefined (reading 'getAll') 表明 elementRegistry 未正确获取到。这通常是因为 get 方法没有正确地从 bpmnModeler 中获取到 elementRegistry 服务。
我们可以通过以下步骤来解决这个问题:
- 确保
bpmnModeler已经初始化完成。 - 正确获取
elementRegistry服务。
以下是修正后的代码:
<template><div id="app"><!-- 你的 BPMN 画布和其他组件 --></div>
</template><script>
import BpmnModeler from 'bpmn-js/lib/Modeler';
import propertiesPanelModule from 'bpmn-js-properties-panel';
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';export default {data() {return {bpmnModeler: null,};},mounted() {this.initBpmnModeler();},methods: {initBpmnModeler() {this.bpmnModeler = new BpmnModeler({container: '#app',additionalModules: [propertiesPanelModule,propertiesProviderModule]});// 加载你的 BPMN 文件this.bpmnModeler.importXML(yourBpmnXml, (err) => {if (err) {console.error('Failed to load BPMN file', err);} else {console.log('BPMN file loaded successfully');}});},saveFlow() {// 确保 bpmnModeler 已经初始化if (!this.bpmnModeler) {console.error('BPMN Modeler is not initialized');return;}const elementRegistry = this.bpmnModeler.get('elementRegistry');// 获取所有元素const allElements = elementRegistry.getAll();// 过滤出开始节点const startEvents = allElements.filter(element => element.type === 'bpmn:StartEvent');// 校验开始节点的数量if (startEvents.length !== 1) {alert('画布上必须且只能有一个开始节点');return;}// 如果校验通过,继续保存流程this.bpmnModeler.saveXML({ format: true }, (err, { xml }) => {if (err) {console.error('Failed to save BPMN file', err);} else {console.log('BPMN file saved successfully', xml);// 你可以在这里将 XML 发送到服务器}});}}
};
</script><style>
/* 你的样式 */
</style>
解释
- 确保
bpmnModeler已经初始化:- 在
saveFlow方法中,首先检查bpmnModeler是否已经初始化。如果没有初始化,输出错误信息并返回。
- 在
- 正确获取
elementRegistry服务:- 使用
this.bpmnModeler.get('elementRegistry')获取elementRegistry服务。
- 使用
- 获取所有元素:
- 使用
elementRegistry.getAll()获取画布上的所有元素。
- 使用
- 过滤开始节点:
- 使用
filter方法过滤出类型为bpmn:StartEvent的元素。
- 使用
- 校验开始节点的数量:
- 检查过滤后的数组长度是否为1,如果不是,则弹出提示并返回。
- 保存流程:
- 如果校验通过,调用
saveXML方法保存 BPMN 文件。
- 如果校验通过,调用
这样可以确保 elementRegistry 服务正确获取,并且在 bpmnModeler 未初始化时不会尝试访问其属性。
修正后的代码是可用的。至此,问题解决。
相关文章:
用通义灵码帮助实现校验bpmn.js当前画布上只能有一个开始节点的功能
最终代码: const elementRegistry this.bpmnModeler.get(elementRegistry);// 获取所有元素const allElements elementRegistry.getAll();// 过滤出开始节点const startEvents allElements.filter(element > element.type bpmn:StartEvent);// 校验开始节点的…...
OKHTTP断点续传
OKHTTP断点续传 文章目录 OKHTTP断点续传HTTP断点续传知识点RangeContent RangeEtag&If-Range(文件唯一标志) OKHTTP断点下载OKHTTP 简单短断点下载代码示例 Android 断点续传一直是面试的高频问点,这里从HTTP断点续传知识和Android续传思…...
软件测试学习笔记丨Flask操作数据库-ORM
本文转自测试人社区,原文链接:https://ceshiren.com/t/topic/23426 什么是持久化 是把数据保存到可永久保存的存储设备中(比如磁盘)。持久化的主要应用是将内存中的数据存储在关系型数据库中,当然也可以存储在磁盘文件…...
ABAP 开发的那些小技巧
在对话框程序中的选择屏幕添加图标 要在选择屏幕中添加图标,其中包括参数: 在参数的选择文本中或选择选项(select-option)中写入 01 或选择选项: 您可以使用 01、02、03,依此类推,以获取不同的不同图标。 在运行时…...
电科金仓(人大金仓)更新授权文件(致命错误: XX000: License file expired.)
问题:电科金仓(人大金仓)数据库链接异常,重启失败,查看日志如下: 致命错误: XX000: License file expired. 位置: PostmasterMain, postmaster.c:725 解决方法: 一、下载授权文件 根据安装版本在官网下载授权文件(电科金仓-成为世界卓越的数据库产品与服务提供商)…...
玩转「HF/魔搭/魔乐」平台
模型下载 Hugging Face 下载到 GitHub CodeSpace CodeSpace创建环境: # 安装transformers pip install transformers4.38 pip install sentencepiece0.1.99 pip install einops0.8.0 pip install protobuf5.27.2 pip install accelerate0.33.0下载internlm2_5-7b…...
鸿蒙系统的优势 开发 环境搭建 开发小示例
HarmonyOS是面向多智能终端、全场景的分布式操作系统,为消费者提供跨终端的无缝体验.华为开发者联盟从HarmonyOS应用设计、开发、测试、推广变现等环节全方位助力开发者。 开发者可以通过以下步骤学习鸿蒙系统的开发: 基础理论学习: 了解鸿蒙系统概述&a…...
python批量合并excel文件
当工作中发现有多个excel表需要进行相同的操作或者需要汇总在一起,一个一个处理太费时间,以下的python代码能够帮你解决这个问题~ import pandas as pd import os# 设置Excel文件所在的文件夹路径和合并文件的输出路径 folder_path D:\\Desktop\\dat…...
AWS S3 JavaScript SDK(v3)常用操作
安装 aws s3 sdk npm install aws-sdk/client-s3配置 创建 ~/.aws/credentials 文件,添加以下配置项: [default] aws_access_key_id<...> aws_secret_access_key<...> region<...>S3 SDK常用桶操作 获取桶列表 import {S3Client,…...
数据结构——图的基本操作
文章目录 1.图2.图的结构体定义3.图的初始化4.添加顶点、删除顶点4.1添加顶点4.2删除顶点 5.添加边、删除边5.1添加边5.2删除边 6.打印图7.main函数 在生命旅途中,我们就像是一个个节点,被无数看不见的边相连。每一次的相识与相离,都在这张巨…...
掌握全球速递:在表格中高效利用国际快递公式查询快递
在当今全球化的商业环境中,国际快递服务已成为连接世界各地企业与个人的重要桥梁。无论是跨国企业间的货物运输,还是个人用户的海外购物需求,国际快递都扮演着不可或缺的角色。然而如何快速准确地获取大量国际快递的物流轨迹成为了一个挑战。…...
【MySQL系列】字符集设置
💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...
Vue2进阶之Vue3高级用法
Vue3高级用法 响应式Vue2:Object.definePropertyObject.definePropertythis.$set设置响应式 Vue3:Proxy composition APIVue2 option API和Vue3 compositionAPIreactive和shallowReactivereadonly效果toRefs效果 生命周期main.jsindex.htmlLifeCycle.vue…...
基于微信的追星小程序+ssm(lw+演示+源码+运行)
摘 要 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,追星小程序被用户普遍使用,为方便用户能够可以…...
【51单片机】串口通信原理 + 使用
学习使用的开发板:STC89C52RC/LE52RC 编程软件:Keil5 烧录软件:stc-isp 开发板实图: 文章目录 串口硬件电路UART串口相关寄存器 编码单片机通过串口发送数据电脑通过串口发送数据控制LED灯 串口 串口是一种应用十分广泛的通讯接…...
优选算法第五讲:位运算模块
优选算法第五讲:位运算模块 1.常见的位运算总结2.判断字符是否唯一3.丢失的数字4.两整数之和5.只出现一次的数字II6.消失的两个数字 1.常见的位运算总结 2.判断字符是否唯一 链接: link class Solution { public:bool isUnique(string astr) {if(astr.size() >…...
【07】Maven项目多环境打包配置
(1)Web项目使用Maven进行多模块划分开发之后,面临一个问题,即如何加载不同环境的配置文件打包发布到不同的环境中? (2)不同的环境有开发环境、测试环境、线上生产环境等。 (3&#x…...
嵌入式Linux入门具备:C语言基础与基本驱动学习(2):Linux GIibc IO基础
标准IO 标准 I/O 虽然是对文件 I/O 进行了封装,但事实上并不仅仅只是如此,标准 I/O 会处理很多细节,譬如分配 stdio 缓冲区、以优化的块长度执行 I/O 等,这些处理使用户不必担心如何选择使用正确的块长度。I/O 库函数是构建于文件…...
【微服务】Docker 容器化
一、初识Docker 1. 为什么需要 Docker 大型项目组件较多,运行环境也较为复杂,部署时会遇到一些问题: 依赖关系复杂,容易出现兼容性的问题开发、测试、生产环境有差异 Docker 如何解决依赖的兼容问题 将应用的Libs(…...
[前端] 为网站侧边栏添加搜索引擎模块
前言 最近想给我的个人网站侧边栏添加一个搜索引擎模块,可以引导用户帮助本站SEO优化(让用户可以通过点击搜索按钮完成一次对本人网站的搜索,从而实现对网站的搜索引擎优化)。 最开始,我只是想实现一个简单的百度搜索…...
地震勘探——干扰波识别、井中地震时距曲线特点
目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波:可以用来解决所提出的地质任务的波;干扰波:所有妨碍辨认、追踪有效波的其他波。 地震勘探中,有效波和干扰波是相对的。例如,在反射波…...
突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合
强化学习(Reinforcement Learning, RL)是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程,然后使用强化学习的Actor-Critic机制(中文译作“知行互动”机制),逐步迭代求解…...
MongoDB学习和应用(高效的非关系型数据库)
一丶 MongoDB简介 对于社交类软件的功能,我们需要对它的功能特点进行分析: 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具: mysql:关系型数据库&am…...
可靠性+灵活性:电力载波技术在楼宇自控中的核心价值
可靠性灵活性:电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中,电力载波技术(PLC)凭借其独特的优势,正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据,无需额外布…...
【解密LSTM、GRU如何解决传统RNN梯度消失问题】
解密LSTM与GRU:如何让RNN变得更聪明? 在深度学习的世界里,循环神经网络(RNN)以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而,传统RNN存在的一个严重问题——梯度消失&#…...
【论文笔记】若干矿井粉尘检测算法概述
总的来说,传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度,通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...
CocosCreator 之 JavaScript/TypeScript和Java的相互交互
引擎版本: 3.8.1 语言: JavaScript/TypeScript、C、Java 环境:Window 参考:Java原生反射机制 您好,我是鹤九日! 回顾 在上篇文章中:CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...
Android15默认授权浮窗权限
我们经常有那种需求,客户需要定制的apk集成在ROM中,并且默认授予其【显示在其他应用的上层】权限,也就是我们常说的浮窗权限,那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...
Spring AI与Spring Modulith核心技术解析
Spring AI核心架构解析 Spring AI(https://spring.io/projects/spring-ai)作为Spring生态中的AI集成框架,其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似,但特别为多语…...
LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf
FTP 客服管理系统 实现kefu123登录,不允许匿名访问,kefu只能访问/data/kefu目录,不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...
