审核画面 添加loading防止多次点击

src/components/Audit/InfoModal/index.vue

@@ -1,4 +1,5 @@
 <template>
+<a-spin :spinning="props.modalLoading">
   <div class="modal-content">
     <div class="row">
       <div class="item">
@@ -227,6 +228,7 @@
       </div>
     </div>
   </div>
+</a-spin>
 </template>
 
 <script setup lang="ts">
@@ -243,8 +245,8 @@ import { typenameKey } from '@/views/demo/audit/util'
 import { UpdateCaseInfoBySubject } from '@/api/audit/index'
 import axios from "axios";
 
-const props = defineProps(['infoData','control','type'])
-const emits = defineEmits(['handleOk','closeModal','closeCase','reSubmit'])
+const props = defineProps(['infoData','control','type','modalLoading'])
+const emits = defineEmits(['handleOk','closeModal','closeCase','reSubmit','changeLoading'])
 
 const typenameOptions = ref([])
 const countyOptions = ref([])
@@ -358,17 +360,22 @@ const submitApi = () => {
     okText: '确认',
     cancelText: '取消',
     onOk: () => {
-      let params = {
-        ...props.infoData,
-        subject: props.type,
-      }
-      console.log(params)
-      UpdateCaseInfoBySubject(params).then(res => {
-        console.log('变更后返回数据',res)
-        if(res){
-          emits('handleOk')
+      emits('changeLoading',true)
+      try{
+        let params = {
+          ...props.infoData,
+          subject: props.type,
         }
-      })
+        console.log(params)
+        UpdateCaseInfoBySubject(params).then(res => {
+          console.log('变更后返回数据',res)
+          if(res){
+            emits('handleOk')
+          }
+        })
+      } catch (error){
+        emits('changeLoading',false)
+      }
     }
   })
   

src/views/demo/audit/audit/index.vue

@@ -37,7 +37,9 @@
         @closeModal="closeModal"
         :control="true"
         @closeCase="closeCase"
-        @reSubmit="reSubmit"/>
+        @reSubmit="reSubmit"
+        :modalLoading="modalLoading"
+        @changeLoading="changeLoading"/>
     </a-modal>
     <a-modal width="75%" style="top: 33px;" v-model:open="openImportModal" title="导入" :destroyOnClose="true" :footer="null" :maskClosable="false">
       <ImportDataModal :picihao="picihao" @closeImportModal="closeImportModal"/>
@@ -89,6 +91,7 @@ const reSubmitRemark = ref("")
 const closeCaseRemark = ref("")
 const picihao = ref()
 const openProgressModal = ref(false)
+const modalLoading = ref(false)
 
 const [registerTable, { reload, expandAll}] = useTable({
   title: '待审核',
@@ -134,6 +137,7 @@ function handleAudit(record) {
   })
 }
 const handleOk = async () => {
+  changeLoading(true)
   try {
     const { id, case_description } = infoData.value.info
     const checkValue = await GetDraft({id})
@@ -172,16 +176,20 @@ const handleOk = async () => {
       if(result){
         await UpdateCaseNoBySubject({subject: type, id})
         message.success('发起流程成功');
+        changeLoading(false)
         reload()
         openModal.value = false
       }else{
         message.error('发起流程失败');
+        changeLoading(false)
       }
     }else{
       message.warning('该案件已发起流程');
+      changeLoading(false)
     }
   } catch(err) {
     console.log(err)
+    changeLoading(false)
   }
 }
 const closeModal = () => {
@@ -195,15 +203,19 @@ const closeCase = (id: string) => {
       onChange: (e) => closeCaseRemark.value = e.target.value
     }),
     onOk: async () => {
-      const result = await CloseCaseInfo(type, {id, closereason: closeCaseRemark.value})
-      if(result){
-        message.success('关闭案件成功');
-        reload()
-        openModal.value = false
-      }else{
-        message.error('关闭案件失败');
+      changeLoading(true)
+      try{
+        const result = await CloseCaseInfo(type, {id, closereason: closeCaseRemark.value})
+        changeLoading(false)
+        if(result){
+          message.success('关闭案件成功');
+          reload()
+          openModal.value = false
+        }
+        closeCaseRemark.value = ''
+      } catch (error){
+        changeLoading(false)
       }
-      closeCaseRemark.value = ''
     },
     onCancel() {
       closeCaseRemark.value = ''
@@ -218,16 +230,22 @@ const reSubmit = (originalcaseno: string) => {
       onChange: (e) => reSubmitRemark.value = e.target.value
     }),
     onOk: async () => {
-      console.log(reSubmitRemark.value)
-      const result = await SaveReSubmitInfo({ originalcaseno, remark: reSubmitRemark.value, subjectKey })
-      if(result){
-        message.success('复提成功');
-        reload()
-        openModal.value = false
-      }else{
-        message.error('复提失败');
+      changeLoading(true)
+      try{
+        console.log(reSubmitRemark.value)
+        const result = await SaveReSubmitInfo({ originalcaseno, remark: reSubmitRemark.value, subjectKey })
+        changeLoading(false)
+        if(result){
+          message.success('复提成功');
+          reload()
+          openModal.value = false
+        }else{
+          message.error('复提失败');
+        }
+        reSubmitRemark.value = ''
+      }catch (error){
+        changeLoading(false)
       }
-      reSubmitRemark.value = ''
     },
     onCancel() {
       reSubmitRemark.value = ''
@@ -280,6 +298,9 @@ const downloadSHP = () => {
     document.body.removeChild(elink);
   })
 }
+const changeLoading = (type: boolean) => {
+  modalLoading.value = type
+}
 
 </script>
 <style lang="scss">