补录订单保存按钮增加loading

src/views/additionalOrder/additional/index.vue

@@ -1419,7 +1419,7 @@
         <div id="quote">
           <el-collapse-item name="quote">
             <template #title>
-              <span class="title"  :ref="(el) => setSectionRef(el, 3)" id="quote">投保信息</span>
+              <span class="title" :ref="(el) => setSectionRef(el, 3)" id="quote">投保信息</span>
             </template>
             <el-row :gutter="20" class="p-r-20px">
               <el-col :span="24">
@@ -1470,7 +1470,8 @@
               </el-col>
               <el-col :span="6">
                 <el-form-item label="车船税" prop="taxPremium">
-                  <el-input v-model="additionalForm.taxPremium" @input="autoSumPremium()" @blur="cvalculateFees" placeholder="请输入车船税">
+                  <el-input v-model="additionalForm.taxPremium" @input="autoSumPremium()" @blur="cvalculateFees"
+                    placeholder="请输入车船税">
                     <template #append>
                       <span>元</span>
                     </template>
@@ -1493,7 +1494,8 @@
               </el-col>
               <el-col :span="6">
                 <el-form-item class="p-l-24px" label="交强险保费" prop="jqPremium">
-                  <el-input v-model="additionalForm.jqPremium" @input="autoSumPremium()" @blur="cvalculateFees" placeholder="请输入交强险保费">
+                  <el-input v-model="additionalForm.jqPremium" @input="autoSumPremium()" @blur="cvalculateFees"
+                    placeholder="请输入交强险保费">
                     <template #append>
                       <span>元</span>
                     </template>
@@ -1503,7 +1505,8 @@
 
               <el-col :span="6">
                 <el-form-item label="驾意险保费" prop="jyPremium">
-                  <el-input v-model="additionalForm.jyPremium" @input="autoSumPremium()" @blur="cvalculateFees" placeholder="请输入驾意险保费">
+                  <el-input v-model="additionalForm.jyPremium" @input="autoSumPremium()" @blur="cvalculateFees"
+                    placeholder="请输入驾意险保费">
                     <template #append>
                       <span>元</span>
                     </template>
@@ -1527,7 +1530,8 @@
               </el-col>
               <el-col :span="6">
                 <el-form-item class="p-l-24px" label="商业险保费" prop="syPremium">
-                  <el-input v-model="additionalForm.syPremium" @input="autoSumPremium()" @blur="cvalculateFees" placeholder="请输入商业险保费">
+                  <el-input v-model="additionalForm.syPremium" @input="autoSumPremium()" @blur="cvalculateFees"
+                    placeholder="请输入商业险保费">
                     <template #append>
                       <span>元</span>
                     </template>
@@ -1598,8 +1602,8 @@
               </el-col>
               <el-col :span="6">
                 <el-form-item label="补录费用" prop="" class="p-l-24px">
-                  <el-select v-model="additionalForm.isrecordByLeader"  placeholder="请选择"
-                    filterable @change="cvalculateFees" >
+                  <el-select v-model="additionalForm.isrecordByLeader" placeholder="请选择" filterable
+                    @change="cvalculateFees">
                     <el-option :value="true" label="代客录单费用-1"></el-option>
                     <el-option :value="false" label="内部协议费用不做-1"></el-option>
                   </el-select>
@@ -1998,8 +2002,8 @@
       </el-form>
     </el-collapse>
     <div class="footer">
-      <el-button plain type="primary" @click="handleSave">暂存</el-button>
-      <el-button type="primary" @click="handleSubmit(AdditionalFormRefs)">提交</el-button>
+      <el-button plain type="primary" :loading="submitLoading" @click="handleSave">暂存</el-button>
+      <el-button type="primary" :loading="submitLoading" @click="handleSubmit(AdditionalFormRefs)">提交</el-button>
     </div>
     <el-image-viewer v-if="showImage" :url-list="showImageUrl" @close="showImage = false" />
     <el-image-viewer v-if="imageShow" :url-list="[imageUrl]" @close="imageShow = false" />
@@ -2873,7 +2877,7 @@ const handleSelectAgreement = (ptlAgreementId) => {
   api.additionalApi.getCostExternalList({ ptlAgreementId }).then((res: any) => {
     if (res.code == 200) {
       costExternalList.value = res.data
-      if(additionalForm.value.dockingPersonPhone) handleSelectPerson(additionalForm.value.dockingPersonPhone)
+      if (additionalForm.value.dockingPersonPhone) handleSelectPerson(additionalForm.value.dockingPersonPhone)
     } else {
       costExternalList.value = []
     }
@@ -2910,7 +2914,7 @@ const handleSelectIsxx = (e) => {
       })
       return
     }
-    additionalForm.value.cost1=obj.id
+    additionalForm.value.cost1 = obj.id
     cvalculateFees()
   }
 }
@@ -2939,8 +2943,8 @@ const handleAgreementSelect = () => {
 
 // 根据协议获取费用
 const cvalculateFees = () => {
-  const str=additionalForm.value.cost || additionalForm.value.cost1
-  if(!str) return
+  const str = additionalForm.value.cost || additionalForm.value.cost1
+  if (!str) return
   const { costExternalTypeAdds, productId } = costList.value.find(v => v.id === str)
   additionalForm.value.productId = productId
   const objInsurance = {
@@ -2951,15 +2955,15 @@ const cvalculateFees = () => {
   for (const key in objInsurance) {
     const obj = costExternalTypeAdds.find(v => v.costType === key)
     const element = objInsurance[key];
-    if(!additionalForm.value.isxx) additionalForm.value[element + 'Inlet'] = additionalForm.value[element + 'Inlet'] ?? obj?.inlet ?? null
-    additionalForm.value[element + 'AddThrow'] = additionalForm.value[element + 'AddThrow'] ??  obj?.addThrow ?? null
-    additionalForm.value[element + 'Export'] = additionalForm.value[element + 'Export'] ??  obj?.export ?? null
-    additionalForm.value[element + 'ExportKeepPointRatio'] = additionalForm.value[element + 'ExportKeepPointRatio'] ??  obj?.keepPointRatio ?? null
+    if (!additionalForm.value.isxx) additionalForm.value[element + 'Inlet'] = additionalForm.value[element + 'Inlet'] ?? obj?.inlet ?? null
+    additionalForm.value[element + 'AddThrow'] = additionalForm.value[element + 'AddThrow'] ?? obj?.addThrow ?? null
+    additionalForm.value[element + 'Export'] = additionalForm.value[element + 'Export'] ?? obj?.export ?? null
+    additionalForm.value[element + 'ExportKeepPointRatio'] = additionalForm.value[element + 'ExportKeepPointRatio'] ?? obj?.keepPointRatio ?? null
   }
   api.additionalApi.cvalculateFees({
     agreementId: additionalForm.value.agreementId,
     ...additionalForm.value,
-    mobile:realQuoteUserId.value
+    mobile: realQuoteUserId.value
   }).then((res: any) => {
     if (res.code == 200) {
       detailData.value = {
@@ -3993,6 +3997,7 @@ const handleSave = () => {
   obj.kindInfoVo = insuranceData.value
   obj.costRatio = detailData.value?.costRatio
 
+  submitLoading.value = true
   if (myRoute.query.id) {
     api.additionalApi.updateOrders(obj).then((res: any) => {
       if (res.code == 200) {
@@ -4009,7 +4014,7 @@ const handleSave = () => {
           type: 'warning'
         })
       }
-    })
+    }).finally(() => submitLoading.value = false)
   } else {
     api.additionalApi.saveOrders(obj).then((res: any) => {
       if (res.code == 200) {
@@ -4026,9 +4031,11 @@ const handleSave = () => {
           type: 'warning'
         })
       }
-    })
+    }).finally(() => submitLoading.value = false)
   }
 }
+
+const submitLoading = ref(false)
 // 提交
 const handleSubmit = async (FormRefs) => {
   if (!FormRefs) {
@@ -4168,7 +4175,7 @@ const handleSubmit = async (FormRefs) => {
   obj.feeOrdersVo = {
     agreementId: additionalForm.value.agreementId,
     costId: additionalForm.value.costId,
-        ...detailData.value?.feeOrdersVo
+    ...detailData.value?.feeOrdersVo
 
   }
   if (detailData.value) {
@@ -4270,6 +4277,7 @@ const handleSubmit = async (FormRefs) => {
   obj.kindInfoVo = insuranceData.value
   obj.costRatio = detailData.value?.costRatio
 
+  submitLoading.value = true
   await FormRefs.validate((valid) => {
     if (valid) {
       if (myRoute.query.id) {
@@ -4288,7 +4296,7 @@ const handleSubmit = async (FormRefs) => {
               type: 'warning'
             })
           }
-        })
+        }).finally(() => submitLoading.value = false)
       } else {
         api.additionalApi.saveOrders(obj).then((res: any) => {
           if (res.code == 200) {
@@ -4305,9 +4313,10 @@ const handleSubmit = async (FormRefs) => {
               type: 'warning'
             })
           }
-        })
+        }).finally(() => submitLoading.value = false)
       }
     } else {
+      submitLoading.value = false
       ElMessage.warning('请完善订单内容')
     }
   })