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、效果图

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

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

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

相关文章

NAV2 ros galactic安装教程

NAV2 ros galactic安装教程

sudo apt install ros-galactic-gazebo-* 这个必须下载 sudo apt-get install -y ros-galactic-rmw* 这个也是 使用操作系统中的包管理器安装 Nav2 包: sudo apt install ros-galactic-navigation2 sudo apt install ros-galactic-nav2-bringup安装Turtlebot 3 软件包: sudo…
阅读更多...
Java快速入门系列-8（Web开发基础）

Java快速入门系列-8（Web开发基础）

第8章 Web开发基础 8.1 Servlet与JSP8.1.1 Servlet简介8.1.2 JSP简介与使用8.1.3 Servlet与JSP协作8.2 Web服务器与Tomcat8.2.1 安装与配置Tomcat8.2.2 配置与管理Web应用8.3 MVC设计模式与Java Web应用8.3.1 MVC原理8.3.2 MVC在Java Web中的应用8.4 RESTful API设计与实现8.4.…
阅读更多...
参数化方案对耦合模式影响试验

参数化方案对耦合模式影响试验

今天建立几个实验 HIST_model_test_lthf_tbf HIST_model_test_lthf_phiq HIST_model_test_sshf_tbf HIST_model_test_pblh_zli HIST_model_test_nocouple 十天过去了&#xff0c;这次运行的速度显然慢了好多&#xff0c;还没运行到2000年&#xff0c;没办法只能就地取材了。 我…
阅读更多...
虚拟货币：数字金融时代的新工具

虚拟货币：数字金融时代的新工具

在数字化时代的到来之后&#xff0c;虚拟货币逐渐成为了一种广为人知的金融工具。虚拟货币是一种数字化的资产&#xff0c;它不像传统货币那样由政府或中央银行发行和监管。相反&#xff0c;虚拟货币通过密码学技术和分布式账本技术来实现去中心化的发行和交易。 虚拟货币的代…
阅读更多...
xss跨站脚本攻击笔记

xss跨站脚本攻击笔记

1 XSS跨站脚本攻击 1.1 xss跨站脚本攻击介绍 跨站脚本攻击英文全称为(Cross site Script)缩写为CSS&#xff0c;但是为了和层叠样式表(CascadingStyle Sheet)CSS区分开来&#xff0c;所以在安全领域跨站脚本攻击叫做XSS 1.2 xss跨战脚本攻击分类 第一种类型:反射型XSS 反射…
阅读更多...
JVM规范中的运行时数据区

JVM规范中的运行时数据区

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a;每天一个知识点 ✨特色专栏&#xff1a…
阅读更多...
Qt 多窗体

Qt 多窗体

前言 在 Qt编程中经常会遇到要在多个界面之间切换的情况&#xff0c;如从登录界面跳转到主界面&#xff0c;从主界面跳转到设置界面&#xff0c;再返回到主界面。我们将会用一个简单的示例来实现多窗体功能。 登录窗口 创建基类为QMainWindow&#xff0c;类名为LoginWin。再使用…
阅读更多...
SpringBoot中的Redis的简单使用

SpringBoot中的Redis的简单使用

在Spring Boot项目中使用Redis作为缓存、会话存储或分布式锁等组件&#xff0c;可以简化开发流程并充分利用Redis的高性能特性。以下是使用Spring Boot整合Redis的详细步骤&#xff1a; 1. 环境准备 确保开发环境中已安装&#xff1a; Java&#xff1a;用于编写和运行Spring…
阅读更多...
图书馆自习室|基于SSM的图书馆自习室座位预约小程序设计与实现(源码+数据库+文档)

图书馆自习室|基于SSM的图书馆自习室座位预约小程序设计与实现(源码+数据库+文档)

图书馆自习室目录 基于SSM的图书馆自习室座位预约小程序设计与实现 一、前言 二、系统设计 三、系统功能设计 1、小程序端&#xff1a; 2、后台 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a…
阅读更多...
MacOS下Qt 5开发环境安装与配置

MacOS下Qt 5开发环境安装与配置

最近笔者在MacOS中使用Qt Creator开发Qt程序时遇到了一些问题&#xff0c;在网上查了不少资料&#xff0c;都没有找到解决方案&#xff0c;只有自己进行研究摸索了&#xff0c;今天晚上终于将目前遇到的问题全部解决了&#xff0c;特记录下来分享给大家。 笔者使用的是MacOS 1…
阅读更多...
【高校科研前沿】青藏高原所李新研究员为第一作者在REV GEOPHYS发表长篇综述：陆面数据同化–陆面过程研究中理论与数据的和弦

【高校科研前沿】青藏高原所李新研究员为第一作者在REV GEOPHYS发表长篇综述：陆面数据同化–陆面过程研究中理论与数据的和弦

1.文章简介 论文名称&#xff1a;Land Data Assimilation: Harmoni-zing Theory and Data in Land Surface Process Studies 第一作者及通讯作者&#xff1a;李新研究员&#xff08;兼通讯作者&#xff09; 第一作者及通讯作者单位&#xff1a;中国科学院青藏高原研…
阅读更多...
网站SEO关键词规划时如何筛选出合适的关键词？

网站SEO关键词规划时如何筛选出合适的关键词？

在网站SEO优化过程中&#xff0c;关键词布局是一个至关重要的环节。首先&#xff0c;我们需要确定核心关键词&#xff0c;然后通过各种策略和方法对关键词进行扩展。完成关键词扩展后&#xff0c;接下来的任务就是对这些扩展后的关键词进行筛选。那么&#xff0c;如何进行有效的…
阅读更多...
模型训练基本概念-赛博炼丹

模型训练基本概念-赛博炼丹

文章目录 拓展知识基础名词解释&#xff08;语义库更新&#xff09;机器学习任务流程模型训练基本流程模型训练详细流程正向传播与反向传播正向传播-求误差值反向传播-求参数值 学习率激活函数激活函数-为什么希望激活函数输出均值为0&#xff1f;激活函数 — softmax & ta…
阅读更多...
机器学习和深度学习-- 李宏毅（笔记与个人理解）Day10

机器学习和深度学习-- 李宏毅（笔记与个人理解）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 这节课总体听下来比较…
阅读更多...
使用Docker部署开源项目FreeGPT35来免费调用ChatGPT3.5 API

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

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

VideoGPT：Video Generation using VQ-VAE and Transformers

1.introduction 对于视频展示&#xff0c;选择哪种模型比较好&#xff1f;基于似然->transformers自回归。在没有空间和时间溶于的降维潜在空间中进行自回归建模是否优于在所有空间和时间像素级别上的建模&#xff1f;选择前者&#xff1a;自然图像和视频包括了大量的空间和…
阅读更多...
【八股】AOP

【八股】AOP

AOP(Aspect Oriented Programming)&#xff0c;面向切面编程&#xff0c;他是一种编程范式。 作用&#xff1a; 在不改变原始设计的的基础上对其进行功能增强。 几个基本概念&#xff1a; 连接点&#xff1a;所有的方法 切入点&#xff1a;追加功能的方法 通知&#xff1a;追加…
阅读更多...
组合逻辑电路( Combinational Logic Circuit)知识点总结

组合逻辑电路( Combinational Logic Circuit)知识点总结

目录 一、组合逻辑电路的基本设计方法 1.特点 2.逻辑功能的描述 3.组合逻辑电路的分析步骤 4.组合逻辑电路的设计方法 二、编码器的逻辑电路 1.普通编码器 2.优先编码器 三、二进制和二-十进制译码器 1.3-8译码器 2.二-十进制译码器 3.应用&#xff1a;逻辑函数发生…
阅读更多...
基于GRU实现评论文本情感分析

基于GRU实现评论文本情感分析

一、问题建模 在线评论的细粒度情感分析对于深刻理解商家和用户、挖掘用户情感等方面有至关重要的价值&#xff0c;并且在互联网行业有极其广泛的应用&#xff0c;主要用于个性化推荐、智能搜索、产品反馈、业务安全等。此博文&#xff0c;共包含6大类20个细粒度要素的情感倾…
阅读更多...
【PDF.js】PDF文件预览

【PDF.js】PDF文件预览

【PDF.js】PDF文件预览 一、PDF.js二、PDF.js 下载1、下载PDF.js2、在项目中引入3、屏蔽跨域错误 三、项目中使用四、说明五、实现效果 使用PDFJS实现pdf文件的预览&#xff0c;支持预览指定页、关键词搜索、缩略图、页面尺寸调整等等。 一、PDF.js 官方地址 文档地址 二、PD…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023