成绩录入 - XX学校成绩管理系统

选择班级

课程名称

考试日期

备注说明（可选）

<h3><i class="fas fa-user-graduate"></i> 学生成绩录入</h3>
                <p class="text-muted">选择班级后，系统将自动加载该班级的学生列�?/p>
                
                <div id="students-loading" class="loading" style="display: none;">
                    <i class="fas fa-spinner"></i>
                    <p>正在加载学生列表...</p>
                </div>
                
                <div id="no-students" class="no-students" style="display: none;">
                    <i class="fas fa-user-slash"></i>
                    <p>该班级暂无学生数据，请先添加学生信息</p>
                </div>
                
                <table id="students-table" class="students-table" style="display: none;">
                    <thead>
                        <tr>
                            <th>学号</th>
                            <th>姓名</th>
                            <th>平时成绩</th>
                            <th>期中成绩</th>
                            <th>期末成绩</th>
                            <th>总评成绩</th>
                        </tr>
                    </thead>
                    <tbody id="students-tbody">
                        
                    </tbody>
                </table>
            </div>
            
            <div class="form-actions">
                <button id="cancel-btn" class="btn btn-secondary btn-large">
                    <i class="fas fa-times"></i> 取消
                </button>
                <button id="submit-btn" class="btn btn-primary btn-large" disabled>
                    <i class="fas fa-check"></i> 提交成绩
                </button>
            </div>
        </div>
        
        <div class="card">
            <h3><i class="fas fa-lightbulb"></i> 使用说明</h3>
            <ul class="text-muted">
                <li>首先选择要录入成绩的班级和课�?/li>
                <li>系统会自动加载该班级的学生列�?/li>
                <li>为每个学生输入平时成绩、期中成绩和期末成绩</li>
                <li>总评成绩将根据权重自动计算（默认权重：平�?0%，期�?0%，期�?0%�?/li>
                <li>确认无误后点击“提交成绩”按钮保存数�?/li>
                <li>提交后可以在“成绩管理”页面查看和修改已录入的成绩</li>
            </ul>
        </div>
    </div>

<script>
        // 模拟学生数据
        const mockStudents = [
            { id: '2021001', name: '张三', usual: '', midterm: '', final: '', total: '' },
            { id: '2021002', name: '李四', usual: '', midterm: '', final: '', total: '' },
            { id: '2021003', name: '王五', usual: '', midterm: '', final: '', total: '' },
            { id: '2021004', name: '赵六', usual: '', midterm: '', final: '', total: '' },
            { id: '2021005', name: '钱七', usual: '', midterm: '', final: '', total: '' },
            { id: '2021006', name: '孙八', usual: '', midterm: '', final: '', total: '' },
            { id: '2021007', name: '周九', usual: '', midterm: '', final: '', total: '' },
            { id: '2021008', name: '吴十', usual: '', midterm: '', final: '', total: '' }
        ];
        
        // DOM元素
        const classSelect = document.getElementById('class-select');
        const courseNameInput = document.getElementById('course-name');
        const examDateInput = document.getElementById('exam-date');
        const remarksInput = document.getElementById('remarks');
        const studentsLoading = document.getElementById('students-loading');
        const noStudents = document.getElementById('no-students');
        const studentsTable = document.getElementById('students-table');
        const studentsTbody = document.getElementById('students-tbody');
        const cancelBtn = document.getElementById('cancel-btn');
        const submitBtn = document.getElementById('submit-btn');
        
        // 设置默认考试日期为今�?        const today = new Date().toISOString().split('T')[0];
        examDateInput.value = today;
        
        // 班级选择变化事件
        classSelect.addEventListener('change', function() {
            const selectedClass = this.value;
            
            if (!selectedClass) {
                hideStudentsTable();
                submitBtn.disabled = true;
                return;
            }
            
            // 显示加载状�?            showLoading();
            
            // 模拟API调用延迟
            setTimeout(() => {
                loadStudentsForClass(selectedClass);
            }, 1000);
        });
        
        // 加载学生数据
        function loadStudentsForClass(className) {
            // 模拟API响应
            if (mockStudents.length > 0) {
                renderStudentsTable(mockStudents);
            } else {
                showNoStudents();
            }
        }
        
        // 渲染学生表格
        function renderStudentsTable(students) {
            hideLoading();
            
            // 清空表格
            studentsTbody.innerHTML = '';
            
            // 添加学生�?            students.forEach((student, index) => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${student.id}</td>
                    <td>${student.name}</td>
                    <td>
                        <input type="number" class="grade-input usual-grade" 
                               data-index="${index}" min="0" max="100" 
                               placeholder="0-100" value="${student.usual}">
                    </td>
                    <td>
                        <input type="number" class="grade-input midterm-grade" 
                               data-index="${index}" min="0" max="100" 
                               placeholder="0-100" value="${student.midterm}">
                    </td>
                    <td>
                        <input type="number" class="grade-input final-grade" 
                               data-index="${index}" min="0" max="100" 
                               placeholder="0-100" value="${student.final}">
                    </td>
                    <td>
                        <span class="total-grade" data-index="${index}">${student.total || ''}</span>
                    </td>
                `;
                
                studentsTbody.appendChild(row);
            });
            
            // 显示表格
            studentsTable.style.display = 'table';
            noStudents.style.display = 'none';
            
            // 启用提交按钮
            submitBtn.disabled = false;
            
            // 添加成绩输入事件监听
            addGradeInputListeners();
        }
        
        // 显示加载状�?        function showLoading() {
            studentsLoading.style.display = 'block';
            studentsTable.style.display = 'none';
            noStudents.style.display = 'none';
        }
        
        // 隐藏加载状�?        function hideLoading() {
            studentsLoading.style.display = 'none';
        }
        
        // 显示无学生数�?        function showNoStudents() {
            hideLoading();
            studentsTable.style.display = 'none';
            noStudents.style.display = 'block';
        }
        
        // 隐藏学生表格
        function hideStudentsTable() {
            studentsTable.style.display = 'none';
            noStudents.style.display = 'none';
        }
        
        // 添加成绩输入事件监听
        function addGradeInputListeners() {
            const usualGrades = document.querySelectorAll('.usual-grade');
            const midtermGrades = document.querySelectorAll('.midterm-grade');
            const finalGrades = document.querySelectorAll('.final-grade');
            
            usualGrades.forEach(input => {
                input.addEventListener('input', calculateTotalGrade);
            });
            
            midtermGrades.forEach(input => {
                input.addEventListener('input', calculateTotalGrade);
            });
            
            finalGrades.forEach(input => {
                input.addEventListener('input', calculateTotalGrade);
            });
        }
        
        // 计算总评成绩
        function calculateTotalGrade(event) {
            const input = event.target;
            const index = input.getAttribute('data-index');
            
            // 获取三个成绩
            const usualInput = document.querySelector(`.usual-grade[data-index="${index}"]`);
            const midtermInput = document.querySelector(`.midterm-grade[data-index="${index}"]`);
            const finalInput = document.querySelector(`.final-grade[data-index="${index}"]`);
            const totalSpan = document.querySelector(`.total-grade[data-index="${index}"]`);
            
            const usual = parseFloat(usualInput.value) || 0;
            const midterm = parseFloat(midtermInput.value) || 0;
            const final = parseFloat(finalInput.value) || 0;
            
            // 计算总评成绩（权重：平时20%，期�?0%，期�?0%�?            const total = (usual * 0.2) + (midterm * 0.3) + (final * 0.5);
            
            // 显示总评成绩（四舍五入到整数�?            totalSpan.textContent = Math.round(total);
            
            // 根据成绩范围设置颜色
            if (total >= 90) {
                totalSpan.style.color = '#38a169';
                totalSpan.style.fontWeight = 'bold';
            } else if (total >= 60) {
                totalSpan.style.color = '#d69e2e';
                totalSpan.style.fontWeight = 'normal';
            } else {
                totalSpan.style.color = '#e53e3e';
                totalSpan.style.fontWeight = 'bold';
            }
        }
        
        // 表单验证
        function validateForm() {
            const className = classSelect.value;
            const courseName = courseNameInput.value.trim();
            
            if (!className) {
                alert('请选择班级');
                return false;
            }
            
            if (!courseName) {
                alert('请输入课程名�?);
                courseNameInput.focus();
                return false;
            }
            
            // 检查是否有学生成绩未填�?            const usualGrades = document.querySelectorAll('.usual-grade');
            const midtermGrades = document.querySelectorAll('.midterm-grade');
            const finalGrades = document.querySelectorAll('.final-grade');
            
            for (let i = 0; i < usualGrades.length; i++) {
                const usual = usualGrades[i].value.trim();
                const midterm = midtermGrades[i].value.trim();
                const final = finalGrades[i].value.trim();
                
                if (!usual || !midterm || !final) {
                    alert(`请填写第${i + 1}行学生的所有成绩`);
                    return false;
                }
                
                const usualNum = parseFloat(usual);
                const midtermNum = parseFloat(midterm);
                const finalNum = parseFloat(final);
                
                if (usualNum < 0 || usualNum > 100 || 
                    midtermNum < 0 || midtermNum > 100 || 
                    finalNum < 0 || finalNum > 100) {
                    alert(`�?{i + 1}行学生的成绩必须�?-100之间`);
                    return false;
                }
            }
            
            return true;
        }
        
        // 收集表单数据
        function collectFormData() {
            const className = classSelect.options[classSelect.selectedIndex].text;
            const courseName = courseNameInput.value.trim();
            const examDate = examDateInput.value;
            const remarks = remarksInput.value.trim();
            
            const grades = [];
            const rows = studentsTbody.querySelectorAll('tr');
            
            rows.forEach((row, index) => {
                const studentId = row.cells[0].textContent;
                const studentName = row.cells[1].textContent;
                const usual = row.cells[2].querySelector('input').value;
                const midterm = row.cells[3].querySelector('input').value;
                const final = row.cells[4].querySelector('input').value;
                const total = row.cells[5].querySelector('span').textContent;
                
                grades.push({
                    studentId,
                    studentName,
                    usual: parseFloat(usual),
                    midterm: parseFloat(midterm),
                    final: parseFloat(final),
                    total: parseFloat(total)
                });
            });
            
            return {
                className,
                courseName,
                examDate,
                remarks,
                grades
            };
        }
        
        // 提交表单
        function submitForm() {
            if (!validateForm()) {
                return;
            }
            
            const formData = collectFormData();
            
            // 显示提交中状�?            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 提交�?..';
            submitBtn.disabled = true;
            
            // 模拟API调用
            setTimeout(() => {
                // 模拟成功响应
                alert(`成绩提交成功！\n班级�?{formData.className}\n课程�?{formData.courseName}\n共录�?{formData.grades.length}名学生成绩`);
                
                // 重置按钮状�?                submitBtn.innerHTML = '<i class="fas fa-check"></i> 提交成绩';
                submitBtn.disabled = false;
                
                // 重置表单
                resetForm();
            }, 1500);
        }
        
        // 重置表单
        function resetForm() {
            classSelect.value = '';
            courseNameInput.value = '';
            examDateInput.value = today;
            remarksInput.value = '';
            
            // 清空学生表格
            studentsTbody.innerHTML = '';
            studentsTable.style.display = 'none';
            noStudents.style.display = 'none';
            
            // 禁用提交按钮
            submitBtn.disabled = true;
        }
        
        // 取消按钮事件
        cancelBtn.addEventListener('click', function() {
            if (confirm('确定要取消吗？所有未保存的更改将会丢失�?)) {
                resetForm();
            }
        });
        
        // 提交按钮事件
        submitBtn.addEventListener('click', submitForm);
        
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 检查是否有必要的数�?            if (!classSelect.value) {
                submitBtn.disabled = true;
            }
        });
    </script>
</body>
</html>