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

2022-06-09 13:18:09 +08:00
parent f04aa054b4
commit 4502abb98f
28 changed files with 85 additions and 66 deletions
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/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;
--- a/nezha-fronted/src/assets/css/components/chart/chart.scss
+++ b/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;
  }
 }
--- a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
+++ b/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--二级顶部工具栏*/
--- a/nezha-fronted/src/assets/css/components/common/detailView/view/detailViewRight.scss
+++ b/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;
        }
--- a/nezha-fronted/src/assets/css/components/common/project/topology.scss
+++ b/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);
--- a/nezha-fronted/src/assets/css/components/common/table/settings/backupsTable.scss
+++ b/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;
--- a/nezha-fronted/src/assets/css/components/page/config/operationRecord.scss
+++ b/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{
--- a/nezha-fronted/src/assets/css/components/page/config/profile.scss
+++ b/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);
    }
  }
--- a/nezha-fronted/src/assets/css/components/page/dashboard/explore/logTab.scss
+++ b/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 {
--- a/nezha-fronted/src/assets/css/components/page/dashboard/overview/overview2.scss
+++ b/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 {
--- a/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss
+++ b/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 {
--- a/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
+++ b/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 {
--- a/nezha-fronted/src/assets/css/components/page/tool/ping.scss
+++ b/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;
  }
 }
--- a/nezha-fronted/src/assets/css/components/page/tool/trace.scss
+++ b/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;
  }
 }
--- a/nezha-fronted/src/components/chart/chart/chartLog.vue
+++ b/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"
      >
--- a/nezha-fronted/src/components/chart/chart/chartTable.vue
+++ b/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"
--- a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
+++ b/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">
--- a/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue
+++ b/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
        }
      }
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/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">
--- a/nezha-fronted/src/components/common/rightBox/administration/backupsBox.vue
+++ b/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>
--- a/nezha-fronted/src/components/common/rightBox/apiKeyBox.vue
+++ b/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>
--- a/nezha-fronted/src/components/common/table/nzDataList.vue
+++ b/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">
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/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>
--- a/nezha-fronted/src/components/page/config/operationRecord.vue
+++ b/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 () {
--- a/nezha-fronted/src/components/page/config/system/selfApiKeyTab.vue
+++ b/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()
    })
--- a/nezha-fronted/src/components/page/config/system/selfApiKeyTable.vue
+++ b/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>
--- a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
+++ b/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"
--- a/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
+++ b/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"
      >