perf: 上滑二级列表样式调整

nezha-fronted/src/assets/css/common/tableCommon.scss

@@ -1,15 +1,24 @@
 /*列表table通用样式*/
 .list-page {
-  background-color: white;
+  background-color: #f6f6f6;
   height: 100%;
 
   .main-list {
+    background-color: white;
     position: relative;
     display: flex;
     flex-direction: column;
     height: 100%;
     z-index: 0;
   }
+  .main-container {
+    padding: 10px;
+    height: 100%;
+    background-color: #f6f6f6;
+    &>div {
+      background-color: white;
+    }
+  }
   .main-list.main-list-with-sub {
     height: 50%;
   }
@@ -27,10 +36,19 @@
     justify-content: space-between;
     padding: 14px 20px;
 
-    .top-tool-main-right {
+    &.top-tools--sub {
+      align-items: center;
+      padding: 0 70px 0 15px;
+      height: 44px;
+      background-color: white;
+      border: 1px solid #E6EAED;
+      box-sizing: border-box;
+    }
+
+    .top-tool-right {
       display: flex;
     }
-    .top-tool-main-left {
+    .top-tool-left {
       display: flex;
     }
     .top-tool-btn-group {
@@ -80,13 +98,87 @@
       position: relative;
     }
   }
+  .top-tools--sub {
+    .top-tool-left {
+      height: 100%;
+    }
+    .sub-list-title {
+      width: 200px;
+      line-height: 40px;
+      font-size: 16px;
+      color: #202F3F;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    .sub-list-tabs {
+      height: 100%;
+      display: flex;
+      align-items: center;
 
+      .sub-list-tab {
+        height: 100%;
+        width: 120px;
+        color: #666666;
+        font-size: 14px;
+        text-align: center;
+        box-sizing: border-box;
+        line-height: 40px;
+
+        &.sub-list-tab--active {
+          border-bottom: 2px solid $--theme-color;
+          color: #FA901C;
+        }
+      }
+
+    }
+  }
+  /* 上滑resize工具条 */
+  .sub-list-resize, .sub-list-resize-copy {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 9px;
+    width: 100%;
+    box-shadow: inset 0 1px 0 0 #BEBEBE;
+    background-color: #e6eaed;
+    position: absolute;
+    z-index: 1;
+    box-sizing: border-box;
+    user-select: none;
+    color: #5f6368;
+    cursor: ns-resize;
+  }
+  .sub-list-window-control {
+    display: flex;
+    align-items: center;
+    margin-left: 14px;
+    position: absolute;
+    right: 0;
+    height: 44px;
+    z-index: 2;
+
+    .window-control-btn {
+      cursor: pointer;
+      margin-right: 20px;
+    }
+    .window-control-btn>i {
+      color: #999999;
+      font-size: 14px;
+      transition: all .2s;
+    }
+    .window-control-btn>i:hover {
+      color: $--theme-color;
+    }
+  }
+  /* 上滑resize工具条--end */
   .nz-table2 {
     position: relative;
     padding: 0 20px;
     width: 100%;
     box-sizing: border-box;
     flex: auto;
+    height: calc(100% - 58px);
 
     .el-table {
       position: absolute;
@@ -224,9 +316,9 @@
   /* end--覆盖el-table边框、gutter等样式 */
   .pagination-bottom {
     position: absolute;
-    bottom: 0;
+    bottom: 8px;
     height: 48px;
-    width: 100%;
+    width: calc(100% - 20px);
   }
 }
 .operation-dropdown-text {

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

@@ -523,42 +523,6 @@ li{
 }
 /* end--nz-tab组件*/
 
-/* begin--二级页面tab*/
-.sub-list-tabs {
-  margin-top: 0 !important;
-  position: relative;
-  height: 100%;
-  background-color: #f5f7fa;
-}
-.sub-list-tab {
-  width: 100px;
-  font-size: 14px;
-  color: #909399;
-  height: calc(100% - 2px);
-  padding-left: 20px;
-  line-height: 27px;
-  display: inline-block;
-  cursor: pointer;
-}
-.sub-list-tab:hover {
-  color: $global-text-color-active;
-}
-.sub-list-tab-active {
-  color: $global-text-color-active;
-  background-color: white;
-  border-top: solid 2px $global-text-color-active;
-}
-.sub-list-tab-title {
-  font-size: 14px;
-  color: #666666;
-  padding: 0 8px;
-  height: 100%;
-  display: inline-block;
-  background-color: #eeeeee;
-  line-height: 30px;
-}
-/* end--二级页面tab*/
-
 /* end--通用*/
 
 /* begin--左侧列表*/
@@ -738,123 +702,6 @@ li{
 }*/
 /* end--顶部工具栏*/
 
-/* begin--二级顶部工具栏*/
-.sub-top-tools {
-  display: flex;
-  height: 32px;
-  align-items: center;
-  justify-content: space-between;
-  border-top: 1px solid #DCDFE6;
-  border-bottom: 1px solid #E4E7ED;
-  margin: 0 -6px;
-  padding-right: 80px;
-  background-color: $content-right-background-color;
-  margin-bottom: 10px;
-}
-.sub-top-tools>div {
-  margin-top: 2px;
-}
-.sub-top-tools .top-tool-search {
-  width: 260px;
-  margin: -1px 0 0 0;
-  .select_input input {
-    background-color: white;
-  }
-}
-.sub-top-tools .top-tool-btn-txt .nz-icon{
-  display: inline-block;
-  font-size: 12px;
-  margin-right: 6px;
-}
-.sub-top-tool-right {
-  display: flex;
-  align-content: center;
-}
-.has-sub-popper {
-  color: $danger-color;
-}
-.sub-box {
-  height: 50%;
-  position: relative;
-}
-.sub-list {
-  height: calc(100% - 9px);
-  position: absolute;
-  width: 100%;
-  z-index: 1;
-  top: 9px;
-}
-.main-and-sub-transition {
-  transition: .4s height;
-}
-
-.resize-modal {
-  width: 100%;
-  opacity: 0.6;
-  background-color: #f5f9ff;
-  border: 1px solid #a7d0f7;
-  box-sizing: border-box;
-  position: fixed;
-  margin: 0 -6px;
-  cursor: ns-resize;
-  display: none;
-  z-index: 20;
-  vertical-align: bottom;
-  bottom: 0;
-}
-.sub-list-resize, .sub-list-resize-copy {
-  border-top: 1px solid #aaa;
-  background-color: #eaeaea;
-  height: 9px;
-  margin-left: -6px;
-  width: calc(100% + 12px);
-  position: absolute;
-  z-index: 1;
-  box-sizing: border-box;
-  user-select: none;
-  color: #5f6368;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: ns-resize;
-}
-.sub-list-resize-copy {
-  border-top: 1px solid #a7d0f7;
-  margin-left: 0;
-  width: calc(100% - 198px);
-}
-.sub-list-window-control {
-  display: flex;
-  align-items: center;
-  margin-left: 14px;
-  position: absolute;
-  right: 0;
-  top: 5px;
-  z-index: 2;
-}
-.window-control-btn {
-  cursor: pointer;
-  width: 29px;
-  text-align: center;
-}
-.window-control-btn>i {
-  color: #909399;
-  font-size: 19px;
-}
-.window-control-btn>i:hover {
-  color: $global-text-color-active;
-}
-.pagination-top {
-  transition: .2s transform;
-}
-.pagination-top-show {
-  transform: translateX(0);
-}
-.pagination-top-hide {
-  transform: translateX(150%);
-}
-/* end--二级顶部工具栏*/
-
 /* start--内容*/
 .nz-table {
   border: none;

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

@@ -11,34 +11,36 @@
         <!--退出全屏-->
         <div class="window-control-btn" v-if="isFullScreen" @click="exitFullScreen" :id="from+'-bottom-exit-full'"><i class="nz-icon nz-icon-exit-full-screen" ></i></div>
         <!--全屏-->
-        <div class="window-control-btn" v-if="!isFullScreen" @click="fullScreen" :id="from+'-bottom-full'"><i class="el-icon-full-screen"></i></div>
+        <div v-if="!isFullScreen" :id="from+'-bottom-full'" class="window-control-btn" @click="fullScreen"><i class="nz-icon nz-icon-full-screen"></i></div>
         <!--关闭-->
         <div class="window-control-btn" @click="closeSubList" :id="from+'-bottom-close'"><i class="nz-icon nz-icon-close"></i></div>
       </div>
 
-    <!------TAB区------>
+      <!------TAB区------>
-      <!--机柜-->
+      <div class="sub-list__tabs">
-      <cabinet-tab v-if="from === fromRoute.dc && targetTab === 'cabinet'" v-show="subResizeShow" :obj="obj" @changeTab="changeTab"></cabinet-tab>
+        <!--机柜-->
-      <!--告警信息-->
+        <cabinet-tab v-if="from === fromRoute.dc && targetTab === 'cabinet'" v-show="subResizeShow" :obj="obj" @changeTab="changeTab"></cabinet-tab>
-      <alert-message-tab v-if="((from === fromRoute.rule || from === fromRoute.asset || from === fromRoute.endpoint) && targetTab === 'alertMessage')" v-show="subResizeShow" :from="from" :obj="obj" @changeTab="changeTab"></alert-message-tab>
+        <!--告警信息-->
-      <!--asset页的endpoint列表-->
+        <alert-message-tab v-if="((from === fromRoute.rule || from === fromRoute.asset || from === fromRoute.endpoint) && targetTab === 'alertMessage')" v-show="subResizeShow" :from="from" :obj="obj" @changeTab="changeTab"></alert-message-tab>
-      <endpoint-tab v-if="from === fromRoute.asset && targetTab === fromRoute.endpoint" v-show="subResizeShow" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-tab>
+        <!--asset页的endpoint列表-->
-      <!--endpoint-query-->
+        <endpoint-tab v-if="from === fromRoute.asset && targetTab === fromRoute.endpoint" v-show="subResizeShow" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-tab>
-      <endpoint-query-tab v-if="(from === fromRoute.endpoint && targetTab === 'endpointQuery')" v-show="subResizeShow" ref="endpointQuery" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-query-tab>
+        <!--endpoint-query-->
+        <endpoint-query-tab v-if="(from === fromRoute.endpoint && targetTab === 'endpointQuery')" v-show="subResizeShow" ref="endpointQuery" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-query-tab>
 
-      <!-- model-panel/asset-detail/project-overview的panel-->
+        <!-- model-panel/asset-detail/project-overview的panel-->
-      <panel-tab v-if="(from === fromRoute.model || from === fromRoute.asset || from === fromRoute.project || from === fromRoute.rule || from === fromRoute.endpoint) && targetTab === 'panel'" v-show="subResizeShow" ref="panelTab" :from="from" :obj="obj"
+        <panel-tab v-if="(from === fromRoute.model || from === fromRoute.asset || from === fromRoute.project || from === fromRoute.rule || from === fromRoute.endpoint) && targetTab === 'panel'" v-show="subResizeShow" ref="panelTab" :detail="detail" :from="from"
-                 @changeTab="changeTab" :targetTab.sync="targetTab" :detail="detail"></panel-tab>
+                   :obj="obj" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab>
 
-      <!--terminal-log的记录和回放-->
+        <!--terminal-log的记录和回放-->
-      <terminal-log-cmd-tab v-if="from === fromRoute.terminalLog && targetTab === 'cmd'" ref="reminalLogCMDTab" :from="from" :obj="obj" @changeTab="changeTab"></terminal-log-cmd-tab>
+        <terminal-log-cmd-tab v-if="from === fromRoute.terminalLog && targetTab === 'cmd'" ref="reminalLogCMDTab" :from="from" :obj="obj" @changeTab="changeTab"></terminal-log-cmd-tab>
-      <terminal-log-record-tab v-if="from === fromRoute.terminalLog && targetTab === 'record'" ref="reminalLogRecordTab" :from="from" :obj="obj" @changeTab="changeTab"></terminal-log-record-tab>
+        <terminal-log-record-tab v-if="from === fromRoute.terminalLog && targetTab === 'record'" ref="reminalLogRecordTab" :from="from" :obj="obj" @changeTab="changeTab"></terminal-log-record-tab>
 
-      <terminal-log-monitor-tab v-if="from === fromRoute.terminalLog && targetTab === 'monitor'" ref="reminalLogRecordTab" :from="from" :obj="obj" @changeTab="changeTab" @exit="closeSubList"></terminal-log-monitor-tab>
+        <terminal-log-monitor-tab v-if="from === fromRoute.terminalLog && targetTab === 'monitor'" ref="reminalLogRecordTab" :from="from" :obj="obj" @changeTab="changeTab" @exit="closeSubList"></terminal-log-monitor-tab>
 
-      <!--user列表的两个日志-->
+        <!--user列表的两个日志-->
-      <operation-log-tab v-if="from === fromRoute.user && targetTab === 'operationLogTab'" :from="from" :obj="obj" @changeTab="changeTab"></operation-log-tab>
+        <operation-log-tab v-if="from === fromRoute.user && targetTab === 'operationLogTab'" :from="from" :obj="obj" :tabs="tabs.user.operationLog" @changeTab="changeTab"></operation-log-tab>
-      <terminal-log-tab v-if="from === fromRoute.user && targetTab === 'terminalLogTab'" :from="from" :obj="obj" @changeTab="changeTab"></terminal-log-tab>
+        <terminal-log-tab v-if="from === fromRoute.user && targetTab === 'terminalLogTab'" :from="from" :obj="obj" :tabs="tabs.user.terminalLog" @changeTab="changeTab"></terminal-log-tab>
+      </div>
     </div>
   </div>
 </template>
@@ -84,7 +86,19 @@ export default {
   },
   data () {
     return {
-      fromRoute: fromRoute
+      fromRoute: fromRoute,
+      tabs: {
+        user: {
+          operationLog: [
+            { prop: 'operationLogTab', name: this.$t('config.operationlog.operationlog'), active: true },
+            { prop: 'terminalLogTab', name: this.$t('config.terminallog.terminallog'), active: false }
+          ],
+          terminalLog: [
+            { prop: 'operationLogTab', name: this.$t('config.operationlog.operationlog'), active: false },
+            { prop: 'terminalLogTab', name: this.$t('config.terminallog.terminallog'), active: true }
+          ]
+        }
+      }
     }
   },
   methods: {

nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue

@@ -0,0 +1,187 @@
+<template>
+  <div>
+    <div class="top-tools top-tools--sub">
+      <div class="top-tool-left">
+        <div class="sub-list-title">Name：<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}" class="sub-list-tab" @click="changeTab(tab.prop)">{{tab.name}}</div>
+        </div>
+      </div>
+      <div class="top-tool-right">
+        <div v-if="layout.indexOf('searchInput') > -1" class="top-tool-search margin-r-20">
+          <search-input :searchMsg="searchMsg" position="endpoint-bottom" @search="search"></search-input>
+        </div>
+        <slot name="top-tool-right"></slot>
+        <button v-if="layout.indexOf('elementSet') > -1" id="account-column-setting" class="top-tool-btn margin-r-20"
+                type="button" @click="tools.showCustomTableTitle = true">
+          <i class="nz-icon-gear nz-icon"></i>
+        </button>
+      </div>
+    </div>
+    <!-- 自定义table列 -->
+    <transition name="el-zoom-in-top">
+      <element-set
+        v-if="tools.showCustomTableTitle"
+        ref="customTableTitle"
+        :custom-table-title="customTableTitle"
+        :original-table-title="tableTitle"
+        :tableId="tableId"
+        @close="tools.showCustomTableTitle = false"
+        @update="updateCustomTableTitle"
+      ></element-set>
+    </transition>
+    <div class="sub-container">
+      <div class="nz-table2">
+        <slot></slot>
+      </div>
+      <div class="pagination-bottom">
+        <slot name="pagination"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'nzBottomDataList',
+  props: {
+    from: {
+      type: String,
+      default: ''
+    },
+    tableTitle: {
+      type: Array
+    },
+    customTableTitle: {
+      type: Array
+    },
+    layout: {
+      type: Array,
+      default () { return [] }
+    },
+    searchMsg: {
+      type: Object
+    },
+    tableId: {
+      type: String,
+      default: ''
+    },
+    tabs: {
+      type: Array
+    }
+  },
+  data () {
+    return {
+      tools: {
+        toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
+        tableHover: false, // 控制滚动条和top按钮同时出现
+        showCustomTableTitle: false // 自定义列弹框是否显示
+      }
+    }
+  },
+  methods: {
+    updateCustomTableTitle (custom) {
+      this.$emit('update:customTableTitle', custom)
+    },
+    search (searchObj) {
+      this.$emit('search', searchObj)
+    },
+    // 切换tab
+    changeTab (tab) {
+      this.$emit('changeTab', tab)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import '@/assets/css/common/tableCommon.scss';
+/* begin--二级顶部工具栏*/
+.sub-top-tools {
+  display: flex;
+  height: 32px;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid #DCDFE6;
+  border-bottom: 1px solid #E4E7ED;
+  margin: 0 -6px;
+  padding-right: 80px;
+  background-color: $content-right-background-color;
+  margin-bottom: 10px;
+}
+.sub-top-tools>div {
+  margin-top: 2px;
+}
+.sub-top-tools .top-tool-search {
+  width: 260px;
+  margin: -1px 0 0 0;
+  .select_input input {
+    background-color: white;
+  }
+}
+.sub-container {
+  padding: 10px;
+  height: 100%;
+  background-color: #f6f6f6;
+  &>div {
+    background-color: white;
+  }
+}
+.sub-top-tools .top-tool-btn-txt .nz-icon{
+  display: inline-block;
+  font-size: 12px;
+  margin-right: 6px;
+}
+.sub-top-tool-right {
+  display: flex;
+  align-content: center;
+}
+.has-sub-popper {
+  color: $danger-color;
+}
+.sub-box {
+  height: 50%;
+  position: relative;
+}
+.sub-list {
+  height: calc(100% - 9px);
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+  top: 9px;
+
+  .sub-list__tabs {
+    height: 100%;
+    background-color: white;
+
+    &>div {
+      height: 100%;
+      background-color: #f6f6f6;
+
+      .nz-table2 {
+        height: calc(100% - 92px);
+        padding: 20px 20px 0;
+      }
+    }
+  }
+}
+.main-and-sub-transition {
+  transition: .4s height;
+}
+
+.resize-modal {
+  width: calc(100% - 240px);
+  opacity: 0.6;
+  background-color: #f5f9ff;
+  border: 1px solid #a7d0f7;
+  box-sizing: border-box;
+  position: fixed;
+  cursor: ns-resize;
+  display: none;
+  z-index: 20;
+  vertical-align: bottom;
+  bottom: 0;
+}
+
+/* end--二级顶部工具栏*/
+</style>

nezha-fronted/src/components/common/bottomBox/tabs/operationLogTab.vue

@@ -1,39 +1,43 @@
 <template>
-  <div style="height: 100%">
+  <nz-bottom-data-list
-    <div class="sub-top-tools">
+    :api="url"
-      <div class="sub-list-tabs">
+    :custom-table-title.sync="tools.customTableTitle"
-        <div class="sub-list-tab-title">{{obj.id}}</div><div
+    :layout="['searchInput', 'elementSet']"
-        id="endpoint-tab-change-panel" class="sub-list-tab sub-list-tab-active">{{$t("config.operationlog.operationlog")}}</div><div
+    :search-msg="searchMsg"
-        id="endpoint-tab-change-alertmsg" class="sub-list-tab" @click="changeTab('terminalLogTab')">{{$t("config.terminallog.terminallog")}}</div>
+    :tabs="tabs"
-      </div>
+    @changeTab="changeTab"
-      <div class="top-tool-right">
+  >
-        <div class="top-tool-search">
+    <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
-          <search-input :searchMsg="searchMsg" position="endpoint-bottom" @search="search"></search-input>
+    <template v-slot>
-        </div>
+      <operation-log-table
-      </div>
+        ref="dataTable"
-    </div>
+        v-loading="tools.loading"
-    <operation-log-table
+        :api="url"
-      ref="dataTable"
+        :custom-table-title="tools.customTableTitle"
-      v-loading="tools.loading"
+        :height="subTableHeight"
-      :api="url"
+        :table-data="tableData"
-      :custom-table-title="tools.customTableTitle"
+        @del="del"
-      :height="mainTableHeight"
+        @edit="edit"
-      :table-data="tableData"
+        @orderBy="tableDataSort"
-      @del="del"
+        @reload="getTableData"
-      @edit="edit"
+        @selectionChange="selectionChange"></operation-log-table>
-      @orderBy="tableDataSort"
+    </template>
-      @reload="getTableData"
+    <template v-slot:pagination>
-      @selectionChange="selectionChange"></operation-log-table>
+      <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
-  </div>
+    </template>
+  </nz-bottom-data-list>
 </template>
 
 <script>
 import dataListMixin from '@/components/common/mixin/dataList'
+import subDataListMixin from '@/components/common/mixin/subDataList'
+import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
 import operationLogTable from '@/components/common/table/settings/operationLogTable'
 export default {
   name: 'operationLogTab',
-  mixins: [dataListMixin],
+  mixins: [dataListMixin, subDataListMixin],
   components: {
+    nzBottomDataList,
     operationLogTable
   },
   data () {
@@ -66,14 +70,7 @@ export default {
       }
     }
   },
-  props: {
-    obj: Object // 关联的实体对象
-  },
   methods: {
-    // 切换tab
-    changeTab (tab) {
-      this.$emit('changeTab', tab)
-    },
     messageStyle (e) {
       if (e.column.label === this.$t('config.operationlog.state')) {
         if (e.row.state === 'success') {
@@ -101,15 +98,6 @@ export default {
           }
         }
       })
-    },
-    formatUsername (row) {
-      if (row.username) {
-        return row.username
-      } else if (row.operation === 'login' && !row.username) { // 如果是登录 且登录失败
-        return JSON.parse(row.params).username
-      } else {
-        return '-'
-      }
     }
   }
 }

nezha-fronted/src/components/common/bottomBox/tabs/terminalLogTab.vue

@@ -1,177 +1,51 @@
 <template>
-  <div style="height: 100%">
+  <nz-bottom-data-list
-    <div class="sub-top-tools">
+    :api="url"
-      <div class="sub-list-tabs">
+    :custom-table-title.sync="tools.customTableTitle"
-        <div class="sub-list-tab-title">{{obj.id}}</div><div
+    :layout="['searchInput', 'elementSet']"
-        id="endpoint-tab-change-panel" class="sub-list-tab" @click="changeTab('operationLogTab')">{{$t("config.operationlog.operationlog")}}</div><div
+    :search-msg="searchMsg"
-        id="endpoint-tab-change-alertmsg" class="sub-list-tab sub-list-tab-active">{{$t("config.terminallog.terminallog")}}</div>
+    :tabs="tabs"
-      </div>
+    @changeTab="changeTab"
-      <div class="top-tool-right">
+  >
-        <div class="top-tool-search">
+    <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
-          <search-input :searchMsg="searchMsg" position="endpoint-bottom" @search="search"></search-input>
+    <template v-slot>
-        </div>
+      <terminal-log-table
-      </div>
+        ref="dataTable"
-    </div>
+        v-loading="tools.loading"
-    <el-table
+        :api="url"
-      id="terminal-log-list-table"
+        :custom-table-title="tools.customTableTitle"
-      ref="dataTable"
+        :height="subTableHeight"
-      v-loading="tools.loading"
+        :now-time="nowTime"
-      :data="tableData"
+        :table-data="tableData"
-      :height="mainTableHeight"
+        @del="del"
-      border
+        @edit="edit"
-      @header-dragend="dragend"
+        @orderBy="tableDataSort"
-      @sort-change="tableDataSort"
+        @reload="getTableData"
-      @selection-change="(selection)=>{batchDeleteObjs=selection}"
+        @selectionChange="selectionChange"></terminal-log-table>
-    >
+    </template>
-      <el-table-column
+    <template v-slot:pagination>
-        :resizable="false"
+      <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
-        align="center"
+    </template>
-        type="selection"
+  </nz-bottom-data-list>
-        width="55">
-      </el-table-column>
-      <el-table-column
-        v-for="(item, index) in tools.customTableTitle"
-        v-if="item.show"
-        :key="`col-${index}`"
-        :fixed="item.fixed"
-        :label="item.label"
-        :prop="item.prop"
-        :resizable="true"
-        :sort-orders="['ascending', 'descending']"
-        :width="`${item.width}`"
-        class="data-column"
-      >
-        <template slot="header">
-              <span>
-                <span>{{item.label}}</span>
-                <div class="col-resize-area"></div>
-              </span>
-        </template>
-        <template slot-scope="scope" :column="item">
-          <span v-if="item.prop === 'time'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
-          <template v-else-if="item.prop === 'status'">
-            <span>{{getStatusText(scope.row.status)}}</span>
-          </template>
-          <template v-else-if="item.prop === 'uuid'">
-            <span>{{scope.row.uuid.substring(0, 8).toUpperCase()}}</span>
-          </template>
-          <template v-else-if="item.prop === 'remote'">
-            <span>{{getRemoteText(scope.row)}}</span>
-          </template>
-          <template v-else-if="item.prop === 'duration'">
-            <el-tooltip :disabled="!scope.row.status" effect="light" placement="right">
-              <div slot="content">
-                {{$t('config.terminallog.endTime')}}<br/>
-                {{scope.row.endTime}}
-              </div>
-              <span>{{getDuration(scope.row)}}</span>
-            </el-tooltip>
-          </template>
-          <template v-else-if="item.prop === 'authType'">
-            <span v-if="scope.row.authType == 1">{{$t('config.terminallog.password')}}</span>
-            <span v-else-if="scope.row.authType == 2">{{$t('config.terminallog.key')}}</span>
-          </template>
-          <span v-else>{{scope.row[item.prop]}}</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        :resizable="false"
-        :width="operationWidth"
-        fixed="right">
-        <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
-        <div slot-scope="scope" class="table-operation-items">
-          <template v-if="scope.row.status == 0">
-            <button :title="$t('config.terminallog.monitor.monitor')" class="table-operation-item" @click="$refs.dataList.showBottomBox('monitor', scope.row)"><i class="nz-icon nz-icon-JC"></i></button>
-            <el-dropdown size="medium" trigger="hover" @command="tableOperation">
-              <div class="table-operation-item table-operation-item--more">
-                <span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
-              </div>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item :command="['shutdown', scope.row]"><i class="nz-icon nz-icon-ZD"></i><span class="operation-dropdown-text">Kill</span></el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </template>
-          <template v-else>
-            <button class="table-operation-item" @click="$refs.dataList.showBottomBox('cmd', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
-            <el-dropdown size="medium" trigger="hover" @command="tableOperation">
-              <div class="table-operation-item table-operation-item--more">
-                <span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
-              </div>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item :command="['record', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('config.terminallog.record.record')}}</span></el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </template>
-        </div>
-      </el-table-column>
-    </el-table>
-  </div>
 </template>
 
 <script>
-import tableMixin from '@/components/common/mixin/dataList'
+import dataListMixin from '@/components/common/mixin/dataList'
-import { terminalLog } from '@/components/common/js/constants'
+import subDataListMixin from '@/components/common/mixin/subDataList'
-import { calcDurationByStringTimeB } from '@/components/common/js/tools'
+import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
+import terminalLogTable from '@/components/common/table/settings/terminalLogTable'
 
 export default {
   name: 'terminalLogTab',
-  mixins: [tableMixin],
+  mixins: [dataListMixin, subDataListMixin],
+  components: {
+    nzBottomDataList,
+    terminalLogTable
+  },
   data () {
     return {
+      url: 'terminal/session',
       tableId: 'terminalLogTable', // 需要分页的table的id，用于记录每页数量
-
-      tableTitle: [
-        {
-          label: this.$t('config.terminallog.id'),
-          prop: 'id',
-          show: true,
-          width: 80
-        }, {
-          label: 'Session ID',
-          prop: 'uuid',
-          show: true
-        }, {
-          label: 'Username',
-          prop: 'username',
-          show: true
-        },
-        {
-          label: this.$t('config.terminallog.source'),
-          prop: 'remoteAddr',
-          show: true
-        },
-        {
-          label: this.$t('config.terminallog.remote'),
-          prop: 'remote',
-          show: true
-        },
-        {
-          label: this.$t('config.terminallog.protocol'),
-          prop: 'protocol',
-          show: true
-        },
-        {
-          label: this.$t('config.terminallog.startTime'),
-          prop: 'startTime',
-          show: true
-        },
-        {
-          label: this.$t('config.terminallog.duration'),
-          prop: 'duration',
-          show: true
-        },
-        {
-          label: 'AuthType',
-          prop: 'authType',
-          show: false
-        },
-        {
-          label: this.$t('config.terminallog.status'), // killusername鼠标悬停形式
-          prop: 'status',
-          show: true,
-          width: 100
-        }
-      ],
       searchMsg: { // 给搜索框子组件传递的信息
         zheze_none: true,
         searchLabelList: [
@@ -193,52 +67,14 @@ export default {
       nowTime: ''
     }
   },
-  computed: {
-    getStatusText () {
-      return function (status) {
-        return terminalLog.status[status]
-      }
-    },
-    getRemoteText () {
-      return function (record) {
-        return `${record.loginUser}@${record.host}:${record.port}`
-      }
-    },
-    getDuration () {
-      return function (record) {
-        if (record.endTime) {
-          return calcDurationByStringTimeB(record.startTime, record.endTime)
-        }
-        return calcDurationByStringTimeB(record.startTime, this.nowTime)
-      }
-    }
-  },
-  props: {
-    obj: Object // 关联的实体对象
-  },
   methods: {
-    // 切换tab
-    changeTab (tab) {
-      this.$emit('changeTab', tab)
-    },
-    tableOperation ([command, row]) {
-      switch (command) {
-        case 'shutdown': {
-          this.shutdown(row)
-          break
-        }
-        default:
-          this.$refs.dataList.showBottomBox(command, row)
-          break
-      }
-    },
     getTableData () {
       const params = {
         ...this.searchLabel,
         pageNo: this.pageObj.pageNo,
         pageSize: this.pageObj.pageSize
       }
-      this.$get('terminal/session', params).then(response => {
+      this.$get(this.url, params).then(response => {
         this.tools.loading = false
         if (response.code === 200) {
           this.tableData = response.data.list
@@ -246,7 +82,7 @@ export default {
           this.pageObj.total = response.data.total
           if (!this.scrollbarWrap) {
             this.$nextTick(() => {
-              this.scrollbarWrap = this.$refs.dataTable.bodyWrapper
+              this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
               this.toTopBtnHandler(this.scrollbarWrap)
             })
           }
@@ -269,22 +105,6 @@ export default {
           }
         })
       })
-    },
-    messageStyle (e) {
-      if (e.column.label == this.$t('config.terminallog.status')) {
-        if (e.row.status == '0') {
-          return 'success'
-        } else if (e.row.status == '1') {
-          return 'warning'
-        } else if (e.row.status == '2') {
-          return 'suspended'
-        } else if (e.row.status == '3') {
-          return 'danger'
-        } else if (e.row.status == '4') {
-          return 'danger'
-        }
-      }
-      return ''
     }
   }
 }

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

@@ -20,17 +20,17 @@
       </div>
     </div>
     <div class="custom-bottom-btns">
-      <button v-if="isCancel" type="button" @click="batchHandler(false)" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new is-cancel" :id="id+'-element-set-none'">
+      <button v-if="isCancel" :id="tableId+'-element-set-none'" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new is-cancel" type="button" @click="batchHandler(false)">
         <span class="top-tool-btn-txt">{{$t('overall.clear')}}</span>
       </button>
-      <button v-if="!isCancel" type="button" @click="batchHandler(true)" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new" :id="id+'-element-set-all'">
+      <button v-if="!isCancel" :id="tableId+'-element-set-all'" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new" type="button" @click="batchHandler(true)">
         <span class="top-tool-btn-txt">{{$t('overall.all')}}</span>
       </button>
       <div>
-        <button type="button" @click="esc" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new" :id="id+'-element-set-esc'">
+        <button :id="tableId+'-element-set-esc'" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new" type="button" @click="esc">
           <span class="top-tool-btn-txt">{{$t('overall.esc')}}</span>
         </button>
-        <button type="button" @click="save" class="nz-btn nz-btn-size-small-new nz-btn-style-normal-new" :id="id+'-element-set-save'">
+        <button :id="tableId+'-element-set-save'" class="nz-btn nz-btn-size-small-new nz-btn-style-normal-new" type="button" @click="save">
           <span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
         </button>
       </div>
@@ -43,9 +43,8 @@ export default {
   props: {
     customTableTitle: Array, // 自定义的title
     originalTableTitle: Array, // 原始title
-    path: String,
+    tableId: String,
-    allowedAll: { default: false },
+    allowedAll: { default: false }
-    id: { type: String, default: 'table' }
   },
   data () {
     return {
@@ -53,7 +52,7 @@ export default {
     }
   },
   created () {
-    const localStorageTitle = JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
+    const localStorageTitle = JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId))
     if (localStorageTitle) {
       for (const title of this.originalTableTitle) {
         for (const lsTitle of localStorageTitle) {
@@ -62,7 +61,7 @@ export default {
           }
         }
       }
-      localStorage.setItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path, JSON.stringify(localStorageTitle))
+      localStorage.setItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId, JSON.stringify(localStorageTitle))
     }
   },
   watch: {
@@ -103,7 +102,7 @@ export default {
     save () {
       this.$emit('update', this.custom)
       localStorage.setItem(
-        'nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + ((typeof this.path !== 'undefined') ? this.path : this.$route.path),
+        'nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId,
         JSON.stringify(this.custom)
       )
       this.esc()

nezha-fronted/src/components/common/js/tools.js

@@ -135,7 +135,7 @@ export const bottomBoxWindow = {
     const mainListDom = document.querySelector('.main-list') // 主列表
     const subBoxDom = document.querySelector('.sub-box') // 副列表
     const subListDom = document.querySelector('.sub-list') // 副列表
-    const contentRightDom = document.querySelector('.content-right') // 右侧内容区
+    const contentRightDom = document.querySelector('.list-page') // 右侧内容区
     const resizeBarHeight = 9 // resize横条高度
     const minHeight = 15 // 主、副列表最小高度限制为15
     const contentHideHeight = 100 // 主、副列表高度低于100时隐藏内容
@@ -205,7 +205,7 @@ export const bottomBoxWindow = {
   },
   exitFullScreen (vm) {
     window.resizing = true
-    const contentRightDom = document.querySelector('.content-right') // 右侧内容区
+    const contentRightDom = document.querySelector('.list-page') // 右侧内容区
     const contentRightHeight = contentRightDom.offsetHeight// 可视高度
     // 主列表
     document.querySelector('.main-list-with-sub').style.height = vm.bottomBox.mainListHeight ? vm.bottomBox.mainListHeight + 'px' : 'calc(50% - 4px)'
@@ -225,7 +225,7 @@ export const bottomBoxWindow = {
   },
   fullScreen (vm) {
     window.resizing = true
-    const contentRightDom = document.querySelector('.content-right') // 右侧内容区
+    const contentRightDom = document.querySelector('.list-page') // 右侧内容区
     const contentRightHeight = contentRightDom.offsetHeight// 可视高度
     vm.bottomBox.isFullScreen = true
     // 主列表

nezha-fronted/src/components/common/mixin/dataList.js

@@ -202,8 +202,8 @@ export default {
     if (pageSize && pageSize !== 'undefined') {
       this.pageObj.pageSize = pageSize
     }
-    this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
+    this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId)
-      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
+      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId))
       : this.$refs.dataTable.tableTitle
     this.getTableData()
   },

nezha-fronted/src/components/common/mixin/subDataList.js

@@ -0,0 +1,19 @@
+export default {
+  props: {
+    obj: Object, // 关联的实体对象
+    tabs: {
+      type: Array
+    }
+  },
+  data () {
+    return {
+      subTableHeight: this.$tableHeight.openSubList.subList
+    }
+  },
+  methods: {
+    // 切换tab
+    changeTab (tab) {
+      this.$emit('changeTab', tab)
+    }
+  }
+}

nezha-fronted/src/components/common/table/nzDataList.vue

@@ -4,28 +4,36 @@
     <div :class="{'main-list-with-sub': bottomBox.showSubList}" class="main-list">
       <!-- 顶部工具栏 -->
       <div class="main-modal"></div>
-      <div v-show="bottomBox.mainResizeShow" class="top-tools">
+      <div class="main-container">
-        <div class="top-tool-main-left" style="width: 300px">
+        <div v-show="bottomBox.mainResizeShow" class="top-tools">
-          <slot name="top-tool-left"></slot>
+          <div class="top-tool-left" style="width: 300px">
-        </div>
+            <slot name="top-tool-left"></slot>
-        <div :class="{'top-tool-main-right-to-left': bottomBox.showSubList}" class="top-tool-main-right">
-          <div v-if="layout.indexOf('searchInput') > -1" class="top-tool-search margin-r-20">
-            <search-input ref="searchInput" :inTransform="bottomBox.inTransform" :searchMsg="searchMsg" @search="search"></search-input>
           </div>
-          <slot name="top-tool-right"></slot>
+          <div :class="{'top-tool-main-right-to-left': bottomBox.showSubList}" class="top-tool-right">
-          <button v-if="layout.indexOf('elementSet') > -1" id="account-column-setting" class="top-tool-btn"
+            <div v-if="layout.indexOf('searchInput') > -1" class="top-tool-search margin-r-20">
-                  type="button" @click="tools.showCustomTableTitle = true">
+              <search-input ref="searchInput" :inTransform="bottomBox.inTransform" :searchMsg="searchMsg" @search="search"></search-input>
-            <i class="nz-icon-gear nz-icon"></i>
+            </div>
-          </button>
+            <slot name="top-tool-right"></slot>
+            <button v-if="layout.indexOf('elementSet') > -1" id="account-column-setting" class="top-tool-btn"
+                    type="button" @click="tools.showCustomTableTitle = true">
+              <i class="nz-icon-gear nz-icon"></i>
+            </button>
+          </div>
+          <!-- 顶部分页组件，当打开底部上滑框时出现 -->
+          <!-- <div v-if="layout.indexOf('pagination') > -1" class="pagination-top pagination-top-hide display-none"></div>-->
+        </div>
+        <div v-show="bottomBox.mainResizeShow" class="nz-table2">
+          <slot v-bind:mainResizeShow="bottomBox.mainResizeShow"></slot>
+        </div>
+        <div v-show="bottomBox.mainResizeShow" class="pagination-bottom">
+          <slot name="pagination"></slot>
         </div>
-        <!-- 顶部分页组件，当打开底部上滑框时出现 -->
-        <div v-if="layout.indexOf('pagination') > -1" class="pagination-top pagination-top-hide display-none"></div>
       </div>
       <!-- 自定义table列 -->
       <transition name="el-zoom-in-top">
         <element-set
           v-if="tools.showCustomTableTitle"
-          id="account-list"
+          :tableId="tableId"
           ref="customTableTitle"
           :custom-table-title="customTableTitle"
           :original-table-title="tableTitle"
@@ -33,12 +41,6 @@
           @update="updateCustomTableTitle"
         ></element-set>
       </transition>
-      <div v-show="bottomBox.mainResizeShow" class="nz-table2">
-        <slot v-bind:mainResizeShow="bottomBox.mainResizeShow"></slot>
-      </div>
-      <div class="pagination-bottom">
-        <slot name="pagination"></slot>
-      </div>
     </div>
     <transition name="el-zoom-in-bottom">
       <bottom-box v-if="bottomBox.showSubList"

nezha-fronted/src/components/common/table/settings/operationLogTable.vue

@@ -126,6 +126,9 @@ export default {
         return '-'
       }
     }
+  },
+  mounted () {
+    console.info(this.customTableTitle)
   }
 }
 </script>

nezha-fronted/src/components/layout/container.vue

@@ -16,7 +16,6 @@ export default {
 
 <style lang="scss">
 .container {
-  padding: 10px;
   box-sizing: border-box;
   height: calc(100% - 50px);
   background-color: #f6f6f6;

nezha-fronted/src/main.js

@@ -54,7 +54,7 @@ Vue.prototype.$tableHeight = { // 列表页表格的高度
   normal: 'calc(100% - 48px)', // 常规高度，特例在下方定义
   openSubList: { // 打开二级列表后的高度
     mainList: 'calc(100% - 60px)',
-    subList: 'calc(100% - 86px)',
+    subList: 'calc(100% - 38px)',
     toTopBtnTop: 'calc(50% - 11px)'
   },
   toTopBtnTop: 'calc(100% - 73px)',