967 lines
39 KiB
JavaScript
967 lines
39 KiB
JavaScript
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||
import { ChevronRight, LoaderCircle, Search, X } from "lucide-react";
|
||
import { qrDataUrl } from "./qrCode.js";
|
||
|
||
const STATUS_FILTERS = [
|
||
["all", "全部任务"],
|
||
["进行中", "进行中"],
|
||
["待审核", "待审核"],
|
||
["已完成", "已完成"],
|
||
["待返款", "待返款"],
|
||
["已撤销", "已撤销"],
|
||
];
|
||
const STATUS_ALIASES = {
|
||
"待用户完成": "进行中",
|
||
"未通过": "进行中",
|
||
"已发布": "进行中",
|
||
};
|
||
|
||
// Cache only the first unfiltered page and isolate it by administrator.
|
||
// This keeps navigation fast without ever showing another operator's rows.
|
||
const taskBoardCache = new Map();
|
||
export function clearTaskBoardCache() {
|
||
taskBoardCache.clear();
|
||
}
|
||
|
||
const formatTime = (value) => {
|
||
if (!value) return "--";
|
||
const raw = String(value);
|
||
// The API stores legacy UTC datetimes without an offset (datetime.utcnow()).
|
||
// Treat those values as UTC before displaying them in the business timezone.
|
||
const hasOffset = /(?:Z|[+-]\d{2}:?\d{2})$/i.test(raw);
|
||
const date = new Date(hasOffset ? raw : `${raw}Z`);
|
||
return Number.isNaN(date.getTime())
|
||
? "--"
|
||
: date.toLocaleString("zh-CN", { hour12: false, timeZone: "Asia/Shanghai" });
|
||
};
|
||
const maskPhone = (account = "") => account;
|
||
|
||
function TaskDetailLoading() {
|
||
return (
|
||
<div className="task-detail-backdrop task-detail-loading-backdrop">
|
||
<section className="task-detail-loading" role="status" aria-live="polite">
|
||
<LoaderCircle size={24} className="spin" />
|
||
<strong>正在打开任务详情</strong>
|
||
<span>请求已收到，凭证图片将在弹窗内按需加载…</span>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function TaskDetail({ task, close, onConfirmRefund, onCreateRefundUpload, onPollRefundUpload, hasNextRefund, onNextRefund, nextBusy }) {
|
||
const [refundOpen, setRefundOpen] = useState(false);
|
||
const [refundBusy, setRefundBusy] = useState(false);
|
||
const [refundFile, setRefundFile] = useState(null);
|
||
const [refundFileError, setRefundFileError] = useState("");
|
||
const [refundFilePreview, setRefundFilePreview] = useState("");
|
||
const [refundSession, setRefundSession] = useState(null);
|
||
const [refundQr, setRefundQr] = useState("");
|
||
const [refundSessionError, setRefundSessionError] = useState("");
|
||
const [linkCopied, setLinkCopied] = useState(false);
|
||
const refundPasteRef = useRef(null);
|
||
const isAskTask =
|
||
task.task_type === "ask" || task.task_type_label === "提问任务";
|
||
const taskLink = isAskTask
|
||
? `${window.location.origin}/ask/${task.public_token}`
|
||
: "";
|
||
const proofScreenshots = [
|
||
...(task.question_screenshots || []),
|
||
...(task.completion_screenshots || []),
|
||
];
|
||
const paymentScreenshots = task.payment_screenshots || [];
|
||
const refundScreenshots = task.refund_screenshots || [];
|
||
function setRefundProofFile(file) {
|
||
if (!file) return false;
|
||
if (!["image/jpeg", "image/png", "image/webp"].includes(file.type)) {
|
||
setRefundFileError("返款凭证仅支持 JPG、PNG、WEBP 图片");
|
||
return false;
|
||
}
|
||
if (file.size > 10 * 1024 * 1024) {
|
||
setRefundFileError("返款凭证不能超过 10MB");
|
||
return false;
|
||
}
|
||
setRefundFile(file);
|
||
setRefundFileError("");
|
||
return true;
|
||
}
|
||
useEffect(() => {
|
||
if (!refundOpen || refundSession || !task.refund_endpoint) return undefined;
|
||
let cancelled = false;
|
||
setRefundSessionError("");
|
||
onCreateRefundUpload(task).then((session) => {
|
||
if (cancelled) return;
|
||
setRefundSession(session);
|
||
try {
|
||
setRefundQr(qrDataUrl(`${window.location.origin}${session.upload_url}`));
|
||
} catch (error) {
|
||
setRefundSessionError(error.message || "二维码生成失败，请改用下方粘贴上传");
|
||
}
|
||
}).catch((error) => !cancelled && setRefundSessionError(error.message));
|
||
return () => { cancelled = true; };
|
||
}, [refundOpen, refundSession, task.id, onCreateRefundUpload]);
|
||
useEffect(() => {
|
||
if (!refundOpen || !refundSession || refundSession.uploaded) return undefined;
|
||
let cancelled = false;
|
||
const poll = async () => {
|
||
try {
|
||
const current = await onPollRefundUpload(refundSession.token);
|
||
if (!cancelled && current.uploaded) setRefundSession((value) => ({ ...value, ...current }));
|
||
} catch (error) {
|
||
if (!cancelled) setRefundSessionError(error.message);
|
||
}
|
||
};
|
||
const timer = window.setInterval(poll, 2500);
|
||
return () => { cancelled = true; window.clearInterval(timer); };
|
||
}, [refundOpen, refundSession?.token, refundSession?.uploaded]);
|
||
useEffect(() => {
|
||
if (!refundFile) {
|
||
setRefundFilePreview("");
|
||
return undefined;
|
||
}
|
||
const previewUrl = URL.createObjectURL(refundFile);
|
||
setRefundFilePreview(previewUrl);
|
||
return () => URL.revokeObjectURL(previewUrl);
|
||
}, [refundFile]);
|
||
useEffect(() => {
|
||
if (!refundOpen) return undefined;
|
||
const pasteImage = (event) => {
|
||
const imageItem = Array.from(event.clipboardData?.items || []).find((item) =>
|
||
item.kind === "file" && item.type.startsWith("image/")
|
||
);
|
||
if (!imageItem) {
|
||
setRefundFileError("剪贴板中没有图片，请先复制或截图后再按 Ctrl+V");
|
||
return;
|
||
}
|
||
const blob = imageItem.getAsFile();
|
||
if (!blob) {
|
||
setRefundFileError("读取剪贴板图片失败，请重新复制后再试");
|
||
return;
|
||
}
|
||
const extension = blob.type === "image/jpeg" ? "jpg" : blob.type.split("/")[1];
|
||
const pastedFile = new File(
|
||
[blob],
|
||
`refund-proof-${Date.now()}.${extension}`,
|
||
{ type: blob.type, lastModified: Date.now() },
|
||
);
|
||
event.preventDefault();
|
||
setRefundProofFile(pastedFile);
|
||
};
|
||
window.addEventListener("paste", pasteImage);
|
||
const focusTimer = window.setTimeout(() => refundPasteRef.current?.focus(), 0);
|
||
return () => {
|
||
window.clearTimeout(focusTimer);
|
||
window.removeEventListener("paste", pasteImage);
|
||
};
|
||
}, [refundOpen]);
|
||
async function confirmRefund() {
|
||
setRefundBusy(true);
|
||
try {
|
||
await onConfirmRefund(task, refundFile, refundSession?.uploaded ? refundSession.token : null);
|
||
setRefundOpen(false);
|
||
setRefundSession(null);
|
||
setRefundFile(null);
|
||
} catch (error) {
|
||
window.alert(error.message);
|
||
} finally {
|
||
setRefundBusy(false);
|
||
}
|
||
}
|
||
async function copyTaskLink() {
|
||
if (!taskLink) return;
|
||
let copied = false;
|
||
try {
|
||
if (navigator.clipboard?.writeText) {
|
||
await navigator.clipboard.writeText(taskLink);
|
||
copied = true;
|
||
}
|
||
} catch {
|
||
copied = false;
|
||
}
|
||
if (!copied) {
|
||
const textarea = document.createElement("textarea");
|
||
textarea.value = taskLink;
|
||
textarea.setAttribute("readonly", "");
|
||
textarea.style.position = "fixed";
|
||
textarea.style.opacity = "0";
|
||
document.body.appendChild(textarea);
|
||
textarea.select();
|
||
try {
|
||
copied = document.execCommand("copy");
|
||
} catch {
|
||
copied = false;
|
||
}
|
||
document.body.removeChild(textarea);
|
||
}
|
||
if (copied) {
|
||
setLinkCopied(true);
|
||
window.setTimeout(() => setLinkCopied(false), 1800);
|
||
}
|
||
}
|
||
return (
|
||
<div
|
||
className="task-detail-backdrop"
|
||
onMouseDown={(event) => event.target === event.currentTarget && close()}
|
||
>
|
||
<section className="task-detail-modal">
|
||
<header>
|
||
<div>
|
||
<strong>{task.task_id}</strong>
|
||
<span className={`board-status ${task.status_label}`}>
|
||
{task.status_label}
|
||
</span>
|
||
</div>
|
||
<button onClick={close}>
|
||
<X size={21} />
|
||
</button>
|
||
</header>
|
||
{taskLink && (
|
||
<div className="task-detail-share">
|
||
<span>提问链接</span>
|
||
<input
|
||
readOnly
|
||
value={taskLink}
|
||
aria-label="提问任务链接"
|
||
onFocus={(event) => event.target.select()}
|
||
/>
|
||
<button
|
||
type="button"
|
||
className={linkCopied ? "copied" : ""}
|
||
onClick={copyTaskLink}
|
||
>
|
||
{linkCopied ? "已复制" : "复制链接"}
|
||
</button>
|
||
</div>
|
||
)}
|
||
<div className={`task-detail-meta${isAskTask ? " ask-task-meta" : task.shop_name ? " shop-task-meta" : ""}`}>
|
||
{task.shop_name && <span>
|
||
店铺名称<b>{task.shop_name || "--"}</b>
|
||
</span>}
|
||
<span>
|
||
商品名称<b>{task.product_name}</b>
|
||
</span>
|
||
<span>
|
||
任务类型<b>{task.task_type_label}</b>
|
||
</span>
|
||
<span>
|
||
创建人<b>{task.creator_name}</b>
|
||
</span>
|
||
<span>
|
||
创建时间<b>{formatTime(task.created_at)}</b>
|
||
</span>
|
||
</div>
|
||
<h3>认领用户的问题与回答（共 {task.assigned_users.length} 位）</h3>
|
||
<div className="task-detail-table">
|
||
<div className="head">
|
||
<span>序号</span>
|
||
<span>关联问题与回答</span>
|
||
<span>认领用户</span>
|
||
<span>状态</span>
|
||
<span>返款凭证</span>
|
||
</div>
|
||
{task.selected_questions.length === 0 ? (
|
||
<div className="task-detail-empty">暂无问题</div>
|
||
) : (
|
||
<div className="task-detail-table-body">
|
||
{task.selected_questions.map((question, index) => (
|
||
<React.Fragment key={question.id}>
|
||
<span
|
||
className={`task-detail-cell${index ? " row-border" : ""}`}
|
||
style={{ gridColumn: 1, gridRow: index + 1 }}
|
||
>
|
||
{index + 1}
|
||
</span>
|
||
<span
|
||
className={`task-detail-cell${index ? " row-border" : ""}`}
|
||
style={{ gridColumn: 2, gridRow: index + 1 }}
|
||
>
|
||
<b>Q：{question.question}</b>
|
||
<small>A：{question.answer}</small>
|
||
</span>
|
||
<span
|
||
className={`task-detail-cell${index ? " row-border" : ""}`}
|
||
style={{ gridColumn: 3, gridRow: index + 1 }}
|
||
>
|
||
{question.user_id || "--"}
|
||
{question.phone && question.phone !== question.user_id && <small>{maskPhone(question.phone)}</small>}
|
||
</span>
|
||
<span
|
||
className={`task-detail-cell${index ? " row-border" : ""}`}
|
||
style={{ gridColumn: 4, gridRow: index + 1 }}
|
||
>
|
||
<em className={`board-status ${task.status_label}`}>
|
||
{task.status_label}
|
||
</em>
|
||
</span>
|
||
</React.Fragment>
|
||
))}
|
||
<span
|
||
className="task-detail-refund-proof task-detail-refund-proof-merged"
|
||
style={{
|
||
gridColumn: 5,
|
||
gridRow: `1 / span ${task.selected_questions.length}`,
|
||
}}
|
||
>
|
||
{refundScreenshots.length ? (
|
||
<button type="button">
|
||
<img
|
||
src={refundScreenshots[0].data_url || refundScreenshots[0].url}
|
||
alt="返款凭证"
|
||
loading="lazy"
|
||
decoding="async"
|
||
/>
|
||
<small>已上传</small>
|
||
</button>
|
||
) : (
|
||
"未上传"
|
||
)}
|
||
</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="task-detail-evidence">
|
||
<section>
|
||
<h3>{isAskTask ? "提问完成截图" : "回答完成截图"}</h3>
|
||
{proofScreenshots.length ? (
|
||
<div>
|
||
{proofScreenshots.map((image) => (
|
||
<button
|
||
type="button"
|
||
key={image.id}
|
||
>
|
||
<img src={image.data_url || image.url} alt={image.name || "完成截图"} loading="lazy" decoding="async" />
|
||
<span>点击查看大图</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<p>未上传完成截图</p>
|
||
)}
|
||
</section>
|
||
<section className="payment">
|
||
<h3>收款码</h3>
|
||
{paymentScreenshots.length ? (
|
||
<div>
|
||
{paymentScreenshots.map((image) => (
|
||
<button
|
||
type="button"
|
||
key={image.id}
|
||
>
|
||
<img src={image.data_url || image.url} alt={image.name || "收款码"} loading="lazy" decoding="async" />
|
||
<span>点击核对收款码</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<p>用户未单独上传收款码</p>
|
||
)}
|
||
</section>
|
||
</div>
|
||
<footer>
|
||
{task.refund_endpoint && (
|
||
<button
|
||
type="button"
|
||
className="confirm-refund"
|
||
onClick={() => {
|
||
setRefundSession(null);
|
||
setRefundFile(null);
|
||
setRefundFileError("");
|
||
setRefundQr("");
|
||
setRefundOpen(true);
|
||
}}
|
||
>
|
||
确认返款
|
||
</button>
|
||
)}
|
||
{(task.status_label === "待返款" || task.refund_completed) && (
|
||
<button
|
||
type="button"
|
||
className="next-refund-task"
|
||
disabled={!hasNextRefund || nextBusy}
|
||
onClick={onNextRefund}
|
||
>
|
||
{nextBusy ? "正在打开…" : hasNextRefund ? "下一个待返款任务" : "已是最后一个"}
|
||
{hasNextRefund && !nextBusy && <ChevronRight size={15} />}
|
||
</button>
|
||
)}
|
||
<button onClick={close}>关闭</button>
|
||
</footer>
|
||
{refundOpen && (
|
||
<div
|
||
className="refund-confirm-backdrop"
|
||
onMouseDown={(event) =>
|
||
event.target === event.currentTarget && setRefundOpen(false)
|
||
}
|
||
>
|
||
<section className="refund-confirm-modal">
|
||
<span>扫码</span>
|
||
<h2>确认已经完成返款？</h2>
|
||
<p>
|
||
请确认已按用户上传的收款码完成付款。确认后，该任务将归入“已完成”，此操作不可撤销。
|
||
</p>
|
||
<div className="refund-scan-upload">
|
||
<div>
|
||
<strong>扫码上传返款凭证</strong>
|
||
<small>二维码有效期 10 分钟</small>
|
||
{refundSessionError && <em>{refundSessionError}</em>}
|
||
{refundSession?.uploaded && <b>✓ 手机端已上传，运营端可确认返款</b>}
|
||
</div>
|
||
{refundQr ? <img src={refundQr} alt="扫码上传返款凭证" /> : <i>正在生成二维码…</i>}
|
||
</div>
|
||
<div
|
||
ref={refundPasteRef}
|
||
className={`refund-proof-upload${refundFile ? " has-image" : ""}`}
|
||
tabIndex={0}
|
||
role="button"
|
||
aria-label="粘贴剪贴板中的返款凭证图片"
|
||
>
|
||
{refundFilePreview ? (
|
||
<img src={refundFilePreview} alt="已粘贴的返款凭证" />
|
||
) : (
|
||
<span className="refund-paste-icon">粘贴</span>
|
||
)}
|
||
<span>剪贴板粘贴上传（可选）</span>
|
||
<strong>{refundFile ? "图片已粘贴，可直接确认" : "复制图片后，按 Ctrl+V 粘贴"}</strong>
|
||
<small>{refundFile ? `${refundFile.name} · ${(refundFile.size / 1024).toFixed(0)}KB` : "支持 JPG、PNG、WEBP，最大 10MB"}</small>
|
||
{refundFileError && <em>{refundFileError}</em>}
|
||
</div>
|
||
<label className="refund-proof-fallback">
|
||
<input
|
||
type="file"
|
||
accept="image/jpeg,image/png,image/webp"
|
||
onChange={(event) => {
|
||
setRefundProofFile(event.target.files?.[0]);
|
||
event.target.value = "";
|
||
}}
|
||
/>
|
||
<span>无法粘贴？选择本地图片</span>
|
||
</label>
|
||
<div>
|
||
<button
|
||
type="button"
|
||
disabled={refundBusy}
|
||
onClick={() => setRefundOpen(false)}
|
||
>
|
||
取消
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="confirm"
|
||
disabled={refundBusy || (!refundFile && !refundSession?.uploaded)}
|
||
onClick={confirmRefund}
|
||
>
|
||
{refundBusy ? "确认中…" : "确定返款完成"}
|
||
</button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
)}
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function TaskBoardPage({ api, user }) {
|
||
const accountCacheKey = String(user?.id || user?.username || "anonymous");
|
||
const initialStatus = window.__taskBoardInitialStatus || "all";
|
||
const initialCache = initialStatus === "all" ? taskBoardCache.get(accountCacheKey) : null;
|
||
const [tasks, setTasks] = useState(() => initialCache?.items || []);
|
||
const [type, setType] = useState("all");
|
||
const [status, setStatus] = useState(initialStatus);
|
||
const [keyword, setKeyword] = useState("");
|
||
const [dateFrom, setDateFrom] = useState("");
|
||
const [dateTo, setDateTo] = useState("");
|
||
const [page, setPage] = useState(() => initialCache?.page || 1);
|
||
const [pageSize, setPageSize] = useState(() => initialCache?.page_size || 20);
|
||
const [total, setTotal] = useState(() => initialCache?.total || 0);
|
||
const [totalPages, setTotalPages] = useState(() => initialCache?.total_pages || 1);
|
||
const [selectedIds, setSelectedIds] = useState([]);
|
||
const [expandedAskTasks, setExpandedAskTasks] = useState(() => new Set());
|
||
const [detail, setDetail] = useState(null);
|
||
const [detailLoading, setDetailLoading] = useState(null);
|
||
const [nextRefundTask, setNextRefundTask] = useState(null);
|
||
const [error, setError] = useState("");
|
||
const [loading, setLoading] = useState(() => !initialCache);
|
||
const [busy, setBusy] = useState("");
|
||
const [batchBusy, setBatchBusy] = useState(false);
|
||
const [batchConfirm, setBatchConfirm] = useState(null);
|
||
const [completeConfirm, setCompleteConfirm] = useState(null);
|
||
const detailCache = useRef(new Map());
|
||
async function load(showLoading = !tasks.length) {
|
||
if (showLoading) setLoading(true);
|
||
try {
|
||
const params = new URLSearchParams({
|
||
page: String(page),
|
||
page_size: String(pageSize),
|
||
task_type: type,
|
||
status_filter: status,
|
||
});
|
||
if (keyword.trim()) params.set("keyword", keyword.trim());
|
||
if (dateFrom) params.set("date_from", dateFrom);
|
||
if (dateTo) params.set("date_to", dateTo);
|
||
const result = await api(`/api/admin/task-board?${params.toString()}`);
|
||
const payload = result.data;
|
||
setTasks(payload.items);
|
||
setPage(payload.page);
|
||
setPageSize(payload.page_size);
|
||
setTotal(payload.total);
|
||
setTotalPages(payload.total_pages);
|
||
if (payload.page === 1 && type === "all" && status === "all" && !keyword.trim() && !dateFrom && !dateTo) {
|
||
taskBoardCache.set(accountCacheKey, payload);
|
||
}
|
||
setError("");
|
||
} catch (err) {
|
||
setError(err.message);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}
|
||
useEffect(() => {
|
||
const timer = window.setTimeout(() => load(!tasks.length), keyword.trim() ? 250 : 0);
|
||
window.__taskBoardInitialStatus = "";
|
||
return () => window.clearTimeout(timer);
|
||
}, [accountCacheKey, page, pageSize, type, status, keyword, dateFrom, dateTo]);
|
||
const rowKey = (task) => task.board_key || `${task.task_type}-${task.id}`;
|
||
const detailCacheKey = (task) => task.detail_endpoint || rowKey(task);
|
||
const isAskTask = (task) => task.task_type === "ask" || task.task_type_label === "提问任务";
|
||
const childRows = (task) => (isAskTask(task) ? task.claimed_tasks || [] : []);
|
||
// Keep filtering as a direct derivation so changing either filter always
|
||
// immediately updates the table (without relying on a stale memoized list).
|
||
const rows = tasks;
|
||
const refundQueue = useMemo(
|
||
() => tasks.flatMap((task) => [task, ...childRows(task)]).filter((task) => {
|
||
const rawStatus = String(task.status_label || task.status || "").trim();
|
||
return (STATUS_ALIASES[rawStatus] || rawStatus) === "待返款" || Boolean(task.refund_endpoint);
|
||
}),
|
||
[tasks],
|
||
);
|
||
const visibleKeys = rows.map(rowKey);
|
||
const allVisibleSelected = visibleKeys.length > 0 && visibleKeys.every((key) => selectedIds.includes(key));
|
||
function toggleSelected(task) {
|
||
const key = rowKey(task);
|
||
setSelectedIds((current) => current.includes(key) ? current.filter((item) => item !== key) : [...current, key]);
|
||
}
|
||
function toggleAllVisible() {
|
||
setSelectedIds((current) => {
|
||
if (allVisibleSelected) return current.filter((key) => !visibleKeys.includes(key));
|
||
return [...new Set([...current, ...visibleKeys])];
|
||
});
|
||
}
|
||
function clearFilters() {
|
||
setKeyword("");
|
||
setDateFrom("");
|
||
setDateTo("");
|
||
setType("all");
|
||
setStatus("all");
|
||
setPage(1);
|
||
}
|
||
function toggleAskTask(task) {
|
||
const key = rowKey(task);
|
||
setExpandedAskTasks((current) => {
|
||
const next = new Set(current);
|
||
if (next.has(key)) next.delete(key);
|
||
else next.add(key);
|
||
return next;
|
||
});
|
||
}
|
||
function exportRows() {
|
||
if (!rows.length) {
|
||
window.alert("当前没有可导出的任务");
|
||
return;
|
||
}
|
||
const headers = ["用户ID", "任务ID", "商品/店铺信息", "类型", "Q&A数", "完成", "状态", "创建人", "返款凭证", "创建时间"];
|
||
const csvCell = (value) => `"${String(value ?? "").replace(/"/g, '""')}"`;
|
||
const lines = [headers, ...rows.map((task) => [
|
||
task.user_id,
|
||
task.task_id,
|
||
[task.product_name, task.shop_name].filter(Boolean).join(" / "),
|
||
task.task_type_label,
|
||
task.qa_count,
|
||
task.completed_count,
|
||
task.status_label,
|
||
task.creator_name,
|
||
task.refund_screenshot_count ? "已上传" : "--",
|
||
formatTime(task.created_at),
|
||
])].map((line) => line.map(csvCell).join(","));
|
||
const blob = new Blob([`\uFEFF${lines.join("\r\n")}`], { type: "text/csv;charset=utf-8" });
|
||
const url = window.URL.createObjectURL(blob);
|
||
const anchor = document.createElement("a");
|
||
anchor.href = url;
|
||
anchor.download = `任务看板-${new Date().toISOString().slice(0, 10)}.csv`;
|
||
anchor.click();
|
||
window.URL.revokeObjectURL(url);
|
||
}
|
||
async function batchClear() {
|
||
const selected = tasks.filter((task) => selectedIds.includes(rowKey(task)));
|
||
if (!selected.length) {
|
||
window.alert("请先选择要清除的任务");
|
||
return;
|
||
}
|
||
setBatchConfirm({ tasks: selected });
|
||
}
|
||
async function confirmBatchClear() {
|
||
if (!batchConfirm) return;
|
||
const { tasks: selected } = batchConfirm;
|
||
setBatchConfirm(null);
|
||
setBatchBusy(true);
|
||
try {
|
||
const results = await Promise.allSettled(selected.map((task) => api(
|
||
task.delete_endpoint || (task.task_type === "ask"
|
||
? `/api/admin/ask-tasks/${task.id}`
|
||
: `/api/admin/task-board/${task.id}`),
|
||
{ method: "DELETE" },
|
||
)));
|
||
const failedCount = results.filter((result) => result.status === "rejected").length;
|
||
setSelectedIds([]);
|
||
if (detail && selected.some((task) => task.id === detail.id && task.task_type === (detail.task_type || task.task_type))) {
|
||
setDetail(null);
|
||
}
|
||
await load();
|
||
if (failedCount) {
|
||
window.alert(`${selected.length - failedCount} 条任务已删除，${failedCount} 条任务处理失败，请刷新后重试。`);
|
||
}
|
||
} catch (err) {
|
||
window.alert(err.message);
|
||
} finally {
|
||
setBatchBusy(false);
|
||
}
|
||
}
|
||
async function requestDetail(task) {
|
||
if (task.detail_endpoint) {
|
||
const result = await api(task.detail_endpoint);
|
||
return result.data;
|
||
}
|
||
if (task.task_type === "ask") return task;
|
||
const result = await api(`/api/admin/task-board/${task.id}`);
|
||
return result.data;
|
||
}
|
||
async function openDetail(task) {
|
||
if (!task || detailLoading) return;
|
||
const key = detailCacheKey(task);
|
||
const refundIndex = refundQueue.findIndex((item) => rowKey(item) === rowKey(task));
|
||
const nextCandidate = refundIndex >= 0 ? refundQueue[refundIndex + 1] || null : null;
|
||
setNextRefundTask(nextCandidate);
|
||
const cached = detailCache.current.get(key);
|
||
if (cached) {
|
||
setDetail(cached);
|
||
return;
|
||
}
|
||
setDetailLoading(key);
|
||
try {
|
||
const loaded = await requestDetail(task);
|
||
detailCache.current.set(key, loaded);
|
||
setDetail(loaded);
|
||
if (nextCandidate && !detailCache.current.has(detailCacheKey(nextCandidate))) {
|
||
void requestDetail(nextCandidate)
|
||
.then((nextDetail) => detailCache.current.set(detailCacheKey(nextCandidate), nextDetail))
|
||
.catch(() => {});
|
||
}
|
||
} catch (err) {
|
||
window.alert(err.message);
|
||
} finally {
|
||
setDetailLoading(null);
|
||
}
|
||
}
|
||
async function cancel(task) {
|
||
if (
|
||
!window.confirm(
|
||
`确定撤销任务 ${task.task_id} 吗？撤销后用户将不能继续提交。`,
|
||
)
|
||
)
|
||
return;
|
||
setBusy(task.id);
|
||
try {
|
||
await api(
|
||
task.task_type === "ask"
|
||
? `/api/admin/ask-tasks/${task.id}/cancel`
|
||
: `/api/admin/task-board/${task.id}/cancel`,
|
||
{ method: "POST" },
|
||
);
|
||
await load();
|
||
if (detail?.id === task.id) setDetail(null);
|
||
} catch (err) {
|
||
window.alert(err.message);
|
||
} finally {
|
||
setBusy("");
|
||
}
|
||
}
|
||
async function complete(task) {
|
||
if (!completeConfirm || busy) return;
|
||
setBusy(task.id);
|
||
try {
|
||
await api(`/api/admin/ask-tasks/${task.id}/complete`, { method: "POST" });
|
||
setCompleteConfirm(null);
|
||
setSelectedIds((current) => current.filter((key) => key !== rowKey(task)));
|
||
await load();
|
||
if (detail?.id === task.id) setDetail(null);
|
||
} catch (err) {
|
||
setError(err.message);
|
||
} finally {
|
||
setBusy("");
|
||
}
|
||
}
|
||
async function createRefundUpload(task) {
|
||
const result = await api("/api/admin/refund-upload-sessions", {
|
||
method: "POST",
|
||
body: JSON.stringify({ target_kind: task.record_kind, target_id: task.id }),
|
||
});
|
||
return result.data;
|
||
}
|
||
async function pollRefundUpload(token) {
|
||
const result = await api(`/api/refund-upload-sessions/${encodeURIComponent(token)}`);
|
||
return result.data;
|
||
}
|
||
async function confirmRefund(task, refundFile, uploadToken) {
|
||
if (!refundFile && !uploadToken) throw new Error("请先粘贴返款凭证，或用手机扫码上传");
|
||
const body = new FormData();
|
||
if (refundFile) body.append("refund_file", refundFile);
|
||
if (uploadToken) body.append("upload_token", uploadToken);
|
||
const result = await api(task.refund_endpoint, { method: "POST", body });
|
||
const updatedDetail = {
|
||
...task,
|
||
...result.data,
|
||
question_screenshots:
|
||
task.question_screenshots || result.data.question_screenshots || [],
|
||
completion_screenshots:
|
||
task.completion_screenshots || result.data.completion_screenshots || [],
|
||
payment_screenshots:
|
||
task.payment_screenshots || result.data.payment_screenshots || [],
|
||
refund_screenshots:
|
||
result.data.refund_screenshots || task.refund_screenshots || [],
|
||
refund_screenshot_count: result.data.refund_screenshots?.length || task.refund_screenshot_count || 0,
|
||
};
|
||
detailCache.current.set(detailCacheKey(task), updatedDetail);
|
||
setDetail(updatedDetail);
|
||
setTasks((current) => {
|
||
const next = current.map((item) =>
|
||
item.board_key === result.data.board_key
|
||
? { ...item, ...result.data }
|
||
: item,
|
||
);
|
||
taskBoardCache.delete(accountCacheKey);
|
||
return next;
|
||
});
|
||
// A claimed ask row is nested under its system task. Refresh the compact
|
||
// tree as well so the child immediately leaves “待返款” after payment.
|
||
await load(false);
|
||
}
|
||
return (
|
||
<>
|
||
<div className="board-heading">
|
||
<h2>任务看板</h2>
|
||
<p>监控全量问答任务执行状态、完成进度与审核链路。</p>
|
||
</div>
|
||
<div className="board-type-row">
|
||
<span>任务类型：</span>
|
||
{[
|
||
["all", "全部类型"],
|
||
["ask", "提问任务"],
|
||
["answer", "回答任务"],
|
||
].map(([value, label]) => (
|
||
<button
|
||
type="button"
|
||
className={type === value ? "active" : ""}
|
||
key={value}
|
||
onClick={() => { setType(value); setPage(1); }}
|
||
>
|
||
{label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<div className="board-status-row">
|
||
{STATUS_FILTERS.map(([value, label]) => (
|
||
<button
|
||
type="button"
|
||
className={status === value ? "active" : ""}
|
||
key={value}
|
||
onClick={() => { setStatus(value); setPage(1); }}
|
||
>
|
||
{label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<div className="board-search">
|
||
<Search size={17} />
|
||
<input
|
||
value={keyword}
|
||
onChange={(event) => { setKeyword(event.target.value); setPage(1); }}
|
||
placeholder="搜索用户ID、任务ID、店铺或商品…"
|
||
/>
|
||
</div>
|
||
<div className="board-tools">
|
||
<label>
|
||
<span>开始日期</span>
|
||
<input type="date" value={dateFrom} onChange={(event) => { setDateFrom(event.target.value); setPage(1); }} />
|
||
</label>
|
||
<label>
|
||
<span>结束日期</span>
|
||
<input type="date" value={dateTo} onChange={(event) => { setDateTo(event.target.value); setPage(1); }} />
|
||
</label>
|
||
<button type="button" onClick={clearFilters}>清空筛选</button>
|
||
<button type="button" onClick={exportRows}>导出表格</button>
|
||
<button type="button" className="danger" disabled={batchBusy} onClick={batchClear}>
|
||
{batchBusy ? "删除中…" : `批量删除${selectedIds.length ? `（${selectedIds.length}）` : ""}`}
|
||
</button>
|
||
</div>
|
||
{error && <div className="form-error">{error}</div>}
|
||
<section
|
||
className="board-table panel"
|
||
key={`${type}|${status}|${keyword.trim().toLowerCase()}|${dateFrom}|${dateTo}`}
|
||
>
|
||
<div className="board-table-head">
|
||
<span className="board-select-cell">
|
||
<input type="checkbox" checked={allVisibleSelected} onChange={toggleAllVisible} aria-label="全选当前任务" />
|
||
</span>
|
||
<span>用户ID</span>
|
||
<span>任务ID</span>
|
||
<span>商品/店铺信息</span>
|
||
<span>类型</span>
|
||
<span>Q&A数</span>
|
||
<span>完成</span>
|
||
<span>状态</span>
|
||
<span>创建人</span>
|
||
<span>返款凭证</span>
|
||
<span>操作</span>
|
||
</div>
|
||
{loading ? (
|
||
<div className="board-empty">正在加载任务…</div>
|
||
) : rows.length === 0 ? (
|
||
<div className="board-empty">
|
||
暂无符合条件的任务
|
||
</div>
|
||
) : (
|
||
rows.map((task) => {
|
||
const key = rowKey(task);
|
||
const children = childRows(task);
|
||
const expanded = expandedAskTasks.has(key);
|
||
return (
|
||
<React.Fragment key={key}>
|
||
<div className="board-table-row">
|
||
<span className="board-select-cell">
|
||
<input type="checkbox" checked={selectedIds.includes(key)} onChange={() => toggleSelected(task)} aria-label={`选择任务 ${task.task_id}`} />
|
||
</span>
|
||
<span className={`board-user-cell${!isAskTask(task) ? " board-answer-user" : ""}`}>
|
||
{children.length > 0 && (
|
||
<button
|
||
type="button"
|
||
className={`board-expand-button${expanded ? " open" : ""}`}
|
||
onClick={() => toggleAskTask(task)}
|
||
aria-label={expanded ? "收起认领任务" : "展开认领任务"}
|
||
>
|
||
▾
|
||
</button>
|
||
)}
|
||
<code>{task.user_id}</code>
|
||
{!isAskTask(task) && task.phone && task.phone !== task.user_id && <small>{maskPhone(task.phone)}</small>}
|
||
</span>
|
||
<span><b>{task.task_id}</b></span>
|
||
<span>
|
||
<strong>{task.product_name || "--"}</strong>
|
||
<small>{task.shop_name || "--"}</small>
|
||
</span>
|
||
<span><em className={`board-type ${task.task_type}`}>{task.task_type_label}</em></span>
|
||
<span>{task.qa_count}</span>
|
||
<span>{task.completed_count}</span>
|
||
<span><em className={`board-status ${task.status_label}`}>{task.status_label}</em></span>
|
||
<span>{task.creator_name}<small>{formatTime(task.created_at)}</small></span>
|
||
<span className="board-refund-proof">{task.refund_screenshot_count ? "已上传" : "--"}</span>
|
||
<span className="board-actions">
|
||
<button disabled={Boolean(detailLoading)} onClick={() => openDetail(task)}>
|
||
{detailLoading === detailCacheKey(task) ? "打开中…" : "详情"}
|
||
</button>
|
||
{task.can_cancel && (
|
||
<button className="cancel" disabled={busy === task.id} onClick={() => cancel(task)}>
|
||
{busy === task.id ? "撤销中" : "撤销"}
|
||
</button>
|
||
)}
|
||
{task.can_complete && task.task_type === "ask" && (
|
||
<button className="complete" disabled={busy === task.id} onClick={() => setCompleteConfirm(task)}>完成任务</button>
|
||
)}
|
||
<button className="delete" onClick={() => setBatchConfirm({ tasks: [task] })}>删除</button>
|
||
</span>
|
||
</div>
|
||
{expanded && children.map((child) => (
|
||
<div className="board-table-row board-child-row" key={rowKey(child)}>
|
||
<span className="board-select-cell" />
|
||
<span className="board-user-cell board-child-user"><i>↳</i><code>{child.user_id}</code>{child.phone && child.phone !== child.user_id && <small>{maskPhone(child.phone)}</small>}</span>
|
||
<span>
|
||
<b>{child.task_id}</b>
|
||
{child.batch_label && <small>{child.batch_label}</small>}
|
||
</span>
|
||
<span><strong>{child.product_name || "--"}</strong><small>{child.shop_name || "--"}</small></span>
|
||
<span><em className="board-type ask">提问任务</em></span>
|
||
<span>{child.qa_count}</span>
|
||
<span>{child.completed_count}</span>
|
||
<span><em className={`board-status ${child.status_label}`}>{child.status_label}</em></span>
|
||
<span>{child.creator_name}<small>{formatTime(child.created_at)}</small></span>
|
||
<span className="board-refund-proof">{child.refund_proof_uploaded ? "已上传" : child.refund_endpoint ? "待上传" : "--"}</span>
|
||
<span className="board-actions"><button disabled={Boolean(detailLoading)} onClick={() => openDetail(child)}>{detailLoading === detailCacheKey(child) ? "打开中…" : "详情"}</button></span>
|
||
</div>
|
||
))}
|
||
</React.Fragment>
|
||
);
|
||
})
|
||
)}
|
||
</section>
|
||
<nav className="board-pagination" aria-label="任务看板分页">
|
||
<span>共 {total} 条</span>
|
||
<label>
|
||
每页
|
||
<select value={pageSize} onChange={(event) => { setPageSize(Number(event.target.value)); setPage(1); }}>
|
||
{[10, 20, 50, 100].map((size) => <option key={size} value={size}>{size} 条</option>)}
|
||
</select>
|
||
</label>
|
||
<button type="button" disabled={page <= 1 || loading} onClick={() => setPage((value) => Math.max(1, value - 1))}>上一页</button>
|
||
<strong>{page} / {totalPages}</strong>
|
||
<button type="button" disabled={page >= totalPages || loading} onClick={() => setPage((value) => Math.min(totalPages, value + 1))}>下一页</button>
|
||
</nav>
|
||
{detailLoading && !detail && <TaskDetailLoading />}
|
||
{detail && (
|
||
<TaskDetail
|
||
key={rowKey(detail)}
|
||
task={detail}
|
||
close={() => setDetail(null)}
|
||
onConfirmRefund={confirmRefund}
|
||
onCreateRefundUpload={createRefundUpload}
|
||
onPollRefundUpload={pollRefundUpload}
|
||
hasNextRefund={Boolean(nextRefundTask)}
|
||
nextBusy={Boolean(detailLoading)}
|
||
onNextRefund={() => openDetail(nextRefundTask)}
|
||
/>
|
||
)}
|
||
{batchConfirm && (
|
||
<div
|
||
className="board-confirm-backdrop"
|
||
onMouseDown={(event) => event.target === event.currentTarget && setBatchConfirm(null)}
|
||
>
|
||
<section className="board-confirm-modal" role="dialog" aria-modal="true" aria-labelledby="batch-clear-title">
|
||
<div className="board-confirm-icon">!</div>
|
||
<h2 id="batch-clear-title">确认是否删除？</h2>
|
||
<p>
|
||
确定删除已选的 {batchConfirm.tasks.length} 条任务吗？删除后将从任务看板和系统记录中永久移除，无法恢复。
|
||
</p>
|
||
<div className="board-confirm-actions">
|
||
<button type="button" onClick={() => setBatchConfirm(null)} disabled={batchBusy}>取消</button>
|
||
<button type="button" className="danger" onClick={confirmBatchClear} disabled={batchBusy}>
|
||
{batchBusy ? "删除中…" : "确认删除"}
|
||
</button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
)}
|
||
{completeConfirm && (
|
||
<div className="board-confirm-backdrop" onMouseDown={(event) => event.target === event.currentTarget && setCompleteConfirm(null)}>
|
||
<section className="board-confirm-modal" role="dialog" aria-modal="true" aria-labelledby="complete-task-title">
|
||
<div className="board-confirm-icon complete-icon">✓</div>
|
||
<h2 id="complete-task-title">确认完成任务？</h2>
|
||
<p>该提问任务当前已完成 {completeConfirm.completed_count || 0} / {completeConfirm.total_count || completeConfirm.qa_count || 0} 条。确认后将强制归档到“已完成”，用户将不能继续提交。</p>
|
||
<div className="board-confirm-actions">
|
||
<button type="button" onClick={() => setCompleteConfirm(null)} disabled={busy === completeConfirm.id}>取消</button>
|
||
<button type="button" className="confirm-complete" onClick={() => complete(completeConfirm)} disabled={busy === completeConfirm.id}>{busy === completeConfirm.id ? "处理中…" : "确认完成"}</button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
)}
|
||
</>
|
||
);
|
||
}
|