货物 添加 加载动画

src/views/main/BookingLedger/detail/modules/rightContent.vue

@@ -42,24 +42,26 @@
       </div>
     </a-card>
     <a-card :bodyStyle="tstyle" :bordered="false">
-      <div class="title"><i class="iconfont icon-fuwu"></i><span>货物状态</span></div>
-      <div class="content">
-        <a-tooltip v-for="(serive, sindex) in booGoodsStatusItem" :key="`${serive.configId}_${sindex}`">
-          <template v-if="serive.finishTime" #title>
-            <p>时间：{{ serive.finishTime }}</p>
-            <p v-if="serive.remark">备注：{{ serive.remark }}</p>
-            <p v-if="serive.extData">显示天数：{{ serive.extData }}</p>
-          </template>
-          <div
-            class="items"
-            :class="{ active: locaGoodsStatus.includes(serive.configId) }"
-            @click="saveGoodsStatus(serive)"
-          >
-            {{ serive.statusName }}
-            <div class="edit" @click.stop="FnOpenEdit(serive)"><a-icon type="edit" /></div>
-          </div>
-        </a-tooltip>
-      </div>
+      <a-spin :spinning="spinning" :delay="delayTime">
+        <div class="title"><i class="iconfont icon-fuwu"></i><span>货物状态</span></div>
+        <div class="content">
+          <a-tooltip v-for="(serive, sindex) in booGoodsStatusItem" :key="`${serive.configId}_${sindex}`">
+            <template v-if="serive.finishTime" #title>
+              <p>时间：{{ serive.finishTime }}</p>
+              <p v-if="serive.remark">备注：{{ serive.remark }}</p>
+              <p v-if="serive.extData">显示天数：{{ serive.extData }}</p>
+            </template>
+            <div
+              class="items"
+              :class="{ active: locaGoodsStatus.includes(serive.configId) }"
+              @click="saveGoodsStatus(serive)"
+            >
+              {{ serive.statusName }}
+              <div class="edit" @click.stop="FnOpenEdit(serive)"><a-icon type="edit" /></div>
+            </div>
+          </a-tooltip>
+        </div>
+      </a-spin>
     </a-card>
     <a-modal v-model="GoodsStatusVisible" width="600px" title="编辑" @ok="GoodsStatusHandleOk">
       <a-form :form="StatusVisibleForm">
@@ -305,6 +307,8 @@ export default {
   },
   data() {
     return {
+      delayTime: 500,
+      spinning: false,
       id: this.$route.query.id,
       tstyle: { padding: '0 15px 15px', 'margin-bottom': '10px', background: '#fff' },
       remarkModelvisible: false,
@@ -774,7 +778,7 @@ export default {
         let date = new Date(+new Date() + 8 * 3600 * 1000)
         ApiData.item.push({ ...data, finishTime: date.toISOString() })
       }
-
+      this.spinning = true
       BookingOrderSaveGoodsStatus(ApiData)
         .then(res => {
           if (res.success) {
@@ -785,9 +789,11 @@ export default {
               this.$emit('inGoodsSave', false)
             }, 400)
           }
+          this.spinning = false
         })
         .catch(err => {
           console.log(err)
+          this.spinning = false
         })
     }
   }