v0.5测试

frontend/admin/attendance.php

@@ -28,34 +28,40 @@ if (!in_array($role, ['班主任', '考勤委员'])) {
 include __DIR__ . '/../includes/header.php';
 ?>
 
-<div class="nav">
-    <a href="/admin/dashboard.php" class="nav-item">首页</a>
-    <a href="/admin/students.php" class="nav-item">学生管理</a>
-    <?php if ($role === '班主任' || $role === '班长'): ?>
-    <a href="/admin/conduct.php" class="nav-item">操行分管理</a>
-    <?php endif; ?>
-    <?php if ($role === '班主任' || $role === '科代表'): ?>
-    <a href="/admin/homework.php" class="nav-item">作业管理</a>
-    <?php endif; ?>
-    <a href="/admin/attendance.php" class="nav-item active">考勤管理</a>
-    <?php if ($role === '班主任'): ?>
-    <a href="/admin/subjects.php" class="nav-item">科目管理</a>
-    <a href="/admin/admins.php" class="nav-item">管理员管理</a>
-    <?php endif; ?>
-    <a href="/admin/history.php" class="nav-item">历史记录</a>
-    <a href="/admin/password.php" class="nav-item">修改密码</a>
-</div>
+<?php include __DIR__ . '/../includes/nav.php'; ?>
 
 <div class="container">
+    <!-- 考勤操作工具栏 -->
     <div class="card">
-        <div class="action-bar">
-            <button class="btn btn-primary" onclick="showAddAttendanceModal()">添加考勤</button>
-            <div class="search-bar">
+        <div class="attendance-toolbar">
+            <div class="form-group" style="margin:0">
+                <label>日期</label>
                 <input type="date" id="attendanceDate" value="<?php echo date('Y-m-d'); ?>">
-                <button class="btn btn-primary" onclick="loadAttendanceRecords()">查询</button>
             </div>
+            <div class="status-group">
+                <button class="status-btn active" data-status="absent" onclick="selectStatus(this)">缺勤(-<span class="att-absent"></span>分)</button>
+                <button class="status-btn" data-status="late" onclick="selectStatus(this)">迟到(-<span class="att-late"></span>分)</button>
+                <button class="status-btn" data-status="leave" onclick="selectStatus(this)">请假(-<span class="att-leave"></span>分)</button>
+            </div>
+            <input type="text" id="attendanceReason" placeholder="原因（可选）" style="flex:1;min-width:150px;">
+            <button class="btn btn-primary" onclick="selectAllStudents()">全选</button>
+            <button class="btn" onclick="deselectAllStudents()">取消全选</button>
+            <button class="btn btn-danger" onclick="submitAttendance()">提交考勤</button>
+            <button class="btn btn-secondary" onclick="loadAttendanceRecords()">查询记录</button>
         </div>
-        
+    </div>
+
+    <!-- 学生方格网格 -->
+    <div class="card">
+        <div class="card-title">点击选择有考勤异常的学生</div>
+        <div class="student-grid" id="studentGrid">
+            <!-- JS 动态生成 -->
+        </div>
+    </div>
+
+    <!-- 历史考勤记录 -->
+    <div class="card">
+        <div class="card-title">考勤记录</div>
         <div class="table-wrapper">
             <table class="table">
                 <thead>
@@ -67,54 +73,151 @@ include __DIR__ . '/../includes/header.php';
     </div>
 </div>
 
-<!-- 添加考勤模态框 -->
-<div id="addAttendanceModal" class="modal">
-    <div class="modal-content">
-        <div class="modal-header">
-            <h3>添加考勤记录</h3>
-            <button class="modal-close" onclick="closeModal('addAttendanceModal')">&times;</button>
-        </div>
-        <form onsubmit="event.preventDefault(); submitAddAttendance()">
-            <div class="form-group">
-                <label>学生</label>
-                <select id="attendanceStudentId" required></select>
-            </div>
-            <div class="form-group">
-                <label>日期</label>
-                <input type="date" id="attAttendanceDate" required>
-            </div>
-            <div class="form-group">
-                <label>状态</label>
-                <select id="attendanceStatus" required>
-                    <option value="present">出勤</option>
-                    <option value="absent">缺勤</option>
-                    <option value="late">迟到</option>
-                    <option value="leave">请假</option>
-                </select>
-            </div>
-            <div class="form-group">
-                <label>原因</label>
-                <input type="text" id="attendanceReason" placeholder="缺勤/迟到/请假原因">
-            </div>
-            <div class="form-group">
-                <label><input type="checkbox" id="attendanceDeduct"> 同时扣分</label>
-                <small>扣分规则：缺勤-5分，迟到-2分，请假-1分</small>
-            </div>
-            <div class="modal-footer">
-                <button type="submit" class="btn btn-primary">提交</button>
-                <button type="button" class="btn" onclick="closeModal('addAttendanceModal')">取消</button>
-            </div>
-        </form>
-    </div>
-</div>
-
 <script>
+let currentStatus = 'absent';
+let studentsData = [];
+let existingRecords = [];
+
+// 初始化考勤扣分配置
+const attAbsent = window.DEDUCTION_ATTENDANCE_ABSENT || 5;
+const attLate = window.DEDUCTION_ATTENDANCE_LATE || 2;
+const attLeave = window.DEDUCTION_ATTENDANCE_LEAVE || 1;
+
+// 更新页面中的配置值显示
+document.querySelectorAll('.att-absent').forEach(el => el.textContent = attAbsent);
+document.querySelectorAll('.att-late').forEach(el => el.textContent = attLate);
+document.querySelectorAll('.att-leave').forEach(el => el.textContent = attLeave);
+
+// 选择考勤状态
+function selectStatus(btn) {
+    document.querySelectorAll('.status-btn').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    currentStatus = btn.dataset.status;
+}
+
+// 加载学生列表
+async function loadStudents() {
+    const res = await apiGet('/api/admin/students');
+    if (res && res.success) {
+        studentsData = res.data.students;
+        renderStudentGrid();
+        // 同时加载当天已有考勤记录
+        await loadExistingRecords();
+    } else {
+        document.getElementById('studentGrid').innerHTML = '<div style="text-align:center;padding:20px;color:#999;">加载学生列表失败</div>';
+    }
+}
+
+// 渲染学生方格
+function renderStudentGrid() {
+    let html = '';
+    studentsData.forEach(student => {
+        const hasRecord = existingRecords.some(r => r.student_id === student.student_id);
+        html += `<div class="student-cell${hasRecord ? ' has-record' : ''}" 
+                     data-id="${student.student_id}" 
+                     data-name="${escapeHtml(student.name)}"
+                     onclick="toggleStudent(this)">
+                     ${escapeHtml(student.name)}
+                 </div>`;
+    });
+    if (studentsData.length === 0) {
+        html = '<div style="text-align:center;padding:20px;color:#999;width:100%;">暂无学生数据</div>';
+    }
+    document.getElementById('studentGrid').innerHTML = html;
+}
+
+// 切换学生选中状态
+function toggleStudent(cell) {
+    cell.classList.toggle('selected');
+}
+
+// 全选
+function selectAllStudents() {
+    document.querySelectorAll('.student-cell:not(.has-record)').forEach(cell => {
+        cell.classList.add('selected');
+    });
+}
+
+// 取消全选
+function deselectAllStudents() {
+    document.querySelectorAll('.student-cell').forEach(cell => {
+        cell.classList.remove('selected');
+    });
+}
+
+// 加载当天已有考勤记录（用于标记 .has-record）
+async function loadExistingRecords() {
+    const date = document.getElementById('attendanceDate').value;
+    const res = await apiGet('/api/admin/attendance/records', { date });
+    if (res && res.success) {
+        existingRecords = res.data.records || [];
+        renderStudentGrid(); // 重新渲染以标记 has-record
+    }
+}
+
+// 提交考勤
+async function submitAttendance() {
+    const selectedCells = document.querySelectorAll('.student-cell.selected');
+    if (selectedCells.length === 0) {
+        showToast('请先选择有考勤异常的学生', 'warning');
+        return;
+    }
+
+    const date = document.getElementById('attendanceDate').value;
+    const reason = document.getElementById('attendanceReason').value;
+
+    // 检查是否有已存在记录的学生
+    const hasRecordStudents = [];
+    selectedCells.forEach(cell => {
+        if (cell.classList.contains('has-record')) {
+            hasRecordStudents.push(cell.dataset.name);
+        }
+    });
+
+    if (hasRecordStudents.length > 0) {
+        const confirmed = confirm(`以下学生已有考勤记录：${hasRecordStudents.join('、')}，是否继续提交？`);
+        if (!confirmed) return;
+    }
+
+    // 批量提交
+    const promises = [];
+    selectedCells.forEach(cell => {
+        const studentId = parseInt(cell.dataset.id);
+        promises.push(
+            apiPost('/api/admin/attendance', {
+                student_id: studentId,
+                date: date,
+                status: currentStatus,
+                reason: reason,
+                apply_deduction: true
+            })
+        );
+    });
+
+    const results = await Promise.allSettled(promises);
+    const succeeded = results.filter(r => r.status === 'fulfilled' && r.value?.success).length;
+    const failed = results.length - succeeded;
+
+    if (failed === 0) {
+        showToast(`考勤提交成功（${succeeded}条）`);
+    } else {
+        showToast(`提交完成：成功${succeeded}条，失败${failed}条`, 'error');
+    }
+
+    // 刷新
+    deselectAllStudents();
+    await loadExistingRecords();
+    loadAttendanceRecords();
+}
+
+// 查询并渲染考勤记录
 async function loadAttendanceRecords() {
     const date = document.getElementById('attendanceDate').value;
     const res = await apiGet('/api/admin/attendance/records', { date });
     if (res && res.success) {
         let html = '';
-        res.data.records.forEach(record => {
+        const records = res.data.records || [];
+        records.forEach(record => {
             html += `<tr>
                 <td>${escapeHtml(record.student_no)}</td>
                 <td>${escapeHtml(record.student_name)}</td>
@@ -124,61 +227,23 @@ async function loadAttendanceRecords() {
                 <td>${record.deduction_applied ? '已扣分' : '-'}</td>
             </tr>`;
         });
-        if (res.data.records.length === 0) {
+        if (records.length === 0) {
             html = '<tr><td colspan="6" style="text-align:center;">暂无考勤记录</td></tr>';
         }
         document.getElementById('attendanceList').innerHTML = html;
     }
 }
 
-async function loadStudentsForSelect() {
-    const res = await apiGet('/api/admin/students');
-    if (res && res.success) {
-        let html = '<option value="">请选择学生</option>';
-        res.data.students.forEach(s => {
-            html += `<option value="${s.student_id}">${escapeHtml(s.student_no)} - ${escapeHtml(s.name)}</option>`;
-        });
-        document.getElementById('attendanceStudentId').innerHTML = html;
-    }
-}
-
-async function showAddAttendanceModal() {
-    await loadStudentsForSelect();
-    document.getElementById('addAttendanceModal').style.display = 'flex';
-    document.getElementById('attAttendanceDate').value = new Date().toISOString().split('T')[0];
-}
-
-async function submitAddAttendance() {
-    const studentId = document.getElementById('attendanceStudentId').value;
-    const date = document.getElementById('attAttendanceDate').value;
-    const status = document.getElementById('attendanceStatus').value;
-    const reason = document.getElementById('attendanceReason').value;
-    const applyDeduction = document.getElementById('attendanceDeduct').checked;
-    
-    if (!studentId || !date || !status) {
-        showToast('请填写完整信息', 'warning');
-        return;
-    }
-    
-    const res = await apiPost('/api/admin/attendance', {
-        student_id: parseInt(studentId),
-        date: date,
-        status: status,
-        reason: reason,
-        apply_deduction: applyDeduction
-    });
-    
-    if (res && res.success) {
-        showToast('考勤记录添加成功');
-        closeModal('addAttendanceModal');
-        loadAttendanceRecords();
-    } else {
-        showToast(res?.message || '添加失败', 'error');
-    }
-}
+// 日期变化时重新加载
+document.getElementById('attendanceDate').addEventListener('change', function() {
+    loadExistingRecords();
+    loadAttendanceRecords();
+});
 
+// 页面初始化
+loadStudents();
 loadAttendanceRecords();
 </script>
 <script src="/assets/js/admin.js"></script>
 
-<?php include __DIR__ . '/../includes/footer.php'; ?>
+<?php include __DIR__ . '/../includes/footer.php'; ?>