OnlineEducation-teacher-front/src/views/student/record/index.vue

<template>
			<div style="margin-top: 10px" class="app-contain">
				<a-row :gutter="50">
					<a-col :span="18">
						<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 === 'status'">
									<a-tag :color="statusTagFormatter(record.status)">
										{{ statusTextFormatter(record.status) }}
									</a-tag>
								</template>
								<template v-else-if="column.key === 'action'">
									<template v-if="record.status === 1">
										<router-link :to="{ path: '/student/edit', query: { id: record.id } }" target="_blank">
											<a-button type="link" size="small">批改</a-button>
										</router-link>
									</template>
									<template v-else-if="record.status === 2">
										<router-link :to="{ path: '/student/read', query: { id: record.id } }" target="_blank">
											<a-button type="link" size="small">查看试卷</a-button>
										</router-link>
									</template>
								</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="6">
						<a-card class="record-answer-info">
							<a-descriptions :column="1" bordered size="small">
								<a-descriptions-item label="系统判分">{{ selectItem.systemScore }}</a-descriptions-item>
								<a-descriptions-item label="最终得分">{{ selectItem.userScore }}</a-descriptions-item>
								<a-descriptions-item label="试卷总分">{{ selectItem.paperScore }}</a-descriptions-item>
								<a-descriptions-item label="正确题数">{{ selectItem.questionCorrect }}</a-descriptions-item>
								<a-descriptions-item label="总题数">{{ selectItem.questionCount }}</a-descriptions-item>
								<a-descriptions-item label="用时">{{ selectItem.doTime }}</a-descriptions-item>
							</a-descriptions>
						</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/examPaperAnswer'
	import { parseTime } from '@/utils/exam'
	import Footer from "@/views/portal/components/Footer.vue";
	import Header from "@/views/portal/components/Header.vue";
	import TallList from "@/views/resourceDetails/components/TallList.vue";
	import VideoDetails from "@/views/resourceDetails/components/VideoDetails.vue";
	const examStore = useExamStore()

	const queryParam = reactive({
		pageIndex: 1,
		pageSize: 10
	})
	const listLoading = ref(false)
	const tableData = ref([])
	const total = ref(0)
	const selectItem = reactive({
		systemScore: '0',
		userScore: '0',
		doTime: '0',
		paperScore: '0',
		questionCorrect: 0,
		questionCount: 0
	})

	const columns = [
		{ title: '序号', dataIndex: 'id', key: 'id', width: 90 },
		{ title: '名称', dataIndex: 'paperName', key: 'paperName' },
		{ title: '学科', dataIndex: 'subjectName', key: 'subjectName', width: 70 },
		{
			title: '状态',
			dataIndex: 'status',
			key: 'status',
			width: 100
		},
		{
			title: '做题时间',
			dataIndex: 'createTime',
			key: 'createTime',
			width: 200,
			customRender: ({ text }) => formatDateTime(text)
		},
		{
			title: '',
			key: 'action',
			align: 'right',
			width: 70
		}
	]

	function formatDateTime(val) {
		if (!val) return ''
		return parseTime(val, '{y}-{m}-{d} {h}:{i}:{s}')
	}

	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
			})
			.catch(() => {
				listLoading.value = false
			})
	}
	function customRow(record) {
		return {
			onClick: () => itemSelect(record)
		}
	}

	function itemSelect(record) {
		Object.assign(selectItem, record)
	}

	function statusTagFormatter(status) {
		return examStore.enumFormat(examStore.exam.examPaperAnswer.statusTag, status)
	}
	function statusTextFormatter(status) {
		return examStore.enumFormat(examStore.exam.examPaperAnswer.statusEnum, status)
	}

	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>