74 lines
2.2 KiB
Vue
74 lines
2.2 KiB
Vue
<template>
|
|
<div class="page-container">
|
|
<el-card v-loading="loading">
|
|
<template #header>
|
|
<div class="header-row">
|
|
<span>车主详情</span>
|
|
<div>
|
|
<el-button type="warning" @click="handleEdit">编辑</el-button>
|
|
<el-button @click="handleBack">返回</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<el-descriptions :column="2" border v-if="detail">
|
|
<el-descriptions-item label="ID">{{ detail.id }}</el-descriptions-item>
|
|
<el-descriptions-item label="姓名">{{ detail.name }}</el-descriptions-item>
|
|
<el-descriptions-item label="身份证号">{{ detail.id_number }}</el-descriptions-item>
|
|
<el-descriptions-item label="联系电话">{{ detail.phone }}</el-descriptions-item>
|
|
<el-descriptions-item label="联系地址" :span="2">{{ detail.address || '-' }}</el-descriptions-item>
|
|
<el-descriptions-item label="创建时间">{{ formatDate(detail.created_at) }}</el-descriptions-item>
|
|
<el-descriptions-item label="更新时间">{{ formatDate(detail.updated_at) }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
import { ElMessage } from 'element-plus'
|
|
import { getCustomer } from '../../api/customer'
|
|
import type { Customer } from '../../types'
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const loading = ref(false)
|
|
const detail = ref<Customer | null>(null)
|
|
|
|
function formatDate(dateStr: string) {
|
|
if (!dateStr) return ''
|
|
const d = new Date(dateStr)
|
|
return d.toLocaleString('zh-CN', { hour12: false })
|
|
}
|
|
|
|
async function loadDetail() {
|
|
loading.value = true
|
|
try {
|
|
const res = await getCustomer(Number(route.params.id))
|
|
detail.value = res.data
|
|
} catch (e: any) {
|
|
ElMessage.error(e.message || '获取车主信息失败')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function handleEdit() {
|
|
router.push(`/customers/${route.params.id}/edit`)
|
|
}
|
|
|
|
function handleBack() {
|
|
router.push('/customers')
|
|
}
|
|
|
|
onMounted(loadDetail)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.header-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
</style> |