OnlineEducation-student-front/src/views/student/exam/components/QuestionAnswerShow.vue

<template>
	<a-spin :spinning="qLoading" style="line-height: 1.8">
		<div v-if="[1, 2, 3, 4, 5].includes(qType)">
			<!-- 单选题 -->
			<div v-if="qType === 1">
				<!-- eslint-disable-next-line vue/no-v-html -->
				<div class="q-title" v-html="question.title" />
				<div class="q-content">
					<a-radio-group v-model:value="answer.content">
						<a-radio v-for="item in question.items" :key="item.prefix" :value="item.prefix" :class="askType==1?'read-only':''">
							<span class="question-prefix">{{ item.prefix }}.</span>
							<!-- eslint-disable-next-line vue/no-v-html -->
							<span v-html="item.content" class="q-item-span-content"></span>
						</a-radio>
					</a-radio-group>
				</div>
			</div>
			<!-- 多选题 -->
			<div v-else-if="qType === 2">
				<!-- eslint-disable-next-line vue/no-v-html -->
				<div class="q-title" v-html="question.title" />
				<div class="q-content">
					<a-checkbox-group v-model:value="answer.contentArray" :class="askType==1?'read-only':''">
						<a-checkbox v-for="item in question.items" :key="item.prefix" :value="item.prefix">
							<span class="question-prefix">{{ item.prefix }}.</span>
							<!-- eslint-disable-next-line vue/no-v-html -->
							<span v-html="item.content" class="q-item-span-content"></span>
						</a-checkbox>
					</a-checkbox-group>
				</div>
			</div>
			<!-- 判断题 -->
			<div v-else-if="qType === 3">
				<!-- eslint-disable-next-line vue/no-v-html -->
				<div class="q-title" v-html="question.title" style="display: inline; margin-right: 10px" />
				<span style="padding-right: 10px">(</span>
				<a-radio-group v-model:value="answer.content" :class="askType==1?'read-only':''">
					<a-radio v-for="item in question.items" :key="item.prefix" :value="item.prefix">
						<!-- eslint-disable-next-line vue/no-v-html -->
						<span v-html="item.content" class="q-item-span-content"></span>
					</a-radio>
				</a-radio-group>
				<span style="padding-left: 10px">)</span>
			</div>
			<!-- 填空题 -->
			<div v-else-if="qType === 4">
				<!-- eslint-disable-next-line vue/no-v-html -->
				<div class="q-title" v-html="question.title" />
				<div v-if="answer.contentArray !== null">
					<a-form layout="vertical">
						<a-form-item
							v-for="item in question.items"
							:label="item.prefix"
							:key="item.prefix"
							style="margin-top: 10px; margin-bottom: 10px"
						>
							<a-input :class="askType==1?'read-only':''" v-model:value="answer.contentArray[item.prefix - 1]" />
						</a-form-item>
					</a-form>
				</div>
			</div>
			<!-- 简答题 -->
			<div v-else-if="qType === 5">
				<!-- eslint-disable-next-line vue/no-v-html -->
				<div class="q-title" v-html="question.title" />
				<div>
					<a-textarea :class="askType==1?'read-only':''" v-model:value="answer.content" :rows="5" />
				</div>
			</div>
			<!-- 结果、分数、难度、解析、正确答案 -->
			<div class="question-answer-show-item" style="margin-top: 15px" v-if="paperType!=5">
				<span class="question-show-item">结果：</span>
				<a-tag :color="doRightTagFormatter(answer.doRight)">
					{{ doRightTextFormatter(answer.doRight) }}
				</a-tag>
			</div>
			<div class="question-answer-show-item" v-if="paperType!=5">
				<span class="question-show-item">分数：</span>
				<span>{{ question.score }}</span>
			</div>
			<div class="question-answer-show-item" v-if="paperType!=5">
				<span class="question-show-item">难度：</span>
				<a-rate :value="question.difficult" disabled class="question-show-item" />
			</div>
			<br />
			<div class="question-answer-show-item" style="line-height: 1.8">
				<span class="question-show-item">解析：</span>
				<span v-html="question.analyze" class="q-item-span-content" />
			</div>
			<div class="question-answer-show-item">
				<span class="question-show-item">正确答案：</span>
				<!-- eslint-disable-next-line vue/no-v-html -->
				<span v-if="[1, 2, 5].includes(qType)" v-html="question.correct" class="q-item-span-content" />
				<!-- eslint-disable-next-line vue/no-v-html -->
				<span v-if="qType === 3" v-html="trueFalseFormatter(question)" class="q-item-span-content" />
				<span v-if="qType === 4">{{ question.correctArray }}</span>
			</div>
		</div>
		<div v-else></div>
	</a-spin>
</template>

<script setup>
	import { computed, toRefs } from 'vue'
	import { useExamStore } from '@/store/exam'

	const props = defineProps({
		question: {
			type: Object,
			default: () => ({})
		},
		answer: {
			type: Object,
			default: () => ({ id: null, content: '', contentArray: [], doRight: false })
		},
		qLoading: {
			type: Boolean,
			default: false
		},
		qType: {
			type: Number,
			default: 0
		},
		paperType: {
			type: [String,Number],
			default: ''
		},
		askType:{
			type: String,
			default: ''
		}
	})

	const { question, answer, qLoading, qType, paperType, askType } = toRefs(props)
	const examStore = useExamStore()

	const doRightEnum = computed(() => examStore.exam.question.answer.doRightEnum)
	const doRightTag = computed(() => examStore.exam.question.answer.doRightTag)
	const enumFormat = examStore.enumFormat

	function trueFalseFormatter(question) {
		const item = question.items?.find((d) => d.prefix === question.correct)
		return item ? item.content : ''
	}
	function doRightTagFormatter(status) {
		// ant-design-vue 的 a-tag 颜色映射
		const tag = enumFormat(doRightTag.value, status)
		if (tag === 'success') return 'green'
		if (tag === 'danger') return 'red'
		if (tag === 'warning') return 'orange'
		return 'default'
	}
	function doRightTextFormatter(status) {
		return enumFormat(doRightEnum.value, status)
	}
</script>

<style lang="less" scoped>
	.q-title {
		font-weight: bold;
		margin-bottom: 8px;
	}
	.q-content {
		margin-bottom: 12px;
	}
	.question-prefix {
		font-weight: bold;
		margin-right: 4px;
	}
	.question-answer-show-item {
		margin-bottom: 8px;
	}
	.question-show-item {
		font-weight: 500;
		margin-right: 8px;
	}
	.q-item-span-content {
		display: inline-block;
		vertical-align: middle;
	}
	.read-only {
		pointer-events: none;
	}
</style>