hmo/piano-plan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 班级管理增加分配目标功能，支持批量分配目标给班级所有学员

Browse Source
This commit is contained in:
hmo
2026-04-24 09:24:24 +08:00
parent 8e0f6ec46d
commit 070533326a
4 changed files with 272 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/classes.html
+156
View File
@@ -36,6 +36,19 @@
</div>
</div>
<style>
.modal-footer-with-top {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
padding: 1rem;
border-top: 1px solid #dee2e6;
background: #f8f9fa;
position: sticky;
bottom: 0;
}
</style>
<!-- 新增/编辑班级弹窗 -->
<div class="modal fade" id="classModal" tabindex="-1">
<div class="modal-dialog">
@@ -114,6 +127,62 @@
</div>
</div>
</div>
<!-- 分配目标弹窗 -->
<div class="modal fade" id="classAssignGoalModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">分配目标 - <span id="classAssignGoalClassName"></span></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="form-label">选择目标 *</label>
<select class="form-select" id="class-assign-goal-select"></select>
</div>
<div class="mb-3">
<label class="form-label">评估日期</label>
<div class="row g-2">
<div class="col-auto">
<select class="form-select" id="class-assign-assessment-days">
<option value="">指定日期</option>
<option value="15">15天后</option>
<option value="30">30天后</option>
<option value="60">60天后</option>
<option value="90">90天后</option>
<option value="180">180天后</option>
</select>
</div>
<div class="col-auto">
<input type="date" class="form-control" id="class-assign-assessment-date">
</div>
</div>
</div>
<div class="mb-3">
<a class="text-decoration-none" data-bs-toggle="collapse" href="#classAssignMoreSettings" role="button">
更多设置 ▼
</a>
<div class="collapse" id="classAssignMoreSettings">
<div class="card card-body mt-2">
<div class="mb-3">
<label class="form-label">开始日期</label>
<input type="date" class="form-control" id="class-assign-start-date">
<small class="text-muted">默认立即开始</small>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer-with-top">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="confirm-class-assign-goal">分配</button>
</div>
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
@@ -165,6 +234,7 @@ function loadClasses() {
<td><a href="#" onclick="viewClassStudents(${c.id})">${c.student_count}</a></td>
<td>${c.created_at}</td>
<td>
<button type="button" class="btn btn-sm btn-success me-1" onclick="openAssignGoalModal(${c.id}, '${c.name}')">分配目标</button>
${isAdmin ? `<button type="button" class="btn btn-sm btn-primary me-1" onclick="editClass(${c.id}, '${c.name}', '${c.description || ''}', ${c.active})">编辑</button>
<button type="button" class="btn btn-sm btn-danger" onclick="deleteClass(${c.id})">删除</button>` : ''}
</td>
@@ -281,5 +351,91 @@ document.getElementById('addClassBtn').onclick = () => {
document.getElementById('classModalTitle').textContent = '新增班级';
new bootstrap.Modal(document.getElementById('classModal')).show();
};
// ========== 分配目标功能 ==========
let classAssignGoalModal;
document.getElementById('classAssignGoalModal').addEventListener('show.bs.modal', function () {
loadClassGoalOptions();
});
function openAssignGoalModal(classId, className) {
currentClassId = classId;
document.getElementById('classAssignGoalClassName').textContent = className;
// 重置表单
document.getElementById('class-assign-assessment-days').value = '';
document.getElementById('class-assign-assessment-date').value = '';
document.getElementById('class-assign-start-date').value = '';
classAssignGoalModal = new bootstrap.Modal(document.getElementById('classAssignGoalModal'));
classAssignGoalModal.show();
}
async function loadClassGoalOptions() {
const res = await fetch('/api/goals');
const goals = await res.json();
const select = document.getElementById('class-assign-goal-select');
select.innerHTML = goals.map(g => `<option value="${g.id}">${escapeHtml(g.name)} [${g.level || '入门'} - ${g.category || '综合'}]</option>`).join('');
// 设置默认开始日期为今天
document.getElementById('class-assign-start-date').value = new Date().toISOString().split('T')[0];
}
// 评估日期联动
document.getElementById('class-assign-assessment-days').addEventListener('change', function() {
const days = parseInt(this.value);
if (days) {
const d = new Date();
d.setDate(d.getDate() + days);
document.getElementById('class-assign-assessment-date').value = d.toISOString().split('T')[0];
}
});
document.getElementById('class-assign-assessment-date').addEventListener('change', function() {
if (this.value) {
document.getElementById('class-assign-assessment-days').value = '';
}
});
// 确认分配目标
document.getElementById('confirm-class-assign-goal').addEventListener('click', async () => {
const goalId = document.getElementById('class-assign-goal-select').value;
const assessmentDays = document.getElementById('class-assign-assessment-days').value;
const assessmentDate = document.getElementById('class-assign-assessment-date').value;
const startDate = document.getElementById('class-assign-start-date').value;
if (!goalId) { alert('请选择目标'); return; }
if (!assessmentDays && !assessmentDate) { alert('请选择评估方式'); return; }
// 弹出确认框
if (!confirm('将给班级所有学员分配此目标，确定吗？')) return;
const res = await fetch(`/api/classes/${currentClassId}/goals`, {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
goal_id: parseInt(goalId),
assessment_days: assessmentDays || null,
assessment_date: assessmentDate || null,
start_date: startDate || null,
start_now: !startDate
})
});
if (res.ok) {
const data = await res.json();
classAssignGoalModal.hide();
alert(data.message + (data.skipped_count ? `（${data.skipped_count}个学员已分配此目标，跳过）` : ''));
} else {
const err = await res.json();
alert(err.error || '分配失败');
}
});
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
</script>
{% endblock %}