feat(pdf-admin): 支持全选/多选批量硬删并去掉删除二次确认

- 工具栏新增「批量硬删」按钮,实时显示选中数,无选中时禁用
- 表头复选框全选/反选,行复选框多选,行级选中状态同步全选框
- 批量删除并发执行 DELETE,逐项淡出移除并汇总结果 toast
- 单条与批量删除均直接执行,移除 confirm() 二次确认
- 新增 .col-check 复选框列样式(窄宽居中)
This commit is contained in:
2026-07-28 09:39:39 +08:00
parent e7b4a3d5e3
commit 1c0f776571
3 changed files with 90 additions and 4 deletions

View File

@@ -10,6 +10,11 @@
.jobs-table td.col-act .btn { padding: 0.3em 0.8em; font-size: 0.85em; margin-left: 0.3em; } .jobs-table td.col-act .btn { padding: 0.3em 0.8em; font-size: 0.85em; margin-left: 0.3em; }
.jobs-table td.col-name { font-weight: 600; word-break: break-all; } .jobs-table td.col-name { font-weight: 600; word-break: break-all; }
/* 复选框列:窄宽居中,避免视觉噪声 */
.jobs-table th.col-check,
.jobs-table td.col-check { width: 2.5em; text-align: center; vertical-align: middle; }
.jobs-table td.col-check input { cursor: pointer; }
.bar { height: 8px; background: var(--surface-2); border-radius: 6px; overflow: hidden; border: 1px solid var(--border); } .bar { height: 8px; background: var(--surface-2); border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
.bar__fill { height: 100%; width: 0; background: var(--primary); border-radius: 6px; transition: width 0.2s; } .bar__fill { height: 100%; width: 0; background: var(--primary); border-radius: 6px; transition: width 0.2s; }
.bar--sm { display: inline-block; width: 90px; vertical-align: middle; height: 6px; } .bar--sm { display: inline-block; width: 90px; vertical-align: middle; height: 6px; }

View File

@@ -14,6 +14,7 @@
<div class="toolbar"> <div class="toolbar">
<button class="btn primary" id="refresh">刷新</button> <button class="btn primary" id="refresh">刷新</button>
<button class="btn danger" id="bulkDelete" disabled>批量硬删 <span id="selCount"></span></button>
<span class="muted" id="count"></span> <span class="muted" id="count"></span>
</div> </div>

View File

@@ -1,16 +1,25 @@
/* PDF 转换管理页:拉取 /api/admin/pdf/jobs、渲染表格含「是否已删除」列、硬删。 */ /* PDF 转换管理页:拉取 /api/admin/pdf/jobs、渲染表格含「是否已删除」列、硬删。
支持全选/多选批量硬删;删除直接执行,无二次确认。 */
(function () { (function () {
"use strict"; "use strict";
const { el, toast, fmtBytes, fmtTime, api } = window.ZK; const { el, toast, fmtBytes, fmtTime, api } = window.ZK;
const listEl = document.getElementById("list"); const listEl = document.getElementById("list");
const countEl = document.getElementById("count"); const countEl = document.getElementById("count");
const refreshBtn = document.getElementById("refresh"); const refreshBtn = document.getElementById("refresh");
const bulkDeleteBtn = document.getElementById("bulkDelete");
const selCountEl = document.getElementById("selCount");
// 选中集合:以 job id 为键,值为对应行元素,便于 O(1) 增删与遍历
const selected = new Map();
refreshBtn.addEventListener("click", load); refreshBtn.addEventListener("click", load);
bulkDeleteBtn.addEventListener("click", bulkRemove);
async function load() { async function load() {
listEl.innerHTML = '<div class="skel">加载中…</div>'; listEl.innerHTML = '<div class="skel">加载中…</div>';
countEl.textContent = ""; countEl.textContent = "";
selected.clear();
updateBulkBtn();
try { try {
const res = await api("/api/admin/pdf/jobs?limit=500&offset=0"); const res = await api("/api/admin/pdf/jobs?limit=500&offset=0");
if (!res.ok) throw new Error("HTTP " + res.status); if (!res.ok) throw new Error("HTTP " + res.status);
@@ -30,6 +39,9 @@
const table = el("table", { class: "jobs-table admin-table" }); const table = el("table", { class: "jobs-table admin-table" });
const thead = el("thead", null, const thead = el("thead", null,
el("tr", null, el("tr", null,
el("th", { class: "col-check" },
el("input", { type: "checkbox", id: "selectAll", onchange: onToggleAll })
),
el("th", { class: "col-name" }, "文件名"), el("th", { class: "col-name" }, "文件名"),
el("th", { class: "col-size" }, "大小"), el("th", { class: "col-size" }, "大小"),
el("th", { class: "col-status" }, "状态"), el("th", { class: "col-status" }, "状态"),
@@ -47,7 +59,9 @@
} }
function renderRow(j) { function renderRow(j) {
const checkbox = el("input", { type: "checkbox", value: j.id, onchange: () => onToggleRow(j, checkbox, row) });
const row = el("tr", { class: j.user_deleted ? "row-soft-deleted" : "" }, const row = el("tr", { class: j.user_deleted ? "row-soft-deleted" : "" },
el("td", { class: "col-check" }, checkbox),
el("td", { class: "col-name" }, j.source_filename), el("td", { class: "col-name" }, j.source_filename),
el("td", { class: "col-size mono" }, fmtBytes(j.source_size)), el("td", { class: "col-size mono" }, fmtBytes(j.source_size)),
el("td", { class: "col-status" }, statusCell(j)), el("td", { class: "col-status" }, statusCell(j)),
@@ -60,9 +74,39 @@
el("button", { class: "btn danger", onclick: () => remove(j, row) }, "硬删") el("button", { class: "btn danger", onclick: () => remove(j, row) }, "硬删")
) )
); );
// 行元素上缓存 job/checkbox 引用,供全选回调 O(1) 取用
row.__job = j;
row.__checkbox = checkbox;
return row; return row;
} }
function onToggleAll(e) {
const checked = e.target.checked;
selected.clear();
const rows = listEl.querySelectorAll("tbody tr");
rows.forEach((row) => {
if (row.__checkbox) row.__checkbox.checked = checked;
if (checked && row.__job) selected.set(row.__job.id, row);
});
updateBulkBtn();
}
function onToggleRow(j, box, row) {
if (box.checked) selected.set(j.id, row);
else selected.delete(j.id);
// 同步表头全选框状态
const allBoxes = listEl.querySelectorAll('tbody input[type="checkbox"]');
const selectAll = document.getElementById("selectAll");
if (selectAll) selectAll.checked = allBoxes.length > 0 && [...allBoxes].every((b) => b.checked);
updateBulkBtn();
}
function updateBulkBtn() {
const n = selected.size;
bulkDeleteBtn.disabled = n === 0;
selCountEl.textContent = n > 0 ? `(${n})` : "";
}
function statusCell(j) { function statusCell(j) {
if (j.status === "done") return el("span", { class: "tag ok" }, "完成"); if (j.status === "done") return el("span", { class: "tag ok" }, "完成");
if (j.status === "failed") if (j.status === "failed")
@@ -77,21 +121,57 @@
return el("span", { class: "muted" }, "否"); return el("span", { class: "muted" }, "否");
} }
// 单条硬删:直接执行,无二次确认
async function remove(j, row) { async function remove(j, row) {
if (!confirm(`确定硬删「${j.source_filename}」?\n将真正删除原始文件与产物 PDF磁盘 + 记录),不可恢复。`)) return;
try { try {
const res = await api(`/api/admin/pdf/jobs/${j.id}`, { method: "DELETE" }); const res = await api(`/api/admin/pdf/jobs/${j.id}`, { method: "DELETE" });
if (res.status === 404) { toast("任务已不存在"); } if (res.status === 404) { toast("任务已不存在"); }
else if (!res.ok) throw new Error("HTTP " + res.status); else if (!res.ok) throw new Error("HTTP " + res.status);
selected.delete(j.id);
row.classList.add("row-removed"); row.classList.add("row-removed");
setTimeout(() => row.remove(), 250); setTimeout(() => row.remove(), 250);
toast("已硬删"); toast("已硬删");
const m = (countEl.textContent || "").match(/(\d+)/); decCount();
if (m) countEl.textContent = `${Math.max(0, Number(m[1]) - 1)} 个任务`; updateBulkBtn();
} catch (e) { } catch (e) {
toast("删除失败:" + (e.message || e), "err"); toast("删除失败:" + (e.message || e), "err");
} }
} }
// 批量硬删:并发删除所有选中项,无二次确认
async function bulkRemove() {
if (!selected.size) return;
bulkDeleteBtn.disabled = true;
const entries = [...selected.entries()];
let ok = 0, fail = 0;
await Promise.all(entries.map(async ([id, row]) => {
try {
const res = await api(`/api/admin/pdf/jobs/${id}`, { method: "DELETE" });
if (res.ok || res.status === 404) {
selected.delete(id);
row.classList.add("row-removed");
setTimeout(() => row.remove(), 250);
ok++;
} else {
fail++;
}
} catch {
fail++;
}
}));
selected.clear();
if (ok) { decCount(ok); toast(`已硬删 ${ok}` + (fail ? `${fail} 项失败` : "")); }
else if (fail) { toast(`批量删除失败(${fail} 项)`, "err"); }
// 同步全选框
const selectAll = document.getElementById("selectAll");
if (selectAll) selectAll.checked = false;
updateBulkBtn();
}
function decCount(n = 1) {
const m = (countEl.textContent || "").match(/(\d+)/);
if (m) countEl.textContent = `${Math.max(0, Number(m[1]) - n)} 个任务`;
}
load(); load();
})(); })();