当前位置: 首页 > news >正文

bpmn+vue 中文文档

1.初始化项目

<script>
import BpmnModeler from 'bpmn-js/lib/Modeler'
import { xmlStr } from '@/mock/xmlStr'
export default {mounted () {this.init()},methods: {init () {// 获取到属性ref为“canvas”的dom节点const canvas = this.$refs.canvas// 建模const customTranslateModule = {translate: ['value', customTranslate]}this.bpmnModeler = new BpmnModeler({container: canvas,// 添加控制板propertiesPanel: {parent: '#js-properties-panel'},additionalModules: [// 左边工具栏以及节点propertiesProviderModule,customTranslateModule]})this.createNewDiagram(xmlStr)},async createNewDiagram(xmlStr) {// 将字符串转换成图显示出来await this.bpmnModeler.importXML(xmlStr, (err) => {if (err) {} else {// 这里是成功之后的回调, 可以在这里做一系列事情this.addEventBusListener();}})}}
}
</script>

2. 节点的事件或方法:

// 监听 element

const eventBus = this.bpmnModeler.get('eventBus');

//  获取流程的所有元素

const elements = this..bpmnModeler.get('elementRegistry')._elements

//  监听流程节点内容发生改变的事件

this.bpmnModeler.on('commandStack.changed', async function() {})

//  格式化保存流程图为xml文件

this..bpmnModeler.saveXML({ format: true }, async function(err, xml) {})

// 得到流程xml的name的集合
getXmlName(xmlString) {const parser = new DOMParser();const xmlDoc = parser.parseFromString(xmlString, 'text/xml')const nodes = xmlDoc.querySelectorAll('*[name]');const names = Array.from(nodes).map(node => node.getAttribute('name'))return names
}addEventBusListener() {// 监听 elementconst eventBus = this.bpmnModeler.get('eventBus');const eventTypes = ['element.click', 'element.changed', 'element.updateLabel'];let that = this;eventTypes.forEach(function(eventType) {eventBus.on(eventType, async function(e) {if (!e) return;const type = e.element.type  // 选中元素的类型that.selected = typeof e.element.parent !== 'undefined' // 判断是否选中元素if (eventType === 'element.changed') {} else if (eventType === 'element.click') {}})})// 修改节点内容事件this.bpmnModeler.on('commandStack.changed', async function() {await that.bpmnModeler.saveXML({ format: true }, async function(err, xml) {let allElementId = []for (let i in that.bpmnModeler.get('elementRegistry')._elements) {if (i === 'StartEvent_1y45yut' || i.indexOf('Task_') > -1 || i.indexOf('Activity_') > -1 || (i.indexOf('Gateway_') > -1 && i.indexOf('label') === -1)) {allElementId.push(i)}}if (that.getXmlName(xml).length < allElementId.length) {// name为空,给name赋值idlet newxml = xml.replace(('id="' + allElementId[allElementId.length - 1] + '"'), ('id="' + allElementId[allElementId.length - 1] + '" name="' + allElementId[allElementId.length - 1] + '"'))that.bpmnModeler.clear();await that.bpmnModeler.importXML(newxml);}that.camunda.process.processXml = xmlthat.updateNodes(that.bpmnModeler.get('elementRegistry')._elements, that.getXmlName(xml))})})
}

3.bpmn官网:BPMN Editor | bpmn-js modeler Demo | demo.bpmn.io

4.流程设定可参考简道云的设计,简道云的网址:简道云登录_简道云系统入口_零代码平台登录_无代码平台登录-简道云

相关文章:

bpmn+vue 中文文档

1.初始化项目 <script> import BpmnModeler from bpmn-js/lib/Modeler import { xmlStr } from /mock/xmlStr export default {mounted () {this.init()},methods: {init () {// 获取到属性ref为“canvas”的dom节点const canvas this.$refs.canvas// 建模const custom…...

React Router v5 和 v6 中,路由对象声明方式有什么区别?

一、在React Router 6.x开始&#xff0c;路由对象的声明需要引用RouteObject。 import { RouteObject } from react-router-dom;const routes: RouteObject[] [{path: /,element: <Home />},{path: /about,element: <About />},// ... ];二、一些老项目使用的是R…...

【全开源】知识库文档系统(ThinkPHP+FastAdmin)

&#x1f4da;知识库文档系统&#xff1a;解锁知识的无限可能 一款基于ThinkPHPFastAdmin开发的知识库文档系统&#xff0c;可用于企业工作流程的文档管理&#xff0c;结构化记录沉淀高价值信息&#xff0c;形成完整的知识体系&#xff0c;能够轻松提升知识的流转和传播效率&a…...

Python赋能自然语言处理,解锁通往AI的钥匙

NLTK&#xff08;Natural Language Toolkit&#xff09;是一个用于 Python 的自然语言处理库,提供了丰富的工具和资源,帮助处理、分析和理解人类语言数据.它广泛应用于学术研究、教育和商业应用中. 安装 #首先要安装 NLTK&#xff1a;pip install nltk安装完成后,还需要下载…...

Ktor库的高级用法:代理服务器与JSON处理

在现代网络编程中&#xff0c;Ktor是一个高性能且易于使用的框架&#xff0c;它提供了对异步编程、WebSockets、HTTP客户端和服务器等特性的原生支持。Ktor是使用Kotlin语言编写的&#xff0c;充分利用了Kotlin的协程特性来简化异步编程。本文将深入探讨Ktor库的高级用法&#…...

VS2017配置OpenCV4.5.1

VS2017配置OpenCV 一、下载OpenCV二、配置OpenCV的电脑环境变量三、配置visual Studio添加路径复制文件到C盘 四、如何使用注意运行时选择Debug x64 五、报错&#xff1a;VSOpencv出现&#xff1a;xxx处有未经处理的异常: Microsoft C 异常: cv::Exception&#xff0c;位于内存…...

phpstudy配置的站点不能访问了

无法打开站点 打开网站的时候出现如下 没有人为主动去更改配置项&#xff0c;今天就不能正常访问了 检查了一遍配置&#xff0c;发现并无大碍&#xff0c;那就重新配置一遍看看 配置phpstudy 1、新建网站 2、选择项目入口文件夹 3、配置伪静态 4. 确认保存 在我的电脑 C:\…...

Java Web学习笔记2——Web开发介绍

什么是Web&#xff1f; Web&#xff1a;全球广域网&#xff0c;也称为万维网&#xff08;WWW World Wide Web&#xff09;&#xff0c;能够通过浏览器访问的网站。 1&#xff09;淘宝、京东、唯品会等电商系统&#xff1b; 2&#xff09;CRM、OA、ERP企业管理系统&#xff1…...

从零开始实现自己的串口调试助手(3) - 显示底部收发,优化串口打开/关闭

注意: 1. 我们要实现自发自收&#xff0c;要将tx&#xff0c;rx连起来 2.发送的 不能是中文符号&#xff0c;因为这可能导致&#xff0c;读取到的是英文符号 --> 导致接收到的size 和发送的size 大小不一致 3.注意同时定义两个槽函数的时候两个槽函数都会被调用&#xff0c;…...

更改Web网站设计——css和css框架

虽然使用HTML可以定义文章的结构&#xff0c;但是其中不包含设计相关的信息。此时CSS就派上用场&#xff0c;可以用它对HTML文章指定设计样式。由于可以决定Web网页的外观风格&#xff0c;因此&#xff0c;它有时也被称为格式表。 如果使用CSS设置背景色&#xff0c;文…...

持续监控和优化的简单介绍

DevOps 监控提供了有关生产环境状况的全面且最新的信息&#xff0c;以及有关其服务、基础设施和应用程序的详细信息。通过从日志和指标中收集数据&#xff0c;您可以在软件开发生命周期的每个步骤中监控合规性和性能。 监控不仅仅针对生产问题&#xff0c;它涵盖了规划、开发、…...

针对硅基氮化镓高电子迁移率晶体管(GaN-HEMT)的准物理等效电路模型,包含基板中射频漏电流的温度依赖性

来源&#xff1a;Quasi-Physical Equivalent Circuit Model of RF Leakage Current in Substrate Including Temperature Dependence for GaN-HEMT on Si&#xff08;TMTT 23年&#xff09; 摘要 该文章提出了一种针对硅基氮化镓高电子迁移率晶体管&#xff08;GaN-HEMT&…...

基于websocket与node搭建简易聊天室

一、前言 上一篇文章介绍了websocket的详细用法与工具类的封装&#xff0c;本篇就基于websocket搭建一个简易实时的聊天室。 在本篇开始之前也可以去回顾一下websocket详细用法&#xff1a;WebSocket详解与封装工具类 二、基于node搭建后台websocket服务 首先确认本机电脑中…...

DevOps全面综述:从概念到实践

一、背景与概述 1.1 DevOps的起源与发展 DevOps&#xff08;Development and Operations的缩写&#xff09;是软件工程领域中的一种文化和实践方法&#xff0c;旨在促进开发团队与运维团队之间的协作&#xff0c;从而实现更高效、更可靠的软件交付。DevOps起源于敏捷软件开发方…...

[C++]vector的模拟实现

下面是简单的实现vector的功能&#xff0c;没有涉及使用内存池等复杂算法来提高效率。 一、vector的概述 &#xff08;一&#xff09;、抽象数据类型定义 容器&#xff1a;向量&#xff08;vector&#xff09;vector是表示大小可以变化的数组的序列容器。像数组一样&#xf…...

【云原生】Kubernetes----POD控制器

目录 引言 一、Pod控制器概述 二、Pod控制器的种类 &#xff08;一&#xff09;ReplicaSet &#xff08;二&#xff09;Deployment &#xff08;三&#xff09;StatefulSet &#xff08;四&#xff09;DaemonSet &#xff08;五&#xff09;Job 三、使用POD控制器 &a…...

Java环境配置(超详细)

Java环境配置&#xff08;超详细&#xff09; 引言1、安装 JDK1.1、下载安装JDK1.2、配置环境变量&#xff1a;JAVA_HOME1.3、将JAVA_HOME添加到Path中 2、安装 Maven2.1、下载安装Maven2.2、配置maven的环境变量: M2_HOME2.3、将Maven变量添加到Path中 引言 Java开发环境的配…...

【操作系统】(详细理解进程的状态)执行状态、就绪状态、阻塞状态、挂起状态

下面是进程的几种状态的概念&#xff1a; 执行状态&#xff1a;当一个进程已获得必要资源&#xff0c;并占有CPU进行执行。 就绪状体&#xff1a;进程已分配到除CPU外的所有必要资源&#xff0c;只要获取CPU允许就可立即执行。 阻塞状态&#xff1a;正在执行的进程&#xff0c;…...

C++ -- string常用接口的底层实现

一.string介绍 1. string是表示字符串的字符串类&#xff0c;对C语言的字符串指针进行了包装。 2. 该类的接口与常规容器的接口基本相同&#xff0c;有增删查改等&#xff0c;再添加了一些专门用来操作string的常规操作。 二.成员变量 创建string类的时候要在自己的命名空间…...

怎么做好企业短信服务呢?(文字短信XML接口示例)

企业短信服务已经成为各行各业都信赖的行业推广方式之一&#xff0c;并且短信行业也与时俱进的发展着&#xff0c;随之而来的就是市场上短信平台的数量也随之增多。那么怎么在鱼龙混杂的短信行业中选择适合自己的企业短信服务平台呢&#xff1f;企业短信服务平台又适用于哪些应…...

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

MacOS下Homebrew国内镜像加速指南(2025最新国内镜像加速)

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

Mysql故障排插与环境优化

前置知识点 最上层是一些客户端和连接服务&#xff0c;包含本 sock 通信和大多数jiyukehuduan/服务端工具实现的TCP/IP通信。主要完成一些简介处理、授权认证、及相关的安全方案等。在该层上引入了线程池的概念&#xff0c;为通过安全认证接入的客户端提供线程。同样在该层上可…...

Android屏幕刷新率与FPS(Frames Per Second) 120hz

Android屏幕刷新率与FPS(Frames Per Second) 120hz 屏幕刷新率是屏幕每秒钟刷新显示内容的次数&#xff0c;单位是赫兹&#xff08;Hz&#xff09;。 60Hz 屏幕&#xff1a;每秒刷新 60 次&#xff0c;每次刷新间隔约 16.67ms 90Hz 屏幕&#xff1a;每秒刷新 90 次&#xff0c;…...

【Redis】Redis从入门到实战:全面指南

Redis从入门到实战:全面指南 一、Redis简介 Redis(Remote Dictionary Server)是一个开源的、基于内存的键值存储系统,它可以用作数据库、缓存和消息代理。由Salvatore Sanfilippo于2009年开发,因其高性能、丰富的数据结构和广泛的语言支持而广受欢迎。 Redis核心特点:…...