125 lines
3.4 KiB
Vue
125 lines
3.4 KiB
Vue
<template>
|
||
<el-dialog title="API Key" v-model="dialogVisible" width="800">
|
||
<el-button type="primary" class="mb-16" @click="createApiKey"> 创建 </el-button>
|
||
<el-table :data="apiKey" class="mb-16" :loading="loading">
|
||
<el-table-column prop="secret_key" label="API Key">
|
||
<template #default="{ row }">
|
||
<span class="vertical-middle lighter break-all">
|
||
{{ row.secret_key }}
|
||
</span>
|
||
<el-button type="primary" text @click="copyClick(row.secret_key)">
|
||
<AppIcon iconName="app-copy"></AppIcon>
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="状态" width="60">
|
||
<template #default="{ row }">
|
||
<div @click.stop>
|
||
<el-switch size="small" v-model="row.is_active" @change="changeState($event, row)" />
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="name" label="创建日期" width="170">
|
||
<template #default="{ row }">
|
||
{{ datetimeFormat(row.create_time) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" align="left" width="80">
|
||
<template #default="{ row }">
|
||
<el-tooltip effect="dark" content="删除" placement="top">
|
||
<el-button type="primary" text @click="deleteApiKey(row)">
|
||
<el-icon><Delete /></el-icon>
|
||
</el-button>
|
||
</el-tooltip>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-dialog>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ref, watch } from 'vue'
|
||
import { useRoute } from 'vue-router'
|
||
import { copyClick } from '@/utils/clipboard'
|
||
import overviewApi from '@/api/application-overview'
|
||
import { datetimeFormat } from '@/utils/time'
|
||
import { MsgSuccess, MsgConfirm } from '@/utils/message'
|
||
import useStore from '@/stores'
|
||
const route = useRoute()
|
||
const {
|
||
params: { id }
|
||
} = route
|
||
const { application } = useStore()
|
||
|
||
const emit = defineEmits(['addData'])
|
||
|
||
const dialogVisible = ref<boolean>(false)
|
||
const loading = ref(false)
|
||
const apiKey = ref<any>(null)
|
||
|
||
watch(dialogVisible, (bool) => {
|
||
if (!bool) {
|
||
apiKey.value = null
|
||
}
|
||
})
|
||
|
||
function deleteApiKey(row: any) {
|
||
MsgConfirm(
|
||
`是否删除API Key：${row.secret_key} ?`,
|
||
`删除后无法使用该 API Key 调用接口，请谨慎操作`,
|
||
{
|
||
confirmButtonText: '删除',
|
||
confirmButtonClass: 'danger'
|
||
}
|
||
)
|
||
.then(() => {
|
||
overviewApi.delAPIKey(id as string, row.id, loading).then(() => {
|
||
MsgSuccess('删除成功')
|
||
getApiKeyList()
|
||
})
|
||
})
|
||
.catch(() => {})
|
||
}
|
||
|
||
function changeState(bool: Boolean, row: any) {
|
||
const obj = {
|
||
is_active: bool
|
||
}
|
||
const str = bool ? '启用成功' : '禁用成功'
|
||
overviewApi.putAPIKey(id as string, row.id, obj, loading).then((res) => {
|
||
MsgSuccess(str)
|
||
getApiKeyList()
|
||
})
|
||
}
|
||
|
||
function createApiKey() {
|
||
overviewApi.postAPIKey(id as string, loading).then((res) => {
|
||
getApiKeyList()
|
||
})
|
||
}
|
||
|
||
const open = () => {
|
||
getApiKeyList()
|
||
dialogVisible.value = true
|
||
}
|
||
|
||
function getApiKeyList() {
|
||
overviewApi.getAPIKey(id as string, loading).then((res) => {
|
||
apiKey.value = res.data
|
||
})
|
||
}
|
||
|
||
defineExpose({ open })
|
||
</script>
|
||
<style lang="scss" scope>
|
||
.embed-dialog {
|
||
.code {
|
||
color: var(--app-text-color) !important;
|
||
background: var(--app-layout-bg-color);
|
||
font-weight: 400;
|
||
font-size: 13px;
|
||
white-space: pre;
|
||
height: 180px;
|
||
}
|
||
}
|
||
</style>
|