Files
IOT_SIM/web/src/teacher/AssignmentsPanel.vue
T
xuyueandClaude Opus 5.5 89e9956a22 评阅与成绩:老师看代码、运行学生程序、打分、写评语;成绩表与导出
- 评阅页:全班学生列表(提交状态、得分、是否已评阅);选中学生的代码(只读)、自动评分结果、
  规范提示(代码里用到的默认名字控件、注释行数)、老师评分项打分和评语,"保存并看下一个"
- "运行他的程序":新标签页里打开学生的提交,可以操作实训台,改动不保存
- 学生能看到老师的各项得分和评语;作业列表显示总分
- 班级管理页"成绩"标签页:学生 × 作业的总分,点分数进入评阅;单个作业和全班成绩导出 CSV
- 老师增删评分项后,已打的分按新的评分项对齐

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-22 19:13:30 +08:00

110 lines
3.3 KiB
Vue

<script setup lang="ts">
// 一个班的作业列表:布置、修改、删除作业;点"已提交"进入评阅页。
import { h, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { NButton, NDataTable, NEmpty, useDialog, useMessage, type DataTableColumns } from 'naive-ui'
import type { Assignment } from '@iot/shared'
import { api } from '../api'
import AssignmentDialog from './AssignmentDialog.vue'
type Row = Assignment & { studentCount: number; submittedCount: number }
const props = defineProps<{ classId: number }>()
const router = useRouter()
const message = useMessage()
const dialog = useDialog()
const rows = ref<Row[]>([])
const editorOpen = ref(false)
const editing = ref<Assignment | null>(null)
async function load() {
rows.value = await api<Row[]>('GET', `/api/teacher/classes/${props.classId}/assignments`).catch((e: Error) => {
message.error(e.message)
return []
})
}
watch(() => props.classId, load, { immediate: true })
function create() {
editing.value = null
editorOpen.value = true
}
function edit(row: Row) {
editing.value = row
editorOpen.value = true
}
function remove(row: Row) {
dialog.warning({
title: '删除作业',
content: `将删除"${row.title}"和全班的 ${row.submittedCount} 份提交,不能恢复。确定删除吗?`,
positiveText: '删除',
negativeText: '取消',
onPositiveClick: async () => {
await api('DELETE', `/api/teacher/assignments/${row.id}`).catch((e: Error) => message.error(e.message))
await load()
},
})
}
function review(row: Row) {
void router.push(`/teacher/assignments/${row.id}`)
}
const formatTime = (ms: number) =>
new Date(ms).toLocaleString('zh-CN', { month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' })
const columns: DataTableColumns<Row> = [
{ title: '作业', key: 'title' },
{ title: '起点', key: 'startMode', width: 110, render: (r) => (r.startMode === 'ui' ? '界面已做好' : '空白工程') },
{ title: '截止时间', key: 'deadline', width: 130, render: (r) => (r.deadline ? formatTime(r.deadline) : '不限') },
{
title: '已提交',
key: 'submitted',
width: 150,
render: (r) =>
h(NButton, { text: true, type: 'primary', title: '查看提交、评阅', onClick: () => review(r) }, () => `${r.submittedCount} / ${r.studentCount} 人 · 评阅`),
},
{
title: '操作',
key: 'actions',
width: 130,
render: (r) =>
h('div', { class: 'row-actions' }, [
h(NButton, { size: 'tiny', onClick: () => edit(r) }, () => '修改'),
h(NButton, { size: 'tiny', type: 'error', quaternary: true, onClick: () => remove(r) }, () => '删除'),
]),
},
]
</script>
<template>
<div class="panel">
<div class="head">
<NButton size="small" type="primary" @click="create">布置作业</NButton>
</div>
<NDataTable v-if="rows.length" :columns="columns" :data="rows" :row-key="(r: Row) => r.id" size="small" :bordered="false" />
<NEmpty v-else description="还没有布置作业" class="empty" />
<AssignmentDialog v-model:show="editorOpen" :class-id="classId" :editing="editing" @saved="load" />
</div>
</template>
<style scoped>
.head {
display: flex;
justify-content: flex-end;
margin-bottom: 8px;
}
.empty {
margin-top: 40px;
}
:deep(.row-actions) {
display: flex;
gap: 6px;
}
</style>