567 lines
12 KiB
Vue
567 lines
12 KiB
Vue
<template>
|
|
<div class="homework-review-detail">
|
|
<!-- 顶部区域 -->
|
|
<div class="top-section">
|
|
<!-- 左侧标签页 - 使用 Naive UI Tabs -->
|
|
<div class="tabs-container">
|
|
<n-tabs v-model:value="activeTab" type="line" animated>
|
|
<n-tab-pane name="all" tab="全部" />
|
|
<n-tab-pane name="submitted" tab="已提交" />
|
|
<n-tab-pane name="unsubmitted" tab="未提交" />
|
|
</n-tabs>
|
|
</div>
|
|
|
|
<!-- 右侧按钮和搜索 -->
|
|
<div class="actions-container">
|
|
<n-button class="action-btn export-btn" ghost type="primary" size="small">导出</n-button>
|
|
<n-button class="action-btn remove-btn" ghost type="error" size="small">移除</n-button>
|
|
<div class="search-container">
|
|
<n-input-group>
|
|
<n-input
|
|
v-model:value="searchText"
|
|
placeholder="请输入学生姓名"
|
|
:style="{ width: '200px' }"
|
|
size="medium"
|
|
/>
|
|
<n-button type="primary" size="medium">
|
|
搜索
|
|
</n-button>
|
|
</n-input-group>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据表格 - 使用 Naive UI Table -->
|
|
<div class="table-container">
|
|
<n-data-table
|
|
:columns="activeTab === 'unsubmitted' ? unsubmittedColumns : columns"
|
|
:data="filteredData"
|
|
:pagination="false"
|
|
:bordered="false"
|
|
:single-line="false"
|
|
size="medium"
|
|
:row-key="(row) => row.id"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, h } from 'vue'
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
import {
|
|
NTabs,
|
|
NTabPane,
|
|
NDataTable,
|
|
NButton,
|
|
NInput,
|
|
NInputGroup,
|
|
type DataTableColumns
|
|
} from 'naive-ui'
|
|
|
|
interface HomeworkSubmission {
|
|
id: number
|
|
name: string
|
|
studentId: string
|
|
submitTime: string
|
|
status: '已批阅' | '待批阅'
|
|
reviewer: string
|
|
reviewTime: string
|
|
selected: boolean
|
|
}
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const activeTab = ref<'all' | 'submitted' | 'unsubmitted'>('all')
|
|
const searchText = ref('')
|
|
// const selectAll = ref(false)
|
|
|
|
// 查看作业详情
|
|
const viewHomework = (row: HomeworkSubmission) => {
|
|
router.push(`/teacher/course-editor/${route.params.id}/homework/review/${route.params.homeworkId}/view/${row.studentId}`)
|
|
}
|
|
|
|
// 模拟数据 - 包含已批阅和待批阅的数据
|
|
const homeworkData = ref<HomeworkSubmission[]>([
|
|
{
|
|
id: 1,
|
|
name: '陈成',
|
|
studentId: '1826685554',
|
|
submitTime: '2025.07.25 09:20',
|
|
status: '已批阅',
|
|
reviewer: '王建国',
|
|
reviewTime: '2025.07.25 09:20',
|
|
selected: false
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '李华',
|
|
studentId: '1826685555',
|
|
submitTime: '2025.07.25 10:15',
|
|
status: '待批阅',
|
|
reviewer: '王建国',
|
|
reviewTime: '2025.07.25 10:15',
|
|
selected: false
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '张伟',
|
|
studentId: '1826685556',
|
|
submitTime: '2025.07.25 11:30',
|
|
status: '已批阅',
|
|
reviewer: '王建国',
|
|
reviewTime: '2025.07.25 11:30',
|
|
selected: false
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '王芳',
|
|
studentId: '1826685557',
|
|
submitTime: '2025.07.25 14:20',
|
|
status: '待批阅',
|
|
reviewer: '王建国',
|
|
reviewTime: '2025.07.25 14:20',
|
|
selected: false
|
|
},
|
|
{
|
|
id: 5,
|
|
name: '刘强',
|
|
studentId: '1826685558',
|
|
submitTime: '2025.07.25 16:45',
|
|
status: '已批阅',
|
|
reviewer: '王建国',
|
|
reviewTime: '2025.07.25 16:45',
|
|
selected: false
|
|
},
|
|
{
|
|
id: 6,
|
|
name: '赵敏',
|
|
studentId: '1826685559',
|
|
submitTime: '2025.07.26 08:30',
|
|
status: '待批阅',
|
|
reviewer: '王建国',
|
|
reviewTime: '2025.07.26 08:30',
|
|
selected: false
|
|
},
|
|
{
|
|
id: 7,
|
|
name: '孙丽',
|
|
studentId: '1826685560',
|
|
submitTime: '2025.07.26 09:15',
|
|
status: '已批阅',
|
|
reviewer: '王建国',
|
|
reviewTime: '2025.07.26 09:15',
|
|
selected: false
|
|
},
|
|
{
|
|
id: 8,
|
|
name: '周杰',
|
|
studentId: '1826685561',
|
|
submitTime: '2025.07.26 10:45',
|
|
status: '待批阅',
|
|
reviewer: '王建国',
|
|
reviewTime: '2025.07.26 10:45',
|
|
selected: false
|
|
}
|
|
])
|
|
|
|
// 根据标签页和搜索过滤数据
|
|
const filteredData = computed(() => {
|
|
let filtered = homeworkData.value
|
|
|
|
// 根据标签页过滤
|
|
if (activeTab.value === 'submitted') {
|
|
filtered = filtered.filter((item: HomeworkSubmission) => item.status === '已批阅')
|
|
} else if (activeTab.value === 'unsubmitted') {
|
|
filtered = filtered.filter((item: HomeworkSubmission) => item.status === '待批阅')
|
|
}
|
|
|
|
// 根据搜索文本过滤
|
|
if (searchText.value.trim()) {
|
|
filtered = filtered.filter((item: HomeworkSubmission) =>
|
|
item.name.includes(searchText.value.trim())
|
|
)
|
|
}
|
|
|
|
return filtered
|
|
})
|
|
|
|
// 定义表格列
|
|
const columns: DataTableColumns<HomeworkSubmission> = [
|
|
{
|
|
type: 'selection',
|
|
width: 50,
|
|
fixed: 'left'
|
|
},
|
|
{
|
|
title: '序号',
|
|
key: 'serial',
|
|
width: 60,
|
|
render: (_row: HomeworkSubmission, index: number) => index + 1
|
|
},
|
|
{
|
|
title: '姓名',
|
|
key: 'name',
|
|
width: 100
|
|
},
|
|
{
|
|
title: '学号',
|
|
key: 'studentId',
|
|
width: 120
|
|
},
|
|
{
|
|
title: '提交时间',
|
|
key: 'submitTime',
|
|
width: 150
|
|
},
|
|
{
|
|
title: () => h('div', {
|
|
style: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: '4px'
|
|
}
|
|
}, [
|
|
h('span', '状态'),
|
|
h('img', {
|
|
src: '/images/teacher/箭头-黑.png',
|
|
style: {
|
|
width: '10px',
|
|
height: '6px'
|
|
}
|
|
})
|
|
]),
|
|
key: 'status',
|
|
width: 100,
|
|
render: (_row: HomeworkSubmission) => {
|
|
return h('span', {
|
|
style: {
|
|
color: '#062333',
|
|
fontSize: '14px'
|
|
}
|
|
}, _row.status)
|
|
}
|
|
},
|
|
{
|
|
title: '批阅人',
|
|
key: 'reviewer',
|
|
width: 100
|
|
},
|
|
{
|
|
title: '批阅时间',
|
|
key: 'reviewTime',
|
|
width: 150
|
|
},
|
|
{
|
|
title: '操作',
|
|
key: 'operations',
|
|
width: 200,
|
|
render: (row: HomeworkSubmission) => {
|
|
return h('div', { class: 'operations-container' }, [
|
|
h(NButton, {
|
|
type: 'primary',
|
|
size: 'small',
|
|
ghost: true,
|
|
class: 'operation-btn',
|
|
onClick: () => viewHomework(row)
|
|
}, { default: () => '查看' }),
|
|
row.status === '待批阅' ? h(NButton, {
|
|
type: 'primary',
|
|
size: 'small',
|
|
ghost: true,
|
|
class: 'operation-btn'
|
|
}, { default: () => '批阅' }) : null,
|
|
h(NButton, {
|
|
type: 'error',
|
|
size: 'small',
|
|
ghost: true,
|
|
class: 'operation-btn'
|
|
}, { default: () => '移除' })
|
|
].filter(Boolean))
|
|
}
|
|
}
|
|
]
|
|
|
|
// 定义未提交标签页的列
|
|
const unsubmittedColumns: DataTableColumns<HomeworkSubmission> = [
|
|
{
|
|
type: 'selection',
|
|
width: 50,
|
|
fixed: 'left'
|
|
},
|
|
{
|
|
title: '序号',
|
|
key: 'serial',
|
|
width: 80,
|
|
render: (_row: HomeworkSubmission, index: number) => index + 1
|
|
},
|
|
{
|
|
title: '姓名',
|
|
key: 'name',
|
|
width: 120
|
|
},
|
|
{
|
|
title: '学号',
|
|
key: 'studentId',
|
|
width: 200
|
|
},
|
|
{
|
|
title: '领取时间',
|
|
key: 'reviewTime',
|
|
width: 180
|
|
},
|
|
{
|
|
title: () => h('div', {
|
|
style: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: '4px'
|
|
}
|
|
}, [
|
|
h('span', '状态'),
|
|
h('img', {
|
|
src: '/images/teacher/箭头-黑.png',
|
|
style: {
|
|
width: '10px',
|
|
height: '6px'
|
|
}
|
|
})
|
|
]),
|
|
key: 'status',
|
|
width: 120,
|
|
render: (row: HomeworkSubmission) => {
|
|
return h('span', {
|
|
style: {
|
|
color: '#062333',
|
|
fontSize: '14px'
|
|
}
|
|
}, row.status)
|
|
}
|
|
},
|
|
{
|
|
title: '操作',
|
|
key: 'operations',
|
|
width: 140,
|
|
render: (_row: HomeworkSubmission) => {
|
|
return h('div', { class: 'operations-container' }, [
|
|
h(NButton, {
|
|
type: 'primary',
|
|
size: 'small',
|
|
ghost: true,
|
|
class: 'operation-btn'
|
|
}, { default: () => '提醒' }),
|
|
h(NButton, {
|
|
type: 'error',
|
|
size: 'small',
|
|
ghost: true,
|
|
class: 'operation-btn'
|
|
}, { default: () => '移除' })
|
|
])
|
|
}
|
|
}
|
|
]
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.homework-review-detail {
|
|
width: 100%;
|
|
background: #fff;
|
|
min-height: 100vh;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
/* 顶部区域 */
|
|
.top-section {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
/* 左侧标签页 */
|
|
.tabs-container {
|
|
flex: 1;
|
|
}
|
|
|
|
/* 右侧按钮和搜索 */
|
|
.actions-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
padding: 20px 20px 0 0;
|
|
margin-bottom: 10px;
|
|
padding-bottom: 18px;
|
|
border-bottom: 1.5px solid #E6E6E6;
|
|
}
|
|
|
|
.search-container {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* 表格容器 */
|
|
.table-container {
|
|
padding: 20px 30px 30px 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
:deep(.operations-container) {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 12px !important;
|
|
}
|
|
|
|
.operation-btn {
|
|
min-width: 60px;
|
|
}
|
|
|
|
/* 自定义 Naive UI 组件样式 */
|
|
:deep(.n-tabs-tab) {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #333;
|
|
padding: 10px 0 20px 0;
|
|
}
|
|
|
|
/* 搜索按钮样式 */
|
|
:deep(.search-container .n-button--primary-type) {
|
|
background: #0288D1 !important;
|
|
border-color: #0288D1 !important;
|
|
color: white !important;
|
|
}
|
|
|
|
:deep(.search-container .n-button--primary-type:hover) {
|
|
background: #0277bd !important;
|
|
border-color: #0277bd !important;
|
|
color: white !important;
|
|
}
|
|
|
|
/* 操作按钮样式 */
|
|
:deep(.action-btn) {
|
|
height: 32px !important;
|
|
border-radius: 2px !important;
|
|
padding: 0 14px !important;
|
|
}
|
|
|
|
:deep(.n-tabs-tab--active) {
|
|
color: #5BADD9;
|
|
}
|
|
|
|
:deep(.n-tabs-nav-scroll-content) {
|
|
padding: 20px 0 0 0;
|
|
border-bottom: 1.5px solid #E6E6E6 !important;
|
|
}
|
|
|
|
:deep(.n-tabs-tab--active .n-tabs-tab-pad) {
|
|
border-bottom: 4px solid #0288D1;
|
|
}
|
|
|
|
:deep(.n-data-table) {
|
|
border: 1px solid #e5e5e5;
|
|
border-radius: 2px !important;
|
|
}
|
|
|
|
:deep(.n-data-table .n-data-table-thead th) {
|
|
background: #f8f9fa;
|
|
font-weight: 500;
|
|
color: #062333;
|
|
font-size: 14px;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
text-align: center;
|
|
padding: 8px 12px !important;
|
|
}
|
|
|
|
:deep(.n-data-table .n-data-table-tbody td) {
|
|
font-size: 14px;
|
|
color: #062333;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
text-align: center;
|
|
padding: 8px 12px !important;
|
|
}
|
|
|
|
:deep(.n-data-table .n-data-table-tbody tr:hover) {
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
:deep(.n-tag) {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
:deep(.n-tag--success) {
|
|
background: #5BADD9;
|
|
color: white;
|
|
border: none;
|
|
}
|
|
|
|
:deep(.n-tag--warning) {
|
|
background: #FF9800;
|
|
color: white;
|
|
border: none;
|
|
}
|
|
|
|
:deep(.n-button--primary-type) {
|
|
border-color: #0288D1;
|
|
color: #0288D1;
|
|
}
|
|
|
|
:deep(.n-button--primary-type:hover) {
|
|
background: #0288D1;
|
|
color: white;
|
|
}
|
|
|
|
:deep(.n-button--error-type) {
|
|
border-color: #f44336;
|
|
color: #f44336;
|
|
}
|
|
|
|
:deep(.n-button--error-type:hover) {
|
|
background: #f44336;
|
|
color: white;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 1200px) {
|
|
.top-section {
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.actions-container {
|
|
width: 100%;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
.actions-container {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 10px;
|
|
}
|
|
|
|
.search-container {
|
|
width: 100%;
|
|
}
|
|
|
|
.search-input {
|
|
width: 100%;
|
|
}
|
|
|
|
.operations-container {
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.operation-btn {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style> |