<template>
|
<div class="detail-container">
|
<div class="header">
|
<el-button @click="handleBack" type="primary" size="small">返回</el-button>
|
<h2>图书详情</h2>
|
</div>
|
|
<div class="content" v-loading="loading">
|
<el-card v-if="current">
|
<template #header>
|
<div class="card-header">
|
<span>基本信息</span>
|
</div>
|
</template>
|
|
<el-descriptions :column="2" border>
|
<el-descriptions-item label="图书编号">{{ current.docNumber }}</el-descriptions-item>
|
<el-descriptions-item label="图书名称">{{ current.docName }}</el-descriptions-item>
|
<el-descriptions-item label="入库时间">{{ current.createTime }}</el-descriptions-item>
|
<!-- <el-descriptions-item label="当前位置">{{ current.currentLocation }}</el-descriptions-item> -->
|
<el-descriptions-item label="状态">{{ current.docStatus }}</el-descriptions-item>
|
</el-descriptions>
|
|
<!-- <div class="additional-info" v-if="current.description">
|
<h4>图书简介</h4>
|
<p>{{ current.description }}</p>
|
</div> -->
|
</el-card>
|
|
<el-empty v-else description="暂无数据" />
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue'
|
|
// 定义props
|
const props = defineProps({
|
current: {
|
type: Object,
|
required: true
|
}
|
})
|
|
// 定义emits
|
const emit = defineEmits(['hanldeBack'])
|
|
// 响应式数据
|
const loading = ref(false)
|
// const bookInfo = ref(null)
|
|
// 方法
|
const handleBack = () => {
|
emit('hanldeBack')
|
}
|
|
</script>
|
|
<style scoped>
|
.detail-container {
|
padding: 20px;
|
height: 100%;
|
background-color: #f5f5f5;
|
}
|
|
.header {
|
display: flex;
|
align-items: center;
|
margin-bottom: 20px;
|
background-color: #fff;
|
padding: 15px 20px;
|
border-radius: 4px;
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
}
|
|
.header h2 {
|
margin: 0 0 0 20px;
|
color: #333;
|
}
|
|
.content {
|
background-color: #fff;
|
border-radius: 4px;
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
}
|
|
.card-header {
|
font-weight: bold;
|
color: #333;
|
}
|
|
.additional-info {
|
margin-top: 20px;
|
padding-top: 20px;
|
border-top: 1px solid #ebeef5;
|
}
|
|
.additional-info h4 {
|
margin: 0 0 10px 0;
|
color: #333;
|
font-size: 16px;
|
}
|
|
.additional-info p {
|
margin: 0;
|
color: #666;
|
line-height: 1.6;
|
}
|
</style>
|
