ruoyi-nbcio-plus基于vue3的flowable流程设计器组件的升级修改

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio

演示地址：RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/

更多nbcio-boot功能请看演示系统 

gitee源代码地址

后端代码： https://gitee.com/nbacheng/nbcio-boot

前端代码：https://gitee.com/nbacheng/nbcio-vue.git

在线演示（包括H5） ： http://122.227.135.243:9888

1、ProcessDesigner组件vue2代码如下：

<template><div class="process-design" :style="'display: flex; height:' + height"><my-process-designerv-model="xmlString"v-bind="controlForm"keyboardref="processDesigner":events="['element.click','connection.added','connection.removed','connection.changed']"@element-click="elementClick"@init-finished="initModeler"@element-contextmenu="elementContextmenu"@save="onSaveProcess"/><my-process-penal :bpmn-modeler="modeler" :appType="controlForm.appType" :prefix="controlForm.prefix" class="process-panel" /><!-- demo config --><div class="demo-control-bar"><div class="open-model-button" @click="controlDrawerVisible = true"><el-icon><setting /></el-icon></div></div><el-drawer v-model="controlDrawerVisible" size="400px" title="偏好设置" append-to-body destroy-on-close><el-form :model="controlForm" size="small" label-width="100px" class="control-form" @submit.prevent><el-form-item label="流程ID"><el-input v-model="controlForm.processId" @change="reloadProcessDesigner(true)" /></el-form-item><el-form-item label="流程名称"><el-input v-model="controlForm.processName" @change="reloadProcessDesigner(true)" /></el-form-item><el-form-item label="流转模拟"><el-switch v-model="controlForm.simulation" inactive-text="停用" active-text="启用" @change="reloadProcessDesigner()" /></el-form-item><el-form-item label="禁用双击"><el-switch v-model="controlForm.labelEditing" inactive-text="停用" active-text="启用" @change="changeLabelEditingStatus" /></el-form-item><el-form-item label="自定义渲染"><el-switch v-model="controlForm.labelVisible" inactive-text="停用" active-text="启用" @change="changeLabelVisibleStatus" /></el-form-item><el-form-item label="流程引擎"><el-radio-group v-model="controlForm.prefix" @change="reloadProcessDesigner()"><el-radio label="camunda">camunda</el-radio><el-radio label="flowable">flowable</el-radio><el-radio label="activiti">activiti</el-radio></el-radio-group></el-form-item><el-form-item label="工具栏"><el-radio-group v-model="controlForm.headerButtonSize"><el-radio label="small">small</el-radio><el-radio label="default">default</el-radio><el-radio label="large">large</el-radio></el-radio-group></el-form-item><el-switch v-model="pageMode" active-text="dark" inactive-text="light" @change="changePageMode"></el-switch></el-form></el-drawer></div>
</template><script>
import MyProcessDesigner from '@/package/designer';
// import MyProcessPalette from '@/package/palette';
import MyProcessPenal from '@/package/penal';
// 自定义渲染（隐藏了 label 标签）
import CustomRenderer from '@/modules/custom-renderer';
// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
import CustomContentPadProvider from '@/package/designer/plugins/content-pad';
// 自定义左侧菜单（修改 默认任务 为 用户任务）
import CustomPaletteProvider from '@/package/designer/plugins/palette';import '@/package/theme/index.scss';
import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';export default {name: 'ProcessDesigner',props: {bpmnXml: {type: String,required: true},designerForm: {type: Object,required: true}},components: {MyProcessDesigner,MyProcessPenal},data () {return {height: document.documentElement.clientHeight - 94.5 + "px;",xmlString: this.bpmnXml,modeler: null,controlDrawerVisible: false,infoTipVisible: false,pageMode: false,controlForm: {appType: this.designerForm.appType,processId: this.designerForm.processKey || '',processName: this.designerForm.processName || '',simulation: true,labelEditing: false,labelVisible: false,prefix: 'flowable',headerButtonSize: 'default',additionalModel: [CustomContentPadProvider, CustomPaletteProvider]},addis: {CustomContentPadProvider,CustomPaletteProvider}}},created() {console.log("ProcessDesigner created this.designerForm",this.designerForm)},methods: {reloadProcessDesigner(notDeep) {this.controlForm.additionalModel = [];for (const key in this.addis) {if (this.addis[key]) {console.log("reloadProcessDesigner this.addis[key]",this.addis[key])this.controlForm.additionalModel.push(this.addis[key]);}}!notDeep && (this.xmlString = undefined);this.reloadIndex += 1;this.modeler = null; // 避免 panel 异常},changeLabelEditingStatus(status) {this.addis.labelEditing = status ? { labelEditingProvider: ['value', ''] } : false;this.reloadProcessDesigner();},changeLabelVisibleStatus(status) {this.addis.customRenderer = status ? CustomRenderer : false;this.reloadProcessDesigner();},elementClick(element) {this.element = element;},initModeler(modeler) {setTimeout(() => {this.modeler = modeler;}, 10);},elementContextmenu(element) {},onSaveProcess(saveData) {this.$emit('save', saveData);}}
}
</script><style lang="scss">
body {overflow: hidden;margin: 0;box-sizing: border-box;
}
body,
body * {/* 滚动条 */&::-webkit-scrollbar-track-piece {background-color: #fff; /*滚动条的背景颜色*/-webkit-border-radius: 0; /*滚动条的圆角宽度*/}&::-webkit-scrollbar {width: 10px; /*滚动条的宽度*/height: 8px; /*滚动条的高度*/}&::-webkit-scrollbar-thumb:vertical {/*垂直滚动条的样式*/height: 50px;background-color: rgba(153, 153, 153, 0.5);-webkit-border-radius: 4px;outline: 2px solid #fff;outline-offset: -2px;border: 2px solid #fff;}&::-webkit-scrollbar-thumb {/*滚动条的hover样式*/background-color: rgba(159, 159, 159, 0.3);-webkit-border-radius: 4px;}&::-webkit-scrollbar-thumb:hover {/*滚动条的hover样式*/background-color: rgba(159, 159, 159, 0.5);-webkit-border-radius: 4px;}
}
.demo-control-bar {position: fixed;right: 8px;bottom: 48px;z-index: 1;
}
.open-model-button {width: 48px;height: 48px;display: flex;align-items: center;justify-content: center;border-radius: 4px;font-size: 32px;background: rgba(64, 158, 255, 1);color: #ffffff;cursor: pointer;
}
</style>

2、ProcessDesigner组件改造后的vue3代码如下：

<template><div class="process-design" :style="'display: flex; height:' + height"><my-process-designerv-model="xmlString"v-bind="controlForm"keyboardref="processDesigner":events="['element.click','connection.added','connection.removed','connection.changed']"@element-click="elementClick"@init-finished="initModeler"@element-contextmenu="elementContextmenu"@save="onSaveProcess"/><my-process-penal :bpmn-modeler="modeler" :appType="controlForm.appType" :prefix="controlForm.prefix" class="process-panel" /><!-- demo config --><div class="demo-control-bar"><div class="open-model-button" @click="controlDrawerVisible = true"><el-icon><setting /></el-icon></div></div><el-drawer v-model="controlDrawerVisible" size="400px" title="偏好设置" append-to-body destroy-on-close><el-form :model="controlForm" size="small" label-width="100px" class="control-form" @submit.prevent><el-form-item label="流程ID"><el-input v-model="controlForm.processId" @change="reloadProcessDesigner(true)" /></el-form-item><el-form-item label="流程名称"><el-input v-model="controlForm.processName" @change="reloadProcessDesigner(true)" /></el-form-item><el-form-item label="流转模拟"><el-switch v-model="controlForm.simulation" inactive-text="停用" active-text="启用" @change="reloadProcessDesigner()" /></el-form-item><el-form-item label="禁用双击"><el-switch v-model="controlForm.labelEditing" inactive-text="停用" active-text="启用" @change="changeLabelEditingStatus" /></el-form-item><el-form-item label="自定义渲染"><el-switch v-model="controlForm.labelVisible" inactive-text="停用" active-text="启用" @change="changeLabelVisibleStatus" /></el-form-item><el-form-item label="流程引擎"><el-radio-group v-model="controlForm.prefix" @change="reloadProcessDesigner()"><el-radio label="camunda">camunda</el-radio><el-radio label="flowable">flowable</el-radio><el-radio label="activiti">activiti</el-radio></el-radio-group></el-form-item><el-form-item label="工具栏"><el-radio-group v-model="controlForm.headerButtonSize"><el-radio label="small">small</el-radio><el-radio label="default">default</el-radio><el-radio label="large">large</el-radio></el-radio-group></el-form-item><el-switch v-model="pageMode" active-text="dark" inactive-text="light" @change="changePageMode"></el-switch></el-form></el-drawer></div>
</template><script lang="ts" setup>import MyProcessDesigner from '@/package/designer';// import MyProcessPalette from '@/package/palette';import MyProcessPenal from '@/package/penal';// 自定义渲染（隐藏了 label 标签）import CustomRenderer from '@/modules/custom-renderer';// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）import CustomContentPadProvider from '@/package/designer/plugins/content-pad';// 自定义左侧菜单（修改 默认任务 为 用户任务）import CustomPaletteProvider from '@/package/designer/plugins/palette';import '@/package/theme/index.scss';import 'bpmn-js/dist/assets/diagram-js.css';import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';defineOptions({ name: 'ProcessDesigner' })const props = defineProps({bpmnXml: {type: String,required: true},designerForm: {type: Object,required: true}})const emit = defineEmits(['save'])const height = ref(document.documentElement.clientHeight - 94.5 + "px;")const xmlString = props.bpmnXmlconst modeler = ref(null)const element = ref(null)const controlDrawerVisible = ref(false)const infoTipVisible = ref(false)const pageMode = ref(false)const controlForm =  ref({appType: props.designerForm.appType,processId: props.designerForm.processKey || '',processName: props.designerForm.processName || '',simulation: true,labelEditing: false,labelVisible: false,prefix: 'flowable',headerButtonSize: 'default',additionalModel: [CustomContentPadProvider, CustomPaletteProvider]})const addis = ref({CustomContentPadProvider,CustomPaletteProvider})const reloadIndex = ref(0)const reloadProcessDesigner = (notDeep) => {controlForm.value['additionalModel'] = [];for (const key in addis.value) {if (addis.value[key]) {controlForm.value['additionalModel'].push(addis.value[key]);}}!notDeep && (xmlString = undefined);reloadIndex.value += 1;modeler = null; // 避免 panel 异常}const changeLabelEditingStatus = (status) => {addis.value['labelEditing'] = status ? { labelEditingProvider: ['value', ''] } : false;reloadProcessDesigner();}const changeLabelVisibleStatus = (status) => {addis.value['customRenderer'] = status ? CustomRenderer : false;reloadProcessDesigner();}const elementClick = (element) => {element.value = element;}const initModeler = (initmodeler) => {setTimeout(() => {modeler.value = initmodeler;}, 10);}const elementContextmenu = (element) => {}const onSaveProcess = (saveData) => {emit('save', saveData);}</script><style lang="scss">body {overflow: hidden;margin: 0;box-sizing: border-box;}body,body * {/* 滚动条 */&::-webkit-scrollbar-track-piece {background-color: #fff; /*滚动条的背景颜色*/-webkit-border-radius: 0; /*滚动条的圆角宽度*/}&::-webkit-scrollbar {width: 10px; /*滚动条的宽度*/height: 8px; /*滚动条的高度*/}&::-webkit-scrollbar-thumb:vertical {/*垂直滚动条的样式*/height: 50px;background-color: rgba(153, 153, 153, 0.5);-webkit-border-radius: 4px;outline: 2px solid #fff;outline-offset: -2px;border: 2px solid #fff;}&::-webkit-scrollbar-thumb {/*滚动条的hover样式*/background-color: rgba(159, 159, 159, 0.3);-webkit-border-radius: 4px;}&::-webkit-scrollbar-thumb:hover {/*滚动条的hover样式*/background-color: rgba(159, 159, 159, 0.5);-webkit-border-radius: 4px;}}.demo-control-bar {position: fixed;right: 8px;bottom: 48px;z-index: 1;}.open-model-button {width: 48px;height: 48px;display: flex;align-items: center;justify-content: center;border-radius: 4px;font-size: 32px;background: rgba(64, 158, 255, 1);color: #ffffff;cursor: pointer;}
</style>

3、效果图如下：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/797093.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

银行ITSS体系下低代码运维体系实践分享

银行ITSS体系下低代码运维体系实践分享

前言 自2021年中国人民银行发布《金融科技发展规划&#xff08;2022-2025年&#xff09;》以来&#xff0c;商业银行迈入数字化转型的高阶阶段。在此背景下&#xff0c;为了进一步提高金融科技的管理水平&#xff0c;商业银行需要改变传统金融运维模式&#xff0c;对已有运维体…
阅读更多...
JUC：实现一个简易的数据库连接池（享元模式）

JUC：实现一个简易的数据库连接池（享元模式）

主要是学习享元模式。 享元模式&#xff08;Flyweight Pattern&#xff09;是一种结构型设计模式&#xff0c;旨在通过共享尽可能多的对象来最小化内存使用和提高性能。在该模式中&#xff0c;对象被分为两种状态&#xff1a;内部状态和外部状态。 内部状态&#xff08;Intr…
阅读更多...
红黑树插入机制深度剖析与实践指南

红黑树插入机制深度剖析与实践指南

红黑树插入机制深度剖析与实践指南 一、红黑树的基本概念二、插入操作的初步2.1 RB-INSERT-FIXUP过程2.2 循环的不变性2.2.1 情况1&#xff1a;叔节点是红色2.2.2情况2和情况3&#xff1a;叔节点是黑色 三、插入操作的复杂性分析四、伪代码4.1 RB-INSERT 过程4.2 RB-INSERT-FIX…
阅读更多...
亚信安慧AntDB：以数据之名，书写创新篇章

亚信安慧AntDB：以数据之名，书写创新篇章

随着大数据时代的到来&#xff0c;对数据库的需求愈发强烈。在这一背景下&#xff0c;国产数据库逐渐崭露头角&#xff0c;亚信安慧AntDB作为重要的代表产品之一正积极参与到激烈的市场竞争中。亚信安慧AntDB不仅追求技术的革新和突破&#xff0c;同时也致力于满足用户日益增长…
阅读更多...
4月06日，每日信息差

4月06日，每日信息差

第一、中国电建设计承建的西藏八宿县100兆瓦保障性并网风电项目2日举行开工仪式。项目海拔高达5300米&#xff0c;刷新了之前同样由中国电建设计承建的西藏措美哲古风电场5200米的世界海拔最高风电场纪录 第二、宫崎骏新片《你想活出怎样的人生》上映第4天&#xff0c;中国内地…
阅读更多...
理解PostgreSQL中的postmaster.pid

理解PostgreSQL中的postmaster.pid

在PG中&#xff0c;一个简要的体系结构图可以大致画成下边的样子&#xff1a; Server端基本上分成backend process和若干background process。这些process都是一个名为postmaster进程的子进程。而postmaster则是postgres进程的别名。 进程概况 [14:42:08-postgrescentos1:/pg…
阅读更多...
2024.4.2-day07-CSS 盒子模型（显示模式、盒子模型）

2024.4.2-day07-CSS 盒子模型（显示模式、盒子模型）

个人主页&#xff1a;学习前端的小z 个人专栏&#xff1a;HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结&#xff0c;欢迎大家在评论区交流讨论&#xff01; 文章目录 作业 2024.4.2 学习笔记CSS标签元素显示模式1 块元素2 行内元素3 行内块元素4…
阅读更多...
myweb项目资料集

myweb项目资料集

项目要求 前后端分离后端采用 flask 框架前端采用 vue3 框架 后端部分 Flask 3 框架&#xff1a; https://dormousehole.readthedocs.io/en/latest/quickstart.html Session&#xff1a; https://blog.csdn.net/zhangvalue/article/details/93892241 MySQL 操作&#xf…
阅读更多...
嵌入式学习48-单片机1

嵌入式学习48-单片机1

51单片机—————8位单片机 裸机驱动 无系统 linux驱动 有系统 驱动-----反映硬件变化 MCU 微控器 MPU CPU GPU 图像处理 IDE 集成开发环境 peripheral 外设 SOC&#xff1a; system on chip P0&#xff1a;8bit——8个引脚 位运算 & …
阅读更多...
美国CPC认证是什么？为什么必须办理CPC认证呢？

美国CPC认证是什么？为什么必须办理CPC认证呢？

美国CPC认证&#xff0c;全称为Childrens Product Certificate&#xff0c;是儿童产品认证的意思。它主要针对的是在美国市场销售的儿童产品&#xff0c;如玩具、家具、童车、餐椅、床上用品等。CPC认证要求产品安全性高&#xff0c;符合美国加州65、16 CFR等法规要求&#xff…
阅读更多...
AI赋能写作：探索设计模式的魅力

AI赋能写作：探索设计模式的魅力

设计模式是软件开发中的一种指导性概念&#xff0c;它提供了一套被广泛接受的解决方案&#xff0c;用于常见的设计问题。设计模式有助于提高软件的可重用性、可扩展性和可维护性&#xff0c;并促进团队之间的沟通。 以下是一些常见的设计模式&#xff1a; 创建型模式&#xff1…
阅读更多...
艺术与科技的结合，将如何重塑我们对美的认知和创造？AI绘画，是机器的冷冰冰的计算，还是另一种形式的创造力的展现？

艺术与科技的结合，将如何重塑我们对美的认知和创造？AI绘画，是机器的冷冰冰的计算，还是另一种形式的创造力的展现？

在这个充满创新与想象力的时代&#xff0c;人工智能不仅仅是科技的前沿&#xff0c;更是艺术的新领域。今天&#xff0c;我要与大家分享的&#xff0c;不仅仅是一幅幅由AI绘制的奇妙画卷&#xff0c;更是一场关于未来艺术的探索之旅。 你是否曾想象过&#xff0c;未来的画家不再…
阅读更多...
15 个最佳 Word 文档恢复工具 [免费下​​载]

15 个最佳 Word 文档恢复工具 [免费下​​载]

MS Word 文档恢复的重要性 对于严重依赖 Microsoft Word 创建和编辑文档的个人和企业来说&#xff0c;MS Word 文档恢复是一个至关重要的方面。 文件损坏、系统崩溃和其他意外事件可能会导致 Word 文档中存储的重要数据丢失。 及时恢复这些文档有助于节省时间、精力和资源。 本…
阅读更多...
ChatGPT Excel 大师

ChatGPT Excel 大师

原文&#xff1a;ChatGPT Excel Mastery 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 序言 欢迎来到 Excel 掌握的变革之旅&#xff0c;在这里&#xff0c;尖端技术和永恒专业知识在“ChatGPT Excel 掌握&#xff1a;释放专家技巧和窍门的力量”中融合。在当今快节…
阅读更多...
隐私计算实训营学习八：隐语SCQL的开发实践

隐私计算实训营学习八：隐语SCQL的开发实践

文章目录 一、SCQL使用集成最佳实践1.1 SCQL使用流程1.2 SCQL部署1.3 SCQL使用示例 二、SCQL工作原理三、使用SecretNote上手体验SCQL 一、SCQL使用集成最佳实践 1.1 SCQL使用流程 SCQL使用&#xff1a; SCQL 开放 API 供⽤户使⽤/集成。可以使⽤SCDBClient上⼿体验(类似与My…
阅读更多...
【计算机毕业设计】宠物销售系统——后附源码

【计算机毕业设计】宠物销售系统——后附源码

&#x1f389;**欢迎来到我的技术世界&#xff01;**&#x1f389; &#x1f4d8; 博主小档案&#xff1a; 一名来自世界500强的资深程序媛&#xff0c;毕业于国内知名985高校。 &#x1f527; 技术专长&#xff1a; 在深度学习任务中展现出卓越的能力&#xff0c;包括但不限于…
阅读更多...
力扣爆刷第113天之CodeTop100五连刷51-55

力扣爆刷第113天之CodeTop100五连刷51-55

力扣爆刷第113天之CodeTop100五连刷51-55 文章目录 力扣爆刷第113天之CodeTop100五连刷51-55一、239. 滑动窗口最大值二、41. 缺失的第一个正数三、LCR 140. 训练计划 II四、322. 零钱兑换五、76. 最小覆盖子串 一、239. 滑动窗口最大值 题目链接&#xff1a;https://leetcode…
阅读更多...
FFmpeg - 如何在Linux上安装支持CUDA的FFmpeg

FFmpeg - 如何在Linux上安装支持CUDA的FFmpeg

FFmpeg - 如何在Linux(Ubuntu)上安装支持CUDA的FFmpeg 笔者认为现在的很多“xx教程”只讲干什么不讲为什么&#xff0c;这样即使报错了看官也不知道如何解决。 在安装过程的探索部分会记录我的整个安装过程以及报错和报错的解决办法。 在省流之一步到位的方法部分会省去安装过…
阅读更多...
计算机色彩原理

计算机色彩原理

计算机色彩原理 2.,书上没说清楚。其实百度百科说的比较清楚&#xff0c;其实1931版的色度图&#xff0c;明确表明色度图中&#xff0c;绿色&#xff0c;蓝色&#xff0c;红色都是区域&#xff0c;纯色都是一个区域。纯色分为光谱中的颜色都是纯色和光谱中不存在的&#xff0c;…
阅读更多...
关于优化Android中RecyclerView性能

关于优化Android中RecyclerView性能

布局优化&#xff1a;使用简单的布局结构&#xff0c;避免复杂的嵌套布局&#xff0c;以减少渲染时间和资源消耗。推荐使用ConstraintLayout等高效的布局管理器。使用<merge>标签合并布局文件&#xff0c;减少布局层级。 减少绘制&#xff1a;通过使用setHasFixedSize(t…
阅读更多...
最新文章

Copyright @ 2022~2023