feat(pdf-admin): 支持全选/多选批量硬删并去掉删除二次确认
- 工具栏新增「批量硬删」按钮,实时显示选中数,无选中时禁用 - 表头复选框全选/反选,行复选框多选,行级选中状态同步全选框 - 批量删除并发执行 DELETE,逐项淡出移除并汇总结果 toast - 单条与批量删除均直接执行,移除 confirm() 二次确认 - 新增 .col-check 复选框列样式(窄宽居中)
This commit is contained in:
@@ -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; }
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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();
|
||||||
})();
|
})();
|
||||||
|
|||||||
Reference in New Issue
Block a user