OnlineEducation-student-front/src/views/student/paper/index.vue

<template>
	<a-card>
		<div class="paper-list">
			<!-- 任务中心开始 -->
			<div class="task-center" style="margin-bottom: 24px">
				<h3 style="border-left: solid 4px #3651d4; padding-left: 8px; margin-bottom: 12px; font-size: 18px">
					<div>{{ examName }}</div>
				</h3>
				<a-spin :spinning="taskLoading">
					<a-table
						ref="paperTableRef"
						:columns="taskColumns"
						:data-source="taskList"
						:expand-row-by-click="true"
						:pagination="pagination"
					>
						<template #bodyCell="{ column, record }">
							<template v-if="record.examType && column.key === 'examType'">
								{{ examTypeName(record.examType) || '--' }}
							</template>
							<template v-if="record.startTime && column.key === 'startTime'">
								{{ formatDateTime(record.startTime) || '--' }}
							</template>
							<template v-if="record.endTime && column.key === 'endTime'">
								{{ formatDateTime(record.endTime) || '--' }}
							</template>

							<template v-if="record.paperType && column.key === 'paperType'">
								{{ paperTypeEnum(record.paperType) }}
							</template>

							<template v-if="column.key === 'status'">
								<a-tag :color="statusTagFormatter(record.status)" size="small">
									{{ statusTextFormatter(record.status) }}
								</a-tag>
							</template>
							<template v-if="column.key === 'action'">
								<router-link
									v-if="record.status == 0"
									:to="{ path: '/student/do', query: { id: record.paperId ? record.paperId : record.id } }"
									target="_blank"
								>
									<a-button type="link" size="small">{{ examType == 4 ? `开始答题` : `填写${examName}` }}</a-button>
								</router-link>
								<router-link
									v-if="record.status == 2"
									:to="{ path: '/student/read', query: { id: record.answerId } }"
									target="_blank"
								>
									<a-button type="link" size="small">查看结果</a-button>
								</router-link>
							</template>
						</template>
					</a-table>
				</a-spin>
			</div>
		</div>
	</a-card>
</template>

<script setup>
	import { useExamStore } from '@/store/exam'
	import examPaperApi from '@/api/student/examPaper'
	import taskApi from '@/api/student/examPaper'
	import { useRoute } from 'vue-router'
	import tool from '@/utils/tool'
	import { parseTime } from '@/utils/exam'
	const route = useRoute()
	const formatDateTime = (val) => {
		if (!val) return ''
		return parseTime(val, '{y}-{m}-{d} {h}:{i}:{s}')
	}
	// store
	const examStore = useExamStore()
	const paperTypeEnum = computed(() => {
		return (key) => {
			return examStore.paperTypeEnum.filter((item) => item.key == key)[0]?.value
		}
	})
	const examNameOption = tool.dictList('EXAM_TYPE')
	const examTypeName = computed(() => {
		return (id) => {
			return examNameOption.filter((r) => r.value == id)[0].label
		}
	})

	const examName = computed(() => {
		switch (examType.value) {
			case '1':
				return '考试'
				break
			case '2':
				return '章节测验'
				break
			case '3':
				return '调查问卷'
				break
			case '4':
				return '我的作业'
				break
		}
	})
	// 任务中心相关
	const taskList = ref([])
	const taskLoading = ref(false)
	// 选中表格的表格common
	const selectedCommons = [
		{
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			width: 80
		},
		{
			title: '机构名',
			dataIndex: 'name',
			ellipsis: true
		}
	]
	const taskColumns = computed(() =>
		taskAllColumns.value.filter((r) => r.columnsType.includes(parseFloat(examType.value)))
	)
	const taskAllColumns = ref([
		{ title: '课程名称', dataIndex: 'courseName', key: 'courseName', columnsType: [4] },
		{ title: '章节名称', dataIndex: 'chapterName', key: 'chapterName', columnsType: [4] },
		{ title: '课时名称', dataIndex: 'hourName', key: 'hourName', columnsType: [4] },
		{ title: '作业名称', dataIndex: 'name', key: 'name', columnsType: [4] },
		{ title: '试卷类型', dataIndex: 'paperType', key: 'paperType', width: 120, columnsType: [4] },

		{ title: '问卷名称', dataIndex: 'examName', key: 'examName', columnsType: [1, 2, 3] },
		{ title: '问卷类型', dataIndex: 'examType', key: 'examType', width: 120, columnsType: [1, 2, 3] },
		{ title: '开始时间', dataIndex: 'startTime', key: 'startTime', width: 180, columnsType: [1, 2, 3] },
		{ title: '结束时间', dataIndex: 'endTime', key: 'endTime', width: 180, columnsType: [1, 2, 3] },

		{ title: '状态', dataIndex: 'status', key: 'status', width: 90, columnsType: [1, 2, 3, 4] },
		{ title: '操作', key: 'action', align: 'right', width: 120, columnsType: [1, 2, 3, 4] }
	])

	const statusTextFormatter = (status) => {
		if (status === 0) return '未答题'
		if (status === 1) return '待判分'
		if (status === 2) return '已完成'
		return ''
	}
	const statusTagFormatter = (status) => {
		if (status === 2) return 'blue'
		if (status === 1) return 'green'
		if (status === 0) return 'gray'
		return 'default'
	}
	const getTaskList = async () => {
		taskLoading.value = true
		try {
			let res = []
			const params = {
				current: pagination.value.current,
				size: pagination.value.pageSize,
				subjectId: pagination.value.subjectId,
				courseId: route.query.id,
				paperType: paperType.value,
				examType: examType.value
			}
			if (examType.value == 4) {
				res = await examPaperApi.newPageList(params)
			} else {
				res = await taskApi.pageExamList(params)
			}

			taskList.value = res?.records || []
			pagination.value.total = res.total
		} catch (e) {
			taskList.value = []
		}
		taskLoading.value = false
	}
	// 学科分类
	const pagination = ref({
		current: 1,
		pageSize: 10,
		onChange: (current) => {
			pagination.value.current = current
			getTaskList()
		}
	})
	const handleChange = (value) => {
		pagination.value.subjectId = value
		getTaskList()
	}
	// lifecycle
	const examType = ref()
	const paperType = ref(2)
	const channel = new BroadcastChannel('getTaskList')
	channel.onmessage = function (event) {
		if (event.data.type == 1) {
			getTaskList()
		}
	}
	onMounted(() => {
		examType.value = route.params && route.params.examType
		getTaskList()
	})
	onUnmounted(() => {
		channel.onmessage = null
		channel.close()
	})
</script>

<style lang="less" scoped>
	.paper-list {
		margin-top: 10px;
		.task-center {
			margin-bottom: 24px;
		}
	}
</style>