CHM_attendance/app/templates/admin/upload_attendance.html
superlishunqin 3e6c8d353c SmartDSP
2025-06-12 00:38:27 +08:00

153 lines
7.3 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{% extends 'layout/base.html' %}
{% block title %}上传考勤数据 - SmartDSP考勤管理系统{% endblock %}
{% block content %}
<div class="container mt-4">
<div class="row">
<div class="col-md-10 mx-auto">
<div class="card shadow">
<div class="card-header">
<h5 class="card-title mb-0">
<i class="fas fa-upload me-2"></i>上传考勤数据
</h5>
</div>
<div class="card-body">
<form method="POST" enctype="multipart/form-data" id="uploadForm">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="week_start" class="form-label">周开始日期</label>
<input type="date" class="form-control" id="week_start" name="week_start" required>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="week_end" class="form-label">周结束日期</label>
<input type="date" class="form-control" id="week_end" name="week_end" required>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="attendance_file" class="form-label">
<i class="fas fa-clock me-2"></i>考勤记录文件 <span class="text-danger">*</span>
</label>
<input type="file" class="form-control" id="attendance_file" name="attendance_file"
accept=".xlsx,.xls" required>
<div class="form-text">必须上传考勤记录Excel文件</div>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="leave_file" class="form-label">
<i class="fas fa-file-alt me-2"></i>请假单文件 <span class="text-muted">(可选)</span>
</label>
<input type="file" class="form-control" id="leave_file" name="leave_file"
accept=".xlsx,.xls">
<div class="form-text">如有请假记录请上传请假单Excel文件</div>
</div>
</div>
</div>
<div class="alert alert-info">
<h6><i class="fas fa-info-circle me-2"></i>导入说明:</h6>
<ul class="mb-0">
<li><strong>考勤记录文件:</strong>包含姓名列和每日考勤数据,系统会自动计算工作时长、迟到次数等</li>
<li><strong>请假单文件:</strong>包含请假人员、请假开始时间、请假结束时间等信息</li>
<li><strong>处理规则:</strong>
<ul>
<li>请假时间内的缺卡记录会自动转换为请假</li>
<li>请假时间内的正常打卡记录(正常、迟到、早退)保持不变</li>
</ul>
</li>
<li>如果记录已存在,将会更新现有数据</li>
<li>请确保学生信息已在系统中注册</li>
</ul>
</div>
<div class="alert alert-warning">
<h6><i class="fas fa-exclamation-triangle me-2"></i>注意事项:</h6>
<ul class="mb-0">
<li>请假单中的时间格式会自动转换(支持数字格式和标准日期格式)</li>
<li>请假人员姓名必须与学生表中的姓名完全一致</li>
<li>建议先上传考勤记录,再选择性上传请假单</li>
</ul>
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<a href="{{ url_for('admin.attendance_management') }}"
class="btn btn-secondary me-md-2">
<i class="fas fa-arrow-left me-2"></i>返回
</a>
<button type="submit" class="btn btn-primary" id="submitBtn">
<i class="fas fa-upload me-2"></i>开始导入
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
const weekStartInput = document.getElementById('week_start');
const weekEndInput = document.getElementById('week_end');
const form = document.getElementById('uploadForm');
const submitBtn = document.getElementById('submitBtn');
const attendanceFileInput = document.getElementById('attendance_file');
const leaveFileInput = document.getElementById('leave_file');
// 自动设置周结束日期
weekStartInput.addEventListener('change', function() {
if (this.value) {
const startDate = new Date(this.value);
const endDate = new Date(startDate);
endDate.setDate(startDate.getDate() + 6);
weekEndInput.value = endDate.toISOString().split('T')[0];
}
});
// 文件选择提示
attendanceFileInput.addEventListener('change', function() {
if (this.files.length > 0) {
console.log('已选择考勤记录文件:', this.files[0].name);
}
});
leaveFileInput.addEventListener('change', function() {
if (this.files.length > 0) {
console.log('已选择请假单文件:', this.files[0].name);
}
});
// 表单提交处理
form.addEventListener('submit', function(e) {
const hasAttendanceFile = attendanceFileInput.files.length > 0;
if (!hasAttendanceFile) {
e.preventDefault();
alert('请选择考勤记录文件!');
return false;
}
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>导入中...';
submitBtn.disabled = true;
// 显示处理进度提示
const progressAlert = document.createElement('div');
progressAlert.className = 'alert alert-info mt-3';
progressAlert.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>正在处理文件,请稍候...';
form.appendChild(progressAlert);
});
});
</script>
{% endblock %}