364 lines
14 KiB
HTML
364 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>班级选择功能测试</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: 50px auto;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.form-container {
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
select, input {
|
|
width: 100%;
|
|
padding: 12px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
}
|
|
select:focus, input:focus {
|
|
outline: none;
|
|
border-color: #409eff;
|
|
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
|
}
|
|
.btn {
|
|
background-color: #409eff;
|
|
color: white;
|
|
padding: 12px 24px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
.btn:hover {
|
|
background-color: #337ecc;
|
|
}
|
|
.btn:disabled {
|
|
background-color: #ccc;
|
|
cursor: not-allowed;
|
|
}
|
|
.result {
|
|
margin-top: 20px;
|
|
padding: 15px;
|
|
background-color: #f0f9ff;
|
|
border: 1px solid #b3d8ff;
|
|
border-radius: 4px;
|
|
}
|
|
.error {
|
|
background-color: #fef0f0;
|
|
border-color: #fbc4c4;
|
|
color: #c53030;
|
|
}
|
|
.success {
|
|
background-color: #f0fff4;
|
|
border-color: #9ae6b4;
|
|
color: #2f855a;
|
|
}
|
|
.student-list {
|
|
margin-top: 15px;
|
|
}
|
|
.student-item {
|
|
padding: 8px;
|
|
margin: 5px 0;
|
|
background-color: #f8f9fa;
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.student-item:hover {
|
|
background-color: #e9ecef;
|
|
}
|
|
.student-item.selected {
|
|
background-color: #e3f2fd;
|
|
border-color: #409eff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="form-container">
|
|
<h1>🎓 贫困生申请 - 班级选择功能测试</h1>
|
|
<p>测试班级选择 → 学生搜索的级联功能</p>
|
|
|
|
<form id="testForm">
|
|
<div class="form-group">
|
|
<label for="academicYear">学年</label>
|
|
<select id="academicYear" name="academicYear">
|
|
<option value="2024-2025">2024-2025</option>
|
|
<option value="2023-2024">2023-2024</option>
|
|
<option value="2022-2023">2022-2023</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="classId">班级</label>
|
|
<select id="classId" name="classId" disabled>
|
|
<option value="">请先获取班级列表</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="studentSearch">学号搜索</label>
|
|
<input type="text" id="studentSearch" name="studentSearch"
|
|
placeholder="请先选择班级，然后输入学号进行搜索" disabled>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="studentName">学生姓名</label>
|
|
<input type="text" id="studentName" name="studentName"
|
|
placeholder="选择学生后自动填充" readonly>
|
|
</div>
|
|
|
|
<button type="button" class="btn" onclick="loadClasses()">获取班级列表</button>
|
|
<button type="button" class="btn" onclick="testSubmit()" disabled id="submitBtn">提交测试</button>
|
|
</form>
|
|
|
|
<div id="result" class="result" style="display: none;"></div>
|
|
<div id="studentList" class="student-list" style="display: none;"></div>
|
|
</div>
|
|
|
|
<script>
|
|
// 模拟API基础URL
|
|
const API_BASE_URL = 'http://localhost:8080';
|
|
|
|
let classOptions = [];
|
|
let studentOptions = [];
|
|
let selectedStudent = null;
|
|
|
|
// 获取班级列表
|
|
async function loadClasses() {
|
|
try {
|
|
showResult('正在获取班级列表...', 'info');
|
|
|
|
// 模拟API调用（实际应该调用真实API）
|
|
const response = await mockGetCurrentUserClasses();
|
|
|
|
classOptions = response.data || [];
|
|
populateClassSelect();
|
|
|
|
showResult(`成功获取 ${classOptions.length} 个班级`, 'success');
|
|
document.getElementById('classId').disabled = false;
|
|
|
|
} catch (error) {
|
|
console.error('获取班级列表失败:', error);
|
|
showResult('获取班级列表失败: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
// 填充班级下拉选项
|
|
function populateClassSelect() {
|
|
const classSelect = document.getElementById('classId');
|
|
classSelect.innerHTML = '<option value="">请选择班级</option>';
|
|
|
|
classOptions.forEach(classItem => {
|
|
const option = document.createElement('option');
|
|
option.value = classItem.classId;
|
|
option.textContent = `${classItem.className} - ${classItem.majorName || ''}`;
|
|
classSelect.appendChild(option);
|
|
});
|
|
|
|
// 绑定班级选择事件
|
|
classSelect.onchange = handleClassChange;
|
|
}
|
|
|
|
// 班级选择变化处理
|
|
async function handleClassChange() {
|
|
const classId = document.getElementById('classId').value;
|
|
const studentSearchInput = document.getElementById('studentSearch');
|
|
const studentNameInput = document.getElementById('studentName');
|
|
|
|
// 清空学生相关字段
|
|
studentSearchInput.value = '';
|
|
studentNameInput.value = '';
|
|
selectedStudent = null;
|
|
document.getElementById('studentList').style.display = 'none';
|
|
|
|
if (classId) {
|
|
// 启用学生搜索
|
|
studentSearchInput.disabled = false;
|
|
studentSearchInput.placeholder = '请输入学号进行搜索';
|
|
|
|
// 获取班级学生列表
|
|
try {
|
|
showResult('正在获取班级学生列表...', 'info');
|
|
const response = await mockGetClassStudents(classId);
|
|
studentOptions = response.data || [];
|
|
|
|
showResult(`班级内有 ${studentOptions.length} 名学生`, 'success');
|
|
|
|
// 绑定学生搜索事件
|
|
studentSearchInput.oninput = handleStudentSearch;
|
|
|
|
} catch (error) {
|
|
console.error('获取学生列表失败:', error);
|
|
showResult('获取学生列表失败: ' + error.message, 'error');
|
|
}
|
|
} else {
|
|
// 禁用学生搜索
|
|
studentSearchInput.disabled = true;
|
|
studentSearchInput.placeholder = '请先选择班级';
|
|
}
|
|
}
|
|
|
|
// 学生搜索处理
|
|
function handleStudentSearch() {
|
|
const keyword = document.getElementById('studentSearch').value.toLowerCase();
|
|
const studentListDiv = document.getElementById('studentList');
|
|
|
|
if (!keyword) {
|
|
studentListDiv.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
// 过滤学生
|
|
const filteredStudents = studentOptions.filter(student =>
|
|
student.studentNo && student.studentNo.toLowerCase().includes(keyword)
|
|
);
|
|
|
|
// 显示搜索结果
|
|
if (filteredStudents.length > 0) {
|
|
displayStudentList(filteredStudents);
|
|
studentListDiv.style.display = 'block';
|
|
} else {
|
|
studentListDiv.innerHTML = '<p>未找到匹配的学生</p>';
|
|
studentListDiv.style.display = 'block';
|
|
}
|
|
}
|
|
|
|
// 显示学生列表
|
|
function displayStudentList(students) {
|
|
const studentListDiv = document.getElementById('studentList');
|
|
studentListDiv.innerHTML = '<h4>搜索结果:</h4>';
|
|
|
|
students.forEach(student => {
|
|
const studentDiv = document.createElement('div');
|
|
studentDiv.className = 'student-item';
|
|
studentDiv.textContent = `${student.studentNo} - ${student.studentName}`;
|
|
studentDiv.onclick = () => selectStudent(student);
|
|
studentListDiv.appendChild(studentDiv);
|
|
});
|
|
}
|
|
|
|
// 选择学生
|
|
function selectStudent(student) {
|
|
selectedStudent = student;
|
|
document.getElementById('studentSearch').value = student.studentNo;
|
|
document.getElementById('studentName').value = student.studentName;
|
|
document.getElementById('studentList').style.display = 'none';
|
|
document.getElementById('submitBtn').disabled = false;
|
|
|
|
showResult(`已选择学生: ${student.studentNo} - ${student.studentName}`, 'success');
|
|
}
|
|
|
|
// 提交测试
|
|
function testSubmit() {
|
|
const formData = {
|
|
academicYear: document.getElementById('academicYear').value,
|
|
classId: document.getElementById('classId').value,
|
|
studentNo: document.getElementById('studentSearch').value,
|
|
studentName: document.getElementById('studentName').value,
|
|
selectedStudent: selectedStudent
|
|
};
|
|
|
|
showResult('测试数据: ' + JSON.stringify(formData, null, 2), 'success');
|
|
}
|
|
|
|
// 显示结果
|
|
function showResult(message, type = 'info') {
|
|
const resultDiv = document.getElementById('result');
|
|
resultDiv.style.display = 'block';
|
|
resultDiv.className = `result ${type}`;
|
|
resultDiv.innerHTML = `<pre>${message}</pre>`;
|
|
}
|
|
|
|
// 模拟API - 获取当前用户班级
|
|
async function mockGetCurrentUserClasses() {
|
|
// 模拟网络延迟
|
|
await new Promise(resolve => setTimeout(resolve, 500));
|
|
|
|
return {
|
|
code: 200,
|
|
msg: '操作成功',
|
|
data: [
|
|
{
|
|
classId: 1,
|
|
className: '计算机科学与技术2021级1班',
|
|
grade: '2021',
|
|
majorName: '计算机科学与技术',
|
|
collegeName: '计算机学院'
|
|
},
|
|
{
|
|
classId: 2,
|
|
className: '软件工程2021级1班',
|
|
grade: '2021',
|
|
majorName: '软件工程',
|
|
collegeName: '计算机学院'
|
|
},
|
|
{
|
|
classId: 3,
|
|
className: '数据科学与大数据技术2022级1班',
|
|
grade: '2022',
|
|
majorName: '数据科学与大数据技术',
|
|
collegeName: '计算机学院'
|
|
}
|
|
]
|
|
};
|
|
}
|
|
|
|
// 模拟API - 获取班级学生
|
|
async function mockGetClassStudents(classId) {
|
|
// 模拟网络延迟
|
|
await new Promise(resolve => setTimeout(resolve, 300));
|
|
|
|
const studentData = {
|
|
1: [
|
|
{ studentId: 101, studentNo: '20210101', studentName: '张三', gender: '男' },
|
|
{ studentId: 102, studentNo: '20210102', studentName: '李四', gender: '女' },
|
|
{ studentId: 103, studentNo: '20210103', studentName: '王五', gender: '男' },
|
|
{ studentId: 104, studentNo: '20210104', studentName: '赵六', gender: '女' }
|
|
],
|
|
2: [
|
|
{ studentId: 201, studentNo: '20210201', studentName: '钱七', gender: '男' },
|
|
{ studentId: 202, studentNo: '20210202', studentName: '孙八', gender: '女' },
|
|
{ studentId: 203, studentNo: '20210203', studentName: '周九', gender: '男' }
|
|
],
|
|
3: [
|
|
{ studentId: 301, studentNo: '20220301', studentName: '吴十', gender: '女' },
|
|
{ studentId: 302, studentNo: '20220302', studentName: '郑十一', gender: '男' },
|
|
{ studentId: 303, studentNo: '20220303', studentName: '王十二', gender: '女' },
|
|
{ studentId: 304, studentNo: '20220304', studentName: '李十三', gender: '男' },
|
|
{ studentId: 305, studentNo: '20220305', studentName: '刘十四', gender: '女' }
|
|
]
|
|
};
|
|
|
|
return {
|
|
code: 200,
|
|
msg: '操作成功',
|
|
data: studentData[classId] || []
|
|
};
|
|
}
|
|
|
|
// 页面加载完成后的初始化
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
showResult('页面加载完成，请点击"获取班级列表"开始测试', 'info');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |