88 行
3.3 KiB
Vue
88 行
3.3 KiB
Vue
|
<template>
|
||
|
|
<div v-if="detail">
|
||
|
|
<el-page-header @back="$router.back()" :content="detail.app.name" style="margin-bottom: 20px" />
|
||
|
|
|
||
|
|
<el-card style="margin-bottom: 16px">
|
||
|
|
<template #header>
|
||
|
|
<div class="header-row">
|
||
|
|
<span>应用信息</span>
|
||
|
|
<el-tag :type="detail.enabledServiceCount > 0 ? 'success' : 'info'">
|
||
|
|
已开通 {{ detail.enabledServiceCount }} 项服务
|
||
|
|
</el-tag>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<el-descriptions :column="2" border>
|
||
|
|
<el-descriptions-item label="应用名称">{{ detail.app.name }}</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="包名">{{ detail.app.packageName }}</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="AppKey">{{ detail.app.appKey }}</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="AppSecret">{{ mask(detail.app.appSecret) }}</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="租户ID">{{ detail.app.tenantId }}</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="创建时间">{{ fmt(detail.app.createdAt) }}</el-descriptions-item>
|
||
|
|
</el-descriptions>
|
||
|
|
</el-card>
|
||
|
|
|
||
|
|
<el-card style="margin-bottom: 16px">
|
||
|
|
<template #header>所属租户</template>
|
||
|
|
<el-descriptions :column="2" border>
|
||
|
|
<el-descriptions-item label="租户昵称">{{ detail.tenant?.nickname || '-' }}</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="租户用户名">{{ detail.tenant?.username || '-' }}</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="租户邮箱">{{ detail.tenant?.email || '-' }}</el-descriptions-item>
|
||
|
|
<el-descriptions-item label="租户状态">{{ detail.tenant?.status === 'ACTIVE' ? '正常' : '禁用' }}</el-descriptions-item>
|
||
|
|
</el-descriptions>
|
||
|
|
</el-card>
|
||
|
|
|
||
|
|
<el-card>
|
||
|
|
<template #header>功能服务</template>
|
||
|
|
<el-table :data="detail.services" border stripe>
|
||
|
|
<el-table-column prop="platform" label="平台" width="120" />
|
||
|
|
<el-table-column prop="serviceType" label="服务类型" width="140" />
|
||
|
|
<el-table-column label="状态" width="120">
|
||
|
|
<template #default="{ row }">
|
||
|
|
<el-tag :type="row.enabled ? 'success' : 'info'">
|
||
|
|
{{ row.enabled ? '已开通' : '未开通' }}
|
||
|
|
</el-tag>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="createdAt" label="创建时间" width="180">
|
||
|
|
<template #default="{ row }">{{ fmt(row.createdAt) }}</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="config" label="配置" min-width="240" show-overflow-tooltip />
|
||
|
|
</el-table>
|
||
|
|
</el-card>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { onMounted, ref } from 'vue'
|
||
|
|
import { useRoute } from 'vue-router'
|
||
|
|
import { opsApi, type AppDetail } from '@/api/ops'
|
||
|
|
|
||
|
|
const route = useRoute()
|
||
|
|
const detail = ref<AppDetail | null>(null)
|
||
|
|
|
||
|
|
async function loadDetail() {
|
||
|
|
const res = await opsApi.getApp(route.params.id as string)
|
||
|
|
detail.value = res.data.data
|
||
|
|
}
|
||
|
|
|
||
|
|
function fmt(value: string) {
|
||
|
|
return value ? new Date(value).toLocaleString('zh-CN') : '-'
|
||
|
|
}
|
||
|
|
|
||
|
|
function mask(value: string) {
|
||
|
|
if (!value) return '-'
|
||
|
|
return `${value.slice(0, 4)}********${value.slice(-4)}`
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(loadDetail)
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.header-row {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
</style>
|
