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、原先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、目前这个组件按钮被注释掉，暂时也不用，需要的时候也可以用