Merge branch 'dev-3.7' of git.mesalab.cn:nezha/nezha-fronted into dev-3.7rel-23.04.08

3 files changed, 65 insertions, 19 deletions

diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss
index 24f73b1fe..163de63a5 100644
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/nezha-fronted/src/assets/css/common/tableCommon.scss
@@ -152,10 +152,19 @@
     background-color: $--background-color-empty;
     padding: 0 70px 0 15px;
     height: 44px;
+    width: 100%;
+    box-sizing: border-box;
   }
   .top-tools--sub {
+    flex-direction: row-reverse;
+    overflow: hidden;
     .top-tool-left {
       height: 100%;
+      width: 0; // 避免计算错误
+      flex: 1;
+      display: block;
+      text-align: left;
+      flex-direction: row;
     }
     .sub-list-title {
       width: 200px;
@@ -165,12 +174,18 @@
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
+      flex-shrink: 0;
+      display: inline-block;
     }
     .sub-list-tabs {
       height: 100%;
-      display: flex;
+      flex: 1;
+      width: calc(100% - 220px);
+      min-width: 120px;
+      margin: 0 10px 0 0;
+      display: inline-block;
+      overflow: hidden;
       align-items: center;
-
       .sub-list-tab {
         height: 100%;
         width: 120px;
@@ -185,7 +200,28 @@
           color: $--color-primary;
         }
       }
-
+      .sub-list-tabs-nz-tabs {
+        .el-tabs__header{
+          margin: 0;
+          transform: translateY(3px);
+          .el-tabs__item {
+            height: 100%;
+            width: 120px;
+            font-size: 14px;
+            text-align: center;
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+            line-height: 40px;
+            cursor: pointer;
+          }
+        }
+        .el-tabs__nav-wrap::after{
+          display: none;
+        }
+        .el-tabs__active-bar {
+          transition: none;
+        }
+      }
     }
   }
   /* 上滑resize工具条 */
diff --git a/nezha-fronted/src/assets/css/index.scss b/nezha-fronted/src/assets/css/index.scss
index f712d8e07..66364822c 100644
--- a/nezha-fronted/src/assets/css/index.scss
+++ b/nezha-fronted/src/assets/css/index.scss
@@ -13,7 +13,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts'; // 避免ele原字体加载�
 }
 body {
   height: 100%;
-  min-width: 1400px;
+  min-width: 1024px;
   margin:0 !important;
   padding: 0 !important;
   cursor: default;
diff --git a/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue b/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue
index 9ff6cff3b..bef6a5531 100644
--- a/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue
+++ b/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue
@@ -1,11 +1,8 @@
 <template>
   <div class="bottom-data-list">
     <div class="top-tools top-tools--sub">
-      <div class="top-tool-left">
-        <div class="sub-list-title" v-if="showTitle">{{bottomHeaderTitle}}：<slot name="title"></slot></div>
-        <div class="sub-list-tabs">
-          <div v-for="tab in tabs" :key="tab.prop" :class="{'sub-list-tab--active': tab.active || tab.prop == targetTab }" :title='tab.name' class="sub-list-tab" @click="changeTab(tab.prop)">{{tab.name}}</div>
-        </div>
+      <div v-if="customTool" class="top-tool-right">
+        <slot name="top-tool-right"></slot>
       </div>
       <div class="top-tool-right" v-if="!customTool">
         <div v-if="layout.indexOf('searchInput') > -1" class="top-tool-search margin-r-20">
@@ -17,8 +14,14 @@
           <i class="nz-icon-gear nz-icon"></i>
         </button>
       </div>
-      <div v-else class="top-tool-right">
-        <slot name="top-tool-right"></slot>
+      <div class="top-tool-left">
+        <div class="sub-list-title" v-if="showTitle">{{bottomHeaderTitle}}：<slot name="title"></slot></div>
+        <div class="sub-list-tabs">
+          <!--          <div v-for="tab in tabs" :key="tab.prop" :class="{'sub-list-tab&#45;&#45;active': tab.active || tab.prop == targetTab }" :title='tab.name' class="sub-list-tab" @click="changeTab(tab.prop)">{{tab.name}}</div>-->
+          <el-tabs v-model="activeTargetTab" @tab-click="changeTab" class="sub-list-tabs-nz-tabs">
+            <el-tab-pane v-for="tab in tabs" :label="tab.name" :name="tab.prop" :key="tab.prop"  class="sub-list-tab"></el-tab-pane>
+          </el-tabs>
+        </div>
       </div>
     </div>
     <!-- 自定义table列 -->
@@ -126,7 +129,8 @@ export default {
         toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
         tableHover: false, // 控制滚动条和top按钮同时出现
         showCustomTableTitle: false // 自定义列弹框是否显示
-      }
+      },
+      activeTargetTab: ''
     }
   },
   watch: {
@@ -136,11 +140,16 @@ export default {
         this.searchInputShow = true
       }, 100)
     },
-    targetTab (n) {
-      this.searchInputShow = false
-      setTimeout(() => {
-        this.searchInputShow = true
-      }, 100)
+    targetTab: {
+      immediate: true,
+      handler (n) {
+        this.searchInputShow = false
+        this.activeTargetTab = n
+        console.log(n)
+        setTimeout(() => {
+          this.searchInputShow = true
+        }, 100)
+      }
     },
     showDeleteTableRel (n) {
       if (!n) {
@@ -156,8 +165,9 @@ export default {
       this.$emit('search', searchObj)
     },
     // 切换tab
-    changeTab (tab) {
-      this.$emit('changeTab', tab)
+    changeTab (tab, event) {
+      console.log(tab, event)
+      this.$emit('changeTab', tab.name)
     }
   }
 }