成绩录入页面优化
This commit is contained in:
biss committed
1 parent
53bee58a84
commit
7124011da9
3 files changed
+234
-54
No files matched your search
@@ -0,0 +1,67 @@
|
||||
import { nextTick } from 'vue'
|
||||
|
||||
type Direction = 'up' | 'down' | 'left' | 'right'
|
||||
|
||||
/**
|
||||
* Makes an editable score table behave like a spreadsheet without changing
|
||||
* the normal keyboard behaviour of selects, switches, or free-text fields.
|
||||
*/
|
||||
export function useScoreGridNavigation(grid: string) {
|
||||
function handleScoreGridKeydown(event: KeyboardEvent) {
|
||||
const directionByKey: Record<string, Direction | undefined> = {
|
||||
Enter: 'down',
|
||||
ArrowUp: 'up',
|
||||
ArrowDown: 'down',
|
||||
ArrowLeft: 'left',
|
||||
ArrowRight: 'right',
|
||||
}
|
||||
const direction = directionByKey[event.key]
|
||||
if (!direction) return
|
||||
|
||||
const current = event.currentTarget as HTMLElement
|
||||
const row = Number(current.dataset.scoreRow)
|
||||
const column = Number(current.dataset.scoreColumn)
|
||||
if (!Number.isFinite(row) || !Number.isFinite(column)) return
|
||||
|
||||
const cells = Array.from(
|
||||
document.querySelectorAll<HTMLElement>(`[data-score-grid="${grid}"]`),
|
||||
).filter((cell) => {
|
||||
const input = cell.querySelector<HTMLInputElement>('input')
|
||||
return input && !input.disabled && !input.readOnly
|
||||
})
|
||||
|
||||
const findCell = (targetRow: number, targetColumn: number) =>
|
||||
cells.find((cell) =>
|
||||
Number(cell.dataset.scoreRow) === targetRow
|
||||
&& Number(cell.dataset.scoreColumn) === targetColumn)
|
||||
|
||||
let target: HTMLElement | undefined
|
||||
if (direction === 'left' || direction === 'right') {
|
||||
const rowCells = cells
|
||||
.filter((cell) => Number(cell.dataset.scoreRow) === row)
|
||||
.sort((left, right) => Number(left.dataset.scoreColumn) - Number(right.dataset.scoreColumn))
|
||||
const currentIndex = rowCells.indexOf(current)
|
||||
target = rowCells[currentIndex + (direction === 'left' ? -1 : 1)]
|
||||
} else {
|
||||
const columnCells = cells
|
||||
.filter((cell) => Number(cell.dataset.scoreColumn) === column)
|
||||
.sort((top, bottom) => Number(top.dataset.scoreRow) - Number(bottom.dataset.scoreRow))
|
||||
const currentIndex = columnCells.indexOf(current)
|
||||
target = columnCells[currentIndex + (direction === 'up' ? -1 : 1)]
|
||||
?? findCell(row + (direction === 'up' ? -1 : 1), column)
|
||||
}
|
||||
|
||||
// Keep arrow keys from changing an input-number value; navigation is the
|
||||
// expected spreadsheet action even at an edge where no next cell exists.
|
||||
event.preventDefault()
|
||||
if (!target) return
|
||||
|
||||
void nextTick(() => {
|
||||
const input = target?.querySelector<HTMLInputElement>('input')
|
||||
input?.focus()
|
||||
input?.select()
|
||||
})
|
||||
}
|
||||
|
||||
return { handleScoreGridKeydown }
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
||||
import {
|
||||
Check,
|
||||
Download,
|
||||
@@ -19,8 +19,10 @@ import {
|
||||
academicTermOptionClass,
|
||||
defaultAcademicTermId,
|
||||
} from '../utils/academicTerms'
|
||||
import { useScoreGridNavigation } from '../utils/scoreGridNavigation'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const { handleScoreGridKeydown } = useScoreGridNavigation('experiment-grade-entry')
|
||||
const isStudent = computed(() => auth.user?.roles.includes('Student') ?? false)
|
||||
const canViewAllColleges = computed(() =>
|
||||
auth.user?.roles.some((role) => ['SuperAdmin', 'AcademicAdmin'].includes(role)) ?? false,
|
||||
@@ -28,6 +30,10 @@ const canViewAllColleges = computed(() =>
|
||||
const loading = ref(false)
|
||||
const detailLoading = ref(false)
|
||||
const saving = ref(false)
|
||||
const autoSaveState = ref<'idle' | 'saving' | 'saved' | 'error'>('idle')
|
||||
let autoSaveTimer: ReturnType<typeof setTimeout> | undefined
|
||||
let savedRecordSnapshot = ''
|
||||
let autoSaving = false
|
||||
const terms = ref<any[]>([])
|
||||
const colleges = ref<any[]>([])
|
||||
const termId = ref('')
|
||||
@@ -252,6 +258,7 @@ async function loadDetail() {
|
||||
detail.value.canEdit = response.canEdit
|
||||
detail.value.canReview = response.canReview
|
||||
detail.value.canPublish = response.canPublish
|
||||
savedRecordSnapshot = experimentRecordSnapshot()
|
||||
} catch (error) {
|
||||
ElMessage.error(apiErrorMessage(error))
|
||||
} finally {
|
||||
@@ -276,36 +283,67 @@ function previewTotal(record: any): number | null {
|
||||
return Math.round(total * 10) / 10
|
||||
}
|
||||
|
||||
async function saveRecords() {
|
||||
function experimentRecordPayload() {
|
||||
return detail.value.records.map((record: any) => ({
|
||||
id: record.id,
|
||||
participationStatus: record.participationStatus,
|
||||
safetyViolation: record.safetyViolation,
|
||||
attemptNumber: record.attemptNumber,
|
||||
submissionReference: record.submissionReference,
|
||||
submittedAt: record.submittedAt,
|
||||
isLate: record.isLate,
|
||||
teacherComment: record.teacherComment,
|
||||
itemScores: record.itemScores.map((score: any) => ({
|
||||
experimentGradeItemId: score.experimentGradeItemId,
|
||||
score: score.score,
|
||||
comment: score.comment,
|
||||
})),
|
||||
}))
|
||||
}
|
||||
|
||||
function experimentRecordSnapshot() {
|
||||
return detail.value ? JSON.stringify(experimentRecordPayload()) : ''
|
||||
}
|
||||
|
||||
function scheduleAutoSave() {
|
||||
if (!detail.value?.canEdit || experimentRecordSnapshot() === savedRecordSnapshot) return
|
||||
autoSaveState.value = 'idle'
|
||||
clearTimeout(autoSaveTimer)
|
||||
autoSaveTimer = setTimeout(() => { void saveRecords(true) }, 60_000)
|
||||
}
|
||||
|
||||
async function saveRecords(automatic = false) {
|
||||
if (!detail.value) return
|
||||
saving.value = true
|
||||
if (automatic && autoSaving) return
|
||||
const records = experimentRecordPayload()
|
||||
const snapshot = JSON.stringify(records)
|
||||
if (automatic) {
|
||||
autoSaving = true
|
||||
autoSaveState.value = 'saving'
|
||||
} else saving.value = true
|
||||
try {
|
||||
await http.put(`/experiment-grades/sheets/${detail.value.id}/records`, {
|
||||
records: detail.value.records.map((record: any) => ({
|
||||
id: record.id,
|
||||
participationStatus: record.participationStatus,
|
||||
safetyViolation: record.safetyViolation,
|
||||
attemptNumber: record.attemptNumber,
|
||||
submissionReference: record.submissionReference,
|
||||
submittedAt: record.submittedAt,
|
||||
isLate: record.isLate,
|
||||
teacherComment: record.teacherComment,
|
||||
itemScores: record.itemScores.map((score: any) => ({
|
||||
experimentGradeItemId: score.experimentGradeItemId,
|
||||
score: score.score,
|
||||
comment: score.comment,
|
||||
})),
|
||||
})),
|
||||
records,
|
||||
})
|
||||
ElMessage.success('本页实验成绩已保存')
|
||||
await loadDetail()
|
||||
savedRecordSnapshot = snapshot
|
||||
if (automatic) autoSaveState.value = 'saved'
|
||||
else {
|
||||
ElMessage.success('本页实验成绩已保存')
|
||||
await loadDetail()
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(apiErrorMessage(error))
|
||||
if (automatic) autoSaveState.value = 'error'
|
||||
else ElMessage.error(apiErrorMessage(error))
|
||||
} finally {
|
||||
saving.value = false
|
||||
if (automatic) {
|
||||
autoSaving = false
|
||||
if (experimentRecordSnapshot() !== savedRecordSnapshot) scheduleAutoSave()
|
||||
} else saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => detail.value?.records, scheduleAutoSave, { deep: true })
|
||||
|
||||
function downloadTemplate() {
|
||||
if (!detail.value) return
|
||||
downloadApiFile(
|
||||
@@ -788,17 +826,24 @@ onMounted(async () => {
|
||||
width="125"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-input-number
|
||||
v-if="detail.canEdit && ['Completed', 'Makeup'].includes(row.participationStatus)"
|
||||
:model-value="itemScore(row, item.id)?.score"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="0.5"
|
||||
:controls="false"
|
||||
size="small"
|
||||
@update:model-value="(value: number | undefined) => { const target = itemScore(row, item.id); if (target) target.score = value }"
|
||||
/>
|
||||
<span v-else>{{ itemScore(row, item.id)?.score ?? '—' }}</span>
|
||||
<div
|
||||
data-score-grid="experiment-grade-entry"
|
||||
:data-score-row="detail.records.indexOf(row)"
|
||||
:data-score-column="detail.items.indexOf(item)"
|
||||
@keydown="handleScoreGridKeydown"
|
||||
>
|
||||
<el-input-number
|
||||
v-if="detail.canEdit && ['Completed', 'Makeup'].includes(row.participationStatus)"
|
||||
:model-value="itemScore(row, item.id)?.score"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="0.5"
|
||||
:controls="false"
|
||||
size="small"
|
||||
@update:model-value="(value: number | undefined) => { const target = itemScore(row, item.id); if (target) target.score = value }"
|
||||
/>
|
||||
<span v-else>{{ itemScore(row, item.id)?.score ?? '—' }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="安全违规" width="105">
|
||||
@@ -839,11 +884,14 @@ onMounted(async () => {
|
||||
<div>
|
||||
<b v-if="detail.reviewComment">审核意见：{{ detail.reviewComment }}</b>
|
||||
<span>开课学院：{{ detail.courseCollegeName }}</span>
|
||||
<small v-if="detail.canEdit" class="autosave-state">
|
||||
{{ autoSaveState === 'saving' ? '正在自动保存…' : autoSaveState === 'saved' ? '已自动保存' : autoSaveState === 'error' ? '自动保存失败，请手动保存' : '停止编辑 1 分钟后自动保存' }}
|
||||
</small>
|
||||
</div>
|
||||
<div>
|
||||
<el-button v-if="detail.canEdit" :icon="Download" @click="downloadTemplate">下载模板</el-button>
|
||||
<el-button v-if="detail.canEdit" :icon="Upload" :loading="saving" @click="chooseImportFile">Excel 导入</el-button>
|
||||
<el-button v-if="detail.canEdit" :icon="EditPen" :loading="saving" @click="saveRecords">保存本页</el-button>
|
||||
<el-button v-if="detail.canEdit" :icon="EditPen" :loading="saving" @click="saveRecords()">保存本页</el-button>
|
||||
<el-button v-if="detail.canEdit" type="primary" :icon="Promotion" @click="submitSheet">提交审核</el-button>
|
||||
<el-button v-if="detail.canReview" type="danger" plain @click="returnSheet">退回修改</el-button>
|
||||
<el-button v-if="detail.canReview" type="success" :icon="Check" @click="approveSheet">审核通过</el-button>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
||||
import {
|
||||
Check,
|
||||
ArrowRight,
|
||||
@@ -18,9 +18,11 @@ import { downloadApiFile, importExcel } from '../api/excel'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { academicTermLabel, academicTermOptionClass, defaultAcademicTermId } from '../utils/academicTerms'
|
||||
import { useScoreGridNavigation } from '../utils/scoreGridNavigation'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const router = useRouter()
|
||||
const { handleScoreGridKeydown } = useScoreGridNavigation('course-grade-entry')
|
||||
const isStudent = computed(() => auth.user?.roles.includes('Student') &&
|
||||
!auth.user.roles.some((role) =>
|
||||
['SuperAdmin', 'AcademicAdmin', 'CollegeAdmin', 'Teacher'].includes(role)))
|
||||
@@ -53,6 +55,10 @@ const createForm = reactive({
|
||||
const newItemName = ref('')
|
||||
const newItemWeight = ref(0)
|
||||
const returnComment = ref('')
|
||||
const autoSaveState = ref<'idle' | 'saving' | 'saved' | 'error'>('idle')
|
||||
let autoSaveTimer: ReturnType<typeof setTimeout> | undefined
|
||||
let savedRecordSnapshot = ''
|
||||
let autoSaving = false
|
||||
|
||||
const presetItems = ['实验', '实习', '课程设计', '作业', '课堂表现', '期中']
|
||||
|
||||
@@ -199,6 +205,7 @@ async function loadDetail() {
|
||||
detail.value.canEdit = response.canEdit
|
||||
detail.value.canReview = response.canReview
|
||||
detail.value.canPublish = response.canPublish
|
||||
savedRecordSnapshot = gradeRecordSnapshot()
|
||||
if (!detail.value.items?.some((item: any) => item.id === experimentGradeItemId.value)) {
|
||||
experimentGradeItemId.value =
|
||||
detail.value.items?.find((item: any) => item.name.includes('实验'))?.id
|
||||
@@ -260,28 +267,62 @@ async function createSheet() {
|
||||
}
|
||||
}
|
||||
|
||||
async function saveRecords() {
|
||||
function gradeRecordPayload() {
|
||||
return detail.value.records.map((record: any) => ({
|
||||
id: record.id,
|
||||
regularScore: record.regularScore,
|
||||
finalScore: record.finalScore,
|
||||
itemScores: record.itemScores?.map((itemScore: any) => ({
|
||||
gradeItemId: itemScore.gradeItemId,
|
||||
score: itemScore.score,
|
||||
})),
|
||||
examStatus: record.examStatus,
|
||||
notes: record.notes,
|
||||
}))
|
||||
}
|
||||
|
||||
function gradeRecordSnapshot() {
|
||||
return detail.value ? JSON.stringify(gradeRecordPayload()) : ''
|
||||
}
|
||||
|
||||
function scheduleAutoSave() {
|
||||
if (!detail.value?.canEdit || gradeRecordSnapshot() === savedRecordSnapshot) return
|
||||
autoSaveState.value = 'idle'
|
||||
clearTimeout(autoSaveTimer)
|
||||
autoSaveTimer = setTimeout(() => { void saveRecords(true) }, 60_000)
|
||||
}
|
||||
|
||||
async function saveRecords(automatic = false) {
|
||||
if (!detail.value || (automatic && autoSaving)) return
|
||||
const records = gradeRecordPayload()
|
||||
const snapshot = JSON.stringify(records)
|
||||
if (automatic) {
|
||||
autoSaving = true
|
||||
autoSaveState.value = 'saving'
|
||||
}
|
||||
try {
|
||||
await http.put(`/grades/sheets/${detail.value.id}/records`, {
|
||||
records: detail.value.records.map((record: any) => ({
|
||||
id: record.id,
|
||||
regularScore: record.regularScore,
|
||||
finalScore: record.finalScore,
|
||||
itemScores: record.itemScores?.map((itemScore: any) => ({
|
||||
gradeItemId: itemScore.gradeItemId,
|
||||
score: itemScore.score,
|
||||
})),
|
||||
examStatus: record.examStatus,
|
||||
notes: record.notes,
|
||||
})),
|
||||
records,
|
||||
})
|
||||
ElMessage.success('成绩已保存并重新计算总评')
|
||||
await loadDetail()
|
||||
savedRecordSnapshot = snapshot
|
||||
if (automatic) autoSaveState.value = 'saved'
|
||||
else {
|
||||
ElMessage.success('成绩已保存并重新计算总评')
|
||||
await loadDetail()
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(apiErrorMessage(error))
|
||||
if (automatic) autoSaveState.value = 'error'
|
||||
else ElMessage.error(apiErrorMessage(error))
|
||||
} finally {
|
||||
if (automatic) {
|
||||
autoSaving = false
|
||||
if (gradeRecordSnapshot() !== savedRecordSnapshot) scheduleAutoSave()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => detail.value?.records, scheduleAutoSave, { deep: true })
|
||||
|
||||
async function importExperimentScores() {
|
||||
if (!experimentGradeItemId.value) {
|
||||
ElMessage.warning('请先选择用于承接实验成绩的课程成绩项。')
|
||||
@@ -636,7 +677,14 @@ onMounted(async () => {
|
||||
</el-table-column>
|
||||
<el-table-column :label="`平时 ${detail.regularWeight}%`" width="110">
|
||||
<template #default="{ row }">
|
||||
<div class="score-cell" :class="{ 'is-failed': isFailingScore(row.regularScore) }">
|
||||
<div
|
||||
class="score-cell"
|
||||
:class="{ 'is-failed': isFailingScore(row.regularScore) }"
|
||||
data-score-grid="course-grade-entry"
|
||||
:data-score-row="detail.records.indexOf(row)"
|
||||
data-score-column="0"
|
||||
@keydown="handleScoreGridKeydown"
|
||||
>
|
||||
<el-input-number
|
||||
v-if="detail.canEdit && ['Normal', 'Deferred'].includes(row.examStatus)"
|
||||
v-model="row.regularScore"
|
||||
@@ -653,7 +701,14 @@ onMounted(async () => {
|
||||
:width="item.sourceType === 'ExperimentSummary' ? 150 : 110"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div class="score-cell" :class="{ 'is-failed': isFailingScore(itemScore(row, item.id)?.score) }">
|
||||
<div
|
||||
class="score-cell"
|
||||
:class="{ 'is-failed': isFailingScore(itemScore(row, item.id)?.score) }"
|
||||
data-score-grid="course-grade-entry"
|
||||
:data-score-row="detail.records.indexOf(row)"
|
||||
:data-score-column="detail.items.indexOf(item) + 1"
|
||||
@keydown="handleScoreGridKeydown"
|
||||
>
|
||||
<el-input-number
|
||||
v-if="detail.canEdit && ['Normal', 'Deferred'].includes(row.examStatus) && item.sourceType !== 'ExperimentSummary'"
|
||||
:model-value="itemScore(row, item.id)?.score"
|
||||
@@ -669,7 +724,14 @@ onMounted(async () => {
|
||||
</el-table-column>
|
||||
<el-table-column :label="`期末 ${detail.finalWeight}%`" width="110">
|
||||
<template #default="{ row }">
|
||||
<div class="score-cell" :class="{ 'is-failed': isFailingScore(row.finalScore) }">
|
||||
<div
|
||||
class="score-cell"
|
||||
:class="{ 'is-failed': isFailingScore(row.finalScore) }"
|
||||
data-score-grid="course-grade-entry"
|
||||
:data-score-row="detail.records.indexOf(row)"
|
||||
:data-score-column="detail.items.length + 1"
|
||||
@keydown="handleScoreGridKeydown"
|
||||
>
|
||||
<el-input-number
|
||||
v-if="detail.canEdit && row.examStatus === 'Normal'"
|
||||
v-model="row.finalScore"
|
||||
@@ -730,6 +792,9 @@ onMounted(async () => {
|
||||
<small v-if="detail.needsCollegeReview && (detail.status === 'Submitted' || detail.status === 'Approved')" class="college-hint">
|
||||
开课学院：{{ detail.needsCollegeReview }}
|
||||
</small>
|
||||
<small v-if="detail.canEdit" class="autosave-state">
|
||||
{{ autoSaveState === 'saving' ? '正在自动保存…' : autoSaveState === 'saved' ? '已自动保存' : autoSaveState === 'error' ? '自动保存失败，请手动保存' : '停止编辑 1 分钟后自动保存' }}
|
||||
</small>
|
||||
</div>
|
||||
<div class="grade-actions-buttons">
|
||||
<div v-if="detail.canEdit && detail.items?.length" class="experiment-import">
|
||||
@@ -749,7 +814,7 @@ onMounted(async () => {
|
||||
</div>
|
||||
<el-button v-if="detail.canEdit" :icon="Download" @click="downloadTemplate">下载模板</el-button>
|
||||
<el-button v-if="detail.canEdit" :icon="Upload" @click="chooseImportFile">Excel导入</el-button>
|
||||
<el-button v-if="detail.canEdit" :icon="EditPen" @click="saveRecords">保存成绩</el-button>
|
||||
<el-button v-if="detail.canEdit" :icon="EditPen" @click="saveRecords()">保存成绩</el-button>
|
||||
<el-button v-if="detail.canEdit" type="primary" :icon="Promotion" @click="submitSheet">提交审核</el-button>
|
||||
<el-button v-if="detail.canReview" type="danger" plain @click="openReturn">退回修改</el-button>
|
||||
<el-button v-if="detail.canReview" type="success" :icon="Check" @click="approveSheet">审核通过</el-button>
|
||||
|
||||
Reference in new issue
Block a user