OnlineEducation-student-front/src/views/student/exam/paper/edit.vue

<template>
	<div class="app-contain">
		<a-row class="do-exam-title" style="background-color: #f5f5dc">
			<a-col :span="24">
				<span v-for="item in answer.answerItems" :key="item.itemOrder">
					<a-tag
						:color="questionDoRightTag(item.doRight)"
						class="do-exam-title-tag"
						@click="goAnchor('question-' + item.itemOrder)"
					>
						{{ item.itemOrder }}
					</a-tag>
				</span>
			</a-col>
		</a-row>
		<a-row class="do-exam-title-hidden">
			<a-col :span="24">
				<span v-for="item in answer.answerItems" :key="item.itemOrder">
					<a-tag class="do-exam-title-tag">{{ item.itemOrder }}</a-tag>
				</span>
			</a-col>
		</a-row>
		<a-layout class="app-item-contain">
			<a-layout-header class="align-center">
				<h1>{{ form.name }}</h1>
				<div>
					<span class="question-title-padding">试卷得分：{{ answer.score }}</span>
					<span class="question-title-padding">试卷耗时：{{ formatSeconds(answer.doTime) }}</span>
				</div>
			</a-layout-header>
			<a-layout-content>
				<a-spin :spinning="formLoading">
					<a-form :model="form">
						<template v-for="(titleItem, index) in form.titleItems" :key="index">
							<h3 class="question-title">{{ titleItem.name }}</h3>
							<a-card class="exampaper-item-box" v-if="titleItem.questionItems.length !== 0">
								<a-form-item
									v-for="questionItem in titleItem.questionItems"
									:key="questionItem.itemOrder"
									:label="questionItem.itemOrder + '.'"
									:id="'question-' + questionItem.itemOrder"
									class="exam-question-item"
									:label-col="{ span: 0 }"
									:wrapper-col="{ span: 24 }"
									:colon="false"
								>
									<QuestionAnswerShow
										:qType="questionItem.questionType"
										:question="questionItem"
										:answer="answer.answerItems[questionItem.itemOrder - 1]"
									/>
									<div v-if="answer.answerItems[questionItem.itemOrder - 1].doRight === null" style="margin-top: 10px">
										<label style="color: #e6a23c">批改：</label>
										<a-radio-group v-model:value="answer.answerItems[questionItem.itemOrder - 1].score">
											<a-radio v-for="item in scoreSelect(questionItem.score)" :key="item" :value="item">
												{{ item }}
											</a-radio>
										</a-radio-group>
									</div>
								</a-form-item>
							</a-card>
						</template>
						<a-row class="do-align-center">
							<a-button type="primary" @click="submitForm">提交</a-button>
							<a-button style="margin-left: 12px">取消</a-button>
						</a-row>
					</a-form>
				</a-spin>
			</a-layout-content>
		</a-layout>
	</div>
</template>

<script setup>
	import { ref, onMounted, nextTick } from 'vue'
	import { useRoute, useRouter } from 'vue-router'
	import { useExamStore } from '@/store/exam'
	import { message, Modal } from 'ant-design-vue'
	import { formatSeconds } from '@/utils/exam'
	import QuestionAnswerShow from '../components/QuestionAnswerShow.vue'
	import questionAnswerApi from '@/api/student/examPaperAnswer'
	import '../../style.less'

	const route = useRoute()
	const router = useRouter()
	const examStore = useExamStore()
	const { enumFormat } = examStore
	const doRightTag = examStore.exam.question.answer.doRightTag

	const form = ref({ titleItems: [] })
	const formLoading = ref(false)
	const answer = ref({
		id: null,
		score: 0,
		doTime: 0,
		answerItems: [],
		doRight: false
	})

	function questionDoRightTag(status) {
		// ant-design-vue的a-tag color支持字符串，直接用value即可
		const tag = enumFormat(doRightTag, status)
		if (tag === 'success') return 'green'
		if (tag === 'danger') return 'red'
		if (tag === 'warning') return 'orange'
		return 'default'
	}

	function goAnchor(id) {
		nextTick(() => {
			const el = document.getElementById(id)
			if (el) {
				el.scrollIntoView({ behavior: 'instant', block: 'center', inline: 'nearest' })
			}
		})
	}

	function scoreSelect(score) {
		let array = []
		for (let i = 0; i <= parseInt(score); i++) {
			array.push(i.toString())
		}
		if (String(score).indexOf('.') !== -1) {
			array.push(score)
		}
		return array
	}

	function submitForm() {
		formLoading.value = true
		questionAnswerApi
			.edit(answer.value)
			.then((re) => {
				Modal.success({
					title: '考试结果',
					content: `试卷得分：${re}分`,
					okText: '返回考试记录',
					onOk: () => {
						router.push('/student/record/')
					}
				})
				formLoading.value = false
			})
			.catch((e) => {
				message.error(e.message || '提交失败')
				formLoading.value = false
			})
	}

	onMounted(() => {
		const id = route.query.id
		if (id && parseInt(id) !== 0) {
			formLoading.value = true
			questionAnswerApi.read(id).then((re) => {
				form.value = re.paper
				answer.value = re.answer
				formLoading.value = false
			})
		}
	})
</script>

<style lang="less" scoped>
	.align-center {
		text-align: center;
	}
	.exam-question-item {
		padding: 10px;
		:deep(.ant-form-item-label > label) {
			font-size: 15px !important;
		}
	}
	.question-title-padding {
		padding-left: 25px;
		padding-right: 25px;
	}
</style>