新增“数据编辑”
This commit is contained in:
256
templates/edit.html
Normal file
256
templates/edit.html
Normal file
@@ -0,0 +1,256 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}编辑数据 - 紫金·稷下薪火·云枢智海师生成果共创系统{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<style>
|
||||
/* 基础样式重置 */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
/* 容器样式 */
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* 标题样式 */
|
||||
h2 {
|
||||
color: #2c3e50;
|
||||
border-bottom: 2px solid #3498db;
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
.form-container {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 2px solid #e1e8ed;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: #3498db;
|
||||
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.form-hint {
|
||||
font-size: 12px;
|
||||
color: #7f8c8d;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(to right, #3498db, #2980b9);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: linear-gradient(to right, #95a5a6, #7f8c8d);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(149, 165, 166, 0.3);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: linear-gradient(to right, #e74c3c, #c0392b);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3);
|
||||
}
|
||||
|
||||
/* 图片预览样式 */
|
||||
.image-preview {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image-preview img {
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* 错误提示样式 */
|
||||
.error-message {
|
||||
color: #e74c3c;
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* 必填字段标记 */
|
||||
.required {
|
||||
color: #e74c3c;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<h2>编辑成果信息</h2>
|
||||
|
||||
<div class="form-container">
|
||||
<form action="{{ url_for('update_entry', doc_id=document._id) }}" method="POST" id="editForm">
|
||||
{% if document.data %}
|
||||
{# 从原始数据中解析字段 #}
|
||||
{% set data_string = document.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="form-group">
|
||||
<label for="field_{{ loop.index }}">{{ field_key }} <span class="required">*</span></label>
|
||||
<input type="text" id="field_{{ loop.index }}" name="field_{{ loop.index }}" value="{{ field_value }}" required>
|
||||
<input type="hidden" name="key_{{ loop.index }}" value="{{ field_key }}">
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{# 如果没有data字段，显示提示信息 #}
|
||||
<div class="form-group">
|
||||
<p style="color: #e74c3c; text-align: center;">该记录没有可编辑的数据</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if document.image %}
|
||||
<div class="form-group">
|
||||
<label>原图片预览</label>
|
||||
<div class="image-preview">
|
||||
<img src="{{ url_for('serve_image', filename=document.image) }}" alt="原图片" onerror="this.style.display='none'">
|
||||
</div>
|
||||
<div class="form-hint">当前关联的图片，编辑时无法修改图片</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="button-group">
|
||||
<button type="submit" class="btn btn-primary">保存修改</button>
|
||||
<a href="{{ url_for('show_all') }}" class="btn btn-secondary">取消返回</a>
|
||||
<button type="button" class="btn btn-danger" onclick="confirmDelete()">删除记录</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 表单验证
|
||||
document.getElementById('editForm').addEventListener('submit', function(e) {
|
||||
// 检查所有字段是否都有值
|
||||
const inputs = document.querySelectorAll('input[type="text"]');
|
||||
let hasEmptyField = false;
|
||||
|
||||
inputs.forEach(input => {
|
||||
if (!input.value.trim()) {
|
||||
hasEmptyField = true;
|
||||
input.style.borderColor = '#e74c3c';
|
||||
} else {
|
||||
input.style.borderColor = '#e1e8ed';
|
||||
}
|
||||
});
|
||||
|
||||
if (hasEmptyField) {
|
||||
e.preventDefault();
|
||||
alert('所有字段都必须填写！');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
// 删除确认
|
||||
function confirmDelete() {
|
||||
if (confirm('确定要删除这条记录吗？此操作不可撤销！')) {
|
||||
// 创建删除表单并提交
|
||||
const form = document.createElement('form');
|
||||
form.method = 'POST';
|
||||
form.action = '{{ url_for("delete_entry", doc_id=document._id) }}';
|
||||
document.body.appendChild(form);
|
||||
form.submit();
|
||||
}
|
||||
}
|
||||
|
||||
// 自动格式化逗号分隔的值
|
||||
document.querySelectorAll('input[type="text"]').forEach(input => {
|
||||
input.addEventListener('blur', function(e) {
|
||||
const value = e.target.value.trim();
|
||||
if (value && value.includes(',')) {
|
||||
// 格式化逗号分隔的值
|
||||
const formatted = value
|
||||
.split(',')
|
||||
.map(item => item.trim())
|
||||
.filter(item => item)
|
||||
.join(', ');
|
||||
e.target.value = formatted;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user