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

2020-03-18 16:00:06 +08:00
parent bb6d0abbc5
commit 5a96925c8b
4 changed files with 54 additions and 18 deletions
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/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;
--- a/nezha-fronted/src/components/common/pagination.vue
+++ b/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>
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/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 = [];
--- a/nezha-fronted/src/main.js
+++ b/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按钮公共方法