135 lines
3.5 KiB
Vue
135 lines
3.5 KiB
Vue
<template>
|
|
<div class="asset-assign-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 { CardService } from '@/api/modules'
|
|
import type { AssetAllocationRecord } from '@/types/api/card'
|
|
import { formatDateTime } from '@/utils/business/format'
|
|
|
|
defineOptions({ name: 'AssetAssignDetail' })
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
const loading = ref(false)
|
|
const detailData = ref<AssetAllocationRecord | null>(null)
|
|
|
|
// 详情页配置
|
|
const detailSections: DetailSection[] = [
|
|
{
|
|
title: '基本信息',
|
|
fields: [
|
|
{ label: '分配单号', prop: 'allocation_no' },
|
|
{
|
|
label: '分配类型',
|
|
formatter: (_, data) => data.allocation_name || '-'
|
|
},
|
|
{
|
|
label: '资产类型',
|
|
formatter: (_, data) => data.asset_type_name || '-'
|
|
},
|
|
{ label: '资产标识符', prop: 'asset_identifier' },
|
|
{ label: '来源所有者', prop: 'from_owner_name' },
|
|
{ label: '目标所有者', prop: 'to_owner_name' },
|
|
{ label: '操作人', prop: 'operator_name' },
|
|
{ label: '关联卡数量', prop: 'related_card_count' },
|
|
{ label: '创建时间', prop: 'created_at', formatter: (value) => formatDateTime(value) },
|
|
{ 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 CardService.getAssetAllocationRecordDetail(id)
|
|
if (res.code === 0) {
|
|
detailData.value = res.data
|
|
}
|
|
} catch (error) {
|
|
console.error(error)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
fetchDetail()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.asset-assign-detail {
|
|
padding: 20px;
|
|
}
|
|
|
|
.detail-header {
|
|
display: flex;
|
|
gap: 16px;
|
|
align-items: center;
|
|
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;
|
|
gap: 12px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 60px 20px;
|
|
color: var(--el-text-color-secondary);
|
|
|
|
.el-icon {
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
</style>
|