NEZ-1895 fix : profile 新增用户个人 api key 页面

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

@@ -207,7 +207,7 @@
       color: $--color-primary;
     }
   }
-  .mt-10.table-container.nz-table2 {
+  .mt-10.table-container.nz-table-list {
     .el-table:not(.chart-table) {
       .gutter {
         position: fixed;
@@ -220,7 +220,7 @@
     }
   }
   /* 上滑resize工具条--end */
-  .nz-table2 {
+  .nz-table-list {
     position: relative;
     padding: 0 20px;
     width: 100%;
@@ -347,7 +347,7 @@
   .el-table__body-wrapper .is-hidden, .el-table__header-wrapper .is-hidden {
     visibility: hidden;
   }
-  .nz-table2 {
+  .nz-table-list {
     .el-table--border td {
       border-right: none !important;
     }
@@ -395,7 +395,7 @@
   .main-container {
    padding: 0;
   }
-  .list-page .nz-table2 .el-table:not(.chart-table) .gutter {
+  .list-page .nz-table-list .el-table:not(.chart-table) .gutter {
     position: fixed;
     right: 31px;
     height: 42px;
@@ -549,7 +549,7 @@
   height: 100%;
 }
 .list-page.detail-view .nz-detail-view-right{
-  .nz-table2 .el-table--border {
+  .nz-table-list .el-table--border {
     height: calc(100% - 45px) !important;
     .gutter {
       position: fixed;

nezha-fronted/src/assets/css/components/chart/chart.scss

@@ -213,7 +213,7 @@
   &>.overview{
     padding: 10px;
   }
-  &>.nz-table2{
+  &>.nz-table-list{
     padding-top: 10px !important;
   }
 }

nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss

@@ -31,7 +31,7 @@
   .pagination-bottom {
     bottom: 8px;
   }
-  &>.nz-table2 {
+  &>.nz-table-list {
     height: 100%;
     padding: 20px 20px 10px 20px !important;
     box-sizing: border-box;
@@ -88,7 +88,7 @@
 }
 .list-page {
   .sub-box.bottom-box {
-    .nz-table2 .el-table--border {
+    .nz-table-list .el-table--border {
       .gutter {
         position: fixed;
         right: 31px;
@@ -115,13 +115,13 @@
       height: 100%;
       background-color: $--background-color-base;
 
-      &>.nz-table2 {
+      &>.nz-table-list {
         height: calc(100% - 92px);
         padding: 20px 20px 0;
       }
     }
     .chart-list{
-      .nz-table2 {
+      .nz-table-list {
         box-sizing: border-box;
         padding: 0;
         height: 100%;
@@ -177,16 +177,16 @@
 .bottom-box .sub-container{
   height: calc(100% - 50px);
 }
-.bottom-box .sub-container .nz-table2 {
+.bottom-box .sub-container .nz-table-list {
   height: calc(100% - 20px);
   .bottom-box__top .my-loading-box {
     height: calc(100% + 20px) !important;
   }
 }
-.asset-detail .sub-container .nz-table2 {
+.asset-detail .sub-container .nz-table-list {
   height: 100%;
 }
-.endpoint-tab-new .sub-container .nz-table2 {
+.endpoint-tab-new .sub-container .nz-table-list {
   height: 100%;
 }
 /* end--二级顶部工具栏*/

nezha-fronted/src/assets/css/components/common/detailView/view/detailViewRight.scss

@@ -9,7 +9,7 @@
       padding: 0;
     }
 
-    .sub-box .sub-list__tabs .chart-list .nz-table2 {
+    .sub-box .sub-list__tabs .chart-list .nz-table-list {
       padding: 20px;
       height: 100%;
     }
@@ -36,14 +36,14 @@
       & > div {
         height: 100%;
 
-        & > .nz-table2 {
+        & > .nz-table-list {
           height: calc(100% - 92px);
           padding: 20px 20px 0;
         }
       }
 
       .chart-list {
-        .nz-table2 {
+        .nz-table-list {
           box-sizing: border-box;
           padding: 0;
         }

nezha-fronted/src/assets/css/components/common/project/topology.scss

@@ -490,14 +490,14 @@
   padding:0 !important;
   width: calc(100% - 2px);
   height: calc(100% - 2px) !important;
-  .nz-table2{
+  .nz-table-list{
     padding: 0 !important;
     height: 100%;
   }
 }
 .from-project{
   padding: 0px 10px 0 0 !important;
-  .nz-table2{
+  .nz-table-list{
     padding: 0;
     box-sizing: content-box;
     height: calc(100% - 50px);

nezha-fronted/src/assets/css/components/common/table/settings/backupsTable.scss

@@ -1,5 +1,5 @@
 .backups-table{
-  .nz-table2 {
+  .nz-table-list {
       .el-table__row{
         td:last-of-type{
           // border-bottom: 1px solid $--border-color-light !important;

nezha-fronted/src/assets/css/components/page/config/operationRecord.scss

@@ -34,17 +34,25 @@
 }
 .operationLog{
   .main-list{
+    .apiKey{
+      position: relative;
+     .pop-custom{
+        position: absolute;
+        top: -20px;
+        right: 0;
+    }
+    } 
     .main-container{
       background-color: $--background-color-empty;
     }
-    .nz-table2{
+    .nz-table-list{
       position: relative;
       .top-tool-right{
         position: absolute !important;
         top: -55px !important;
         right: 0 !important;
       }
-      .nz-table2{
+      .nz-table-list{
         width: 100%;
         height: 96% !important;
         position: absolute !important;
@@ -52,7 +60,7 @@
         padding-right: 0 !important;
         top: 0 !important;
         left: 0;
-        #apiKeyTable{
+        #api-key-tab{
           height: 100%;
         }
         .el-table__fixed-header-wrapper.has-gutter{

nezha-fronted/src/assets/css/components/page/config/profile.scss

@@ -228,7 +228,7 @@
     padding: 0;
     pxbox-shadow: 0 1px 2px 0 rgba(0,0,0,0.06);
     border-radius: 2px;
-    .nz-table2 {
+    .nz-table-list {
       height: calc(100% - 69px);
     }
   }

nezha-fronted/src/assets/css/components/page/dashboard/explore/logTab.scss

@@ -15,7 +15,7 @@
       text-align: center;
     }
   }
-  .log-table .nz-table2 {
+  .log-table .nz-table-list {
     padding: 10px 0 0 0;
     position: relative;
     background-color: $--background-color-empty;
@@ -133,11 +133,11 @@
 .chart-log.log-detail {
   height: 100%;
   .log-table {
-    .nz-table2::before{
+    .nz-table-list::before{
       display: none;
       height: 0px;
     }
-    .nz-table2 {
+    .nz-table-list {
       padding: 10px;
       box-sizing: border-box;
       .el-table__body-wrapper {

nezha-fronted/src/assets/css/components/page/dashboard/overview/overview2.scss

@@ -25,7 +25,7 @@
   .el-carousel__indicator--horizontal.is-active .el-carousel__button{
     opacity: 1;
   }
-  .nz-table2 {
+  .nz-table-list {
     height: 100% !important;
   }
   .chart-body {

nezha-fronted/src/assets/css/components/page/dashboard/panel.scss

@@ -25,7 +25,7 @@
     .main-container {
       padding: 0 !important;
     }
-    .nz-table2.h100 {
+    .nz-table-list.h100 {
       height: 100% !important;
     }
     .right-bottom-zoom {

nezha-fronted/src/assets/css/components/page/monitor/project/project.scss

@@ -36,7 +36,7 @@
         .top-tools div:nth-of-type(1) {
           color: $--color-text-primary;
         }
-        .nz-table2 {
+        .nz-table-list {
           padding: 0 !important;
         }
         .right-bottom-zoom {

nezha-fronted/src/assets/css/components/page/tool/ping.scss

@@ -92,7 +92,7 @@
     display: flex;
     flex-direction: column;
   }
-  .nz-table2{
+  .nz-table-list{
     height: auto !important;
     overflow: hidden;
     flex: 1;
@@ -159,7 +159,7 @@
       }
     }
   }
-  .nz-table2{
+  .nz-table-list{
     flex: 1 !important;
   }
 }

nezha-fronted/src/assets/css/components/page/tool/trace.scss

@@ -92,7 +92,7 @@
     display: flex;
     flex-direction: column;
   }
-  .nz-table2{
+  .nz-table-list{
     height: auto !important;
     overflow: hidden;
     flex: 1;
@@ -159,7 +159,7 @@
       }
     }
   }
-  .nz-table2{
+  .nz-table-list{
     flex: 1 !important;
   }
 }

nezha-fronted/src/components/chart/chart/chartLog.vue

@@ -37,7 +37,7 @@
         style="height: 100%"
         :show-header="false"
         ref="logTable"
-        class="nz-table2"
+        class="nz-table-list"
         size="mini"
         v-if="tableData.length"
       >

nezha-fronted/src/components/chart/chart/chartTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="nz-table2" style="height: 100%;padding: 0 10px 10px 10px;box-sizing: border-box">
+  <div class="nz-table-list" style="height: 100%;padding: 0 10px 10px 10px;box-sizing: border-box">
     <el-table
       ref="dataTable"
       class="chart-table"

nezha-fronted/src/components/common/ChartDiagram/diagram.vue

@@ -122,7 +122,7 @@
         </div>
         <div v-if="(!editTopologyFlag&&!fromOverView)&&!fromChart" class="top-tools" style="padding-left: 10px">
         </div>
-        <div class="nz-table2" :class="fromChart ? 'h100': ''">
+        <div class="nz-table-list" :class="fromChart ? 'h100': ''">
           <!--悬浮network部分-->
           <div class="network-info">
             <div v-if="popDataShow.main">

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

@@ -100,14 +100,14 @@ export default {
       const className = []
       switch (this.targetTab) {
         case 'panelTab':
-          className.push('nz-table2 bottom-panel')
+          className.push('nz-table-list bottom-panel')
           break
         case 'log': {
           className.push('bottom-log')
           break
         }
         default: {
-          className.push('nz-table2')
+          className.push('nz-table-list')
           break
         }
       }

nezha-fronted/src/components/common/project/topologyL5.vue

@@ -141,7 +141,7 @@
             </button>
           </div>
         </div>
-        <div class="nz-table2">
+        <div class="nz-table-list">
           <!--悬浮network部分-->
           <div class="network-info">
             <div v-if="popDataShow.main">

nezha-fronted/src/components/common/rightBox/administration/backupsBox.vue

@@ -47,7 +47,7 @@
               type="datetime"
               prefix-icon="el-icon-date"
               :format="timeFormatStrToDatePickFormat(dateFormatStr)"
-              :placeholder="$t('backup.SelectData')"
+              :placeholder="$t('backup.selectData')"
             >
             </my-date-picker>
           </el-form-item>

nezha-fronted/src/components/common/rightBox/apiKeyBox.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-clickoutside="{obj: apiKeyBox, func: esc}" class="right-box right-box-profile">
     <div class="right-box__header">
-      <div class="header__title">{{$t('profile.box.NewApiKey')}}</div>
+      <div class="header__title">{{$t('profile.box.newApiKey')}}</div>
       <div class="header__operation">
         <span v-cancel="{obj: apiKeyBox, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
       </div>
@@ -10,10 +10,10 @@
       <div class="container__form">
         <el-form ref="apiKeyBoxForm" :model="apiKeyBox" :rules="rules" label-position="top" label-width="120px">
           <el-form-item :label="$t('profile.name')" prop="name">
-            <el-input maxlength="64" show-word-limit v-model="apiKeyBox.name" size="small" type="text"></el-input>
+            <el-input maxlength="64" show-word-limit v-model="apiKeyBox.name" size="small" type="text" :placeholder="$t('profile.name')"></el-input>
           </el-form-item>
            <el-form-item
-            :label="$t('profile.apiKey.Box.ExpiredAt')"
+            :label="$t('profile.apiKey.box.expiredAt')"
             class="start_at"
           >
             <my-date-picker
@@ -23,12 +23,12 @@
               type="datetime"
               prefix-icon="el-icon-date"
               :format="timeFormatStrToDatePickFormat(dateFormatStr)"
-              :placeholder="$t('backup.SelectData')"
+              :placeholder="$t('backup.selectData')"
             >
             </my-date-picker>
           </el-form-item>
           <el-form-item :label="$t('overall.remark')">
-            <el-input  show-word-limit v-model="apiKeyBox.remark" size="small" type="text"></el-input>
+            <el-input  show-word-limit v-model="apiKeyBox.remark" size="small" type="textarea" :placeholder="$t('overall.remark')" maxlength="256"></el-input>
           </el-form-item>
         </el-form>
       </div>

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

@@ -40,7 +40,7 @@
         <div v-if="showLayout.indexOf('clickSearch') > -1" class="search-box">
           <slot name="search"></slot>
         </div>
-        <div v-show="bottomBox.mainResizeShow" :style="{ height: nzTableHeight }" class="nz-table2">
+        <div v-show="bottomBox.mainResizeShow" :style="{ height: nzTableHeight }" class="nz-table-list">
           <slot v-bind:mainResizeShow="bottomBox.mainResizeShow"></slot>
         </div>
         <div v-show="bottomBox.mainResizeShow" v-if="showLayout.indexOf('pagination') > -1" class="pagination-bottom">

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

@@ -937,7 +937,7 @@ export default {
     display: flex;
     flex-direction: column;
   }
-  /deep/ .nz-table2{
+  /deep/ .nz-table-list{
     flex: 1;
   }
 </style>

nezha-fronted/src/components/page/config/operationRecord.vue

@@ -33,7 +33,7 @@
           @reload="getTableData"
           @selectionChange="selectionChange"
           @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></operation-log-table>
-        <api-key-tab v-if="profileShowLabel === 3"></api-key-tab>
+        <self-api-key-tab v-if="profileShowLabel === 3"></self-api-key-tab>
         <template v-else-if="profileShowLabel === 2">
          <profileChangePin/>
         </template>
@@ -48,7 +48,7 @@
 import nzDataList from '@/components/common/table/nzDataList'
 import dataListMixin from '@/components/common/mixin/dataList'
 import operationLogTable from '@/components/common/table/settings/operationLogTable'
-import apiKeyTab from '@/components/page/config/system/apiKeyTab2'
+import selfApiKeyTab from '@/components/page/config/system/selfApiKeyTab'
 import profileChangePin from '@/components//page/config/profileChangePin'
 
 export default {
@@ -57,7 +57,7 @@ export default {
     nzDataList,
     operationLogTable,
     profileChangePin,
-    apiKeyTab
+    selfApiKeyTab
   },
   mixins: [dataListMixin],
   data () {
@@ -108,7 +108,7 @@ export default {
   },
   mounted () {
     this.tabsActive()
-    this.getTableData()
+    // this.getTableData()
   },
   methods: {
     tabsActive () {

nezha-fronted/src/components/page/config/system/selfApiKeyTab.vue

@@ -3,7 +3,7 @@
     <nz-data-list
       ref="dataList"
       :api="url"
-      :custom-table-title.sync="customTableTitle2"
+      :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.apiKey"
       :layout="['searchInput', 'elementSet', 'pagination']"
       :search-msg="searchMsg"
@@ -12,19 +12,19 @@
 
       </template>
       <template v-slot:top-tool-right>
-        <button id="api-key-add" v-has="'system_apiKey_add'" :title="$t('config.system.notification.create')" class="top-tool-btn margin-r-10" type="button" @click="addApiKey">
+        <button id="api-key-add" v-has="'system_apiKey_add'" class="top-tool-btn margin-r-10" type="button" @click="addApiKey">
           <i class="nz-icon-create-square nz-icon"></i>
         </button>
       </template>
       <template v-slot:default="slotProps">
-        <api-key-table
+        <self-api-key-table
           ref="dataTable"
           :orderByFa="orderBy"
           v-my-loading="tools.loading"
           :loading="tools.loading"
           :table-id="tableId"
           :api="url"
-          :custom-table-title="customTableTitle2"
+          :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"
           :table-data="tableData"
           @del="del"
@@ -32,7 +32,7 @@
           @orderBy="tableDataSort"
           @reload="getTableData"
           @selectionChange="selectionChange"
-        ></api-key-table>
+        ></self-api-key-table>
       </template>
       <!-- 分页组件 -->
       <template v-slot:pagination>
@@ -43,7 +43,7 @@
 </template>
 
 <script>
-import apiKeyTable from './apiKeyTable2'
+import selfApiKeyTable from './selfApiKeyTable'
 import dataListMixin from '@/components/common/mixin/dataList'
 import nzDataList from '@/components/common/table/nzDataList'
 import { parentTableCommon } from './systemCommon'
@@ -51,7 +51,7 @@ import bus from '@/libs/bus'
 
 export default {
   name: 'apiKeyTab',
-  components: { nzDataList, apiKeyTable },
+  components: { nzDataList, selfApiKeyTable },
   mixins: [dataListMixin, parentTableCommon],
   props: {
     switchTab: String
@@ -59,7 +59,7 @@ export default {
   data () {
     return {
       url: 'sys/apiKey/self',
-      tableId: 'apiKeyTable',
+      tableId: 'api-key-tab',
       searchMsg: { // 给搜索框子组件传递的信息
         zheze_none: true,
         searchLabelList: [{
@@ -76,7 +76,7 @@ export default {
           disabled: false
         }]
       },
-      customTableTitle2: [
+      tableTitle: [
         {
           label: 'ID',
           prop: 'id',
@@ -107,7 +107,7 @@ export default {
     }
   },
   mounted () {
-    this.getTableData()
+    // this.getTableData()
     bus.$on('apiKey-tab2', () => {
       this.getTableData()
     })

nezha-fronted/src/components/page/config/system/selfApiKeyTable.vue

@@ -40,10 +40,10 @@
                {{scope.row[item.prop]?scope.row[item.prop]:'-'}}
             </template>
              <template v-if="item.prop == 'expireAt'">
-              {{scope.row[item.prop]?scope.row[item.prop]:'-'}}
+              {{scope.row[item.prop]?timeFormates(scope.row[item.prop]):'-'}}
             </template>
             <template v-if="item.prop == 'createAt'">
-              {{scope.row[item.prop]?scope.row[item.prop]:'-'}}
+              {{scope.row[item.prop]?timeFormates(scope.row[item.prop]):'-'}}
             </template>
              <template v-if="item.prop == 'remark'">
               {{scope.row[item.prop]?scope.row[item.prop]:'-'}}
@@ -80,6 +80,7 @@
 <script>
 import { tableCommon } from './systemCommon'
 import table from '@/components/common/mixin/table'
+import bus from '@/libs/bus'
 export default {
   name: 'apiKeyTable',
   props: {
@@ -117,7 +118,17 @@ export default {
     }
   },
   methods: {
+    timeFormates (data) {
+      if (localStorage.getItem('nz-default-dateFormat')) {
+        return bus.timeFormate(new Date(data), localStorage.getItem('nz-default-dateFormat'))
+      } else {
+        return bus.timeFormate(new Date(data), 'YYYY-MM-DD HH:mm:ss')
+      }
+    }
   },
-  mounted () {}
+  created () {
+  },
+  mounted () {
+  }
 }
 </script>

nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue

@@ -125,7 +125,7 @@
                   </transition>
                 </div>
                 <!-- 自定义table列 -->
-                <div class="nz-table2 explore-table">
+                <div class="nz-table-list explore-table">
                   <el-table ref="exploreTable"
                             v-my-loading="tools.loading"
                             class="metric-table"

nezha-fronted/src/components/page/dashboard/explore/logTab.vue

@@ -44,7 +44,7 @@
         :data="tableData"
         :show-header="false"
         ref="logTable"
-        class="nz-table2"
+        class="nz-table-list"
         size="mini"
         v-if="tableData.length"
       >