lina/src/layout/components/NavHeader/ApiKey.vue

<template>
  <div>
    <Dialog :destroy-on-close="true" width="60%" :visible.sync="showDialog" :title="this.$t('setting.ApiKeyList')" :show-cancel="false" :show-confirm="false">
      <div>
        <el-alert type="success"> {{ helpMessage }} </el-alert>
        <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
      </div>
    </Dialog>
  </div>
</template>

<script>
import Dialog from '@/components/Dialog'
import ListTable from '@/components/ListTable'
import { DateFormatter, ShowKeyFormatter } from '@/components/TableFormatters'
export default {
  name: 'ApiKey',
  components: {
    Dialog,
    ListTable
  },
  props: {

  },
  data() {
    return {
      showDialog: false,
      helpMessage: this.$t('setting.helpText.ApiKeyList'),
      tableConfig: {
        hasSelection: true,
        url: `/api/v1/authentication/access-keys/`,
        columns: [
          'id', 'secret', 'is_active', 'date_created', 'actions'
        ],
        columnsMeta: {
          id: {
            label: 'AccessKeyID',
            width: '315px'
          },
          secret: {
            label: 'AccessKeySecret',
            width: '315px',
            formatter: ShowKeyFormatter
          },
          is_active: {
            width: '80px'
          },
          date_created: {
            label: this.$t('common.dateCreated'),
            showOverflowTooltip: true,
            formatter: DateFormatter
          },
          actions: {
            prop: '',
            formatterArgs: {
              hasUpdate: false,
              onDelete: function({ row, col, cellValue, reload }) {
                this.$axios.delete(
                  `/api/v1/authentication/access-keys/${row.id}/`
                ).then(res => {
                  this.$refs.ListTable.reloadTable()
                  this.$message.success(this.$t('common.deleteSuccessMsg'))
                }).catch(error => {
                  this.$message.error(this.$t('common.deleteErrorMsg') + ' ' + error)
                })
              }.bind(this),
              extraActions: [
                {
                  name: 'Enabled',
                  title: this.$t('common.On/Off'),
                  type: 'info',
                  callback: function({ row, col, cellValue, reload }) {
                    this.$axios.patch(
                      `/api/v1/authentication/access-keys/${row.id}/`,
                      { is_active: !row.is_active }
                    ).then(res => {
                      this.$refs.ListTable.reloadTable()
                      this.$message.success(this.$t('common.updateSuccessMsg'))
                    }).catch(error => {
                      this.$message.error(this.$t('common.updateErrorMsg' + ' ' + error))
                    })
                  }.bind(this)
                }
              ]
            }
          }
        }
      },
      headerActions: {
        hasSearch: true,
        hasRightActions: true,
        hasRefresh: true,
        hasExport: false,
        hasImport: false,
        hasBulkDelete: false,
        hasCreate: false,
        extraActions: [
          {
            name: this.$t('setting.Create'),
            title: this.$t('setting.Create'),
            type: 'primary',
            can: true,
            callback: function() {
              this.$axios.post(
                `/api/v1/authentication/access-keys/`
              ).then(res => {
                this.$refs.ListTable.reloadTable()
                this.$message.success(this.$t('common.updateSuccessMsg'))
              }).catch(error => {
                this.$message.error(this.$t('common.updateErrorMsg' + ' ' + error))
              })
            }.bind(this)
          }
        ]
      }
    }
  },
  methods: {
    showApi() {
      this.showDialog = !this.showDialog
    }
  }
}
</script>

<style lang='scss' scoped>
.api-key-dialog >>> .el-dialog__body {
  padding-top: 0;
}
</style>