248 lines
11 KiB
HTML
248 lines
11 KiB
HTML
{% extends 'layout/base.html' %}
|
||
|
||
{% block title %}添加学生 - SmartDSP考勤管理系统{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="container-fluid mt-4">
|
||
<!-- 页面标题 -->
|
||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||
<h1 class="h3 mb-0">
|
||
<i class="fas fa-user-plus me-2"></i>添加学生
|
||
</h1>
|
||
<a href="{{ url_for('admin.student_list') }}" class="btn btn-outline-secondary">
|
||
<i class="fas fa-arrow-left me-1"></i>返回学生列表
|
||
</a>
|
||
</div>
|
||
|
||
<!-- 添加学生表单 -->
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-8">
|
||
<div class="card shadow">
|
||
<div class="card-header py-3">
|
||
<h6 class="m-0 font-weight-bold text-primary">
|
||
<i class="fas fa-info-circle me-2"></i>学生基本信息
|
||
</h6>
|
||
</div>
|
||
<div class="card-body">
|
||
<form id="addStudentForm" method="POST">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="mb-3">
|
||
<label class="form-label">学号 <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" name="student_number" required
|
||
placeholder="请输入学号">
|
||
<div class="form-text">学号将作为登录账号使用</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="mb-3">
|
||
<label class="form-label">姓名 <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" name="name" required
|
||
placeholder="请输入姓名">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-4">
|
||
<div class="mb-3">
|
||
<label class="form-label">性别 <span class="text-danger">*</span></label>
|
||
<select class="form-select" name="gender" required>
|
||
<option value="">请选择性别</option>
|
||
<option value="男">男</option>
|
||
<option value="女">女</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="mb-3">
|
||
<label class="form-label">年级 <span class="text-danger">*</span></label>
|
||
<input type="number" class="form-control" name="grade" required
|
||
min="2020" max="2030" placeholder="如：2023">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="mb-3">
|
||
<label class="form-label">手机号</label>
|
||
<input type="tel" class="form-control" name="phone" maxlength="11"
|
||
pattern="1[3-9]\d{9}" placeholder="请输入11位手机号">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="mb-3">
|
||
<label class="form-label">学院</label>
|
||
<input type="text" class="form-control" name="college"
|
||
placeholder="请输入学院名称">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="mb-3">
|
||
<label class="form-label">专业</label>
|
||
<input type="text" class="form-control" name="major"
|
||
placeholder="请输入专业名称">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="mb-3">
|
||
<label class="form-label">导师</label>
|
||
<input type="text" class="form-control" name="supervisor"
|
||
placeholder="请输入导师姓名">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="mb-3">
|
||
<label class="form-label">学位类型</label>
|
||
<select class="form-select" name="degree_type">
|
||
<option value="">请选择学位类型</option>
|
||
<option value="专硕">专硕</option>
|
||
<option value="学硕">学硕</option>
|
||
<option value="学博">学博</option>
|
||
<option value="专博">专博</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="mb-3">
|
||
<label class="form-label">入学日期</label>
|
||
<input type="date" class="form-control" name="enrollment_date">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="mb-3">
|
||
<label class="form-label">状态</label>
|
||
<select class="form-select" name="status">
|
||
<option value="在读" selected>在读</option>
|
||
<option value="毕业">毕业</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="mb-3">
|
||
<label class="form-label">初始密码</label>
|
||
<input type="password" class="form-control" name="password"
|
||
placeholder="默认为123456" value="123456">
|
||
<div class="form-text">学生可在登录后自行修改密码</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="my-4">
|
||
|
||
<div class="d-flex justify-content-end gap-2">
|
||
<a href="{{ url_for('admin.student_list') }}" class="btn btn-secondary">
|
||
<i class="fas fa-times me-1"></i>取消
|
||
</a>
|
||
<button type="submit" class="btn btn-success">
|
||
<i class="fas fa-save me-1"></i>保存学生信息
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block extra_js %}
|
||
<script>
|
||
document.getElementById('addStudentForm').addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
|
||
const formData = new FormData(this);
|
||
const data = Object.fromEntries(formData);
|
||
|
||
// 表单验证
|
||
if (!data.student_number || !data.name || !data.gender || !data.grade) {
|
||
alert('请填写所有必填项');
|
||
return;
|
||
}
|
||
|
||
// 验证手机号格式
|
||
if (data.phone && !/^1[3-9]\d{9}$/.test(data.phone)) {
|
||
alert('手机号格式不正确');
|
||
return;
|
||
}
|
||
|
||
// 禁用提交按钮
|
||
const submitBtn = this.querySelector('button[type="submit"]');
|
||
const originalText = submitBtn.innerHTML;
|
||
submitBtn.disabled = true;
|
||
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>保存中...';
|
||
|
||
fetch('/admin/students/add', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify(data)
|
||
})
|
||
.then(response => response.json())
|
||
.then(result => {
|
||
if (result.success) {
|
||
// 显示成功消息
|
||
const alertDiv = document.createElement('div');
|
||
alertDiv.className = 'alert alert-success alert-dismissible fade show';
|
||
alertDiv.innerHTML = `
|
||
<i class="fas fa-check-circle me-2"></i>${result.message}
|
||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||
`;
|
||
|
||
// 插入到表单前面
|
||
const card = document.querySelector('.card-body');
|
||
card.insertBefore(alertDiv, card.firstChild);
|
||
|
||
// 3秒后跳转到学生列表
|
||
setTimeout(() => {
|
||
window.location.href = '/admin/students';
|
||
}, 2000);
|
||
} else {
|
||
// 显示错误消息
|
||
const alertDiv = document.createElement('div');
|
||
alertDiv.className = 'alert alert-danger alert-dismissible fade show';
|
||
alertDiv.innerHTML = `
|
||
<i class="fas fa-exclamation-triangle me-2"></i>${result.message}
|
||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||
`;
|
||
|
||
const card = document.querySelector('.card-body');
|
||
card.insertBefore(alertDiv, card.firstChild);
|
||
|
||
// 恢复提交按钮
|
||
submitBtn.disabled = false;
|
||
submitBtn.innerHTML = originalText;
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('Error:', error);
|
||
alert('网络错误，请稍后重试');
|
||
|
||
// 恢复提交按钮
|
||
submitBtn.disabled = false;
|
||
submitBtn.innerHTML = originalText;
|
||
});
|
||
});
|
||
|
||
// 学号输入框失焦时检查是否已存在
|
||
document.querySelector('input[name="student_number"]').addEventListener('blur', function() {
|
||
const studentNumber = this.value.trim();
|
||
if (studentNumber) {
|
||
// 这里可以添加AJAX检查学号是否已存在的逻辑
|
||
// 为了简化，暂时不实现
|
||
}
|
||
});
|
||
</script>
|
||
{% endblock %}
|