更多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代码如下:
javascript
<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的代码如下:
javascript
<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、目前这个组件按钮被注释掉,暂时也不用,需要的时候也可以用