From e78dc1963ce2e8fe0d04c21936d72f3d3f0ac0f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=98=BF=E6=A2=A6?= Date: Sun, 1 Feb 2026 21:13:23 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=96=B0=E5=A2=9E=E8=80=83=E8=AF=95?= =?UTF-8?q?=E6=89=B9=E6=AC=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/score.ts | 23 +--- src/types/index.ts | 30 ++++++ src/views/HomePage.vue | 231 ++++++++++++++++++++++++++++++++++++++--- 3 files changed, 246 insertions(+), 38 deletions(-) diff --git a/src/api/score.ts b/src/api/score.ts index 28693c0..4b5fcc7 100644 --- a/src/api/score.ts +++ b/src/api/score.ts @@ -4,7 +4,7 @@ */ import { http } from '@/utils/request' -import type { ScoreResult, ApiResponse } from '@/types' +import type { ScoreResult, ApiResponse, ExamBatch, PaginatedData } from '@/types' /** * 后端返回的原始数据结构接口 @@ -19,27 +19,6 @@ interface RawScoreData { extraDataJson: string } -/** - * 考试批次接口 - */ -interface ExamBatch { - id: string - name: string - status: number -} - -/** - * 分页数据接口 - */ -interface PaginatedData { - current: number - size: number - totalPage: number - totalRows: number - rows: T[] - rainbow: number[] -} - /** * 获取考试批次列表 * @param status - 状态过滤，0表示启用 diff --git a/src/types/index.ts b/src/types/index.ts index 63c2ba6..a044c44 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -96,3 +96,33 @@ export interface ErrorInfo { /** 错误消息 */ message: string } + +/** + * 考试批次接口 + */ +export interface ExamBatch { + /** 批次ID */ + id: string + /** 批次名称 */ + name: string + /** 状态：0-启用 */ + status: number +} + +/** + * 分页数据接口 + */ +export interface PaginatedData { + /** 当前页 */ + current: number + /** 每页大小 */ + size: number + /** 总页数 */ + totalPage: number + /** 总行数 */ + totalRows: number + /** 数据列表 */ + rows: T[] + /** 页码彩虹 */ + rainbow: number[] +} diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue index 9147641..1b72a89 100644 --- a/src/views/HomePage.vue +++ b/src/views/HomePage.vue @@ -3,16 +3,25 @@ * 首页组件 * 成绩查询入口页面，包含身份证输入和查询功能 */ -import { ref, computed } from 'vue' +import { ref, computed, onMounted } from 'vue' import { useRouter } from 'vue-router' import { queryScoreByIdCard, getExamBatchList } from '@/api/score' import Toast from '@/components/common/Toast.vue' import PuzzleCaptcha from '@/components/common/PuzzleCaptcha.vue' +import type { ExamBatch } from '@/types' // 路由实例 const router = useRouter() // 响应式状态 +/** 考试批次列表 */ +const examBatchList = ref([]) +/** 选中的考试批次ID */ +const selectedBatchId = ref('') +/** 是否正在加载批次列表 */ +const isBatchLoading = ref(false) +/** 下拉框是否展开 */ +const isDropdownOpen = ref(false) /** 身份证号输入值 */ const idCard = ref('') /** 学生姓名输入值 */ @@ -33,11 +42,75 @@ const toastType = ref<'info' | 'success' | 'warning' | 'error'>('error') /** 是否显示验证码 */ const showCaptcha = ref(false) +/** + * 获取选中的批次名称 + */ +const selectedBatchName = computed(() => { + const batch = examBatchList.value.find(b => b.id === selectedBatchId.value) + return batch?.name || '请选择考试批次' +}) + +/** + * 页面加载时获取考试批次列表 + */ +onMounted(async () => { + await loadExamBatchList() +}) + +/** + * 加载考试批次列表 + */ +const loadExamBatchList = async () => { + isBatchLoading.value = true + try { + const response = await getExamBatchList() + if (response.code === 200 && response.data?.rows) { + examBatchList.value = response.data.rows + // 默认选中第一个批次 + if (response.data.rows.length > 0) { + selectedBatchId.value = response.data.rows[0].id + } + } + } catch (error) { + console.error('Failed to load exam batch list:', error) + showMessage('加载考试批次失败', 'error') + } finally { + isBatchLoading.value = false + } +} + +/** + * 选择考试批次 + */ +const selectBatch = (batch: ExamBatch) => { + selectedBatchId.value = batch.id + isDropdownOpen.value = false +} + +/** + * 切换下拉框展开状态 + */ +const toggleDropdown = () => { + if (!isBatchLoading.value && examBatchList.value.length > 0) { + isDropdownOpen.value = !isDropdownOpen.value + } +} + +/** + * 点击外部关闭下拉框 + */ +const closeDropdown = () => { + isDropdownOpen.value = false +} + /** * 按钮是否可点击 */ const isButtonDisabled = computed(() => { - return isLoading.value || idCard.value.trim().length === 0 || studentName.value.trim().length === 0 + return isLoading.value || + idCard.value.trim().length === 0 || + studentName.value.trim().length === 0 || + !selectedBatchId.value }) /** @@ -97,6 +170,13 @@ const showMessage = (message: string, type: 'info' | 'success' | 'warning' | 'er * 处理查询点击 */ const handleQueryClick = () => { + // 检查考试批次 + if (!selectedBatchId.value) { + errorMessage.value = '请选择考试批次' + showMessage(errorMessage.value, 'warning') + return + } + // 简单非空检查 if (!studentName.value.trim()) { errorMessage.value = '请输入学生姓名' @@ -123,20 +203,8 @@ const handleCaptchaSuccess = async () => { errorMessage.value = '' try { - // 1. 先获取考试批次列表 - const batchResponse = await getExamBatchList() - - if (batchResponse.code !== 200 || !batchResponse.data || !batchResponse.data.rows || batchResponse.data.rows.length === 0) { - errorMessage.value = '暂无考试数据' - showMessage(errorMessage.value, 'warning') - return - } - - // 默认取第一个批次的ID - const examBatchId = batchResponse.data.rows[0].id - - // 2. 调用查询接口 - const response = await queryScoreByIdCard(idCard.value, studentName.value, examBatchId) + // 使用选中的考试批次ID进行查询 + const response = await queryScoreByIdCard(idCard.value, studentName.value, selectedBatchId.value) if (response.code === 200 && response.data) { // 查询成功，存储数据并跳转 @@ -202,6 +270,92 @@ const handleKeyPress = (event: KeyboardEvent) => {
+ +
+ +
+ + + + + +
+
+ +
+
+ + + +
+
+
+
+ +