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

<template>
	<div>
		<a-card style="width: 100%;" class="titleCard">
			<div style="font-size: 18px">
				<div>我的{{ examName }}</div>
			</div>
		</a-card>
		<a-card style="width: 100%" class="mt-3">
			<div class="flc mb-4">
				<div class="fcc mr-1">分类：</div>
				<a-select
					v-if="examType == 1"
					v-model:value="examTypeSelect"
					placeholder="所有分类"
					style="width: 110px"
					:options="typeOptionsVal"
					@change="handleChangeVal"
					allowClear
				></a-select>
			</div>
			<a-spin :spinning="taskLoading">
				<a-table
					ref="paperTableRef"
					:columns="taskColumns"
					:data-source="taskList"
					:expand-row-by-click="true"
					:pagination="pagination"
				>
					<template #headerCell="{ column }">
						<template v-if="column.dataIndex === 'examName'">
							{{ examName + column.title }}
						</template>
						<template v-if="column.dataIndex === 'examType'">
							{{ examName + column.title }}
						</template>
					</template>
					<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'">
							<span v-if="!examPaperType">{{ examTypeName(record.paperType) }}</span>
							<span v-if="examPaperType">{{ paperTypeEnum(record.paperType) }}</span>
						</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>
		</a-card>
	</div>
</template>

<script setup>
	import { useExamStore } from '@/store/exam'
	import examPaperApi from '@/api/student/examPaper'
	import { useRoute } from 'vue-router'
	import tool from '@/utils/tool'
	import { parseTime } from '@/utils/exam'
	import Broadcast from '@/utils/Broadcast.js'
	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.find((item) => item.key == key)?.value
		}
	})
	const examNameOption = tool.dictList('EXAM_TYPE')
	const examTypeName = computed(() => {
		return (id) => {
			return examNameOption.find((r) => r.value == id).label
		}
	})
	const typeOptionsVal = ref([
		{
			label: '考试',
			title: '任务',
			value: '1',
			paperType: '6'
		},
		{
			label: '章节测验',
			title: '章节测验',
			value: '2',
			paperType: '3',
			funcType: '5'
		},
		{
			label: '调查问卷',
			title: '调查问卷',
			value: '3',
			paperType: '5'
		},
		{
			label: '作业',
			title: '作业',
			value: '4',
			paperType: '2',
			funcType: '4'
		}
	])
	const examName = computed(() => {
		return examType.value ? typeOptionsVal.value.find((e) => e.value == examType.value).title : ''
	})

	const handleChangeVal = (value) => {
		pagination.value.current = 1
		getTaskList()
	}
	// 任务中心相关
	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: [2, 4] },
		{ title: '章节名称', dataIndex: 'chapterName', key: 'chapterName', columnsType: [2, 4] },
		{ title: '课时名称', dataIndex: 'hourName', key: 'hourName', columnsType: [2, 4] },
		{ title: '作业名称', dataIndex: 'name', key: 'name', columnsType: [2, 4] },
		{ title: '试卷类型', dataIndex: 'paperType', key: 'paperType', width: 120, columnsType: [2, 4] },

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

		{ title: '状态', dataIndex: 'status', key: 'status', width: 90, columnsType: [1, 2, 3, 4] },
		{ title: '操作', key: 'action', align: 'left', 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 'red'
		return 'default'
	}
	const examPaperType = computed(() => {
		if (examType.value == 2 || examType.value == 4) {
			//章节/作业(固定试卷)
			return true
		} else {
			//任务试卷
			return false
		}
	})
	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
			}
			if (examPaperType.value) {
				//章节/作业(固定试卷)
				params.paperType = typeOptionsVal.value.find((d) => d.value == examType.value).paperType
				params.funcType = typeOptionsVal.value.find((d) => d.value == examType.value).funcType
				res = await examPaperApi.newPageList(params)
			} else {
				//任务试卷
				params.examType = examType.value == 1 ? examTypeSelect.value : examType.value
				res = await examPaperApi.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 examTypeSelect = ref()
	const paperType = ref(2)

	// 监听消息
	const stopListening = Broadcast.on('getTaskList', (event) => {
		if (event.type == 1) {
			getTaskList()
		}
	})

	onMounted(() => {
		examType.value = route.params && route.params.examType
		getTaskList()
	})
	onBeforeUnmount(() => {
		stopListening()
	})
</script>

<style lang="less" scoped>
.flc {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.fcc {
	display: flex;
	justify-content: center;
	align-items: center;
}
:deep(.titleCard .ant-card-body){
	padding:16px 24px;
}
</style>