feat(student): 添加学生详情页及相关路由和跳转按钮
- 在 class.vue 中增加“详情”按钮,可跳转至对应学生详情页 - 使用 vue-router 的 useRouter 实现页面跳转功能 - 添加 /student/:id 路由,绑定学生详情组件 student.vue - 新增 student.vue 组件,展示学生详细信息 - 精简 Header.vue, 移除多余导航链接,优化界面展示
This commit is contained in:
55
enlish-vue/src/pages/student.vue
Normal file
55
enlish-vue/src/pages/student.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div class="common-layout">
|
||||
<el-container>
|
||||
<el-header>
|
||||
<Header></Header>
|
||||
</el-header>
|
||||
|
||||
<el-main class="p-4">
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6" v-loading="loading">
|
||||
<div class="text-lg font-semibold mb-4">学生详情</div>
|
||||
<template v-if="detail">
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item label="ID">{{ detail.id }}</el-descriptions-item>
|
||||
<el-descriptions-item label="姓名">{{ detail.name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="班级">{{ detail.className }}</el-descriptions-item>
|
||||
<el-descriptions-item label="年级">{{ detail.gradeName }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-empty description="暂无数据" />
|
||||
</template>
|
||||
</div>
|
||||
</el-main>
|
||||
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Header from '@/layouts/components/Header.vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { getStudentDetail } from '@/api/student'
|
||||
|
||||
const loading = ref(false)
|
||||
const detail = ref(null)
|
||||
const route = useRoute()
|
||||
|
||||
async function fetchDetail() {
|
||||
const id = route.params.id
|
||||
if (!id) return
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getStudentDetail(id)
|
||||
const d = res.data
|
||||
detail.value = d?.data || null
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchDetail()
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user