wuzhen update
This commit is contained in:
wuzhen committed
1 parent
bab7b53074
commit
a2222f63cb
284 files changed
+48629
-3473
No files matched your search
@@ -0,0 +1,364 @@
|
||||
<!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>
|
||||
Reference in new issue
Block a user