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

308 lines
14 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 %}编辑学生 - {{ student.name }} - 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-edit me-2"></i>编辑学生信息
</h1>
<div>
<a href="{{ url_for('admin.student_detail', student_number=student.student_number) }}"
class="btn btn-outline-info me-2">
<i class="fas fa-eye me-1"></i>查看详情
</a>
<a href="{{ url_for('admin.student_list') }}" class="btn btn-outline-secondary">
<i class="fas fa-arrow-left me-1"></i>返回列表
</a>
</div>
</div>
<!-- 编辑学生表单 -->
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card shadow">
<div class="card-header py-3 d-flex justify-content-between align-items-center">
<h6 class="m-0 font-weight-bold text-primary">
<i class="fas fa-info-circle me-2"></i>学生基本信息
</h6>
<span class="badge bg-secondary">学号: {{ student.student_number }}</span>
</div>
<div class="card-body">
<form id="editStudentForm" method="POST">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">学号</label>
<input type="text" class="form-control" name="student_number"
value="{{ student.student_number }}" readonly
style="background-color: #f8f9fa;">
<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
value="{{ student.name }}" 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="男" {% if student.gender == '' %}selected{% endif %}></option>
<option value="女" {% if student.gender == '' %}selected{% endif %}></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" value="{{ student.grade }}" 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}" value="{{ student.phone or '' }}" 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"
value="{{ student.college or '' }}" 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"
value="{{ student.major or '' }}" 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"
value="{{ student.supervisor or '' }}" 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="专硕" {% if student.degree_type == '专硕' %}selected{% endif %}>专硕</option>
<option value="学硕" {% if student.degree_type == '学硕' %}selected{% endif %}>学硕</option>
<option value="学博" {% if student.degree_type == '学博' %}selected{% endif %}>学博</option>
<option value="专博" {% if student.degree_type == '专博' %}selected{% endif %}>专博</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"
value="{{ student.enrollment_date.strftime('%Y-%m-%d') if student.enrollment_date else '' }}">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">状态</label>
<select class="form-select" name="status">
<option value="在读" {% if student.status == '在读' %}selected{% endif %}>在读</option>
<option value="毕业" {% if student.status == '毕业' %}selected{% endif %}>毕业</option>
</select>
</div>
</div>
</div>
<hr class="my-4">
<div class="d-flex justify-content-between">
<div>
<button type="button" class="btn btn-warning" onclick="resetPassword()">
<i class="fas fa-key me-1"></i>重置密码
</button>
{% if student.user %}
<button type="button" class="btn btn-outline-secondary ms-2" onclick="toggleAccountStatus()">
{% if student.user.is_active %}
<i class="fas fa-ban me-1"></i>禁用账户
{% else %}
<i class="fas fa-check me-1"></i>启用账户
{% endif %}
</button>
{% endif %}
</div>
<div class="d-flex 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-primary">
<i class="fas fa-save me-1"></i>保存修改
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
<script>
document.getElementById('editStudentForm').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
const data = Object.fromEntries(formData);
// 表单验证
if (!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/{{ student.student_number }}/edit`, {
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);
// 滚动到顶部
window.scrollTo(0, 0);
// 恢复提交按钮
setTimeout(() => {
submitBtn.disabled = false;
submitBtn.innerHTML = originalText;
}, 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;
});
});
// 重置密码
function resetPassword() {
if (confirm('确认重置该学生的密码为默认密码(123456)吗?')) {
fetch(`/admin/students/{{ student.student_number }}/reset_password`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
}
})
.then(response => response.json())
.then(result => {
if (result.success) {
alert('密码重置成功');
} else {
alert(result.message);
}
})
.catch(error => {
console.error('Error:', error);
alert('操作失败,请稍后重试');
});
}
}
// 切换账户状态
function toggleAccountStatus() {
const isActive = {{ 'true' if student.user and student.user.is_active else 'false' }};
const action = isActive ? '禁用' : '启用';
if (confirm(`确认${action}该学生的账户吗?`)) {
fetch(`/admin/students/{{ student.student_number }}/toggle_status`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
}
})
.then(response => response.json())
.then(result => {
if (result.success) {
alert(result.message);
location.reload(); // 重新加载页面以更新按钮状态
} else {
alert(result.message);
}
})
.catch(error => {
console.error('Error:', error);
alert('操作失败,请稍后重试');
});
}
}
</script>
{% endblock %}