OnlineEducation-teacher-front/src/views/exm/examinationManagement/index.vue

<template>
	<div class="task-container">
		<a-form layout="inline" :model="queryParam">
			<a-form-item label="考试标题：">
				<a-input v-model:value="queryParam.examName" placeholder="请输入考试标题" style="min-width: 200px" allowClear />
			</a-form-item>
			<a-form-item label="考试状态：">
				<a-select style="min-width: 150px" v-model:value="queryParam.examStatus" allowClear placeholder="考试状态">
					<a-select-option :value="0">未开始</a-select-option>
					<a-select-option :value="1">已开始</a-select-option>
					<a-select-option :value="2">已结束</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item>
				<a-button type="primary" @click="submitForm">查询</a-button>
				<a-button style="margin-left: 20px" type="primary" @click="createTask">创建考试</a-button>
			</a-form-item>
		</a-form>
		<a-table
			:loading="listLoading"
			:data-source="tableData"
			:pagination="false"
			row-key="id"
			bordered
			style="margin-top: 16px"
		>
			<a-table-column title="Id" dataIndex="id" key="id" width="100" />
			<a-table-column title="考试标题" dataIndex="examName" key="examName" />
			<a-table-column title="考试状态" dataIndex="examStatus" key="examStatus" width="120">
				<template #default="{ record }">
					<a-tag :color="record.examStatus === 0 ? 'default' : record.examStatus === 1 ? 'processing' : 'success'">
						{{ record.examStatus === 0 ? '未开始' : record.examStatus === 1 ? '已开始' : '已结束' }}
					</a-tag>
				</template>
			</a-table-column>
			<a-table-column title="开始时间" dataIndex="startTime" key="startTime" width="160">
				<template #default="{ record }">
					{{ formatDateTime(record.startTime) }}
				</template>
			</a-table-column>
			<a-table-column title="结束时间" dataIndex="endTime" key="endTime" width="160">
				<template #default="{ record }">
					{{ formatDateTime(record.endTime) }}
				</template>
			</a-table-column>
			<a-table-column title="创建时间" dataIndex="createTime" key="createTime" width="160">
				<template #default="{ record }">
					{{ formatDateTime(record.createTime) }}
				</template>
			</a-table-column>
			<a-table-column title="操作" key="action" align="center" width="160">
				<template #default="{ record }">
					<a-button size="small" @click="editTask(record)">编辑</a-button>
					<a-button size="small" danger style="margin-left: 8px" @click="deleteTask(record)">删除</a-button>
					<a-button size="small" type="primary" style="margin-left: 8px" @click="statistic(record)">统计分析</a-button>
				</template>
			</a-table-column>
		</a-table>
		<a-pagination
			v-show="total > 0"
			:total="total"
			:current="queryParam.pageIndex"
			:pageSize="queryParam.pageSize"
			@change="onPageChange"
			@showSizeChange="onPageSizeChange"
			:showSizeChanger="true"
			:pageSizeOptions="['10', '20', '50', '100']"
			style="margin-top: 16px; text-align: right"
		/>
		<a-drawer
			:visible="drawerVisible"
			:title="drawerTitle"
			placement="right"
			width="900"
			@close="closeDrawer"
			destroyOnClose
		>
			<TaskEdit v-if="drawerVisible" :id="editId" @success="onEditSuccess" />
		</a-drawer>
		<a-modal
			:visible="statisticVisible"
			:title="statisticTitle"
			:footer="null"
			width="80%"
			@cancel="closeStatisticDrawer"
		>
			<StatisticAnalysis :paperId="statisticPaperId" :paperName="statisticExamName" examType="exam" />
		</a-modal>
	</div>
</template>

<script setup>
	import { ref, reactive, onMounted } from 'vue'
	import { message, Modal } from 'ant-design-vue'
	import examManagerApi from '@/api/exam/paper/examManager.js'
	import StatisticAnalysis from './StatisticAnalysis.vue'
	import TaskEdit from './form.vue'
	import { useExamStore } from '@/store/exam.js'
	import { storeToRefs } from 'pinia'
	import { parseTime } from '@/utils/exam'
	const examStore = useExamStore()
	const { levelEnum, enumFormat } = storeToRefs(examStore)
	const drawerVisible = ref(false)
	const drawerTitle = ref('')
	const statisticExamName = ref(null)
	const editId = ref(null)
	// 统计分析
	const statisticVisible = ref(false)
	const statisticTitle = ref('')
	const statisticPaperId = ref(null)

	const queryParam = reactive({
		examName: null,
		examStatus: null,
		pageIndex: 1,
		pageSize: 10,
		examType: 1
	})
	const listLoading = ref(false)
	const tableData = ref([])
	const total = ref(0)

	const fetchList = async () => {
		listLoading.value = true
		try {
			const params = {
				...queryParam,
				current: queryParam.pageIndex,
				size: queryParam.pageSize
			}
			delete params.pageIndex
			delete params.pageSize
			const data = await examManagerApi.pageList(params)
			tableData.value = data.records || []
			total.value = data.total || 0
			queryParam.pageIndex = data.current || 1
		} finally {
			listLoading.value = false
		}
	}
	const statistic = async (record) => {
		statisticVisible.value = true
		statisticTitle.value = '统计分析'
		statisticExamName.value = record.examName
		statisticPaperId.value = record.paperId
	}
	const closeStatisticDrawer = () => {
		statisticVisible.value = false
	}

	onMounted(() => {
		fetchList()
	})

	const submitForm = () => {
		queryParam.pageIndex = 1
		fetchList()
	}

	const onPageChange = (page, pageSize) => {
		queryParam.pageIndex = page
		queryParam.pageSize = pageSize
		fetchList()
	}
	const onPageSizeChange = (current, size) => {
		queryParam.pageIndex = 1
		queryParam.pageSize = size
		fetchList()
	}

	const editTask = (record) => {
		drawerVisible.value = true
		drawerTitle.value = '编辑考试'
		editId.value = record.id
	}

	const deleteTask = (record) => {
		Modal.confirm({
			title: '确认删除该考试吗？',
			onOk: async () => {
				try {
					await examManagerApi.deleteExam([{ id: record.id }])
					fetchList()
				} catch (e) {
					message.error(e.msg || '删除失败')
				}
			}
		})
	}

	const levelFormatter = ({ text }) => {
		return enumFormat.value(levelEnum.value, text)
	}
	const createTask = () => {
		drawerVisible.value = true
		drawerTitle.value = '创建考试'
		editId.value = null
	}
	const onEditSuccess = () => {
		editId.value = null
		drawerVisible.value = false
		fetchList()
	}
	const closeDrawer = () => {
		drawerVisible.value = false
	}
	const formatDateTime = (val) => {
		if (!val) return ''
		return parseTime(val, '{y}-{m}-{d} {h}:{i}:{s}')
	}
</script>

<style lang="less" scoped>
	.task-container {
		background: #fff;
		padding: 24px;
		border-radius: 8px;
	}
</style>