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

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

@@ -32,3 +32,51 @@
     background-color: $--background-color-1;
   }
 }
+.operationLog{
+  .main-list{
+    .main-container{
+      background-color: $--background-color-empty;
+    }
+    .nz-table2{
+      position: relative;
+      .top-tool-right{
+        position: absolute !important;
+        top: -55px !important;
+        right: 0 !important;
+      }
+      .nz-table2{
+        width: 100%;
+        height: 96% !important;
+        position: absolute !important;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        top: 0 !important;
+        left: 0;
+        #apiKeyTable{
+          height: 100%;
+        }
+        .el-table__fixed-header-wrapper.has-gutter{
+          height: 41px;
+        }
+        .el-table__body-wrapper{
+          overflow-x: hidden !important;
+          .el-table__row{
+            height: 63px !important;
+            
+          }
+        }
+        .el-table__fixed-right{
+          .el-table__fixed-header-wrapper{
+            height: 41px;
+          }
+          .el-table__fixed-body-wrapper{
+            .el-table__row{
+              height: 63px;
+            }
+          }
+          
+        }
+      }
+    }
+  }
+}

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

@@ -331,3 +331,10 @@
   width: 320px;
   margin: 40px auto
 }
+.profile{
+  #my-datetime-picker{
+    width: 640px;
+    height: 32px;
+  }
+}
+

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

@@ -483,7 +483,6 @@ export default {
     'editBackup.stime': {
       deep: true,
       handler (n) {
-        console.log(n);
         this.editBackup.stime = bus
           .timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss')
       }

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

@@ -0,0 +1,126 @@
+<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__operation">
+        <span v-cancel="{obj: apiKeyBox, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
+      </div>
+    </div>
+    <div class="right-box__container">
+      <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-form-item>
+           <el-form-item
+            :label="$t('profile.apiKey.Box.ExpiredAt')"
+            class="start_at"
+          >
+            <my-date-picker
+              v-model="apiKeyBox.expireAt"
+              class="my-datetime-picker"
+              id="my-datetime-picker"
+              type="datetime"
+              prefix-icon="el-icon-date"
+              :format="timeFormatStrToDatePickFormat(dateFormatStr)"
+              :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-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="right-box__footer">
+      <button id="asset-edit-cancel" v-cancel="{obj: apiKeyBox, func: esc}" class="footer__btn footer__btn--light">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button id="asset-edit-save" :class="{'footer__btn--disabled': prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="save">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import editRigthBox from '@/components/common/mixin/editRigthBox'
+import bus from '@/libs/bus'
+
+export default {
+  name: 'apiKeyBox',
+  components: {
+  },
+  props: {
+    obj: {
+      type: Object
+    }
+  },
+  computed: {},
+  mixins: [editRigthBox],
+  data () {
+    return {
+      apiKeyBox: { name: '', expireAt: '', remark: '' },
+      rules: {
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      },
+      dateFormatStr: localStorage.getItem('nz-default-dateFormat')
+        ? localStorage.getItem('nz-default-dateFormat')
+        : 'YYYY-MM-DD HH:ss:mm'
+    }
+  },
+  watch: {
+    'apiKeyBox.expireAt': {
+      deep: true,
+      handler (n) {
+        this.apiKeyBox.expireAt = bus
+          .timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss')
+      }
+    }
+  },
+  created () {
+    const dateFormatStr = localStorage.getItem('nz-default-dateFormat')
+    this.dateFormatStr = 'YYYY-MM-DD HH:mm:ss'
+  },
+  methods: {
+    clickoutside () {
+      this.esc(false)
+    },
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.prevent_opt.save = false
+      this.$emit('close', refresh)
+    },
+    save () {
+      if (this.prevent_opt.save) {
+        return
+      }
+      this.prevent_opt.save = true
+      this.$refs.apiKeyBoxForm.validate((valid) => {
+        if (valid) {
+          if (this.apiKeyBox.name) {
+            this.$post('sys/apiKey/self', { ...this.apiKeyBox }).then(res => {
+              this.prevent_opt.save = false
+              if (res.code === 200) {
+                bus.$emit('apiKey-tab2')
+                this.$message.success(this.$t('tip.addSuccess'))
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+          }
+        } else {
+          this.prevent_opt.save = false
+          return false
+        }
+      })
+    }
+
+  }
+}
+
+</script>

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

@@ -1,7 +1,7 @@
 <template>
     <nz-data-list
       ref="dataList"
-      :api="url"
+      :api="profileShowLabel === 1 ? url : url2"
       :layout="layout"
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.operationLog"
@@ -10,14 +10,15 @@
       :search-msg="searchMsg">
       <template v-slot:top-tool-left>
         <div class="profile-right__tabs-title">
-          <div class="profile-right__tabs-active" :class="{'is-active': profileShow}" @click="tabsActive">{{$t('profile.operationRecord')}}</div>
-          <div class="profile-right__tabs-active" style="margin-left: 10px" :class="{'is-active': !profileShow}" @click="tabsActiveTow">{{$t('profile.changePassword')}}</div>
+          <div class="profile-right__tabs-active" :class="{'is-active': profileShowLabel === 1}" @click="tabsActive">{{$t('profile.operationRecord')}}</div>
+          <div class="profile-right__tabs-active" style="margin-left: 10px" :class="{'is-active': profileShowLabel === 3}" @click="tabsActiveThree">{{$t('system.apikey.apiKey')}}</div>
+          <div class="profile-right__tabs-active" style="margin-left: 10px" :class="{'is-active': profileShowLabel === 2}" @click="tabsActiveTow">{{$t('profile.changePassword')}}</div>
         </div>
         <div class="profile-hr"></div>
       </template>
       <template v-slot:default="slotProps">
         <operation-log-table
-          v-if="profileShow"
+          v-if="profileShowLabel === 1"
           ref="dataTable"
           :orderByFa="orderBy"
           v-my-loading="tools.loading"
@@ -32,12 +33,13 @@
           @reload="getTableData"
           @selectionChange="selectionChange"
           @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></operation-log-table>
-        <template v-else>
+        <api-key-tab v-if="profileShowLabel === 3"></api-key-tab>
+        <template v-else-if="profileShowLabel === 2">
          <profileChangePin/>
         </template>
       </template>
       <!-- 分页组件 -->
-      <template v-if="profileShow" v-slot:pagination>
+      <template v-if="profileShowLabel ===1" v-slot:pagination>
         <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
       </template>
     </nz-data-list>
@@ -46,6 +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 profileChangePin from '@/components//page/config/profileChangePin'
 
 export default {
@@ -53,12 +56,14 @@ export default {
   components: {
     nzDataList,
     operationLogTable,
-    profileChangePin
+    profileChangePin,
+    apiKeyTab
   },
   mixins: [dataListMixin],
   data () {
     return {
       url: 'sys/log',
+      url2: 'sys/apiKey/self',
       tableId: 'operationLogTable', // 需要分页的table的id，用于记录每页数量,
       mainTableHeight: this.$tableHeight.profile,
       username: localStorage.getItem('nz-username'),
@@ -98,7 +103,7 @@ export default {
           }
         ]
       },
-      profileShow: true
+      profileShowLabel: 1
     }
   },
   mounted () {
@@ -107,11 +112,15 @@ export default {
   },
   methods: {
     tabsActive () {
-      this.profileShow = true
+      this.profileShowLabel = 1
       this.layout = ['searchInput', 'elementSet', 'pagination']
     },
     tabsActiveTow () {
-      this.profileShow = false
+      this.profileShowLabel = 2
+      this.layout = []
+    },
+    tabsActiveThree () {
+      this.profileShowLabel = 3
       this.layout = []
     },
     getTableData () {

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

@@ -133,6 +133,9 @@
     <transition name="right-box">
       <profile-box v-if="rightBox.show" :obj="object" @clickProfile="clickProfile" @close="closeRightBox"></profile-box>
     </transition>
+    <transition name="right-box">
+      <api-key-box v-if="apiRightBox" :obj="object"  @close="closeRightBox"></api-key-box>
+    </transition>
   </div>
 </template>
 
@@ -142,12 +145,15 @@ import QRCode from 'qrcodejs2'
 import MessageBox from 'element-ui/packages/message-box/src/main'
 import i18n from '@/components/common/i18n'
 import profileBox from '@/components/common/rightBox/profileBox'
+import apiKeyBox from '@/components/common/rightBox/apiKeyBox'
+import bus from '@/libs/bus'
 
 export default {
   name: 'profile',
   components: {
     operationRecord,
-    profileBox
+    profileBox,
+    apiKeyBox
   },
   data () {
     return {
@@ -167,6 +173,7 @@ export default {
       rightBox: {
         show: false
       },
+      apiRightBox: false,
       blankObject: { // 空白对象
         id: '',
         name: '',
@@ -226,6 +233,9 @@ export default {
   },
   mounted () {
     this.personalCenter()
+    bus.$on('addApiKeyBox', (e) => {
+      this.apiRightBox = e
+    })
   },
   computed: {
     langList () {
@@ -320,6 +330,7 @@ export default {
     },
     closeRightBox () {
       this.rightBox.show = false
+      this.apiRightBox = false
     },
     clickProfile (refresh) {
       this.personalCenter()
@@ -390,4 +401,4 @@ export default {
     }
   }
 }
-</script>
+</script>

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

@@ -0,0 +1,160 @@
+<template>
+  <div style="height: 100%">
+    <nz-data-list
+      ref="dataList"
+      :api="url"
+      :custom-table-title.sync="customTableTitle2"
+      :from="fromRoute.apiKey"
+      :layout="['searchInput', 'elementSet', 'pagination']"
+      :search-msg="searchMsg"
+      @search="search">
+      <template v-slot:top-tool-left>
+
+      </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">
+          <i class="nz-icon-create-square nz-icon"></i>
+        </button>
+      </template>
+      <template v-slot:default="slotProps">
+        <api-key-table
+          ref="dataTable"
+          :orderByFa="orderBy"
+          v-my-loading="tools.loading"
+          :loading="tools.loading"
+          :table-id="tableId"
+          :api="url"
+          :custom-table-title="customTableTitle2"
+          :height="mainTableHeight"
+          :table-data="tableData"
+          @del="del"
+          @edit="edit"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @selectionChange="selectionChange"
+        ></api-key-table>
+      </template>
+      <!-- 分页组件 -->
+      <template v-slot:pagination>
+        <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
+      </template>
+    </nz-data-list>
+  </div>
+</template>
+
+<script>
+import apiKeyTable from './apiKeyTable2'
+import dataListMixin from '@/components/common/mixin/dataList'
+import nzDataList from '@/components/common/table/nzDataList'
+import { parentTableCommon } from './systemCommon'
+import bus from '@/libs/bus'
+
+export default {
+  name: 'apiKeyTab',
+  components: { nzDataList, apiKeyTable },
+  mixins: [dataListMixin, parentTableCommon],
+  props: {
+    switchTab: String
+  },
+  data () {
+    return {
+      url: 'sys/apiKey/self',
+      tableId: 'apiKeyTable',
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 1,
+          name: 'ID',
+          type: 'input',
+          label: 'ids',
+          disabled: false
+        }, {
+          id: 5,
+          name: this.$t('overall.name'),
+          type: 'input',
+          label: 'name',
+          disabled: false
+        }]
+      },
+      customTableTitle2: [
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t('overall.name'),
+          prop: 'name',
+          minWidth: 100,
+          show: true
+        }, {
+          label: this.$t('config.system.apiKey.expireAt'),
+          prop: 'expireAt',
+          minWidth: 100,
+          show: true
+        }, {
+          label: this.$t('config.system.apiKey.creatAt'),
+          prop: 'createAt',
+          minWidth: 100,
+          show: false
+        }, {
+          label: this.$t('overall.remark'),
+          prop: 'remark',
+          minWidth: 100,
+          show: true
+        }
+      ]
+    }
+  },
+  mounted () {
+    this.getTableData()
+    bus.$on('apiKey-tab2', () => {
+      this.getTableData()
+    })
+  },
+  methods: {
+    addApiKey: function () {
+      bus.$emit('addApiKeyBox', 'true')
+    },
+    getTableData () {
+      if (this.orderBy) {
+        this.$set(this.searchLabel, 'orderBy', this.orderBy)
+      } else {
+        delete this.searchLabel.orderBy
+      }
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      this.tools.loading = true
+      this.$get(this.url, { ...this.searchLabel }).then(res => {
+        this.tools.loading = false
+        if (res.code === 200) {
+          this.tableData = res.data.list
+          this.pageObj.total = res.data.total
+          if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
+            this.$nextTick(() => {
+              this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
+          }
+        }
+      })
+    },
+    del (row) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete(this.url + '?ids=' + row.id).then(response => {
+          if (response.code === 200) {
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.getTableData()
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      })
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,123 @@
+<template>
+    <el-table
+      :id="tableId"
+      ref="dataTable"
+      :data="tableData"
+      :height="height"
+      border
+      @header-dragend="dragend"
+      @sort-change="tableDataSort"
+      @selection-change="selectionChange"
+    >
+      <el-table-column
+        :resizable="false"
+        align="center"
+        type="selection"
+        width="55">
+      </el-table-column>
+      <el-table-column
+        v-for="(item, index) in customTableTitle"
+        v-if="item.show"
+        :key="`col-${index}`"
+        :fixed="item.fixed"
+        :label="item.label"
+        :min-width="`${item.minWidth}`"
+        :prop="item.prop"
+        :resizable="true"
+        :sort-orders="['ascending', 'descending']"
+        :width="`${item.width}`"
+        class="data-column"
+      >
+        <template slot="header">
+          <span>{{item.label}}</span>
+          <div class="col-resize-area"></div>
+        </template>
+        <template slot-scope="scope" :column="item">
+           <template v-if="item.prop == 'id'">
+               {{scope.row[item.prop]}}
+            </template>
+            <template v-if="item.prop == 'name'">
+               {{scope.row[item.prop]?scope.row[item.prop]:'-'}}
+            </template>
+             <template v-if="item.prop == 'expireAt'">
+              {{scope.row[item.prop]?scope.row[item.prop]:'-'}}
+            </template>
+            <template v-if="item.prop == 'createAt'">
+              {{scope.row[item.prop]?scope.row[item.prop]:'-'}}
+            </template>
+             <template v-if="item.prop == 'remark'">
+              {{scope.row[item.prop]?scope.row[item.prop]:'-'}}
+            </template>
+        </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" v-has="['system_apiKey_edit','system_apiKey_delete']" class="table-operation-items">
+          <template v-if="scope.row.edit">
+            <button v-has="'system_apiKey_edit'" :disabled="prevent_opt.save" class="nz-btn nz-btn-size-mini nz-btn-style-normal" style="margin-right: 10px" type="button"  @click="save(scope.row)"><span>{{$t('overall.save')}}</span></button>
+            <button :disabled="prevent_opt.save" class="nz-btn nz-btn-size-mini nz-btn-style-light" type="button" @click="cancel(scope.row)"><span>{{$t('overall.cancel')}}</span></button>
+          </template>
+          <template v-else>
+            <button class="table-operation-item" @click="$emit('del',scope.row)" v-has="'system_apiKey_delete'"><i class="nz-icon nz-icon-delete"></i></button>
+          </template>
+        </div>
+      </el-table-column>
+      <template  slot="empty">
+        <div v-if="!loading" class="table-no-data">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#nz-icon-no-data-list"></use>
+          </svg>
+          <div class="table-no-data__title">No results found</div>
+        </div>
+        <div v-else>&nbsp;</div>
+      </template>
+    </el-table>
+</template>
+
+<script>
+import { tableCommon } from './systemCommon'
+import table from '@/components/common/mixin/table'
+export default {
+  name: 'apiKeyTable',
+  props: {
+    loading: Boolean
+  },
+  mixins: [table, tableCommon],
+  data () {
+    return {
+      tableTitle: [
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t('overall.name'),
+          prop: 'name',
+          show: true
+        }, {
+          label: this.$t('config.system.apiKey.expireAt'),
+          prop: 'expireAt',
+          show: true
+        }, {
+          label: this.$t('config.system.apiKey.creatAt'),
+          prop: 'createAt',
+          minWidth: 100,
+          show: false
+        }, {
+          label: this.$t('overall.remark'),
+          prop: 'remark',
+          minWidth: 100,
+          show: true
+        }
+      ]
+    }
+  },
+  methods: {
+  },
+  mounted () {}
+}
+</script>