实验成绩管理改为紧凑的课程分组视图

This commit is contained in:
2026-08-10 16:57:10 +08:00 Unverified
parent 031459ac80
commit fc326ac16e
3 changed files with 112 additions and 62 deletions
@@ -76,13 +76,25 @@ public sealed class ExperimentGradesController(
item.Teacher!.TeacherNumber.Contains(keyword) || item.Teacher!.TeacherNumber.Contains(keyword) ||
item.Teacher.Name.Contains(keyword))); item.Teacher.Name.Contains(keyword)));
var total = await source.CountAsync(cancellationToken); var total = await source.Select(x => x.TeachingTaskId)
var items = await source .Distinct()
.OrderByDescending(x => x.TeachingTask!.AcademicTerm!.StartDate) .CountAsync(cancellationToken);
.ThenBy(x => x.TeachingTask!.TaskNumber) var taskIds = await source
.ThenBy(x => x.Code) .GroupBy(x => new
{
x.TeachingTaskId,
StartDate = x.TeachingTask!.AcademicTerm!.StartDate,
x.TeachingTask.TaskNumber
})
.OrderByDescending(x => x.Key.StartDate)
.ThenBy(x => x.Key.TaskNumber)
.Skip((page - 1) * pageSize) .Skip((page - 1) * pageSize)
.Take(pageSize) .Take(pageSize)
.Select(x => x.Key.TeachingTaskId)
.ToListAsync(cancellationToken);
var projects = await source
.Where(x => taskIds.Contains(x.TeachingTaskId))
.OrderBy(x => x.Code)
.Select(x => new .Select(x => new
{ {
x.Id, x.Id,
@@ -124,6 +136,32 @@ public sealed class ExperimentGradesController(
} }
}) })
.ToListAsync(cancellationToken); .ToListAsync(cancellationToken);
var order = taskIds.Select((id, index) => new { id, index })
.ToDictionary(x => x.id, x => x.index);
var items = projects.GroupBy(x => x.TeachingTaskId)
.OrderBy(group => order[group.Key])
.Select(group =>
{
var first = group.First();
return new
{
TeachingTaskId = group.Key,
first.TaskNumber,
first.TaskName,
first.AcademicTermId,
first.TermName,
first.CourseCode,
first.CourseName,
first.CollegeName,
first.TeacherNames,
ProjectCount = group.Count(),
SheetCount = group.Count(project => project.Sheet != null),
ScoredCount = group.Sum(project => project.Sheet?.ScoredCount ?? 0),
StudentCount = group.Sum(project => project.Sheet?.StudentCount ?? 0),
Projects = group.ToList()
};
})
.ToList();
return Ok(new return Ok(new
{ {
Items = items, Items = items,
@@ -198,10 +198,11 @@ public sealed class ExperimentGradesControllerTests
1, 1,
10, 10,
CancellationToken.None)); CancellationToken.None));
Assert.Equal(12, Property<int>(page.Value, "Total")); Assert.Equal(1, Property<int>(page.Value, "Total"));
Assert.Equal(10, Property<System.Collections.IEnumerable>( var course = Assert.Single(Property<System.Collections.IEnumerable>(
page.Value, page.Value, "Items").Cast<object>());
"Items").Cast<object>().Count()); Assert.Equal(12, Property<System.Collections.IEnumerable>(
course, "Projects").Cast<object>().Count());
var filtered = Assert.IsType<OkObjectResult>(await controller.GetManagement( var filtered = Assert.IsType<OkObjectResult>(await controller.GetManagement(
null, null,
+64 -53
View File
@@ -36,8 +36,8 @@ const collegeId = ref('')
const projectKeyword = ref('') const projectKeyword = ref('')
const projectPage = ref(1) const projectPage = ref(1)
const projectPageSize = ref(20) const projectPageSize = ref(20)
const projectTotal = ref(0) const courseTotal = ref(0)
const projects = ref<any[]>([]) const courses = ref<any[]>([])
const studentResults = ref<any[]>([]) const studentResults = ref<any[]>([])
const detailDrawer = ref(false) const detailDrawer = ref(false)
const detail = ref<any | null>(null) const detail = ref<any | null>(null)
@@ -200,8 +200,8 @@ async function load() {
pageSize: projectPageSize.value, pageSize: projectPageSize.value,
}, },
})).data })).data
projects.value = data.items courses.value = data.items
projectTotal.value = data.total courseTotal.value = data.total
projectPage.value = data.page projectPage.value = data.page
projectPageSize.value = data.pageSize projectPageSize.value = data.pageSize
} }
@@ -564,45 +564,52 @@ onMounted(async () => {
<el-button type="primary" @click="projectPage = 1; load()">查询</el-button> <el-button type="primary" @click="projectPage = 1; load()">查询</el-button>
</section> </section>
<section v-loading="loading" class="grade-project-list"> <section v-loading="loading" class="grade-course-list">
<article v-for="project in projects" :key="project.id" class="grade-project-card"> <article v-for="course in courses" :key="course.teachingTaskId" class="grade-course-card">
<div class="project-mark"> <header class="grade-course-head">
<span>{{ project.code }}</span> <div>
<b>{{ modeLabels[project.arrangementMode] }}</b> <span>{{ course.termName }} · {{ course.taskNumber }}</span>
</div> <h3>{{ course.courseCode }} · {{ course.courseName }}</h3>
<div class="project-summary"> <small>{{ course.teacherNames.join('、') || '教师待定' }} · {{ course.collegeName }}</small>
<h3>{{ project.name }}</h3>
<p>{{ project.courseCode }} · {{ project.courseName }}</p>
<small>{{ project.taskNumber }} · {{ project.termName }} · {{ project.teacherNames.join('、') || '教师待定' }}</small>
</div>
<template v-if="project.sheet">
<div class="sheet-progress">
<el-tag :type="statusTypes[project.sheet.status] as any" effect="plain">
{{ statusLabels[project.sheet.status] }}
</el-tag>
<span><b>{{ project.sheet.scoredCount }}</b> / {{ project.sheet.studentCount }} 已计分</span>
<span>评分项 {{ project.sheet.itemCount }} · 合格线 {{ project.sheet.passScore }}</span>
</div> </div>
<el-button type="primary" plain :icon="EditPen" @click="openDetail(project)"> <div class="course-rollup">
打开成绩单 <b>{{ course.projectCount }}</b><span>个实验项目</span>
</el-button> <small v-if="course.sheetCount">{{ course.sheetCount }} 份成绩单 · {{ course.scoredCount }}/{{ course.studentCount }} 已计分</small>
</template> <small v-else>尚未建立成绩单</small>
<template v-else>
<div class="sheet-empty">
<b>尚未建立实验成绩单</b>
<span>建立时会按集中名单或有效预约生成评分对象</span>
</div> </div>
<el-button type="primary" :icon="Plus" @click="openCreate(project)"> </header>
建立成绩单 <el-table :data="course.projects" size="small" class="course-project-table">
</el-button> <el-table-column label="实验项目" min-width="260">
</template> <template #default="{ row }">
<div class="course-project-name">
<b>{{ row.code }} · {{ row.name }}</b>
<small>{{ modeLabels[row.arrangementMode] }}</small>
</div>
</template>
</el-table-column>
<el-table-column label="成绩进度" min-width="190">
<template #default="{ row }">
<div v-if="row.sheet" class="course-project-progress">
<el-tag :type="statusTypes[row.sheet.status] as any" size="small" effect="plain">{{ statusLabels[row.sheet.status] }}</el-tag>
<span>{{ row.sheet.scoredCount }}/{{ row.sheet.studentCount }} 已计分 · {{ row.sheet.itemCount }} </span>
</div>
<span v-else class="table-muted">尚未建立成绩单</span>
</template>
</el-table-column>
<el-table-column label="操作" width="130" align="right">
<template #default="{ row }">
<el-button v-if="row.sheet" type="primary" text :icon="EditPen" @click="openDetail(row)">打开成绩单</el-button>
<el-button v-else type="primary" text :icon="Plus" @click="openCreate(row)">建立成绩单</el-button>
</template>
</el-table-column>
</el-table>
</article> </article>
<el-empty v-if="!loading && !projects.length" description="当前筛选条件下没有可评分实验项目" /> <el-empty v-if="!loading && !courses.length" description="当前筛选条件下没有可评分实验课程" />
</section> </section>
<el-pagination <el-pagination
v-model:current-page="projectPage" v-model:current-page="projectPage"
v-model:page-size="projectPageSize" v-model:page-size="projectPageSize"
:total="projectTotal" :total="courseTotal"
:page-sizes="[10, 20, 50]" :page-sizes="[10, 20, 50]"
layout="total, sizes, prev, pager, next" layout="total, sizes, prev, pager, next"
@current-change="load" @current-change="load"
@@ -850,18 +857,24 @@ onMounted(async () => {
.grade-toolbar .el-select { width: 220px; } .grade-toolbar .el-select { width: 220px; }
.grade-toolbar .el-input { width: min(320px, 100%); } .grade-toolbar .el-input { width: min(320px, 100%); }
.grade-toolbar > span { margin-left: auto; color: var(--muted); font-size: 12px; } .grade-toolbar > span { margin-left: auto; color: var(--muted); font-size: 12px; }
.grade-project-list { display: grid; gap: 12px; min-height: 180px; } .grade-course-list { display: grid; gap: 10px; min-height: 180px; }
.grade-project-card { min-width: 0; padding: 16px 18px; display: grid; grid-template-columns: 130px minmax(220px, 1.4fr) minmax(220px, 1fr) auto; align-items: center; gap: 18px; border: 1px solid #d9e4e8; border-left: 5px solid var(--grade-blue); background: #fff; box-shadow: 0 6px 18px rgb(30 68 86 / 5%); } .grade-course-card { overflow: hidden; border: 1px solid #d9e4e8; border-left: 4px solid var(--grade-blue); background: #fff; box-shadow: 0 4px 13px rgb(30 68 86 / 4%); }
.project-mark { display: grid; gap: 7px; } .grade-course-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; background: #f3f7f8; }
.project-mark span { overflow: hidden; color: #607b88; font: 700 10px/1.3 Consolas, monospace; text-overflow: ellipsis; } .grade-course-head > div:first-child { min-width: 0; }
.project-mark b { color: var(--grade-blue); font-size: 12px; } .grade-course-head span { color: #607b88; font: 700 10px/1.3 Consolas, monospace; }
.project-summary { min-width: 0; } .grade-course-head h3 { margin: 3px 0; color: var(--grade-ink); font-size: 15px; }
.project-summary h3 { margin: 0 0 5px; color: var(--grade-ink); font-size: 17px; } .grade-course-head small { display: block; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.project-summary p { margin: 0 0 4px; color: #365f73; font-size: 13px; } .course-rollup { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 5px; flex: none; text-align: right; }
.project-summary small { display: block; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; } .course-rollup b { color: var(--grade-teal); font: 750 22px/1 Consolas, monospace; }
.sheet-progress, .sheet-empty { display: grid; gap: 5px; color: #607681; font-size: 12px; } .course-rollup > span { color: #55707b; font: 600 11px/1.2 inherit; }
.sheet-progress b { color: var(--grade-teal); } .course-rollup small { grid-column: 1 / -1; margin-top: 3px; color: #70858d; font-size: 10px; }
.sheet-empty b { color: #5d7480; } .course-project-table { width: 100%; --el-table-border-color: #e0e8ea; }
.course-project-table :deep(td.el-table__cell), .course-project-table :deep(th.el-table__cell) { padding: 6px 0; }
.course-project-table :deep(th.el-table__cell) { color: #71858d; font-size: 10px; }
.course-project-name { display: grid; gap: 2px; }
.course-project-name b { color: #294d5c; font-size: 12px; }
.course-project-name small, .course-project-progress { color: #6d838b; font-size: 10px; }
.course-project-progress { display: flex; align-items: center; gap: 7px; }
.student-course-results { display: grid; gap: 12px; min-height: 180px; } .student-course-results { display: grid; gap: 12px; min-height: 180px; }
.student-course-result { overflow: hidden; border: 1px solid #cfdee3; background: #fff; } .student-course-result { overflow: hidden; border: 1px solid #cfdee3; background: #fff; }
.student-course-head { min-height: 76px; padding: 11px 14px 11px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-left: 5px solid var(--grade-blue); background: #edf4f6; } .student-course-head { min-height: 76px; padding: 11px 14px 11px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-left: 5px solid var(--grade-blue); background: #edf4f6; }
@@ -942,9 +955,7 @@ onMounted(async () => {
.workbench-actions b { color: #a24f36; font-size: 12px; } .workbench-actions b { color: #a24f36; font-size: 12px; }
.workbench-actions span { color: var(--muted); font-size: 12px; } .workbench-actions span { color: var(--muted); font-size: 12px; }
@media (max-width: 980px) { @media (max-width: 980px) {
.grade-project-card { grid-template-columns: 110px minmax(0, 1fr) auto; } .grade-course-head { align-items: flex-start; }
.sheet-progress, .sheet-empty { grid-column: 2; }
.grade-project-card > .el-button { grid-column: 3; grid-row: 1 / span 2; }
} }
@media (max-width: 700px) { @media (max-width: 700px) {
.assessment-flow { grid-template-columns: 1fr; } .assessment-flow { grid-template-columns: 1fr; }
@@ -952,8 +963,8 @@ onMounted(async () => {
.grade-toolbar { align-items: stretch; flex-direction: column; } .grade-toolbar { align-items: stretch; flex-direction: column; }
.grade-toolbar .el-select, .grade-toolbar .el-input { width: 100%; } .grade-toolbar .el-select, .grade-toolbar .el-input { width: 100%; }
.grade-toolbar > span { margin-left: 0; } .grade-toolbar > span { margin-left: 0; }
.grade-project-card { grid-template-columns: 1fr; } .grade-course-head { align-items: stretch; flex-direction: column; }
.sheet-progress, .sheet-empty, .grade-project-card > .el-button { grid-column: 1; grid-row: auto; width: 100%; } .course-rollup { align-self: flex-start; text-align: left; }
.student-result-grid { grid-template-columns: 1fr; } .student-result-grid { grid-template-columns: 1fr; }
.student-result-card > header { align-items: stretch; flex-direction: column; } .student-result-card > header { align-items: stretch; flex-direction: column; }
.score-seal { width: auto; padding-top: 12px; grid-template-columns: auto auto; gap: 8px; border-top: 1px solid #dce6e8; border-left: 0; } .score-seal { width: auto; padding-top: 12px; grid-template-columns: auto auto; gap: 8px; border-top: 1px solid #dce6e8; border-left: 0; }