141 lines
3.7 KiB
Vue
141 lines
3.7 KiB
Vue
<template>
|
|
<div class="authorization-record-detail">
|
|
<ElCard shadow="never">
|
|
<!-- 页面头部 -->
|
|
<div class="detail-header">
|
|
<ElButton @click="handleBack">
|
|
<template #icon>
|
|
<ElIcon><ArrowLeft /></ElIcon>
|
|
</template>
|
|
返回
|
|
</ElButton>
|
|
<h2 class="detail-title">授权记录详情</h2>
|
|
</div>
|
|
|
|
<!-- 详情内容 -->
|
|
<DetailPage v-if="detailData" :sections="detailSections" :data="detailData" />
|
|
|
|
<!-- 加载中 -->
|
|
<div v-if="loading" class="loading-container">
|
|
<ElIcon class="is-loading"><Loading /></ElIcon>
|
|
<span>加载中...</span>
|
|
</div>
|
|
</ElCard>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { ElCard, ElButton, ElIcon, ElMessage } from 'element-plus'
|
|
import { ArrowLeft, Loading } from '@element-plus/icons-vue'
|
|
import DetailPage from '@/components/common/DetailPage.vue'
|
|
import type { DetailSection } from '@/components/common/DetailPage.vue'
|
|
import { AuthorizationService } from '@/api/modules'
|
|
import type { AuthorizationItem } from '@/types/api/authorization'
|
|
import { formatDateTime } from '@/utils/business/format'
|
|
|
|
defineOptions({ name: 'AuthorizationRecordDetail' })
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
const loading = ref(false)
|
|
const detailData = ref<AuthorizationItem | null>(null)
|
|
|
|
// 详情页配置
|
|
const detailSections: DetailSection[] = [
|
|
{
|
|
title: '基本信息',
|
|
fields: [
|
|
{ label: '企业ID', prop: 'enterprise_id' },
|
|
{ label: '企业名称', prop: 'enterprise_name' },
|
|
{ label: '卡ID', prop: 'card_id' },
|
|
{ label: 'ICCID', prop: 'iccid' },
|
|
{ label: '手机号', prop: 'msisdn', formatter: (value) => value || '-' },
|
|
{ label: '授权人ID', prop: 'authorized_by' },
|
|
{ label: '授权人', prop: 'authorizer_name' },
|
|
{
|
|
label: '授权人类型',
|
|
formatter: (_, data) => {
|
|
return data.authorizer_type === 2 ? '平台' : '代理'
|
|
}
|
|
},
|
|
{ label: '授权时间', prop: 'authorized_at', formatter: (value) => formatDateTime(value) },
|
|
{
|
|
label: '状态',
|
|
formatter: (_, data) => {
|
|
return data.status === 1 ? '有效' : '已回收'
|
|
}
|
|
},
|
|
{ label: '备注', prop: 'remark', formatter: (value) => value || '-' }
|
|
]
|
|
}
|
|
]
|
|
|
|
// 返回上一页
|
|
const handleBack = () => {
|
|
router.back()
|
|
}
|
|
|
|
// 获取详情数据
|
|
const fetchDetail = async () => {
|
|
const id = Number(route.params.id)
|
|
if (!id) {
|
|
ElMessage.error('缺少ID参数')
|
|
return
|
|
}
|
|
|
|
loading.value = true
|
|
try {
|
|
const res = await AuthorizationService.getAuthorizationDetail(id)
|
|
if (res.code === 0) {
|
|
detailData.value = res.data
|
|
}
|
|
} catch (error) {
|
|
console.error(error)
|
|
ElMessage.error('获取授权记录详情失败')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
fetchDetail()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.authorization-record-detail {
|
|
padding: 20px;
|
|
}
|
|
|
|
.detail-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding-bottom: 16px;
|
|
|
|
.detail-title {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: var(--el-text-color-primary);
|
|
}
|
|
}
|
|
|
|
.loading-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 60px 20px;
|
|
gap: 12px;
|
|
color: var(--el-text-color-secondary);
|
|
|
|
.el-icon {
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
</style>
|