OnlineEducation-back-front/src/views/student/question-error/index.vue

<template>
	<div style="margin-top: 10px" class="app-contain">
		<a-row :gutter="50">
			<a-col :span="14">
				<a-table
					:loading="listLoading"
					:data-source="tableData"
					:columns="columns"
					row-key="id"
					:custom-row="customRow"
					:pagination="false"
				>
					<template #bodyCell="{ column, record }">
						<template v-if="column.key === 'questionType'">
							{{ questionTypeFormatter(record.questionType) }}
						</template>
						<template v-else-if="column.key === 'subjectName'">
							{{ record.subjectName }}
						</template>
						<template v-else-if="column.key === 'createTime'">
							{{ record.createTime }}
						</template>
						<template v-else-if="column.key === 'shortTitle'">
							<span :title="record.shortTitle">{{ record.shortTitle }}</span>
						</template>
					</template>
				</a-table>
				<a-pagination
					v-if="total > 0"
					:total="total"
					:current="queryParam.pageIndex"
					:page-size="queryParam.pageSize"
					@change="onPageChange"
					@showSizeChange="onPageSizeChange"
					:show-size-changer="true"
					:page-size-options="['10', '20', '50', '100']"
					style="margin-top: 20px"
				/>
			</a-col>
			<a-col :span="10">
				<a-card class="record-answer-info">
					<a-form layout="vertical">
						<a-form-item>
							<QuestionAnswerShow
								:qType="selectItem.questionType"
								:qLoading="qAnswerLoading"
								:question="selectItem.questionItem"
								:answer="selectItem.answerItem"
							/>
						</a-form-item>
					</a-form>
				</a-card>
			</a-col>
		</a-row>
	</div>
</template>

<script setup>
	import { ref, reactive, onMounted } from 'vue'
	import { useExamStore } from '@/store/exam'
	import examPaperAnswerApi from '@/api/student/questionAnswer'
	import QuestionAnswerShow from '../exam/components/QuestionAnswerShow.vue'

	const examStore = useExamStore()

	const queryParam = reactive({
		pageIndex: 1,
		pageSize: 10
	})
	const listLoading = ref(false)
	const tableData = ref([])
	const total = ref(0)
	const qAnswerLoading = ref(false)
	const selectItem = reactive({
		questionType: 0,
		questionItem: null,
		answerItem: null
	})

	const columns = [
		{ title: '题干', dataIndex: 'shortTitle', key: 'shortTitle', ellipsis: true },
		{ title: '题型', dataIndex: 'questionType', key: 'questionType', width: 70 },
		{ title: '学科', dataIndex: 'subjectName', key: 'subjectName', width: 50 },
		{ title: '做题时间', dataIndex: 'createTime', key: 'createTime', width: 170 }
	]

	function search() {
		listLoading.value = true
		const params = { ...queryParam, current: queryParam.pageIndex, size: queryParam.pageSize }
		delete params.pageIndex
		delete params.pageSize
		examPaperAnswerApi
			.pageList(params)
			.then((data) => {
				const re = data
				tableData.value = re.records
				total.value = re.total
				queryParam.pageIndex = re.current
				listLoading.value = false
				if (re.records && re.records.length !== 0) {
					qAnswerShow(re.records[0].id)
				}
			})
			.catch(() => {
				listLoading.value = false
			})
	}

	function customRow(record) {
		return {
			onClick: () => itemSelect(record)
		}
	}
	function itemSelect(record) {
		qAnswerShow(record.id)
	}

	function qAnswerShow(id) {
		qAnswerLoading.value = true
		examPaperAnswerApi.select(id).then((re) => {
			let response = re
			selectItem.questionType = response.questionVM.questionType
			selectItem.questionItem = response.questionVM
			selectItem.answerItem = response.questionAnswerVM
			qAnswerLoading.value = false
		})
	}

	function questionTypeFormatter(type) {
		return examStore.enumFormat(examStore.exam.question.typeEnum, type)
	}

	function onPageChange(page, pageSize) {
		queryParam.pageIndex = page
		queryParam.pageSize = pageSize
		search()
	}
	function onPageSizeChange(current, size) {
		queryParam.pageIndex = 1
		queryParam.pageSize = size
		search()
	}

	onMounted(() => {
		search()
	})
</script>

<style lang="less" scoped>
	.app-contain {
		// 可根据需要自定义样式
	}
	.record-answer-info {
		margin-top: 20px;
	}
</style>