Viajero/Achievement_Inputing
2
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases 2 Wiki Activity

新增和完成了录入修改，查询

Browse Source
This commit is contained in:
spdis
2025-10-04 11:51:08 +08:00
parent 657365f9de
commit 30645e46ff
3 changed files with 683 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

461
templates/index.html
View File

@@ -20,72 +20,255 @@
</button>
</form>
<div id="result" class="mt-4"></div>
<!-- 编辑确认区域 -->
<div id="edit-section" class="mt-4" style="display: none;">
<div class="card">
<h3 style="color: var(--primary); border-bottom: 2px solid var(--primary); padding-bottom: 10px;">
<i class="fas fa-edit"></i> 识别结果 - 请确认并编辑数据
</h3>
<p class="mb-4">系统已识别出以下信息，您可以修改字段名和对应的数据值，确认无误后点击录入按钮</p>
<form id="edit-form">
<div id="edit-fields"></div>
<div class="mt-4 text-center">
<button type="button" id="confirm-btn" class="btn btn-success btn-lg">
<i class="fas fa-check"></i> 确认录入
</button>
<button type="button" id="cancel-btn" class="btn btn-secondary btn-lg ml-3">
<i class="fas fa-times"></i> 取消
</button>
</div>
</form>
</div>
</div>
</div>
<script>
let currentData = null;
let currentImage = null;
document.getElementById("upload-form").addEventListener("submit", function (e) {
e.preventDefault();
let formData = new FormData(this);
const resultDiv = document.getElementById("result");
const editSection = document.getElementById("edit-section");
// 显示上传进度动画
resultDiv.innerHTML = `
<div class="progress-container">
<div class="progress-bar"></div>
<p class="progress-text">正在处理图片，请稍候...</p>
editSection.innerHTML = `
<div class="card">
<div class="progress-container">
<div class="progress-bar"></div>
<p class="progress-text">正在处理图片，请稍候...</p>
</div>
</div>
`;
editSection.style.display = "block";
fetch("/upload", { method: "POST", body: formData })
.then(res => res.json())
.then(data => {
if(data.error) {
resultDiv.innerHTML = `
<div class="alert alert-danger">
<i class="fas fa-exclamation-circle"></i> 错误: ${data.error}
editSection.innerHTML = `
<div class="card">
<div class="alert alert-danger">
<i class="fas fa-exclamation-circle"></i> 错误: ${data.error}
</div>
</div>
`;
} else {
const resultHtml = `
<div class="result-card">
<div class="result-header">
<h3><i class="fas fa-check-circle"></i> 识别成功</h3>
<p class="timestamp">${new Date().toLocaleString()}</p>
</div>
<div class="result-content">
${Object.entries(data.data).map(([key, value]) => `
<div class="result-item">
<span class="result-label">${key.replace(/_/g, ' ')}</span>
<span class="result-value">${value}</span>
</div>
`).join('')}
</div>
<div class="result-footer">
<p class="success-message">${data.message}</p>
<button class="btn btn-outline-primary copy-btn" data-clipboard-text="${JSON.stringify(data.data)}">
<i class="fas fa-copy"></i> 复制结果
</button>
</div>
</div>
`;
resultDiv.innerHTML = resultHtml;
// 添加复制按钮功能
document.querySelector('.copy-btn').addEventListener('click', function() {
navigator.clipboard.writeText(this.getAttribute('data-clipboard-text'));
alert('结果已复制到剪贴板！');
});
// 存储当前数据
currentData = data.data;
currentImage = data.image;
// 生成编辑表单
generateEditForm(data.data);
}
})
.catch(error => {
resultDiv.innerHTML = `
<div class="alert alert-danger">
<i class="fas fa-exclamation-circle"></i> 上传失败: ${error}
editSection.innerHTML = `
<div class="card">
<div class="alert alert-danger">
<i class="fas fa-exclamation-circle"></i> 上传失败: ${error}
</div>
</div>
`;
});
});
function generateEditForm(data) {
const editSection = document.getElementById("edit-section");
let fieldsHtml = "";
Object.entries(data).forEach(([key, value], index) => {
fieldsHtml += `
<div class="field-row mb-3">
<div class="row">
<div class="col-md-4">
<label class="form-label">字段名</label>
<input type="text" class="form-control field-name" value="${key}" data-original-key="${key}">
</div>
<div class="col-md-6">
<label class="form-label">数据值</label>
<input type="text" class="form-control field-value" value="${value}">
</div>
<div class="col-md-2 d-flex align-items-end">
<button type="button" class="btn btn-danger btn-sm delete-field" title="删除此字段">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
</div>
`;
});
editSection.innerHTML = `
<div class="card">
<h3 style="color: var(--primary); border-bottom: 2px solid var(--primary); padding-bottom: 10px;">
<i class="fas fa-edit"></i> 识别结果 - 请确认并编辑数据
</h3>
<p class="mb-4">系统已识别出以下信息，您可以修改字段名和对应的数据值，确认无误后点击录入按钮</p>
<form id="edit-form">
<div id="edit-fields">
${fieldsHtml}
</div>
<div class="mb-3">
<button type="button" id="add-field-btn" class="btn btn-outline-primary">
<i class="fas fa-plus"></i> 添加字段
</button>
</div>
<div class="mt-4 text-center">
<button type="button" id="confirm-btn" class="btn btn-success btn-lg">
<i class="fas fa-check"></i> 确认录入
</button>
<button type="button" id="cancel-btn" class="btn btn-secondary btn-lg ml-3">
<i class="fas fa-times"></i> 取消
</button>
</div>
</form>
</div>
`;
// 绑定删除按钮事件
document.querySelectorAll('.delete-field').forEach(btn => {
btn.addEventListener('click', function() {
this.closest('.field-row').remove();
});
});
// 绑定添加字段按钮事件
document.getElementById('add-field-btn').addEventListener('click', function() {
const editFields = document.getElementById('edit-fields');
const newFieldHtml = `
<div class="field-row mb-3">
<div class="row">
<div class="col-md-4">
<label class="form-label">字段名</label>
<input type="text" class="form-control field-name" value="" data-original-key="">
</div>
<div class="col-md-6">
<label class="form-label">数据值</label>
<input type="text" class="form-control field-value" value="">
</div>
<div class="col-md-2 d-flex align-items-end">
<button type="button" class="btn btn-danger btn-sm delete-field" title="删除此字段">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
</div>
`;
editFields.insertAdjacentHTML('beforeend', newFieldHtml);
// 为新添加的删除按钮绑定事件
const newDeleteBtn = editFields.lastElementChild.querySelector('.delete-field');
newDeleteBtn.addEventListener('click', function() {
this.closest('.field-row').remove();
});
});
// 绑定确认和取消按钮事件
bindConfirmCancelEvents();
}
function bindConfirmCancelEvents() {
// 确认录入按钮事件
document.getElementById("confirm-btn").addEventListener("click", function() {
const fieldRows = document.querySelectorAll('.field-row');
const editedData = {};
// 收集编辑后的数据
fieldRows.forEach(row => {
const fieldName = row.querySelector('.field-name').value.trim();
const fieldValue = row.querySelector('.field-value').value.trim();
if (fieldName && fieldValue) {
editedData[fieldName] = fieldValue;
}
});
if (Object.keys(editedData).length === 0) {
alert('请至少保留一个有效的字段！');
return;
}
// 发送确认请求
fetch("/confirm", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
data: editedData,
image: currentImage
})
})
.then(res => res.json())
.then(data => {
const editSection = document.getElementById("edit-section");
if(data.error) {
editSection.innerHTML = `
<div class="card">
<div class="alert alert-danger">
<i class="fas fa-exclamation-circle"></i> 录入失败: ${data.error}
</div>
</div>
`;
} else {
editSection.innerHTML = `
<div class="card">
<div class="alert alert-success">
<i class="fas fa-check-circle"></i> ${data.message}
</div>
</div>
`;
// 重置表单
document.getElementById("upload-form").reset();
// 3秒后隐藏成功消息
setTimeout(() => {
editSection.style.display = "none";
}, 3000);
}
})
.catch(error => {
const editSection = document.getElementById("edit-section");
editSection.innerHTML = `
<div class="card">
<div class="alert alert-danger">
<i class="fas fa-exclamation-circle"></i> 录入失败: ${error}
</div>
</div>
`;
});
});
// 取消按钮事件
document.getElementById("cancel-btn").addEventListener("click", function() {
const editSection = document.getElementById("edit-section");
editSection.style.display = "none";
currentData = null;
currentImage = null;
});
}
</script>
<style>
@@ -222,6 +405,12 @@
margin-bottom: 15px;
}
.info-message {
color: var(--primary);
font-weight: 500;
margin-bottom: 15px;
}
.btn-outline-primary {
border: 1px solid var(--primary);
color: var(--primary);
@@ -234,5 +423,195 @@
background-color: var(--primary);
color: white;
}
.btn-success {
background: linear-gradient(135deg, #28a745, #20c997);
border: none;
border-radius: 30px;
padding: 12px 24px;
font-weight: 500;
transition: var(--transition);
box-shadow: 0 4px 8px rgba(40, 167, 69, 0.2);
color: white;
}
.btn-success:hover {
background: linear-gradient(135deg, #20c997, #28a745);
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(40, 167, 69, 0.3);
}
.btn-secondary {
background: linear-gradient(135deg, #6c757d, #495057);
border: none;
border-radius: 30px;
padding: 12px 24px;
font-weight: 500;
transition: var(--transition);
box-shadow: 0 4px 8px rgba(108, 117, 125, 0.2);
color: white;
}
.btn-secondary:hover {
background: linear-gradient(135deg, #495057, #6c757d);
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(108, 117, 125, 0.3);
}
.btn-danger {
background-color: #dc3545;
border-color: #dc3545;
color: white;
}
.btn-danger:hover {
background-color: #c82333;
border-color: #bd2130;
}
.btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
border-radius: 0.2rem;
}
.ml-3 {
margin-left: 1rem;
}
.btn-outline-primary {
color: var(--primary);
border-color: var(--primary);
background-color: transparent;
padding: 8px 16px;
border-radius: 4px;
border: 1px solid var(--primary);
transition: all 0.3s ease;
}
.btn-outline-primary:hover {
background-color: var(--primary);
border-color: var(--primary);
color: white;
}
.alert-danger {
color: #721c24;
background-color: #f8d7da;
border-color: #f5c6cb;
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
}
.alert-success {
background-color: #d4edda;
color: #155724;
border-left: 4px solid #28a745;
}
#edit-section .card {
border-left: 4px solid var(--primary);
}
.form-label {
font-weight: 500;
color: #495057;
margin-bottom: 8px;
}
.field-row {
background-color: white;
padding: 15px;
border-radius: 5px;
border: 1px solid #e0e0e0;
margin-bottom: 10px;
}
.field-row:hover {
border-color: var(--primary);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-md-4, .col-md-6, .col-md-2 {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.col-md-2 {
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-md-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-md-6 {
flex: 0 0 50%;
max-width: 50%;
}
.d-flex {
display: flex;
}
.align-items-end {
align-items: flex-end;
}
.text-center {
text-align: center;
}
.mb-3 {
margin-bottom: 1rem;
}
.mb-4 {
margin-bottom: 1.5rem;
}
.mt-4 {
margin-top: 1.5rem;
}
.btn-lg {
padding: 0.5rem 1rem;
font-size: 1.25rem;
border-radius: 0.3rem;
}
@media (max-width: 768px) {
.col-md-2, .col-md-4, .col-md-6 {
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 10px;
}
.field-row .row {
flex-direction: column;
}
.btn-lg {
width: 100%;
margin-bottom: 10px;
}
.ml-3 {
margin-left: 0;
}
}
</style>
{% endblock %}