fix(v4.1.1): 待办事务功能优化

- 修复完成状态切换问题(可来回切换完成/未完成)
- 添加全部/未完成/已完成过滤按钮
- 翻页时保持弹窗滚动位置
This commit is contained in:
2026-04-22 15:54:10 +08:00
parent 0335937312
commit 8e63db4424

View File

@@ -2846,11 +2846,19 @@ async function deleteItem(id) {
let currentDetailId = null;
// 显示详情
async function showDetail(id, todoPage = 1) {
async function showDetail(id, todoPage = 1, todoFilter = 'all') {
currentDetailId = id;
currentTodoPage = todoPage;
currentTodoFilter = todoFilter;
// 增加阅读数
await fetch(`${API_BASE}/items/${id}/view`, { method: 'POST' });
// 记录当前弹窗滚动位置
const detailContent = document.getElementById('detailContent');
const scrollTop = detailContent.scrollTop;
// 增加阅读数(首次加载时才增加)
if (todoPage === 1 && todoFilter === 'all') {
await fetch(`${API_BASE}/items/${id}/view`, { method: 'POST' });
}
const res = await fetch(`${API_BASE}/items/${id}`);
const data = await res.json();
@@ -2915,21 +2923,46 @@ async function showDetail(id, todoPage = 1) {
// 文本类型显示待办事务
if (item.type === 'text') {
const todoOffset = (todoPage - 1) * 10;
const todoRes = await fetch(`${API_BASE}/items/${id}/todo-events?limit=10&offset=${todoOffset}`);
const todoData = await todoRes.json();
// 根据过滤状态获取数据
let todoRes = await fetch(`${API_BASE}/items/${id}/todo-events?limit=10&offset=${todoOffset}`);
let todoData = await todoRes.json();
// 客户端过滤因为API返回全部数据
let filteredEvents = todoData.data;
let totalTodo = todoData.total;
if (todoFilter === 'completed') {
filteredEvents = filteredEvents.filter(e => e.is_completed);
// 需要重新计算总数
const allRes = await fetch(`${API_BASE}/items/${id}/todo-events?limit=1000&offset=0`);
const allData = await allRes.json();
totalTodo = allData.data.filter(e => e.is_completed).length;
} else if (todoFilter === 'pending') {
filteredEvents = filteredEvents.filter(e => !e.is_completed);
const allRes = await fetch(`${API_BASE}/items/${id}/todo-events?limit=1000&offset=0`);
const allData = await allRes.json();
totalTodo = allData.data.filter(e => !e.is_completed).length;
}
html += `<hr><div class="mb-3">
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex justify-content-between align-items-center mb-2">
<strong><i class="bi bi-list-check"></i> 待办事务</strong>
<button class="btn btn-sm btn-outline-primary" onclick="showAddTodoEventModal(${item.id})">
<i class="bi bi-plus"></i> 添加事务
</button>
</div>
<!-- 过滤按钮 -->
<div class="btn-group btn-group-sm mb-2" role="group">
<button class="btn ${todoFilter === 'all' ? 'btn-primary' : 'btn-outline-secondary'}" onclick="showDetail(${id}, 1, 'all')">全部</button>
<button class="btn ${todoFilter === 'pending' ? 'btn-warning' : 'btn-outline-warning'}" onclick="showDetail(${id}, 1, 'pending')">未完成</button>
<button class="btn ${todoFilter === 'completed' ? 'btn-success' : 'btn-outline-success'}" onclick="showDetail(${id}, 1, 'completed')">已完成</button>
</div>
</div>`;
if (todoData.success && todoData.data.length > 0) {
if (filteredEvents.length > 0) {
html += `<div class="border rounded p-2 bg-light" id="todoEventsList">`;
todoData.data.forEach(event => {
filteredEvents.forEach(event => {
const completedClass = event.is_completed ? 'text-muted' : '';
const checkIcon = event.is_completed ? '' : '';
const remainingText = event.remaining_days > 0 ? `${event.remaining_days}天` : '已过期';
@@ -2938,7 +2971,7 @@ async function showDetail(id, todoPage = 1) {
html += `<div class="d-flex justify-content-between align-items-start py-2 border-bottom todo-event-item ${completedClass}">
<div class="flex-grow-1">
<div class="d-flex align-items-center gap-2">
<span onclick="toggleTodoEventComplete(${event.id}, ${item.id})" style="cursor:pointer;" title="点击切换完成状态">${checkIcon}</span>
<span onclick="toggleTodoEventComplete(${event.id}, ${item.id}, ${event.is_completed})" style="cursor:pointer;" title="点击切换完成状态">${checkIcon}</span>
<span class="${event.is_completed ? 'text-decoration-line-through' : ''}">${escapeHtml(event.content)}</span>
<small class="${remainingClass}">(${remainingText})</small>
</div>
@@ -2959,26 +2992,25 @@ async function showDetail(id, todoPage = 1) {
html += `</div>`;
// 分页
const totalTodo = todoData.total;
const totalPagesTodo = Math.ceil(totalTodo / 10);
if (totalPagesTodo > 1) {
html += `<div class="d-flex justify-content-center mt-2">
<nav><ul class="pagination pagination-sm">`;
for (let p = 1; p <= Math.min(totalPagesTodo, 5); p++) {
html += `<li class="page-item ${p === todoPage ? 'active' : ''}">
<a class="page-link" href="#" onclick="showDetail(${id}, ${p}); return false;">${p}</a>
<a class="page-link" href="#" onclick="showDetail(${id}, ${p}, '${todoFilter}'); return false;">${p}</a>
</li>`;
}
if (totalPagesTodo > 5) {
html += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
html += `<li class="page-item"><a class="page-link" href="#" onclick="showDetail(${id}, ${totalPagesTodo}); return false;">${totalPagesTodo}</a></li>`;
html += `<li class="page-item"><a class="page-link" href="#" onclick="showDetail(${id}, ${totalPagesTodo}, '${todoFilter}'); return false;">${totalPagesTodo}</a></li>`;
}
html += `</ul></nav>
<small class="text-muted ms-2">共 ${totalTodo} 条事务</small>
</div>`;
}
} else {
html += `<div class="text-center text-muted py-3">暂无待办事务</div>`;
html += `<div class="text-center text-muted py-3">${todoFilter === 'all' ? '暂无待办事务' : (todoFilter === 'completed' ? '暂无已完成事务' : '暂无未完成事务')}</div>`;
}
}
@@ -3020,7 +3052,17 @@ async function showDetail(id, todoPage = 1) {
document.getElementById('detailContent').innerHTML = html;
new bootstrap.Modal(document.getElementById('detailModal')).show();
// 如果弹窗已经打开,保持滚动位置
const modal = bootstrap.Modal.getInstance(document.getElementById('detailModal'));
if (modal && modal._isShown) {
// 弹窗已打开,恢复滚动位置
setTimeout(() => {
document.getElementById('detailContent').scrollTop = scrollTop;
}, 10);
} else {
// 弹窗未打开,打开弹窗
new bootstrap.Modal(document.getElementById('detailModal')).show();
}
}
// ============ 待办事务功能 ============
@@ -3085,7 +3127,7 @@ async function saveTodoEvent() {
if (data.success) {
bootstrap.Modal.getInstance(document.getElementById('todoEventModal')).hide();
showDetail(itemId, 1); // 刷新详情,回到第一页
showDetail(itemId, currentTodoPage, currentTodoFilter); // 刷新详情,保持页面和过滤状态
} else {
alert('更新失败: ' + data.error);
}
@@ -3100,30 +3142,40 @@ async function saveTodoEvent() {
if (data.success) {
bootstrap.Modal.getInstance(document.getElementById('todoEventModal')).hide();
showDetail(itemId, 1); // 刷新详情,回到第一页
showDetail(itemId, 1, currentTodoFilter); // 创建新事务后回到第一页
} else {
alert('创建失败: ' + data.error);
}
}
}
// 切换待办事务完成状态
async function toggleTodoEventComplete(eventId, itemId) {
// 切换待办事务完成状态(可切换为完成或未完成)
async function toggleTodoEventComplete(eventId, itemId, currentCompleted) {
// 离线检查
if (!checkOnlineBeforeAction('切换完成状态')) return;
const res = await fetch(`${API_BASE}/todo-events/${eventId}/complete`, {
method: 'POST'
// 切换状态:已完成->未完成,未完成->已完成
const newCompleted = !currentCompleted;
const res = await fetch(`${API_BASE}/todo-events/${eventId}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ is_completed: newCompleted })
});
const data = await res.json();
if (data.success) {
showDetail(itemId, 1); // 刷新详情
// 保持当前页面和过滤状态
showDetail(itemId, currentTodoPage, currentTodoFilter);
} else {
alert('操作失败: ' + data.error);
}
}
// 当前待办事务的页面和过滤状态
let currentTodoPage = 1;
let currentTodoFilter = 'all'; // all, completed, pending
// 删除待办事务
async function deleteTodoEvent(eventId, itemId) {
// 离线检查
@@ -3137,7 +3189,7 @@ async function deleteTodoEvent(eventId, itemId) {
const data = await res.json();
if (data.success) {
showDetail(itemId, 1); // 刷新详情
showDetail(itemId, currentTodoPage, currentTodoFilter); // 刷新详情,保持页面和过滤状态
} else {
alert('删除失败: ' + data.error);
}