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

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、原先的ActApplyBtn.vue组件vue2代码如下:

<style lang="less">
</style>
<template><span><a-button :type="btnType" @click="applySubmit()" :loading="submitLoading">{{text}}</a-button><a-modal :z-index="100" :title="firstInitiatorTitle" @cancel="firstInitiatorOpen = false" :visible.sync="firstInitiatorOpen":width="'50%'" append-to-body><a-descriptions bordered layout="vertical"><a-descriptions-item :span="3"><a-badge status="processing" text="选择提醒" /></a-descriptions-item><a-descriptions-item label="重新发起新流程按钮" labelStyle="{ color: '#fff', fontWeight: 'bold', fontSize='18px'}">重新发起新流程会删除之前发起的任务,重新开始.</a-descriptions-item><a-descriptions-item label="继续发起老流程按钮">继续发起流程就在原来流程基础上继续流转.</a-descriptions-item></a-descriptions><span slot="footer" class="dialog-footer"><el-button type="primary" @click="ReStartByDataId(true)">重新发起新流程</el-button><el-button type="primary" @click="ReStartByDataId(false)">继续发起老流程</el-button><el-button @click="firstInitiatorOpen = false">取 消</el-button></span></a-modal><!--挂载关联多个流程--><a-modal @cancel="flowOpen = false" :title="flowTitle" :visible.sync="flowOpen" width="70%" append-to-body><el-row :gutter="64"><el-col :span="20" :xs="64" style="width: 100%"><el-table ref="singleTable" :data="processList" border highlight-current-row style="width: 100%"><el-table-column type="selection" width="55" align="center" /><el-table-column label="主键" align="center" prop="id" v-if="true"/><el-table-column label="业务表单名称" align="center" prop="businessName" /><el-table-column label="业务服务名称" align="center" prop="businessService" /><el-table-column label="流程名称" align="center" prop="flowName" /><el-table-column label="关联流程发布主键" align="center" prop="deployId" /><el-table-column label="前端路由地址" align="center" prop="routeName" /><el-table-column label="组件注入方法" align="center" prop="component" /><el-table-column label="操作" align="center" class-name="small-padding fixed-width"><template slot-scope="scope"><el-button size="mini" type="text" @click="selectProcess(scope.row)">确定</el-button></template></el-table-column></el-table></el-col></el-row></a-modal></span>
</template><script>import {startByDataId,isFirstInitiator,deleteActivityAndJoin,getProcesss} from "@/api/workflow/process";export default {name: 'ActApplyBtn',components: {},props: {btnType: {type: String,default: 'link',required: false},/**/dataId: {type: String,default: '',required: true},serviceName: {type: String,default: '',required: true},variables: {type: Object,default: {},},text: {type: String,default: '提交申请',required: false}},data() {return {modalVisible: false,submitLoading: false,form: {},firstInitiatorOpen: false,firstInitiatorTitle: '',// 关联流程数据processList: [],flowOpen: false,flowTitle: '',selectFlowId: '',  //选择或使用的流程ID};},created() {},watch: {},methods: {selectProcess(row) {this.selectFlowId = row.id;this.flowOpen = false;var params = Object.assign({dataId: this.dataId}, this.variables);startByDataId(this.dataId, this.selectFlowId, this.serviceName, params).then(res => {//console.log("startByDataId res",res);if (res.code == 200 ) {this.$message.success(res.msg);this.$emit('success');} else {this.$message.error(res.msg);}}).finally(() => (this.submitLoading = false));},ReStartByDataId(isNewFlow) {if(isNewFlow) {this.submitLoading = true;deleteActivityAndJoin(this.dataId,this.variables).then(res => {if (res.success && res.result) { //若删除成功var params = Object.assign({dataId: this.dataId}, this.variables);startByDataId(this.dataId, this.selectFlowId, this.serviceName, params).then(res => {if (res.success) {this.firstInitiatorOpen = false;this.$message.success(res.message);this.$emit('success');} else {this.$message.error(res.message);}})}}).finally(() => (this.submitLoading = false));}else {//继续原有流程流转,跳到流程处理界面上//console.log("this.variables",this.variables);this.$router.push({ path: '/flowable/task/record/index',query: {procInsId: this.variables.processInstanceId,deployId: this.variables.deployId,taskId: this.variables.taskId,businessKey: this.dataId,nodeType: "",category: "zdyyw",finished: true}})}},applySubmit() {if (this.dataId && this.dataId.length < 1) {this.error = '必须传入参数dataId';this.$message.error(this.error);return;}if (this.serviceName && this.serviceName.length < 1) {this.error = '必须传入参数serviceName';this.$message.error(this.error);return;} else {this.error = '';}//对于自定义业务,判断是否是驳回或退回的第一个发起人节点this.submitLoading = true;isFirstInitiator(this.dataId, this.variables).then(res => {if (res.code === 200 && res.data) { //若是,弹出窗口选择重新发起新流程还是继续老流程this.firstInitiatorTitle = "根据自己需要进行选择"this.firstInitiatorOpen = true;}else {this.submitLoading = true;const processParams = {serviceName: this.serviceName}getProcesss(processParams).then(res => {/**查询关联流程信息 */this.processList = res.data;this.submitLoading = false;if (this.processList && this.processList.length > 1) {this.flowOpen = true;}else if (this.processList && this.processList.length === 1) {this.selectFlowId = res.data[0].id;var params = Object.assign({dataId: this.dataId}, this.variables);startByDataId(this.dataId, this.selectFlowId, this.serviceName, params).then(res => {console.log("startByDataId res",res);if (res.code == 200 ) {this.$message.success(res.msg);this.$emit('success');} else {this.$message.error(res.msg);}}).finally(() => (this.submitLoading = false));} else {this.$message.error("检查该业务是否已经关联流程!");}}).finally(() => (this.submitLoading = false));}}).finally(() => (this.submitLoading = false));}}};
</script>

2、修改成vue3版本的代码如下:

<template><span><a-button :type="btnType" @click="applySubmit()" :loading="submitLoading">{{text}}</a-button><a-modal :z-index="100" :title="firstInitiatorTitle" @cancel="firstInitiatorOpen = false" v-model:visible="firstInitiatorOpen":width="'50%'" append-to-body><a-descriptions bordered layout="vertical"><a-descriptions-item :span="3"><a-badge status="processing" text="选择提醒" /></a-descriptions-item><a-descriptions-item label="重新发起新流程按钮" labelStyle="{ color: '#fff', fontWeight: 'bold', fontSize='18px'}">重新发起新流程会删除之前发起的任务,重新开始.</a-descriptions-item><a-descriptions-item label="继续发起老流程按钮">继续发起流程就在原来流程基础上继续流转.</a-descriptions-item></a-descriptions><span slot="footer" class="dialog-footer"><el-button type="primary" @click="ReStartByDataId(true)">重新发起新流程</el-button><el-button type="primary" @click="ReStartByDataId(false)">继续发起老流程</el-button><el-button @click="firstInitiatorOpen = false">取 消</el-button></span></a-modal><!--挂载关联多个流程--><a-modal @cancel="flowOpen = false" :title="flowTitle" v-model:visible="flowOpen" width="70%" append-to-body><el-row :gutter="64"><el-col :span="20" :xs="64" style="width: 100%"><el-table ref="singleTable" :data="processList" border highlight-current-row style="width: 100%"><el-table-column type="selection" width="55" align="center" /><el-table-column label="主键" align="center" prop="id" v-if="true"/><el-table-column label="业务表单名称" align="center" prop="businessName" /><el-table-column label="业务服务名称" align="center" prop="businessService" /><el-table-column label="流程名称" align="center" prop="flowName" /><el-table-column label="关联流程发布主键" align="center" prop="deployId" /><el-table-column label="前端路由地址" align="center" prop="routeName" /><el-table-column label="组件注入方法" align="center" prop="component" /><el-table-column label="操作" align="center" class-name="small-padding fixed-width"><template #default="scope"><el-button size="small" type="primary" @click="selectProcess(scope.row)">确定</el-button></template></el-table-column></el-table></el-col></el-row></a-modal></span>
</template><script lang="ts" setup>import {startByDataId,isFirstInitiator,deleteActivityAndJoin,getProcesss} from "@/api/workflow/process";defineOptions({ name: 'ActApplyBtn' })const props = defineProps({btnType: {type: String,default: 'link',required: false},dataId: {type: String,default: '',required: true},serviceName: {type: String,default: '',required: true},variables: {type: Object,default: {},},text: {type: String,default: '提交申请',required: false}})const emit = defineEmits(['success'])const router = useRouter()const { proxy } = getCurrentInstance() as ComponentInternalInstanceconst modalVisible = ref(false)const submitLoading = ref(false)const form = ref<any>({})const firstInitiatorOpen = ref(false)const firstInitiatorTitle = ref('')// 关联流程数据const processList = ref<any>([])const flowOpen = ref(false)const flowTitle = ref('')const selectFlowId = ref('')  //选择或使用的流程IDconst error = ref('')const selectProcess = (row) => {selectFlowId.value = row.id;flowOpen.value = false;var params = Object.assign({dataId: props.dataId}, props.variables);startByDataId(props.dataId, selectFlowId.value, props.serviceName, params).then(res => {//console.log("startByDataId res",res);if (res.code == 200 ) {proxy?.$modal.msgSuccess(res.msg);emit('success');} else {proxy?.$modal.msgError(res.msg);}}).finally(() => (submitLoading.value = false));}const ReStartByDataId = (isNewFlow: boolean) => {if(isNewFlow) {submitLoading.value = true;deleteActivityAndJoin(props.dataId,props.variables).then(res => {if (res.code == 200 && res.result) { //若删除成功var params = Object.assign({dataId: props.dataId}, props.variables);startByDataId(props.dataId, selectFlowId.value, props.serviceName, params).then(res => {if (res.code == 200) {firstInitiatorOpen.value = false;proxy?.$modal.msgSuccess(res.message);emit('success');} else {proxy?.$modal.msgError(res.message);}})}}).finally(() => (submitLoading.value = false));}else {//继续原有流程流转,跳到流程处理界面上//console.log("props.variables",props.variables);router.push({path: '/flowable/task/record/index',query: {procInsId: props.variables.processInstanceId,deployId: props.variables.deployId,taskId: props.variables.taskId,businessKey: props.dataId,nodeType: "",category: "zdyyw",finished: true},})}}const applySubmit = () => {if (props.dataId && props.dataId.length < 1) {error.value = '必须传入参数dataId';proxy?.$modal.msgError(error.value);return;}if (props.serviceName && props.serviceName.length < 1) {error.value = '必须传入参数serviceName';proxy?.$modal.msgError(error.value);return;} else {error.value = '';}//对于自定义业务,判断是否是驳回或退回的第一个发起人节点submitLoading.value = true;isFirstInitiator(props.dataId, props.variables).then(res => {if (res.code === 200 && res.data) { //若是,弹出窗口选择重新发起新流程还是继续老流程firstInitiatorTitle.value = "根据自己需要进行选择"firstInitiatorOpen.value = true;}else {submitLoading.value = true;const processParams = {serviceName: props.serviceName}getProcesss(processParams).then(res => {/**查询关联流程信息 */processList.value = res.data;submitLoading.value = false;if (processList.value && processList.value.length > 1) {flowOpen.value = true;}else if (processList.value && processList.value.length === 1) {selectFlowId.value = res.data[0].id;var params = Object.assign({dataId: props.dataId}, props.variables);startByDataId(props.dataId, selectFlowId.value, props.serviceName, params).then(res => {console.log("startByDataId res",res);if (res.code == 200 ) {proxy?.$modal.msgSuccess(res.msg);emit('success');} else {proxy?.$modal.msgError(res.msg);}}).finally(() => (submitLoading.value = false));} else {proxy?.$modal.msgError("检查该业务是否已经关联流程!");}}).finally(() => (submitLoading.value = false));}}).finally(() => (submitLoading.value = false));}
</script>

3、效果图

就是下面提交申请这个组件

相关文章:

ruoyi-nbcio-plus基于vue3的flowable的自定义业务提交申请组件的升级修改

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/ 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a…...

掌握网络抓取技术:利用RobotRules库的Perl下载器一览小红书的世界

引言 在信息时代的浪潮下&#xff0c;人们对于获取和分析海量网络数据的需求与日俱增。网络抓取技术作为满足这一需求的关键工具&#xff0c;正在成为越来越多开发者的首选。而Perl语言&#xff0c;以其卓越的文本处理能力和灵活的特性&#xff0c;脱颖而出&#xff0c;成为了…...

典型新能源汽车热管理系统方案分析

目前行业具有代表性的热管理系统有PTC电加热方案、热泵方案&#xff08;特斯拉八通阀热泵、吉利直接式热泵&#xff09;、威马的柴油加热方案以及以理想为代表的插电式混动车方案。 小鹏P7整车热管理方案分析&#xff08;PTC电加热方案&#xff09; 小鹏P7作为小鹏汽车的第2款…...

使用Docker部署开源项目FreeGPT35来免费调用ChatGPT3.5 API

Vercel部署FreeGPT35有严重限制&#xff0c;玩玩就好&#xff0c;真用还是得docker。 限制原因: Vercel的流式响应并不是一开始写流&#xff0c;客户端就能立刻收到响应流&#xff0c;而是先写到一个缓冲区&#xff0c;当流关闭才一股脑的流式响应回来(不是实时流) 因此导致: …...

《Linux运维实战:Kylin V10操作系统开启安装软件保留缓存设置》

总结&#xff1a;整理不易&#xff0c;如果对你有帮助&#xff0c;可否点赞关注一下&#xff1f; 更多详细内容请参考&#xff1a;Linux运维实战总结 一、操作步骤 1、改系统/etc/yum.conf配置文件&#xff0c;开启安装软件保留缓存设置 [rootecs-90c2-0003 ~]# vim /etc/yum.…...

视频生成技术:从GAN到Latte

GANs Diffusion Model...

机器学习中的激活函数

激活函数存在的意义&#xff1a; 激活函数决定了某个神经元是否被激活&#xff0c;当这个神经元接收到的信息是有用或无用的时候&#xff0c;激活函数决定了对这个神经元接收到的信息是留下还是抛弃。如果不加激活函数&#xff0c;神经元仅仅做线性变换&#xff0c;那么该神经网…...

LinuxAndroid: 旋转编码器input输入事件适配(旋转输入)

rk3588s: 旋转编码器input输入事件适配 基于Android 12 kernel-5.10版本 参考文档&#xff1a; https://blog.csdn.net/szembed/article/details/131551950 Linux 输入设备调试详解&#xff08;零基础开发&#xff09;Rotary_Encoder旋转编码器驱动 通用GPIO为例 挂载input输…...

机器学习和深度学习-- 李宏毅(笔记与个人理解)Day10

Day 10 Genaral GUidance training Loss 不够的case Loss on Testing data over fitting 为什么over fitting 留到下下周哦~~ 期待 solve CNN卷积神经网络 Bias-Conplexiy Trade off cross Validation how to split? N-fold Cross Validation mismatch 这节课总体听下来比较…...

perl 交叉编译

前言 Perl是一种高级、通用、解释型、动态的编程语言。Perl设计的初衷是为了更好地处理文本处理任务&#xff0c;但随着时间的发展&#xff0c;现在它已经变成了一种强大的一般目的编程语言。Perl支持面向过程和面向对象的编程风格。 Perl的特点&#xff1a; 强大的字符串处…...

浅谈.版本管理工具

定义&#xff1a; 版本控制是一种在开发的过程中用于管理我们对文件、目录或工程等内容的修改历史&#xff0c;方便查看更改历史记录&#xff0c;备份以便恢复以前的版本的软件工程技术。 特点&#xff1a; 1、方便用于管理多人协同开发项目 2、并行开发&#xff0c;可实现跨区…...

【汇编语言实战】已知10个整数求最大值

C语言描述该程序流程&#xff1a; #include <stdio.h> int main() {int a[]{11,33,23,54,12,51,2,4,34,45};int maxa[0];for(int i1;i<9;i){if(a[i]>max){maxa[i];}}printf("%d",max); }汇编语言&#xff1a; include irvine32.inc .data arr dword 11…...

在 CentOS 7 上安装 Redis

在 CentOS 7 上安装 Redis 可以通过几个简单的步骤完成。以下是一种常用的方法&#xff1a; 更新系统&#xff1a; 在安装任何新软件之前&#xff0c;最好先更新系统的软件包列表&#xff0c;以确保安装的软件版本是最新的。可以使用以下命令来更新&#xff1a; sudo yum up…...

『51单片机』蜂鸣器

&#x1f6a9; WRITE IN FRONT &#x1f6a9; &#x1f50e; 介绍&#xff1a;"謓泽"正在路上朝着"攻城狮"方向"前进四" &#x1f50e;&#x1f3c5; 荣誉&#xff1a;2021|2022年度博客之星物联网与嵌入式开发TOP5|TOP4、2021|2222年获评…...

计算机视觉 | 基于二值图像数字矩阵的距离变换算法

Hi&#xff0c;大家好&#xff0c;我是半亩花海。本实验基于 OpenCV 实现了二值图像数字矩阵的距离变换算法。首先生成一个 480x480 的黑色背景图像&#xff08;定义黑色为0&#xff0c;白色为1&#xff09;&#xff0c;在其中随机选择了三个白色像素点作为距离变换的原点&…...

Arcgis windows webadaptor配置

注意windows下安装细节 1、电脑必须添加限定域名及dns后缀。 准备工作 a、安装webadaptor&#xff0c;获取jar文件 b、tomcat中部署两个jar&#xff0c;名字不相同&#xff0c;一个用server配置&#xff0c;一个用于portal配置 c、geoserver用来配置server d、geoscene用来配置…...

对接阿里云实时语音转文字的思路

将上述概念转化为详细代码需要一定的步骤。这里&#xff0c;我们将根据之前讨论的服务划分&#xff0c;创建一个简化的框架来模拟这个流程。注意&#xff0c;由于空间限制和简化目的&#xff0c;某些实现细节会被省略或简化&#xff0c;你可能需要根据实际情况进行调整。 1. 配…...

如何转行成为产品经理?

转行NPDP也是很合适的一条发展路径&#xff0c;之后从事新产品开发相关工作~ 一、什么是NPDP&#xff1f; NPDP 是产品经理国际资格认证&#xff0c;美国产品开发与管理协会&#xff08;PDMA&#xff09;发起的&#xff0c;是目前国际公认的唯一的新产品开发专业认证&#xff…...

SpringCloudAlibaba-整合nacos(二)

目录地址&#xff1a; SpringCloudAlibaba整合-CSDN博客 一、nacos服务部分 1.下载nacos&#xff0c;并执行数据库脚本&#xff1a;nacos-mysql.sql 2.修改配置文件&#xff0c;配置mysql 3.启动nacos ./startup.sh -m standalone 4.访问&#xff1a;http://127.0.0.1:884…...

STM32H7通用定时器计数功能的使用

目录 概述 1 STM32定时器介绍 1.1 认识通用定时器 1.2 通用定时器的特征 1.3 递增计数模式 1.4 时钟选择 2 STM32Cube配置定时器时钟 2.1 配置定时器参数 2.2 配置定时器时钟 3 STM32H7定时器使用 3.1 认识定时器的数据结构 3.2 计数功能实现 4 测试案例 4.1 代码…...

基于算法竞赛的c++编程(28)结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...