控制 Tabs bar 显示

src/views/main/BookingLedger/detail/index.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="booking-detail">
-    <a-tabs size="large" :tabBarStyle="tabBarStyle" :activeKey="tabActiveKey" @change="changeTab">
+    <a-tabs
+      size="large"
+      :class="Showtabs ? 'Showtabs' : ''"
+      :tabBarStyle="tabBarStyle"
+      :activeKey="tabActiveKey"
+      @change="changeTab"
+    >
       <a-tab-pane key="1" tab="主单信息">
         <a-row :gutter="24">
           <a-col :span="18">
@@ -71,7 +77,12 @@
         </a-row>
       </a-tab-pane>
       <a-tab-pane key="2" tab="分单信息" v-if="bookingDetails.hbList && bookingDetails.hbList.length > 0">
-        <sedOrder ref="sedOrder" :details="bookingDetails" :sedOrderList="bookingDetails.hbList" :isAdd="isAdd"></sedOrder>
+        <sedOrder
+          ref="sedOrder"
+          :details="bookingDetails"
+          :sedOrderList="bookingDetails.hbList"
+          :isAdd="isAdd"
+        ></sedOrder>
       </a-tab-pane>
     </a-tabs>
   </div>
@@ -105,7 +116,7 @@ export default {
     rightContent,
     basicItem,
     ediMore,
-    sedOrder,
+    sedOrder
   },
   data() {
     return {
@@ -116,26 +127,36 @@ export default {
       bookingDetails: {},
       tabBarStyle: {
         background: '#fff',
-        padding: '0 20px',
+        padding: '0 20px'
       },
       excuteRules: [],
       excuteRulesType: '',
       isAdd: false,
       moreStr: '',
       tabActiveKey: '1',
-      historyData: {},
+      historyData: {}
     }
   },
   computed: {
     ...mapGetters(['bookingList']),
+    Showtabs() {
+      console.log(this.bookingDetails, 'bookingDetails')
+      let Rdata = true
+      if (this.bookingDetails.hbList && this.bookingDetails.hbList.length) {
+        Rdata = false
+      } else {
+        Rdata = true
+      }
+      return Rdata
+    }
   },
   watch: {
     bookingDetails: {
       handler(nval, oval) {
         // console.log('父级 -- 数据改变', nval)
       },
-      deep: true,
-    },
+      deep: true
+    }
   },
   created() {
     this.init()
@@ -150,7 +171,7 @@ export default {
         tabActiveKey: this.tabActiveKey,
         type: this.type,
         isCopy: this.isCopy,
-        id: this.$route.query.id,
+        id: this.$route.query.id
       }
       this.$set(this.historyData, this.$route.query.id, hisData)
     }
@@ -167,7 +188,7 @@ export default {
         tabActiveKey: this.tabActiveKey,
         type: this.type,
         isCopy: this.isCopy,
-        id: this.id,
+        id: this.id
       }
       this.$set(this.historyData, this.id, hisData)
     }
@@ -176,7 +197,7 @@ export default {
   beforeRouteEnter(to, from, next) {
     console.log('进入  beforeRouteEnter: to', to.name)
     console.log('进入  beforeRouteEnter: from', from.name)
-    next((vm) => {
+    next(vm => {
       console.log('vm', vm)
       console.log('进入路由之后： ', vm.$route.query.id)
       vm.getRouterHis()
@@ -314,10 +335,10 @@ export default {
             weiTuoFang: '',
             ediAttn: '',
             ediAttnTel: '',
-            ediAttnMail: '',
+            ediAttnMail: ''
           },
           // 分单信息未添加
-          hbList: [],
+          hbList: []
         }
         this.bookingDetails.carrier = this.enmuCarrier(this.type)
       }
@@ -353,9 +374,9 @@ export default {
       this.inPageLoading = true
       // this.$message.loading({ content: '加载中...' });
       BookingOrderGet({
-        id: this.id,
+        id: this.id
       })
-        .then((res) => {
+        .then(res => {
           this.inPageLoading = false
           this.$message.destroy()
           // this.$message.success({ content: '加载完成' })
@@ -368,13 +389,13 @@ export default {
               weiTuoFang: '',
               ediAttn: '',
               ediAttnTel: '',
-              ediAttnMail: '',
+              ediAttnMail: ''
             }
           }
           this.$set(this, 'bookingDetails', res.data)
           this.$forceUpdate()
         })
-        .catch((err) => {
+        .catch(err => {
           console.log(err)
         })
     },
@@ -394,7 +415,7 @@ export default {
       delete _data.hbList
       console.log(JSON.stringify(_data))
       BookingOrderUpdate(_data)
-        .then((res) => {
+        .then(res => {
           if (res.success) {
             this.isCopy = false
             this.isAdd = false
@@ -405,7 +426,7 @@ export default {
             this.$message.error(res.message)
           }
         })
-        .catch((err) => {
+        .catch(err => {
           console.log(err)
         })
     },
@@ -419,21 +440,21 @@ export default {
       const _data = JSON.parse(JSON.stringify(this.bookingDetails))
       delete _data.hbList
       BookingOrderAdd(_data)
-        .then((res) => {
+        .then(res => {
           if (res.success) {
             this.isAdd = false
             this.id = res.data
             this.$message.success('保存成功')
             this.$router.replace({
               name: 'BookingDetail',
-              query: { id: res.data, type: this.bookingDetails.carrierid },
+              query: { id: res.data, type: this.bookingDetails.carrierid }
             })
             this.$forceUpdate()
           } else {
             this.$message.error(res.message)
           }
         })
-        .catch((err) => {
+        .catch(err => {
           console.log(err)
         })
     },
@@ -491,7 +512,7 @@ export default {
     copyBookingFun() {
       this.$router.push({
         name: 'BookingDetail',
-        query: { id: this.id, isCopy: true, type: this.bookingDetails.carrierid },
+        query: { id: this.id, isCopy: true, type: this.bookingDetails.carrierid }
       })
     },
     addSedList() {
@@ -505,10 +526,16 @@ export default {
       this.bookingDetails.hbList = [data]
       this.tabActiveKey = '2'
     }
-  },
+  }
 }
 </script>
 <style lang="less">
+.Showtabs {
+  .ant-tabs-top-bar {
+    display: none;
+  }
+}
+
 .base-tit {
   font-size: 14px;
   font-weight: 600;
@@ -543,7 +570,8 @@ export default {
   margin-bottom: 10px;
   position: relative;
   overflow: hidden;
-  &::after { /* 内容区域空状态时追加骨架屏样式 */
+  &::after {
+    /* 内容区域空状态时追加骨架屏样式 */
     content: '';
     display: block;
     width: 100%;
@@ -552,7 +580,8 @@ export default {
     background: linear-gradient(90deg, transparent, rgba(225, 225, 225, 0.1), transparent);
     animation: loading 1.5s infinite;
   }
-  @keyframes loading{ /* 骨架屏的动画 */
+  @keyframes loading {
+    /* 骨架屏的动画 */
     100% {
       transform: translateX(100%) rotate(45deg);
     }