perf: 调整二级列表打开时工具栏和翻页的样式/位置

nezha-fronted/src/assets/stylus/main.scss

@@ -1240,6 +1240,16 @@ li{
 .top-tools input, .sub-top-tools input {
   background-color: $content-right-background-color;
 }
+.top-tool-setting-btn {
+  width: 28px;
+  background-image: linear-gradient(#f8f8f8, #e6e6e6);
+  border: none;
+  height: 30px;
+  border-right: 1px solid #d4d4d4;
+  border-left: 1px solid #d4d4d4;
+  cursor: pointer;
+  outline: none;
+}
 .query-input-active .el-input__inner, .query-input-inactive .el-input__inner {
   height: 25px;
   line-height: 25px !important;

nezha-fronted/src/components/common/pagination.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pagination">
+  <div class="pagination" :class="{'is-sub-list': isSubList}">
     <el-pagination
       ref="page"
       @size-change="size"
@@ -9,7 +9,7 @@
       :current-page="pageObj.pageNo"
       :page-sizes="pageSizes?pageSizes:[20, 50, 100]"
       :page-size="pageSize"
-      layout="total, prev, pager, next,slot,jumper"
+      :layout="isSubList ? 'prev, pager, next' : 'total, prev, pager, next, slot, jumper'"
       :total="this.pageObj.total"
     >
       <el-select v-model="pageSize" :placeholder="pageSize+$t('pageSize')" size="mini"  :popper-append-to-body="false" class="pagination-size-select" @change="size">
@@ -23,7 +23,7 @@
 <script>
 export default {
   name: "pagination",
-  props: ['pageObj', 'tableId','postPageSizes'],
+  props: ['pageObj', 'tableId', 'postPageSizes', 'isSubList'],
   data() {
     return {
       pageSize: 20,
@@ -117,7 +117,7 @@ export default {
     text-align: center;
     max-height: 42px;
   }
-  .pagination .el-popper[x-placement^=bottom] .popper__arrow {
+  /*.pagination .el-popper[x-placement^=bottom] .popper__arrow {
     bottom: -6px;
     margin-right: 3px;
     border-top-color: #fff;
@@ -133,7 +133,7 @@ export default {
   }
   .pagination .el-popper {
     top: -135px !important;
-  }
+  }*/
   .pagination .el-pagination {
     max-height: 42px;
   }
@@ -205,4 +205,8 @@ export default {
   .el-pagination__sizes .el-input .el-input__inner:hover{
     border-color: rgba(154,154,154,0.20);
   }
+  .pagination.is-sub-list {
+    margin-top: -4px !important;
+    padding-top: 0;
+  }
 </style>

nezha-fronted/src/components/page/project/project.vue

@@ -105,14 +105,9 @@
     <div class="content-right">
       <!-- 主列表 -->
       <div class="main-list" :class="{'main-list-with-sub': tableShow == 3}">
-        <div class="top-tools" v-show="mainResizeShow">
+        <!-- 一般状态的工具栏 -->
+        <div class="top-tools" v-show="tableShow == 1">
           <div class="nz-tab">
-  <!--          <div class="nz-tab-item-box">-->
-  <!--            <div class="nz-tab-item nz-tab-item-active">{{$t('project.endpoint.endpoint')}}</div>-->
-  <!--          </div>-->
-  <!--          <div class="nz-tab-item-box" @click="tableShow = 2">-->
-  <!--            <div class="nz-tab-item">{{$t('project.metrics.metrics')}}</div>-->
-  <!--          </div>-->
           </div>
           <div>
             <export-excel
@@ -125,17 +120,36 @@
                 <i class="nz-icon nz-icon-create-square" @click.stop="toCreateEndpoint" :title="$t('overall.createProject')" ></i>
               </template>
             </export-excel>
-  <!--          <button @click="toCreateEndpoint" :title="$t('overall.createProject')"  class="nz-btn nz-btn-size-normal nz-btn-style-light float-right " id="project-add-ep">-->
-  <!--            <i class="nz-icon-create-square nz-icon"></i>-->
-  <!--          </button>-->
             <div class="top-tool-search float-right margin-r-20"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div>
           </div>
         </div>
+        <!-- 浏览副列表时的工具栏 -->
+        <div class="top-tools" v-show="tableShow == 3 && mainResizeShow">
+          <div>
+            <export-excel
+              export-file-name="endpoint"
+              export-url="/endpoint/export"
+              :params="endpointSearchLabel"
+              @afterImport="getEndpointTableData"
+              class="float-left margin-l-5">
+              <template slot="optionZone">
+                <i class="nz-icon nz-icon-create-square" @click.stop="toCreateEndpoint" :title="$t('overall.createProject')" ></i>
+              </template>
+            </export-excel>
+            <div class="top-tool-search float-right margin-l-20"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div>
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center">
+            <Pagination :isSubList="true" :tableId="tableId" v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination2"></Pagination>
+            <span class="nz-table-gear" @click.stop="elementsetShow('shezhi',$event)">
+              <button class="top-tool-setting-btn"><i class="nz-icon nz-icon-gear"></i></button>
+            </span>
+          </div>
+        </div>
         <el-table
           :data="endpointTableData"
           border
           class="nz-table endpoint-table"
-          :height="$tableHeight.normal"
+          :height="mainTableHeight"
           v-scrollBar:el-table
           v-show="mainResizeShow"
           ref="endpointTable"
@@ -176,7 +190,7 @@
               <template v-else>-</template>
             </template>
           </el-table-column>
-          <el-table-column width="28">
+          <el-table-column width="28" v-if="tableShow == 1">
             <template slot="header" slot-scope="scope">
               <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
                 <i class="nz-icon nz-icon-gear"></i>
@@ -184,7 +198,7 @@
             </template>
           </el-table-column>
         </el-table>
-        <Pagination v-show="mainResizeShow" :tableId="tableId" v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
+        <Pagination v-show="tableShow == 1" :tableId="tableId" v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
         <button class="to-top" v-show="showTopBtn1" @click="toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
       </div>
 
@@ -365,6 +379,8 @@
     data() {
       let temp=this;
       return {
+        mainTableHeight: this.$tableHeight.normal, //主列表table高度
+        subTableHeight: this.$tableHeight.normal, //副列表table高度
         isFullScreen: false, //是否是全屏，用来控制拖动条是否展示
         tableId: 'projectTable', //需要分页的table的id，用于记录每页数量
         mainResizeShow: true, //dom高度改变时部分内容是否展示
@@ -1225,6 +1241,7 @@
       },
       showEndpoint:function(endpoint){
         this.tableShow=3;
+        this.mainTableHeight = this.$tableHeight.openSubList.mainList;
         this.queryEdpLoading=true;
         setTimeout(() => {
           if(endpoint){
@@ -1330,6 +1347,7 @@
       },
       backToEdpTab:function(){
         this.tableShow=1;
+        this.mainTableHeight = this.$tableHeight.normal;
         this.isFullScreen = false;
         this.selectedEndpoints=[];
         this.showTableData = [];

nezha-fronted/src/main.js

@@ -64,6 +64,10 @@ Vue.prototype.$put = put;
 Vue.prototype.$delete = del;
 Vue.prototype.$tableHeight = { //列表页表格的高度
   normal: 'calc(100% - 100px)',  //常规高度，特例在下方定义
+  openSubList: { //打开二级列表后的高度
+    mainList: 'calc(100% - 60px)',
+    subList: ''
+  },
   endpointQuery: 'calc(100% - 60px)', //特例：endpoint query页，没有翻页组件
 };
 Vue.prototype.toTop = (type, wrap) => { //top按钮公共方法