NEZ-944 fix: table高度修复

2021-08-29 21:35:04 +08:00
parent 295c9366c5
commit dc8d5c2561
14 changed files with 34 additions and 20 deletions
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/nezha-fronted/src/assets/css/common/tableCommon.scss
@@ -1,6 +1,6 @@
 /*列表table通用样式*/
 .list-page {
-  height: calc(100%);
+  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background-color: #f6f6f6;
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -317,7 +317,7 @@ export default {
    background-color: white;
  }
 }
-.sub-container {
+.bottom-data-list .sub-container {
  padding: 10px;
  height: calc(100% - 64px);
  background-color: #f6f6f6;
@@ -326,6 +326,7 @@ export default {
    background-color: white;
  }
  &>.nz-table2 {
+    height: 100%;
    padding-top: 20px !important;
  }
 }
--- a/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue
+++ b/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="bottom-data-list">
    <div class="top-tools top-tools--sub">
      <div class="top-tool-left">
        <div class="sub-list-title">{{bottomHeaderTitle}}：<slot name="title"></slot></div>
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
@@ -24,7 +24,7 @@
          ref="dataTable"
          :api="url"
          :custom-table-title="tools.customTableTitle"
-          :height="mainTableHeight"
+          :height="subTableHeight"
          :now-time="nowTime"
          :table-data="tableData"
          :alertMessageTabNew="true"
--- a/nezha-fronted/src/components/common/bottomBox/tabs/assetSubTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/assetSubTab.vue
@@ -17,7 +17,7 @@
          :api="url"
          v-loading="tools.loading"
          :custom-table-title="tools.customTableTitle"
-          :height="mainTableHeight"
+          :height="subTableHeight"
          :table-data="tableData"
          :assetTab="true"
          @del="del"
--- a/nezha-fronted/src/components/common/bottomBox/tabs/assetTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/assetTab.vue
@@ -17,7 +17,7 @@
          :api="url"
          v-loading="tools.loading"
          :custom-table-title="tools.customTableTitle"
-          :height="mainTableHeight"
+          :height="subTableHeight"
          :table-data="tableData"
          :assetTab="true"
          @del="del"
--- a/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
@@ -17,7 +17,7 @@
          v-loading="tools.loading"
          :api="url"
          :custom-table-title="tools.customTableTitle"
-          :height="mainTableHeight"
+          :height="subTableHeight"
          :table-data="tableData"
          @del="del"
          @copy="copy"
--- a/nezha-fronted/src/components/common/project/topology.scss
+++ b/nezha-fronted/src/components/common/project/topology.scss
@@ -321,6 +321,7 @@

 .project-box {
  width: 100%;
+  height: calc(100% - 8px) !important;
  position: relative;
  border-radius: 2px;
  overflow: visible;
--- a/nezha-fronted/src/components/common/table/nzDataList.vue
+++ b/nezha-fronted/src/components/common/table/nzDataList.vue
@@ -25,7 +25,7 @@
        <div v-if="showLayout.indexOf('clickSearch') > -1" class="search-box">
          <slot name="search"></slot>
        </div>
-        <div v-show="bottomBox.mainResizeShow" class="nz-table2" :style="showLayout.indexOf('clickSearch') > -1 ? `height:${tableBoxHeight}` : ''">
+        <div v-show="bottomBox.mainResizeShow" :style="{ height: nzTableHeight }" class="nz-table2">
          <slot v-bind:mainResizeShow="bottomBox.mainResizeShow"></slot>
        </div>
        <div v-show="bottomBox.mainResizeShow" v-if="showLayout.indexOf('pagination') > -1" class="pagination-bottom">
@@ -91,7 +91,17 @@ export default {
    searchMsg: {
      type: Object
    },
-    tableBoxHeight: {}
+    nzTableHeightOffset: Number
+  },
+  computed: {
+    nzTableHeight () {
+      if (this.nzTableHeightOffset) {
+        if (this.layout.indexOf('clickSearch') > -1) {
+          return `calc(100% - ${this.nzTableHeightOffset}px`
+        }
+      }
+      return ''
+    }
  },
  data () {
    return {
--- a/nezha-fronted/src/components/page/alert/alertMessage.vue
+++ b/nezha-fronted/src/components/page/alert/alertMessage.vue
@@ -128,7 +128,6 @@ export default {
    return {
      stateOptions: alertMessageConstant.states,
      state: '1',
-      mainTableHeight: 'calc(100%- 64px)',
      url: 'alert/message',
      // 导出相关
      importBox: { show: false, title: this.$t('overall.exportExcel') },
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -7,7 +7,7 @@
      :from="fromRoute.asset"
      :layout="dataListLayout"
      :search-msg="searchMsg"
-      :table-box-height="assetTableHeight"
+      :nz-table-height-offset="assetNzTableHeightOffset"
      @search="search"
      @getTableData="getTableData"
    >
@@ -54,7 +54,7 @@
          v-loading="tools.loading"
          :api="url"
          :custom-table-title="tools.customTableTitle"
-          :height="dataListLayout.indexOf('clickSearch') > -1? 'calc(100% - 40px)' : mainTableHeight"
+          :height="mainTableHeight"
          :table-data="tableData"
          @cli="cli"
          @del="del"
@@ -131,7 +131,7 @@ export default {
      },
      silenceBoxShow: false,
      dataListLayout: ['searchInput', 'elementSet', 'clickSearch', 'pagination'],
-      assetTableHeight: `calc(100% - ${48 + 201 + 40}px)`,
+      assetNzTableHeightOffset: 281, // 包含click-search时nz-table的高度
      blankObject: {
        id: '',
        name: '',
--- a/nezha-fronted/src/components/page/config/operationRecord.vue
+++ b/nezha-fronted/src/components/page/config/operationRecord.vue
@@ -57,7 +57,7 @@ export default {
    return {
      url: 'sys/log',
      tableId: 'operationLogTable', // 需要分页的table的id，用于记录每页数量,
-      mainTableHeight: this.$tableHeight.profileNormal,
+      mainTableHeight: this.$tableHeight.profile,
      username: sessionStorage.getItem('nz-username'),
      layout: [],
      searchMsg: { // 给搜索框子组件传递的信息
--- a/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
+++ b/nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
@@ -7,7 +7,7 @@
      :from="fromRoute.endpoint"
      :layout="dataListLayout"
      :search-msg="searchMsg"
-      :table-box-height="endpointTableHeight"
+      :nz-table-height-offset="endpointNzTableHeightOffset"
      @search="search"
      @getTableData="getTableData"
    >
@@ -56,7 +56,7 @@
           v-loading="tools.loading"
          :api="url"
          :custom-table-title="tools.customTableTitle"
-          :height="dataListLayout.indexOf('clickSearch') > -1? 'calc(100% - 8px)' : mainTableHeight"
+          :height="mainTableHeight"
          :table-data="tableData"
          :tableId="tableId"
          @del="del"
@@ -297,7 +297,7 @@ export default {
          showMore: false,
          width: 0,
          index: -1
-        },
+        }
        // type: {
        //   label: 'Type',
        //   key: 'type',
@@ -315,7 +315,8 @@ export default {
        state: [],
        type: []
      },
-      searchCheckBox: {}
+      searchCheckBox: {},
+      endpointNzTableHeightOffset: 204
    }
  },
  methods: {
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -69,10 +69,12 @@ Vue.prototype.$chartResizeTool = chartResizeTool
 Vue.prototype.$tableSet = tableSet
 Vue.prototype.$tableHeight = { // 列表页表格的高度
  normal: 'calc(100% - 48px)', // 常规高度，特例在下方定义
-  profileNormal: 'calc(100% - 78px)', // 常规高度，特例在下方定义
+  assetList: 'calc(100% - 57px)',
+  profile: 'calc(100% - 78px)',
  openSubList: { // 打开二级列表后的高度
    mainList: 'calc(100% - 60px)',
-    subList: 'calc(100% - 38px)',
+    subList: 'calc(100% - 25px)',
+    subListFromAsset: 'calc(100% - 45px)',
    toTopBtnTop: 'calc(50% - 11px)'
  },
  toTopBtnTop: 'calc(100% - 73px)',