更多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、原先vue2的ActCancelBtn.vue代码如下：

<style lang="less">
</style>
<template><span><a-button :type="btnType" @click="cancel()" >{{text}}</a-button><a-modal title="确认撤回" v-model="modalCancelVisible" :mask-closable="false" :width="500"><a-form ref="delForm" v-model="cancelForm" :label-width="70" v-if="modalCancelVisible"><a-form-item label="撤回原因" prop="reason"><a-input type="textarea" v-model="cancelForm.reason" :rows="4" /></a-form-item></a-form><div slot="footer"><a-button type="text" @click="modalCancelVisible = false">取消</a-button><a-button type="primary" :disabled="submitLoading" @click="handelSubmitCancel">提交</a-button></div></a-modal></span>
</template><script>
import {deleteByDataId} from "@/api/workflow/process";export default {name: 'ActCancelBtn',components: {},props: {btnType: { type: String, default: 'link', required: false },/**/dataId: {type: String,default: '',required: true},instanceId: {type: String,default: '',required: false},text: {type: String,default: '撤回',required: false}},data() {return {modalCancelVisible: false,cancelForm: {reason: ''},submitLoading: false,};},created() {},watch: {},methods: {cancel() {this.modalCancelVisible = true;},handelSubmitCancel() {this.submitLoading = true;deleteByDataId(this.instanceId, this.cancelForm.reason,this.dataId).then(res => {if (res.success) {this.$message.success('操作成功');this.modalCancelVisible = false;this.$emit('success');} else {this.$message.error(res.message);}}).finally(() => (this.submitLoading = false));}}};
</script>

2、升级到vue3的代码如下：

<template><span><a-button :type="btnType" @click="cancel()" >{{text}}</a-button><a-modal title="确认撤回" v-model="modalCancelVisible" :mask-closable="false" :width="500"><a-form ref="delForm" v-model="cancelForm" :label-width="70" v-if="modalCancelVisible"><a-form-item label="撤回原因" prop="reason"><a-input type="textarea" v-model="cancelForm.reason" :rows="4" /></a-form-item></a-form><div slot="footer"><a-button type="primary" @click="modalCancelVisible = false">取消</a-button><a-button type="primary" :disabled="submitLoading" @click="handelSubmitCancel">提交</a-button></div></a-modal></span>
</template><script setup lang="ts">import {deleteByDataId} from "@/api/workflow/process";defineOptions({ name: 'ActCancelBtn' })const props = defineProps({btnType: {type: String,default: 'link',required: false ,},dataId: {type: String,default: '',required: true},instanceId: {type: String,default: '',required: false},text: {type: String,default: '撤回',required: false}})const emit = defineEmits(['success'])const { proxy } = getCurrentInstance() as ComponentInternalInstance;const modalCancelVisible = ref(false)const cancelForm = ref({reason: ''})const submitLoading = ref(false)const cancel = () => {modalCancelVisible.value = true;}const handelSubmitCancel = () => {submitLoading.value = true;deleteByDataId(props.instanceId, cancelForm.value.reason,props.dataId).then(res => {if (res.success) {proxy?.$modal.msgSuccess('操作成功');modalCancelVisible.value = false;emit('success');} else {proxy?.$modal.msgError(res.message);}}).finally(() => (submitLoading.value = false));}
</script>

3、目前这个组件按钮被注释掉，暂时也不用，需要的时候也可以用