319 行
11 KiB
TypeScript
319 行
11 KiB
TypeScript
import { useEffect, useMemo, useState } from "react";
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { toast } from "sonner";
|
|
import { uploadInvoice } from "../api/invoicePool";
|
|
import { mapApiErrorMessage } from "../api/errorMessages";
|
|
import { isApiError } from "../api/types";
|
|
import { PageHeader } from "../components/common/PageHeader";
|
|
import { PageScaffold } from "../components/patterns/PageScaffold";
|
|
import { Button } from "../components/ui/button";
|
|
import { Spinner } from "../components/ui/spinner";
|
|
import {
|
|
enqueueInvoiceUpload,
|
|
listQueuedInvoiceUploads,
|
|
queuedItemToFile,
|
|
removeQueuedInvoiceUpload,
|
|
type MobileUploadQueueItem,
|
|
} from "../mobile/uploadQueue";
|
|
|
|
function formatTime(value: string) {
|
|
try {
|
|
return new Date(value).toLocaleString("zh-CN");
|
|
} catch {
|
|
return value;
|
|
}
|
|
}
|
|
|
|
function isLikelyNetworkError(error: unknown) {
|
|
if (isApiError(error)) {
|
|
return error.status >= 500;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
type CaptureUploadResult = {
|
|
succeeded: number;
|
|
queued: number;
|
|
failed: Array<{ file: File; message: string }>;
|
|
};
|
|
|
|
export function MobileCapturePage() {
|
|
const queryClient = useQueryClient();
|
|
const [error, setError] = useState("");
|
|
const [message, setMessage] = useState("");
|
|
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
|
|
const [uploadProgress, setUploadProgress] = useState({ completed: 0, total: 0 });
|
|
const [isOnline, setIsOnline] = useState<boolean>(navigator.onLine);
|
|
|
|
const queueQuery = useQuery({
|
|
queryKey: ["mobile", "invoice-upload-queue"],
|
|
queryFn: () => listQueuedInvoiceUploads(),
|
|
});
|
|
|
|
const uploadMutation = useMutation({
|
|
mutationFn: async (files: File[]) => {
|
|
const result: CaptureUploadResult = { succeeded: 0, queued: 0, failed: [] };
|
|
setUploadProgress({ completed: 0, total: files.length });
|
|
|
|
for (const [index, file] of files.entries()) {
|
|
try {
|
|
await uploadInvoice(file, "vat");
|
|
result.succeeded += 1;
|
|
} catch (err) {
|
|
if (isLikelyNetworkError(err)) {
|
|
await enqueueInvoiceUpload(file);
|
|
result.queued += 1;
|
|
} else {
|
|
result.failed.push({
|
|
file,
|
|
message: isApiError(err)
|
|
? `${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`
|
|
: err instanceof Error ? err.message : "上传失败",
|
|
});
|
|
}
|
|
}
|
|
|
|
setUploadProgress({ completed: index + 1, total: files.length });
|
|
}
|
|
|
|
return result;
|
|
},
|
|
onSuccess: async (result) => {
|
|
await Promise.all([
|
|
queryClient.invalidateQueries({ queryKey: ["mobile", "invoice-upload-queue"] }),
|
|
queryClient.invalidateQueries({ queryKey: ["invoice-pool"] }),
|
|
]);
|
|
setSelectedFiles(result.failed.map((item) => item.file));
|
|
setError("");
|
|
setMessage("");
|
|
if (result.failed.length) {
|
|
const msg = result.failed.map((item) => `${item.file.name}: ${item.message}`).join("；");
|
|
setError(msg);
|
|
toast.error(`上传完成：成功 ${result.succeeded}，待重试 ${result.queued}，失败 ${result.failed.length}`);
|
|
return;
|
|
}
|
|
toast.success(`上传完成：成功 ${result.succeeded}，待重试 ${result.queued}`);
|
|
},
|
|
onError: (err) => {
|
|
if (isApiError(err)) {
|
|
const msg = `${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`;
|
|
setError(msg);
|
|
toast.error(msg);
|
|
return;
|
|
}
|
|
|
|
const msg = err instanceof Error ? err.message : "上传失败";
|
|
setError(msg);
|
|
toast.error(msg);
|
|
},
|
|
onSettled: () => setUploadProgress({ completed: 0, total: 0 }),
|
|
});
|
|
|
|
const syncMutation = useMutation({
|
|
mutationFn: async (items: MobileUploadQueueItem[]) => {
|
|
let succeeded = 0;
|
|
let failed = 0;
|
|
|
|
for (const item of items) {
|
|
try {
|
|
const file = queuedItemToFile(item);
|
|
await uploadInvoice(file, "vat");
|
|
await removeQueuedInvoiceUpload(item.id);
|
|
succeeded += 1;
|
|
} catch {
|
|
failed += 1;
|
|
}
|
|
}
|
|
|
|
return { succeeded, failed };
|
|
},
|
|
onSuccess: async (result) => {
|
|
await queryClient.invalidateQueries({ queryKey: ["mobile", "invoice-upload-queue"] });
|
|
setError("");
|
|
setMessage("");
|
|
toast.success(`同步完成：成功 ${result.succeeded}，失败 ${result.failed}`);
|
|
},
|
|
onError: (err) => {
|
|
const msg = err instanceof Error ? err.message : "队列同步失败";
|
|
setError(msg);
|
|
toast.error(msg);
|
|
},
|
|
});
|
|
|
|
const queuedItems = queueQuery.data ?? [];
|
|
|
|
const queuedCountLabel = useMemo(() => {
|
|
if (!queuedItems.length) return "无待上传项";
|
|
return `待上传 ${queuedItems.length} 项`;
|
|
}, [queuedItems.length]);
|
|
|
|
useEffect(() => {
|
|
const onOnline = () => {
|
|
setIsOnline(true);
|
|
if (queuedItems.length) {
|
|
syncMutation.mutate(queuedItems);
|
|
}
|
|
};
|
|
|
|
const onOffline = () => {
|
|
setIsOnline(false);
|
|
};
|
|
|
|
window.addEventListener("online", onOnline);
|
|
window.addEventListener("offline", onOffline);
|
|
|
|
return () => {
|
|
window.removeEventListener("online", onOnline);
|
|
window.removeEventListener("offline", onOffline);
|
|
};
|
|
}, [queuedItems, syncMutation]);
|
|
|
|
return (
|
|
<PageScaffold className="space-y-4">
|
|
<PageHeader
|
|
title="票据上传"
|
|
subtitle="拍照或选择文件。"
|
|
/>
|
|
|
|
{error ? (
|
|
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{error}</p>
|
|
) : null}
|
|
|
|
{message ? (
|
|
<p className="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-700">{message}</p>
|
|
) : null}
|
|
|
|
<div className="card-std space-y-4 p-4">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div>
|
|
<h3 className="text-base font-semibold text-zinc-900">选择票据</h3>
|
|
<p className="mt-1 text-sm leading-5 text-zinc-500">图片或 PDF。</p>
|
|
</div>
|
|
<span className={isOnline ? "shrink-0 text-sm text-emerald-600" : "shrink-0 text-sm text-orange-600"}>
|
|
{isOnline ? "在线" : "离线"}
|
|
</span>
|
|
</div>
|
|
|
|
<label
|
|
htmlFor="mobile-capture-file"
|
|
className="flex min-h-36 cursor-pointer flex-col items-center justify-center rounded-2xl border border-dashed border-zinc-300 bg-zinc-50 px-4 py-6 text-center transition-colors hover:border-zinc-400 hover:bg-white"
|
|
>
|
|
<span className="material-symbols-outlined text-[32px] text-zinc-700">add_photo_alternate</span>
|
|
<span className="mt-2 text-sm font-semibold text-zinc-900">拍照或选择文件</span>
|
|
<span className="mt-1 text-xs leading-5 text-zinc-500">JPG、PNG、PDF 均可上传</span>
|
|
</label>
|
|
<input
|
|
id="mobile-capture-file"
|
|
accept="image/*,application/pdf"
|
|
capture="environment"
|
|
className="sr-only"
|
|
data-testid="mobile-capture-file"
|
|
onChange={(event) => {
|
|
setSelectedFiles(Array.from(event.target.files ?? []));
|
|
}}
|
|
multiple
|
|
type="file"
|
|
/>
|
|
|
|
<div className="rounded-xl border border-zinc-200 bg-white px-3 py-3 text-sm text-zinc-600">
|
|
<span className="font-medium text-zinc-800">当前文件：</span>
|
|
{selectedFiles.length ? `已选择 ${selectedFiles.length} 个` : "未选择"}
|
|
{selectedFiles.length ? (
|
|
<div className="mt-2 space-y-1 text-xs">
|
|
{selectedFiles.slice(0, 5).map((file) => (
|
|
<div key={`${file.name}-${file.size}`} className="truncate">
|
|
{file.name} ({Math.ceil(file.size / 1024)} KB)
|
|
</div>
|
|
))}
|
|
{selectedFiles.length > 5 ? <div>另有 {selectedFiles.length - 5} 个文件</div> : null}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="grid gap-2 sm:grid-cols-2">
|
|
<Button
|
|
className="min-h-12 w-full"
|
|
data-testid="mobile-capture-upload"
|
|
disabled={uploadMutation.isPending || selectedFiles.length === 0}
|
|
onClick={async () => {
|
|
if (!selectedFiles.length) return;
|
|
|
|
setMessage("");
|
|
setError("");
|
|
|
|
if (!isOnline) {
|
|
const enqueuedItems: MobileUploadQueueItem[] = [];
|
|
for (const file of selectedFiles) {
|
|
enqueuedItems.push(await enqueueInvoiceUpload(file));
|
|
}
|
|
queryClient.setQueryData<MobileUploadQueueItem[]>(["mobile", "invoice-upload-queue"], (current) =>
|
|
[...(current ?? []), ...enqueuedItems].sort((a, b) => a.createdAt.localeCompare(b.createdAt)),
|
|
);
|
|
setSelectedFiles([]);
|
|
setMessage(`当前离线，已加入待上传队列 ${selectedFiles.length} 项`);
|
|
return;
|
|
}
|
|
|
|
uploadMutation.mutate(selectedFiles);
|
|
}}
|
|
type="button"
|
|
>
|
|
{uploadMutation.isPending
|
|
? `上传中 ${uploadProgress.completed}/${uploadProgress.total}`
|
|
: "立即上传"}
|
|
</Button>
|
|
|
|
<Button
|
|
className="min-h-12 w-full"
|
|
data-testid="mobile-capture-sync-queue"
|
|
disabled={!queuedItems.length || syncMutation.isPending || !isOnline}
|
|
onClick={() => syncMutation.mutate(queuedItems)}
|
|
type="button"
|
|
variant="secondary"
|
|
>
|
|
{syncMutation.isPending ? "同步中..." : "同步队列"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="card-std space-y-3 p-4" data-testid="mobile-capture-queue">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<h3 className="text-base font-semibold text-zinc-900">离线上传队列</h3>
|
|
<span className="shrink-0 text-sm text-zinc-500">{queuedCountLabel}</span>
|
|
</div>
|
|
|
|
{queueQuery.isLoading ? <div className="flex items-center gap-2 text-sm text-zinc-500"><Spinner size="sm" />加载中...</div> : null}
|
|
|
|
{!queueQuery.isLoading && queuedItems.length === 0 ? (
|
|
<p className="text-sm text-zinc-500">暂无待上传文件。</p>
|
|
) : null}
|
|
|
|
{queuedItems.map((item) => (
|
|
<div key={item.id} className="rounded-xl border border-zinc-200 bg-white px-3 py-3 text-sm">
|
|
<div className="font-medium text-zinc-800">{item.fileName}</div>
|
|
<div className="text-zinc-500">创建时间：{formatTime(item.createdAt)}</div>
|
|
<div className="mt-2">
|
|
<Button
|
|
className="min-h-11 w-full sm:w-auto"
|
|
data-testid={`mobile-capture-remove-${item.id}`}
|
|
onClick={async () => {
|
|
await removeQueuedInvoiceUpload(item.id);
|
|
queryClient.setQueryData<MobileUploadQueueItem[]>(["mobile", "invoice-upload-queue"], (current) =>
|
|
(current ?? []).filter((queuedItem) => queuedItem.id !== item.id),
|
|
);
|
|
}}
|
|
size="sm"
|
|
type="button"
|
|
variant="secondary"
|
|
>
|
|
移除
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</PageScaffold>
|
|
);
|
|
}
|