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;对已有运维体…
阅读更多...
红黑树插入机制深度剖析与实践指南

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

红黑树插入机制深度剖析与实践指南 一、红黑树的基本概念二、插入操作的初步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…
阅读更多...
理解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…
阅读更多...
嵌入式学习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…
阅读更多...
15 个最佳 Word 文档恢复工具 [免费下​​载]

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

MS Word 文档恢复的重要性 对于严重依赖 Microsoft Word 创建和编辑文档的个人和企业来说&#xff0c;MS Word 文档恢复是一个至关重要的方面。 文件损坏、系统崩溃和其他意外事件可能会导致 Word 文档中存储的重要数据丢失。 及时恢复这些文档有助于节省时间、精力和资源。 本…
阅读更多...
隐私计算实训营学习八：隐语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;包括但不限于…
阅读更多...
机器学习（五） -- 监督学习（3） -- 朴素贝叶斯

机器学习（五） -- 监督学习（3） -- 朴素贝叶斯

系列文章目录及链接 目录 前言 一、朴素贝叶斯通俗理解及定义 二、原理理解及公式 1、概率基础 2、贝叶斯公式 3、拉普拉斯平滑系数 三、**算法实现 四、接口实现 1、新闻数据集介绍 2、API 3、流程 3.1、获取数据 3.2、数据预处理 3.3、特征工程 3.4、朴素贝叶…
阅读更多...
Java Math类

Java Math类

Math常用的API 代码 System.out.println(Math.abs(-12)); // 12 绝对值System.out.println(Math.ceil(12.3)); // 13.0 向上取整System.out.println(Math.floor(12.3)); // 12.0 向下取整System.out.println(Math.max(12, 13)); // 13 最大值System.out.println(Math.min(12, 1…
阅读更多...
顺序表的应用之通讯录

顺序表的应用之通讯录

学习了顺序表之后&#xff0c;我们也得知道它的实际用途吧&#xff01;所以&#xff0c;我们今天来学习一下通讯录的实现。 typedef struct personInfo SLDataType; contact.h #define NAME_MAX 20 #define GENDER_MAX 20 #define GTEL_MAX 20 #define ADDR_MAX 100 #include&…
阅读更多...
Java Web这一路走来

Java Web这一路走来

大部分Java应用都是Web或网络应用&#xff0c;MVC框架在Java框架中有着举足轻重的地位&#xff0c;一开始的Web应用并不现在这样子的&#xff0c;一步一步走来&#xff0c;每一步都经历了无数的血和泪的教训&#xff0c;以史为镜可以知兴替。 1. 草莽时代 早期的Java服务端技…
阅读更多...
Flutter开发之图片选择器

Flutter开发之图片选择器

使用FLutter开发了一个图片选择的组件&#xff0c;功能如下&#xff1a; 1、支持设置最大可选图片的个数&#xff1b; 2、根据选择的图片个数自适应容器组件的高度&#xff1b; 3、可设置容器的最大高度&#xff1b; 4、支持点击放大和删除功能&#xff1b; 具体效果如下 …
阅读更多...
HarmonyOS4.0 ArkTS基本语法

HarmonyOS4.0 ArkTS基本语法

一、项目目录结构 二、HelloWorld 当我们创建一个新的page时&#xff0c;IDE会给我们生成一个HelloWorld的模板 新建page 开启预览器 三、ArkTS基本组成 装饰器&#xff1a; 用于装饰类、结构、方法以及变量&#xff0c;并赋予其特殊的含义。如上述示例中Entry、Component…
阅读更多...
软考113-上午题-【计算机网络】-IPv6、无线网络、Windows命令

软考113-上午题-【计算机网络】-IPv6、无线网络、Windows命令

一、IPv6 IPv6 具有长达 128 位的地址空间&#xff0c;可以彻底解决 IPv4 地址不足的问题。由于 IPv4 地址是32 位二进制&#xff0c;所能表示的IP 地址个数为 2^32 4 294 967 29640 亿&#xff0c;因而在因特网上约有 40亿个P 地址。 由 32 位的IPv4 升级至 128 位的IPv6&am…
阅读更多...
Qt快速入门到熟练(3.程序运行发布与设置图标)

Qt快速入门到熟练(3.程序运行发布与设置图标)

程序运行发布 当我们执行过qt过后&#xff0c;将会在项目目录里面生成出一个debug构建目录&#xff0c;点击进去选择debug文件夹&#xff0c;就可以看到我们生成出来的可执行文件。 很显然我们的项目就叫做MyFirstWidget&#xff0c;所以生成的可执行文件在没有人为设置的情…
阅读更多...
idea链接gitlab的token到期

idea链接gitlab的token到期

报错 HTTP Request Request GET http://36.46.143.158:6060/api/v4/version failed wit
阅读更多...
基于javaJSPssm实现的交通档案管理系统

基于javaJSPssm实现的交通档案管理系统

开发语言&#xff1a;Java 框架&#xff1a;ssm 技术&#xff1a;JSP JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09; 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclip…
阅读更多...
VM虚拟机部署code-server服务+tailscale内网穿透，实现随处coding

VM虚拟机部署code-server服务+tailscale内网穿透，实现随处coding

1.Linux下安装code-server Releases coder/code-server (github.com)https://github.com/coder/code-server/releases先去发布页面查看最新的code-server版本&#xff0c;下载命令示例&#xff1a; wget https://github.com/coder/code-server/releases/download/v4.22.1/co…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023