新增“数据编辑”
This commit is contained in:
@@ -27,50 +27,87 @@
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* 表格容器 - 顶部边距调整 */
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
margin-top: 15px; /* 减少顶部间距 */
|
||||
/* 卡片容器样式 */
|
||||
.data-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 卡片样式 */
|
||||
.data-card {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
padding: 20px;
|
||||
border: 1px solid #e0e0e0;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-family: 'Segoe UI', Arial, sans-serif;
|
||||
.data-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
/* 表头样式 */
|
||||
thead {
|
||||
background: linear-gradient(135deg, #3498db, #1a5276);
|
||||
color: white;
|
||||
/* 卡片头部样式 */
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 16px 12px;
|
||||
text-align: left;
|
||||
.card-header h3 {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* 卡片内容样式 */
|
||||
.card-content {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.field-item {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.field-key {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
min-width: 120px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* 表格行样式 */
|
||||
tbody tr {
|
||||
border-bottom: 1px solid #eef1f5;
|
||||
transition: background-color 0.3s;
|
||||
.field-value {
|
||||
color: #666;
|
||||
flex: 1;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: #f8fafc;
|
||||
/* 卡片图片样式 */
|
||||
.card-image {
|
||||
text-align: center;
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background-color: #e3f2fd;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 14px 12px;
|
||||
color: #4a5568;
|
||||
.card-image img {
|
||||
max-width: 100%;
|
||||
max-height: 200px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* 操作按钮样式 */
|
||||
@@ -128,6 +165,33 @@
|
||||
padding: 40px 0;
|
||||
color: #a0aec0;
|
||||
font-style: italic;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.data-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.field-item {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.field-key {
|
||||
min-width: auto;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -135,44 +199,155 @@
|
||||
<h2>所有已录入的奖项信息</h2>
|
||||
<p>在此页面可以查看所有已录入的成果信息，并进行编辑和删除操作</p>
|
||||
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>比赛/论文名称</th>
|
||||
<th>项目名称</th>
|
||||
<th>学生</th>
|
||||
<th>指导老师</th>
|
||||
<th style="text-align: center;">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% if data %}
|
||||
{% for item in data %}
|
||||
<tr>
|
||||
<td>{{ item.id or '无' }}</td>
|
||||
<td>{{ item.name or '无' }}</td>
|
||||
<td>{% if item.students is string %}{{ item.students or '无' }}{% else %}{{ item.students|join(', ') if item.students else '无' }}{% endif %}</td>
|
||||
<td>{% if item.teacher is string %}{{ item.teacher or '无' }}{% else %}{{ item.teacher|join(', ') if item.teacher else '无' }}{% endif %}</td>
|
||||
<td style="text-align: center;">
|
||||
<div style="display: flex; justify-content: center; gap: 8px;">
|
||||
<a href="{{ url_for('edit_entry', doc_id=item._id) }}" class="action-button edit-btn">编辑</a>
|
||||
<form action="{{ url_for('delete_entry', doc_id=item._id) }}" method="POST" onsubmit="return confirm('确定要删除这条记录吗？')" style="margin: 0;">
|
||||
<button type="submit" class="action-button delete-btn">删除</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="5" class="no-data">暂无数据</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- 批量操作区域 -->
|
||||
<div class="batch-operations" style="margin-bottom: 20px; padding: 15px; background-color: #f8f9fa; border-radius: 8px; border: 1px solid #e0e0e0;">
|
||||
<div style="display: flex; align-items: center; gap: 15px;">
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<input type="checkbox" id="select-all" onchange="toggleSelectAll(this.checked)">
|
||||
<label for="select-all" style="font-weight: 600; color: #333;">全选</label>
|
||||
</div>
|
||||
<button type="button" class="batch-delete-btn" onclick="batchDelete()" style="padding: 8px 16px; background-color: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 500; transition: background-color 0.3s;">
|
||||
批量删除选中项
|
||||
</button>
|
||||
<span id="selected-count" style="color: #666; font-size: 14px;">已选择 0 项</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="data-cards">
|
||||
{% if data %}
|
||||
{% for item in data %}
|
||||
<div class="data-card">
|
||||
<div class="card-header">
|
||||
<div style="display: flex; align-items: center; gap: 15px;">
|
||||
<input type="checkbox" class="doc-checkbox" value="{{ item._id }}" onchange="updateSelectedCount()">
|
||||
<h3>记录 {{ loop.index }}</h3>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<a href="{{ url_for('edit_entry', doc_id=item._id) }}" class="action-button edit-btn">编辑</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
{% if item.data %}
|
||||
{# 从原始数据中解析字段 #}
|
||||
{% set data_string = item.data %}
|
||||
{% set pairs = data_string.split('|###|') %}
|
||||
|
||||
{% for pair in pairs %}
|
||||
{% if ':' in pair %}
|
||||
{% set key_value = pair.split(':', 1) %}
|
||||
{% set field_key = key_value[0].strip() %}
|
||||
{% set field_value = key_value[1].strip() %}
|
||||
|
||||
{# 处理列表格式 [item1|##|item2] #}
|
||||
{% if field_value.startswith('[') and field_value.endswith(']') %}
|
||||
{% set list_content = field_value[1:-1] %}
|
||||
{% set field_value = list_content.split('|##|')|join(', ') %}
|
||||
{% endif %}
|
||||
|
||||
<div class="field-item">
|
||||
<span class="field-key">{{ field_key }}：</span>
|
||||
<span class="field-value">{{ field_value or '无' }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{# 如果没有data字段，显示解析后的字段 #}
|
||||
{% for key, value in item.items() %}
|
||||
{% if key not in ['_id', 'image'] %}
|
||||
<div class="field-item">
|
||||
<span class="field-key">{{ key }}：</span>
|
||||
<span class="field-value">
|
||||
{% if value is sequence and value is not string %}
|
||||
{{ value|join(', ') if value else '无' }}
|
||||
{% else %}
|
||||
{{ value or '无' }}
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="no-data">暂无数据</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<a href="{{ url_for('index') }}" class="back-btn">返回首页</a>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 全选/取消全选功能
|
||||
function toggleSelectAll(checked) {
|
||||
const checkboxes = document.querySelectorAll('.doc-checkbox');
|
||||
checkboxes.forEach(checkbox => {
|
||||
checkbox.checked = checked;
|
||||
});
|
||||
updateSelectedCount();
|
||||
}
|
||||
|
||||
// 更新选择计数
|
||||
function updateSelectedCount() {
|
||||
const checkboxes = document.querySelectorAll('.doc-checkbox');
|
||||
const selectedCount = Array.from(checkboxes).filter(cb => cb.checked).length;
|
||||
document.getElementById('selected-count').textContent = `已选择 ${selectedCount} 项`;
|
||||
|
||||
// 更新全选复选框状态
|
||||
const selectAllCheckbox = document.getElementById('select-all');
|
||||
if (selectedCount === 0) {
|
||||
selectAllCheckbox.checked = false;
|
||||
selectAllCheckbox.indeterminate = false;
|
||||
} else if (selectedCount === checkboxes.length) {
|
||||
selectAllCheckbox.checked = true;
|
||||
selectAllCheckbox.indeterminate = false;
|
||||
} else {
|
||||
selectAllCheckbox.checked = false;
|
||||
selectAllCheckbox.indeterminate = true;
|
||||
}
|
||||
}
|
||||
|
||||
// 批量删除功能
|
||||
function batchDelete() {
|
||||
const checkboxes = document.querySelectorAll('.doc-checkbox:checked');
|
||||
if (checkboxes.length === 0) {
|
||||
alert('请至少选择一条记录进行删除');
|
||||
return;
|
||||
}
|
||||
|
||||
const confirmMessage = `确定要删除选中的 ${checkboxes.length} 条记录吗？此操作不可撤销。`;
|
||||
if (!confirm(confirmMessage)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 收集选中的文档ID
|
||||
const docIds = Array.from(checkboxes).map(cb => cb.value);
|
||||
|
||||
// 创建表单并提交
|
||||
const form = document.createElement('form');
|
||||
form.method = 'POST';
|
||||
form.action = '/batch_delete';
|
||||
|
||||
docIds.forEach(docId => {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'hidden';
|
||||
input.name = 'doc_ids';
|
||||
input.value = docId;
|
||||
form.appendChild(input);
|
||||
});
|
||||
|
||||
document.body.appendChild(form);
|
||||
form.submit();
|
||||
}
|
||||
|
||||
// 页面加载时初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
updateSelectedCount();
|
||||
});
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user