353 lines
11 KiB
HTML
353 lines
11 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}数据操作 - 紫金·稷下薪火·云枢智海师生成果共创系统{% endblock %}
|
||
|
||
{% block content %}
|
||
<style>
|
||
/* 基础样式重置 */
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
/* 容器样式 - 调整为靠左靠上 */
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0; /* 移除自动居中 */
|
||
padding: 20px 0 0 20px; /* 顶部和左侧留白 */
|
||
}
|
||
|
||
/* 标题样式 - 减少底部边距 */
|
||
h2 {
|
||
color: #2c3e50;
|
||
border-bottom: 2px solid #3498db;
|
||
padding-bottom: 8px;
|
||
margin-bottom: 15px; /* 减少间距 */
|
||
}
|
||
|
||
/* 描述文字样式 */
|
||
p {
|
||
margin-bottom: 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 2px 8px rgba(0,0,0,0.1);
|
||
padding: 20px;
|
||
border: 1px solid #e0e0e0;
|
||
transition: transform 0.3s, box-shadow 0.3s;
|
||
}
|
||
|
||
.data-card:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
/* 卡片头部样式 */
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
padding-bottom: 15px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.field-value {
|
||
color: #666;
|
||
flex: 1;
|
||
word-break: break-word;
|
||
}
|
||
|
||
/* 卡片图片样式 */
|
||
.card-image {
|
||
text-align: center;
|
||
margin-top: 15px;
|
||
padding-top: 15px;
|
||
border-top: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.card-image img {
|
||
max-width: 100%;
|
||
max-height: 200px;
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
/* 操作按钮样式 */
|
||
.action-button {
|
||
padding: 6px 16px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-weight: 500;
|
||
transition: all 0.3s;
|
||
margin: 0 2px;
|
||
}
|
||
|
||
.edit-btn {
|
||
background: linear-gradient(to right, #4CAF50, #45a049);
|
||
color: white;
|
||
}
|
||
|
||
.edit-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
|
||
}
|
||
|
||
.delete-btn {
|
||
background: linear-gradient(to right, #ff416c, #ff4b2b);
|
||
color: white;
|
||
}
|
||
|
||
.delete-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 8px rgba(255, 75, 43, 0.3);
|
||
}
|
||
|
||
/* 返回按钮样式 */
|
||
.back-btn {
|
||
display: inline-block;
|
||
padding: 10px 20px;
|
||
background: linear-gradient(to right, #0066cc, #003399);
|
||
color: white;
|
||
text-decoration: none;
|
||
border-radius: 6px;
|
||
margin-top: 15px; /* 减少顶部间距 */
|
||
margin-left: 20px; /* 左侧对齐 */
|
||
transition: transform 0.3s;
|
||
}
|
||
|
||
.back-btn:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 5px 15px rgba(0, 102, 204, 0.4);
|
||
}
|
||
|
||
/* 空数据提示 */
|
||
.no-data {
|
||
text-align: center;
|
||
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>
|
||
|
||
<div class="container">
|
||
<h2>所有已录入的奖项信息</h2>
|
||
<p>在此页面可以查看所有已录入的成果信息，并进行编辑和删除操作</p>
|
||
|
||
<!-- 批量操作区域 -->
|
||
<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 %} |