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>
				<div style="display: flex; align-items: center" class="mb-4" v-if="examType == 4">
					<div class="mr-4">学科分类</div>
					<a-select ref="select" v-model:value="tabId" style="width: 120px" allowClear @change="handleChange">
						<a-select-option :value="item.id" v-for="(item, idx) in subjectList">{{ item.name }}</a-select-option>
					</a-select>
				</div>
				<a-spin :spinning="taskLoading">
					<a-table
						ref="paperTableRef"
						:columns="taskColumns"
						:data-source="taskList"
						:expand-row-by-click="true"
						:pagination="queryParam"
					>
						<template #bodyCell="{ column, record }">
							<div v-if="examType != 4">
								<template v-if="column.key === 'examName'">
									{{ record.examName }}
								</template>
								<template v-if="column.key === 'examType'">
									{{ examTypeName(record.examType) }}
								</template>
								<template v-if="column.key === 'startTime'">
									{{ formatDateTime(record.startTime) }}
								</template>
								<template v-if="column.key === 'endTime'">
									{{ formatDateTime(record.endTime) }}
								</template>
								<template v-if="column.key === 'examStatus'">
									<a-tag :color="statusTagFormatter(record.examStatus)" size="small">
										{{ statusTextFormatter(record.examStatus) }}
									</a-tag>
								</template>
								<template v-if="column.key === 'action'">
									<router-link
										v-if="record.examStatus === 0"
										:to="{ path: '/student/do', query: { id: record.paperId } }"
										target="_blank"
									>
										<a-button type="link" size="small">查看{{ examName }}</a-button>
									</router-link>
									<router-link
										v-if="record.examStatus === 1"
										:to="{ path: '/student/do', query: { id: record.paperId } }"
										target="_blank"
									>
										<a-button type="link" size="small">填写{{ examName }}</a-button>
									</router-link>
									<router-link
										v-if="record.examStatus === 2"
										:to="{ path: '/student/read', query: { id: record.paperId } }"
										target="_blank"
									>
										<a-button type="link" size="small">查看结果</a-button>
									</router-link>
								</template>
							</div>
							<div v-if="examType == 4">
								<template v-if="column.key === 'paperType'">
									{{ paperTypeEnum(record.paperType) }}
								</template>
								<template v-if="column.key === 'subjectId'">
									{{ subjectName(record.subjectId) }}
								</template>
								<template v-if="column.key === 'action'">
									<router-link :to="{ path: '/student/do', query: { id: record.id } }" target="_blank">
										<a-button type="link" size="small">开始答题</a-button>
									</router-link>
								</template>
							</div>
						</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.examType.includes(parseFloat(examType.value)))
	)
	const taskAllColumns = ref([
		{ title: '问卷名称', dataIndex: 'name', key: 'name', examType: [4] },
		{ title: '试卷类型', dataIndex: 'paperType', key: 'paperType', width: 120, examType: [4] },
		{ title: '学科', dataIndex: 'subjectId', key: 'subjectId', width: 120, examType: [4] },

		{ title: '问卷名称', dataIndex: 'examName', key: 'examName', examType: [1, 2, 3] },
		{ title: '问卷类型', dataIndex: 'examType', key: 'examType', width: 120, examType: [1, 2, 3] },
		{ title: '开始时间', dataIndex: 'startTime', key: 'startTime', width: 180, examType: [1, 2, 3] },
		{ title: '结束时间', dataIndex: 'endTime', key: 'endTime', width: 180, examType: [1, 2, 3] },
		{ title: '状态', dataIndex: 'examStatus', key: 'examStatus', width: 90, examType: [1, 2, 3] },
		{ title: '操作', key: 'action', align: 'right', width: 120, examType: [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 === 0) return 'blue'
		if (status === 1) return 'green'
		if (status === 2) return 'gray'
		return 'default'
	}
	const getTaskList = async () => {
		taskLoading.value = true
		try {
			let res = []
			const params = {
				...queryParam.value,
				size: queryParam.value.pageSize,
				courseId: route.query.id,
				paperType: paperType.value,
				examType: examType.value
			}
			if (examType.value == 4) {
				res = await examPaperApi.pageList(params)
			} else {
				res = await taskApi.pageExamList(params)
			}

			taskList.value = res?.records || []
		} catch (e) {
			taskList.value = []
		}
		taskLoading.value = false
	}
	// 学科分类
	const queryParam = ref({
		current: 1,
		pageSize: 10
	})
	const tabId = ref('')
	const subjectList = ref([])
	const initSubject = async () => {
		await examStore.initSubject()
		subjectList.value = examStore.subjects
	}
	const subjectName = computed(() => {
		return (id) => {
			return subjectList.value.filter((r) => r.id == id)[0]?.name
		}
	})
	const handleChange = (value) => {
		queryParam.value.subjectId = value
		getTaskList()
	}
	// lifecycle
	const examType = ref()
	const paperType = ref(2)
	onMounted(() => {
		examType.value = route.params && route.params.examType
		initSubject()
		getTaskList()
	})
</script>

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