diagnose-backend/ec_user/templates/all_info_form.html
2025-03-01 23:16:07 +08:00

313 lines
13 KiB
HTML
Raw Permalink 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.

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All Information Form</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0-alpha1/css/bootstrap.min.css">
<style>
body {
background-color: #f4f4f9;
font-family: Arial, sans-serif;
}
.container {
max-width: 900px;
}
.form-section {
background-color: #ffffff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
}
.form-section h4 {
font-size: 1.25rem;
color: #333;
margin-bottom: 20px;
}
.form-section .border {
border: 1px solid #e0e0e0;
border-radius: 8px;
}
.form-section .mb-3 {
margin-bottom: 15px;
}
.form-section .form-control {
border-radius: 6px;
}
.btn-submit {
background-color: #007bff;
color: #fff;
border: none;
padding: 12px 30px;
font-size: 16px;
border-radius: 6px;
width: 100%;
}
.btn-submit:hover {
background-color: #0056b3;
cursor: pointer;
}
.empty-message {
color: #888;
font-size: 1rem;
text-align: center;
}
.alert {
margin-top: 20px;
padding: 15px;
}
/* 优化 textarea 的样式 */
textarea {
height: 150px; /* 设置合适的高度 */
resize: vertical; /* 只允许垂直调整大小 */
padding: 10px; /* 设置内边距,增加可读性 */
}
/* 如果 textarea 太长,可以设置最大高度 */
textarea {
width: 100%; /* 设置最大高度,避免过高 */
}
</style>
</head>
<body>
{% extends 'admin/base_site.html' %}
<!-- {% block title %}
{{ admin_site.site_title }} - {{ user.username }}'s Profile
{% endblock %} -->
{% block branding %}
<h1 id="site-name"><a href="{% url 'admin:index' %}">诊断应用后台</a></h1>
{% endblock %}
{% block content %}
<div class="container mt-5">
<h2 class="text-center mb-4">填写信息 - {{ user.name }}</h2>
<form method="POST">
<!-- 联系方式 -->
<div class="form-section">
<h4>联系方式</h4>
{{ contact_info_form.as_p }}
</div>
<!-- 就读信息 -->
<div class="form-section">
<h4>就读信息</h4>
{{ school_info_form.as_p }}
</div>
<!-- 学习情况 -->
<div class="form-section">
<h4>学习情况</h4>
<!-- <div id="gradeForm" style="border: 1px solid #ccc; padding: 10px;">
<div class="form-group">
<label for="subject1">语文</label>
<input type="text" id="subject1" name="subject1">
</div>
<div class="form-group">
<label for="subject2">数学</label>
<input type="text" id="subject2" name="subject2">
</div>
<div class="form-group">
<label for="subject3">英语</label>
<input type="text" id="subject3" name="subject3">
</div>
<div class="form-group">
<label for="subject4">物理</label>
<input type="text" id="subject4" name="subject4">
</div>
<div class="form-group">
<label for="subject5">化学</label>
<input type="text" id="subject5" name="subject5">
</div>
<div class="form-group">
<label for="subject6">生物</label>
<input type="text" id="subject6" name="subject6">
</div>
<div class="form-group">
<label for="subject7">历史</label>
<input type="text" id="subject7" name="subject7">
</div>
<div class="form-group">
<label for="subject8">地理</label>
<input type="text" id="subject8" name="subject8">
</div>
<div class="form-group">
<label for="subject9">政治</label>
<input type="text" id="subject9" name="subject9">
</div>
<div style="margin-top: 10px;">
<div id="grades_parse_result">生成json字符串{}</div>
<button type="button" id="parseGrades" class="btn btn-primary">解析成绩</button>
<div>
<label for="json_encoded_grades">输入json字符串</label>
<input type="text" id="json_encoded_grades" name="json_encoded_grades">
</div>
<button type="button" id="showGrades" class="btn btn-primary">展示成绩</button>
</div>
<script>
document.getElementById('parseGrades').addEventListener('click', function(event) {
// 获取所有科目的成绩输入框
const subjects = ['subject1', 'subject2', 'subject3', 'subject4', 'subject5', 'subject6', 'subject7', 'subject8', 'subject9']
let grades = {}
let atLeastOneFilled = false
// 获取每个科目的成绩,检查是否有至少一项成绩填写
subjects.forEach(subject => {
const grade = document.getElementById(subject).value.trim()
if (grade) {
grades[subject] = grade
atLeastOneFilled = true
}
});
// 检查是否至少填写了一项成绩
if (!atLeastOneFilled) {
alert("至少填写一门成绩!")
return
}
// 将成绩数据转换为 JSON 格式
const jsonGrades = JSON.stringify(grades)
// 发送数据到后台(你可以修改为你自己的后台 API
console.log("成绩数据:", jsonGrades)
document.getElementById('grades_parse_result').innerHTML = `生成json字符串${jsonGrades}`
navigator.clipboard.writeText(jsonGrades).then(function() {
alert("文本已复制到剪贴板!");
}).catch(function(err) {
alert("复制失败: " + err);
});
});
document.getElementById('showGrades').addEventListener('click', function(event) {
// 获取 JSON 格式的成绩数据
const jsonGrades = document.getElementById('json_encoded_grades').value.trim()
if (!jsonGrades) {
alert("请输入 JSON 格式的成绩数据!")
return
}
// 解析 JSON 数据
const grades = JSON.parse(jsonGrades)
const subjects = ['subject1', 'subject2', 'subject3', 'subject4', 'subject5', 'subject6', 'subject7', 'subject8', 'subject9']
// 遍历每个科目,填充相应的成绩
subjects.forEach(subject => {
if (grades[subject]) {
document.getElementById(subject).value = grades[subject] // 填充成绩数据
}
})
})
</script>
</div> -->
{{ academic_info_form.as_p }}
</div>
<!-- 健康状况 -->
<div class="form-section">
<h4>健康状况</h4>
{{ health_info_form.as_p }}
</div>
<!-- 自我评价 -->
<div class="form-section">
<h4>自我评价</h4>
{{ self_evaluation_form.as_p }}
</div>
<button type="submit" class="btn-submit">提交</button>
</form>
<form method="POST" action="/ec_user/all_info_edit/{{ user.id }}/hobbies_interests/">
<!-- 兴趣爱好 -->
<div class="form-section">
<h4>兴趣爱好</h4>
{{ hobbies_interests_form.management_form }} <!-- 管理表单 -->
{% for form in hobbies_interests_form %}
<div class="border p-3 mb-3">
{{ form.as_p }}
</div>
{% empty %}
<p class="empty-message">没有兴趣爱好信息。</p>
{% endfor %}
<button type="submit" class="btn-submit">提交</button>
</div>
</form>
<form method="POST" action="/ec_user/all_info_edit/{{ user.id }}/social_practice/">
<!-- 社会实践 -->
<div class="form-section">
<h4>社会实践</h4>
{{ social_practice_form.management_form }}
{% for form in social_practice_form %}
<div class="border p-3 mb-3">
{{ form.as_p }}
</div>
{% empty %}
<p class="empty-message">没有社会实践记录。</p>
{% endfor %}
<button type="submit" class="btn-submit">提交</button>
</div>
</form>
<form method="POST" action="/ec_user/all_info_edit/{{ user.id }}/family_info/">
<!-- 家庭情况 -->
<div class="form-section">
<h4>家庭情况</h4>
{{ family_info_form.management_form }}
{% for form in family_info_form %}
<div class="border p-3 mb-3">
{{ form.as_p }}
</div>
{% empty %}
<p class="empty-message">没有家庭情况记录。</p>
{% endfor %}
<button type="submit" class="btn-submit">提交</button>
</div>
</form>
<form method="POST" action="/ec_user/all_info_edit/{{ user.id }}/awards_info/" >
<!-- 奖励情况 -->
<div class="form-section">
<h4>奖励情况</h4>
{{ awards_info_form.management_form }}
{% for form in awards_info_form %}
<div class="border p-3 mb-3">
{{ form.as_p }}
</div>
{% empty %}
<p class="empty-message">没有奖励情况记录。</p>
{% endfor %}
<button type="submit" class="btn-submit">提交</button>
</div>
</form>
<form method="POST" action="/ec_user/all_info_edit/{{ user.id }}/punishments_info/" >
<!-- 处罚情况 -->
<div class="form-section">
<h4>处罚情况</h4>
{{ punishments_info_form.management_form }}
{% for form in punishments_info_form %}
<div class="border p-3 mb-3">
{{ form.as_p }}
</div>
{% empty %}
<p class="empty-message">没有处罚情况记录。</p>
{% endfor %}
<button type="submit" class="btn-submit">提交</button>
</div>
</form>
</div>
{% endblock %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0-alpha1/js/bootstrap.bundle.min.js"></script>
</body>
</html>