657 行
25 KiB
TypeScript
657 行
25 KiB
TypeScript
import { useEffect, useMemo, useState } from "react";
|
||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||
import { useNavigate, useSearchParams } from "react-router-dom";
|
||
import { toast } from "sonner";
|
||
import { fetchAssets, type AssetItem } from "../api/assets";
|
||
import { mapApiErrorMessage } from "../api/errorMessages";
|
||
import {
|
||
fetchInventoryChecks,
|
||
recordInventoryItems,
|
||
startInventoryCheck,
|
||
type InventoryCheck,
|
||
type InventoryCheckResult,
|
||
} from "../api/inventoryChecks";
|
||
import { isApiError } from "../api/types";
|
||
import { useAuth } from "../auth/AuthContext";
|
||
import { hasPermission } from "../auth/permissions";
|
||
import { ActionConfirmDialog } from "../components/common/ActionConfirmDialog";
|
||
import { PageHeader } from "../components/common/PageHeader";
|
||
import { BarcodeScannerPanel } from "../components/mobile/BarcodeScannerPanel";
|
||
import { PageScaffold } from "../components/patterns/PageScaffold";
|
||
import { Button } from "../components/ui/button";
|
||
import { Input } from "../components/ui/input";
|
||
import {
|
||
enqueueInventoryScan,
|
||
listQueuedInventoryScans,
|
||
removeQueuedInventoryScan,
|
||
updateQueuedInventoryScanError,
|
||
type QueuedInventoryScanItem,
|
||
} from "../mobile/inventoryScanQueue";
|
||
|
||
function resolveErrorMessage(error: unknown) {
|
||
if (isApiError(error)) {
|
||
return `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
|
||
}
|
||
if (error instanceof Error) {
|
||
return error.message;
|
||
}
|
||
return "请求失败，请稍后重试。";
|
||
}
|
||
|
||
function statusLabel(status: string) {
|
||
switch (status) {
|
||
case "in_stock":
|
||
return "库存中";
|
||
case "in_use":
|
||
return "使用中";
|
||
case "under_repair":
|
||
return "维修中";
|
||
case "retired":
|
||
return "已退役";
|
||
case "archived":
|
||
return "已归档";
|
||
default:
|
||
return status;
|
||
}
|
||
}
|
||
|
||
function inventoryStatusLabel(status: string) {
|
||
switch (status) {
|
||
case "draft":
|
||
return "草稿";
|
||
case "counting":
|
||
return "盘点中";
|
||
case "completed":
|
||
return "已完成";
|
||
default:
|
||
return status;
|
||
}
|
||
}
|
||
|
||
function inventoryResultLabel(result: InventoryCheckResult) {
|
||
switch (result) {
|
||
case "matched":
|
||
return "一致";
|
||
case "missing":
|
||
return "缺失";
|
||
case "extra":
|
||
return "盘盈";
|
||
case "damaged":
|
||
return "损坏";
|
||
default:
|
||
return result;
|
||
}
|
||
}
|
||
|
||
function assetTypeLabel(assetType: AssetItem["assetType"]) {
|
||
switch (assetType) {
|
||
case "fixed_asset":
|
||
return "固定资产 FA";
|
||
case "electronic_document":
|
||
return "电子资料 EA-DOC";
|
||
case "electronic_system":
|
||
return "电子系统 EA-SYS";
|
||
case "code_repository":
|
||
return "代码仓库 EA-REPO";
|
||
case "backup_media":
|
||
return "备份介质 EA-BKP";
|
||
default:
|
||
return "资产";
|
||
}
|
||
}
|
||
|
||
function inventoryScopeLabel(inventoryCheck: InventoryCheck) {
|
||
if (inventoryCheck.scopeType === "all") return "全量盘点";
|
||
if (inventoryCheck.scopeType === "legal_entity") return "法体盘点";
|
||
if (inventoryCheck.scopeType === "cost_center") return "成本中心盘点";
|
||
return "位置盘点";
|
||
}
|
||
|
||
function formatDateTime(value: string) {
|
||
try {
|
||
return new Date(value).toLocaleString("zh-CN");
|
||
} catch {
|
||
return value;
|
||
}
|
||
}
|
||
|
||
function matchesInventoryScope(asset: AssetItem, inventoryCheck: InventoryCheck | null) {
|
||
if (!inventoryCheck) {
|
||
return true;
|
||
}
|
||
if (inventoryCheck.scopeType === "all") {
|
||
return true;
|
||
}
|
||
if (inventoryCheck.scopeType === "legal_entity") {
|
||
return asset.legalEntityId === inventoryCheck.scopeRefId;
|
||
}
|
||
if (inventoryCheck.scopeType === "cost_center") {
|
||
return asset.costCenterId === inventoryCheck.scopeRefId;
|
||
}
|
||
return (asset.location ?? "") === (inventoryCheck.scopeRefId ?? "");
|
||
}
|
||
|
||
export function MobileAssetScanPage() {
|
||
const navigate = useNavigate();
|
||
const queryClient = useQueryClient();
|
||
const { permissions } = useAuth();
|
||
const [searchParams] = useSearchParams();
|
||
const inventoryCheckId = searchParams.get("inventoryCheckId") ?? "";
|
||
const isInventoryMode = Boolean(inventoryCheckId);
|
||
const canRecordInventory = hasPermission(permissions, "asset.inventory");
|
||
|
||
const [isOnline, setIsOnline] = useState<boolean>(navigator.onLine);
|
||
const [searchInput, setSearchInput] = useState("");
|
||
const [searchResults, setSearchResults] = useState<AssetItem[]>([]);
|
||
const [selectedAssetId, setSelectedAssetId] = useState("");
|
||
const [message, setMessage] = useState("");
|
||
const [error, setError] = useState("");
|
||
const [recordResult, setRecordResult] = useState<InventoryCheckResult>("matched");
|
||
const [recordNote, setRecordNote] = useState("");
|
||
const [confirmRecordScan, setConfirmRecordScan] = useState(false);
|
||
|
||
const inventoryChecksQuery = useQuery({
|
||
enabled: isInventoryMode && canRecordInventory,
|
||
queryKey: ["mobile", "asset-scan", "inventory-checks"],
|
||
queryFn: () => fetchInventoryChecks(),
|
||
});
|
||
|
||
const queueQuery = useQuery({
|
||
enabled: isInventoryMode && canRecordInventory,
|
||
queryKey: ["mobile", "inventory-scan-queue"],
|
||
queryFn: () => listQueuedInventoryScans(),
|
||
});
|
||
|
||
const selectedInventoryCheck = useMemo(() => {
|
||
if (!isInventoryMode) {
|
||
return null;
|
||
}
|
||
return (inventoryChecksQuery.data?.items ?? []).find((item) => item.id === inventoryCheckId) ?? null;
|
||
}, [inventoryCheckId, inventoryChecksQuery.data?.items, isInventoryMode]);
|
||
|
||
const filteredSearchResults = useMemo(() => {
|
||
return searchResults.filter((item) => matchesInventoryScope(item, selectedInventoryCheck));
|
||
}, [searchResults, selectedInventoryCheck]);
|
||
|
||
const selectedAsset = useMemo(
|
||
() => filteredSearchResults.find((item) => item.id === selectedAssetId) ?? null,
|
||
[filteredSearchResults, selectedAssetId],
|
||
);
|
||
|
||
const currentQueueItems = useMemo(() => {
|
||
const items = queueQuery.data ?? [];
|
||
if (!inventoryCheckId) {
|
||
return items;
|
||
}
|
||
return items.filter((item) => item.inventoryCheckId === inventoryCheckId);
|
||
}, [inventoryCheckId, queueQuery.data]);
|
||
|
||
const searchMutation = useMutation({
|
||
mutationFn: async (keyword: string) => fetchAssets({ q: keyword }),
|
||
onSuccess: (data, keyword) => {
|
||
const items = data.items;
|
||
setSearchResults(items);
|
||
setSelectedAssetId("");
|
||
setError("");
|
||
|
||
const inScopeItems = items.filter((item) => matchesInventoryScope(item, selectedInventoryCheck));
|
||
if (!items.length) {
|
||
setMessage(`未找到与“${keyword}”匹配的资产`);
|
||
return;
|
||
}
|
||
if (!inScopeItems.length) {
|
||
setMessage("已命中资产，但不在当前盘点范围内");
|
||
return;
|
||
}
|
||
if (inScopeItems.length === 1) {
|
||
setSelectedAssetId(inScopeItems[0].id);
|
||
setMessage(`已定位资产：${inScopeItems[0].assetNo}`);
|
||
return;
|
||
}
|
||
setMessage(`找到 ${inScopeItems.length} 条候选，请手动选择目标资产`);
|
||
},
|
||
onError: (searchError) => {
|
||
setSearchResults([]);
|
||
setSelectedAssetId("");
|
||
setError(resolveErrorMessage(searchError));
|
||
setMessage("");
|
||
},
|
||
});
|
||
|
||
const startCheckMutation = useMutation({
|
||
mutationFn: async () => {
|
||
if (!selectedInventoryCheck) {
|
||
throw new Error("未找到盘点任务");
|
||
}
|
||
return startInventoryCheck(selectedInventoryCheck.id);
|
||
},
|
||
onSuccess: async () => {
|
||
await queryClient.invalidateQueries({ queryKey: ["mobile", "asset-scan", "inventory-checks"] });
|
||
setError("");
|
||
setMessage("盘点任务已启动，可继续扫码录入。");
|
||
toast.success("盘点任务已启动");
|
||
},
|
||
onError: (startError) => {
|
||
const nextError = resolveErrorMessage(startError);
|
||
setError(nextError);
|
||
toast.error(nextError);
|
||
},
|
||
});
|
||
|
||
const recordMutation = useMutation({
|
||
mutationFn: async () => {
|
||
if (!selectedInventoryCheck) {
|
||
throw new Error("未找到盘点任务");
|
||
}
|
||
if (!selectedAsset) {
|
||
throw new Error("请先选择资产");
|
||
}
|
||
return recordInventoryItems(selectedInventoryCheck.id, {
|
||
items: [
|
||
{
|
||
assetId: selectedAsset.id,
|
||
result: recordResult,
|
||
note: recordNote.trim() || null,
|
||
},
|
||
],
|
||
});
|
||
},
|
||
onSuccess: async () => {
|
||
await queryClient.invalidateQueries({ queryKey: ["mobile", "asset-scan", "inventory-checks"] });
|
||
setError("");
|
||
setMessage("盘点结果已提交");
|
||
setRecordNote("");
|
||
toast.success("盘点结果已提交");
|
||
},
|
||
onError: (recordError) => {
|
||
const nextError = resolveErrorMessage(recordError);
|
||
setError(nextError);
|
||
toast.error(nextError);
|
||
},
|
||
});
|
||
|
||
const syncMutation = useMutation({
|
||
mutationFn: async (items: QueuedInventoryScanItem[]) => {
|
||
let succeeded = 0;
|
||
let failed = 0;
|
||
|
||
for (const item of items) {
|
||
try {
|
||
await recordInventoryItems(item.inventoryCheckId, {
|
||
items: [
|
||
{
|
||
assetId: item.assetId,
|
||
result: item.result,
|
||
note: item.note,
|
||
},
|
||
],
|
||
});
|
||
await removeQueuedInventoryScan(item.id);
|
||
succeeded += 1;
|
||
} catch (syncError) {
|
||
failed += 1;
|
||
await updateQueuedInventoryScanError(item.id, resolveErrorMessage(syncError));
|
||
}
|
||
}
|
||
|
||
return { succeeded, failed };
|
||
},
|
||
onSuccess: async (result) => {
|
||
await Promise.all([
|
||
queryClient.invalidateQueries({ queryKey: ["mobile", "inventory-scan-queue"] }),
|
||
queryClient.invalidateQueries({ queryKey: ["mobile", "asset-scan", "inventory-checks"] }),
|
||
]);
|
||
setError("");
|
||
if (result.succeeded || result.failed) {
|
||
setMessage(`队列同步完成：成功 ${result.succeeded}，失败 ${result.failed}`);
|
||
}
|
||
if (result.succeeded) {
|
||
toast.success(`队列同步完成：成功 ${result.succeeded}，失败 ${result.failed}`);
|
||
}
|
||
},
|
||
onError: (syncError) => {
|
||
const nextError = resolveErrorMessage(syncError);
|
||
setError(nextError);
|
||
toast.error(nextError);
|
||
},
|
||
});
|
||
|
||
useEffect(() => {
|
||
const onOnline = () => {
|
||
setIsOnline(true);
|
||
if ((queueQuery.data ?? []).length && canRecordInventory) {
|
||
syncMutation.mutate(queueQuery.data ?? []);
|
||
}
|
||
};
|
||
const onOffline = () => setIsOnline(false);
|
||
|
||
window.addEventListener("online", onOnline);
|
||
window.addEventListener("offline", onOffline);
|
||
|
||
return () => {
|
||
window.removeEventListener("online", onOnline);
|
||
window.removeEventListener("offline", onOffline);
|
||
};
|
||
}, [canRecordInventory, queueQuery.data, syncMutation]);
|
||
|
||
const handleSearch = async (rawValue = searchInput) => {
|
||
const keyword = rawValue.trim();
|
||
setSearchInput(keyword);
|
||
setMessage("");
|
||
setError("");
|
||
|
||
if (!keyword) {
|
||
setError("请输入资产编号、序列号或名称");
|
||
return;
|
||
}
|
||
|
||
if (!isOnline) {
|
||
setError("当前离线，无法查找新资产。若已解析资产，可直接提交离线盘点结果。");
|
||
return;
|
||
}
|
||
|
||
await searchMutation.mutateAsync(keyword);
|
||
};
|
||
|
||
const handleOfflineQueue = async () => {
|
||
if (!selectedInventoryCheck) {
|
||
setError("未找到盘点任务，无法离线缓存");
|
||
return;
|
||
}
|
||
if (!selectedAsset) {
|
||
setError("请先在线解析出目标资产");
|
||
return;
|
||
}
|
||
if (selectedInventoryCheck.status !== "counting") {
|
||
setError("仅盘点中的任务支持离线缓存结果");
|
||
return;
|
||
}
|
||
|
||
await enqueueInventoryScan({
|
||
inventoryCheckId: selectedInventoryCheck.id,
|
||
assetId: selectedAsset.id,
|
||
assetNo: selectedAsset.assetNo,
|
||
result: recordResult,
|
||
note: recordNote,
|
||
});
|
||
await queryClient.invalidateQueries({ queryKey: ["mobile", "inventory-scan-queue"] });
|
||
setError("");
|
||
setMessage("当前离线，盘点结果已加入待同步队列");
|
||
toast.success("已加入离线队列");
|
||
};
|
||
|
||
const handleRecord = async () => {
|
||
if (!canRecordInventory) {
|
||
setError("当前账号没有盘点录入权限");
|
||
return;
|
||
}
|
||
if (!selectedInventoryCheck) {
|
||
setError("未找到盘点任务");
|
||
return;
|
||
}
|
||
if (selectedInventoryCheck.status === "draft") {
|
||
setError("请先启动盘点任务再记录结果");
|
||
return;
|
||
}
|
||
if (selectedInventoryCheck.status === "completed") {
|
||
setError("盘点任务已完成，不能继续录入");
|
||
return;
|
||
}
|
||
|
||
if (!isOnline) {
|
||
await handleOfflineQueue();
|
||
return;
|
||
}
|
||
|
||
await recordMutation.mutateAsync();
|
||
};
|
||
|
||
const actions = (
|
||
<div className="flex flex-wrap gap-2">
|
||
{isInventoryMode ? (
|
||
<Button type="button" variant="secondary" onClick={() => navigate("/mobile/assets/scan")}>
|
||
返回盘点页
|
||
</Button>
|
||
) : (
|
||
<Button type="button" variant="secondary" onClick={() => navigate("/mobile")}>
|
||
返回移动工作台
|
||
</Button>
|
||
)}
|
||
</div>
|
||
);
|
||
|
||
return (
|
||
<PageScaffold className="mobile-page-stack">
|
||
<PageHeader
|
||
title={isInventoryMode ? "移动扫码盘点" : "移动资产扫码"}
|
||
subtitle={isInventoryMode ? "在盘点任务上下文中扫码定位资产并快捷录入结果。" : "扫码或手工输入资产编号，快速查看资产卡片。"}
|
||
actions={actions}
|
||
/>
|
||
|
||
<section className="mobile-card mobile-focus-card mobile-page-stack" data-testid="mobile-asset-scan-focus">
|
||
<div className="mobile-section-header mobile-section-header--top">
|
||
<div>
|
||
<h3 className="mobile-section-title">{isInventoryMode ? "先扫码，再确认盘点" : "扫码查资产"}</h3>
|
||
<p className="mt-1 text-sm text-zinc-600">二维码不可用时，可输入资产编号、序列号或名称兜底。</p>
|
||
</div>
|
||
<span className={`mobile-section-meta ${isOnline ? "text-emerald-600" : "text-orange-600"}`}>{isOnline ? "在线" : "离线"}</span>
|
||
</div>
|
||
<div className="mobile-info-grid text-sm">
|
||
<div className="mobile-subcard">模式：{isInventoryMode ? "盘点录入" : "资产查看"}</div>
|
||
<div className="mobile-subcard">确认：先看摘要，再提交</div>
|
||
<div className="mobile-subcard">范围：{selectedInventoryCheck ? inventoryScopeLabel(selectedInventoryCheck) : "按当前权限"}</div>
|
||
</div>
|
||
</section>
|
||
|
||
{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}
|
||
|
||
{isInventoryMode ? (
|
||
<div className="mobile-card space-y-3" data-testid="mobile-asset-scan-inventory-context">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<div>
|
||
<h3 className="text-base font-semibold text-zinc-900">盘点任务上下文</h3>
|
||
<p className="text-sm text-zinc-500">任务 ID：{inventoryCheckId}</p>
|
||
</div>
|
||
<span className={`text-sm ${isOnline ? "text-emerald-600" : "text-orange-600"}`}>{isOnline ? "在线" : "离线"}</span>
|
||
</div>
|
||
|
||
{!canRecordInventory ? (
|
||
<p className="rounded-lg border border-orange-200 bg-orange-50 px-3 py-2 text-sm text-orange-700">当前账号没有盘点权限，只能查看扫码结果，不能录入盘点。</p>
|
||
) : null}
|
||
|
||
{canRecordInventory && inventoryChecksQuery.isLoading ? (
|
||
<p className="text-sm text-zinc-500">正在加载盘点任务...</p>
|
||
) : null}
|
||
|
||
{canRecordInventory && inventoryChecksQuery.isError ? (
|
||
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{resolveErrorMessage(inventoryChecksQuery.error)}</p>
|
||
) : null}
|
||
|
||
{canRecordInventory && !inventoryChecksQuery.isLoading && !selectedInventoryCheck ? (
|
||
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">未找到对应盘点任务，无法进入盘点录入模式。</p>
|
||
) : null}
|
||
|
||
{selectedInventoryCheck ? (
|
||
<div className="mobile-list-card flex flex-wrap items-center justify-between gap-3 text-sm">
|
||
<div>
|
||
<div className="font-medium text-zinc-900">{selectedInventoryCheck.checkNo}</div>
|
||
<div className="text-zinc-500">状态：{inventoryStatusLabel(selectedInventoryCheck.status)} · 范围：{inventoryScopeLabel(selectedInventoryCheck)} / {selectedInventoryCheck.scopeRefId ?? "全量"}</div>
|
||
</div>
|
||
{canRecordInventory && selectedInventoryCheck.status === "draft" ? (
|
||
<Button type="button" onClick={() => startCheckMutation.mutate()} disabled={startCheckMutation.isPending}>
|
||
{startCheckMutation.isPending ? "启动中..." : "开始并扫码"}
|
||
</Button>
|
||
) : null}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
) : null}
|
||
|
||
<BarcodeScannerPanel
|
||
disabled={searchMutation.isPending || (isInventoryMode && selectedInventoryCheck?.status === "draft")}
|
||
onDetected={(rawValue) => {
|
||
setSearchInput(rawValue);
|
||
void handleSearch(rawValue);
|
||
}}
|
||
/>
|
||
|
||
<div className="mobile-card space-y-3" data-testid="mobile-asset-scan-search">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<h3 className="text-base font-semibold text-zinc-900">手工输入 / 搜索</h3>
|
||
<span className={`text-sm ${isOnline ? "text-emerald-600" : "text-orange-600"}`}>{isOnline ? "在线" : "离线"}</span>
|
||
</div>
|
||
|
||
<div className="grid gap-2 min-[390px]:grid-cols-[minmax(0,1fr)_auto]">
|
||
<Input
|
||
data-testid="mobile-asset-scan-input"
|
||
value={searchInput}
|
||
onChange={(event) => setSearchInput(event.target.value)}
|
||
placeholder="输入资产编号、序列号或名称"
|
||
/>
|
||
<Button type="button" onClick={() => void handleSearch()} disabled={searchMutation.isPending}>
|
||
{searchMutation.isPending ? "查询中..." : "查询资产"}
|
||
</Button>
|
||
</div>
|
||
|
||
{!isOnline ? (
|
||
<p className="text-sm text-zinc-500">离线状态下不可解析新资产；若当前页面已解析出目标资产，可继续离线缓存盘点结果。</p>
|
||
) : null}
|
||
</div>
|
||
|
||
{filteredSearchResults.length > 1 ? (
|
||
<div className="mobile-card space-y-3" data-testid="mobile-asset-scan-candidates">
|
||
<h3 className="text-base font-semibold text-zinc-900">候选资产</h3>
|
||
<div className="space-y-2">
|
||
{filteredSearchResults.map((item) => (
|
||
<button
|
||
key={item.id}
|
||
type="button"
|
||
className={`mobile-list-card w-full text-left text-sm ${selectedAssetId === item.id ? "border-primary bg-primary-50 text-primary" : "border-zinc-200 bg-white text-zinc-800"}`}
|
||
onClick={() => setSelectedAssetId(item.id)}
|
||
data-testid={`mobile-asset-scan-candidate-${item.id}`}
|
||
>
|
||
<div className="font-medium">{item.assetNo} · {item.name}</div>
|
||
<div className="text-xs text-zinc-500">状态：{statusLabel(item.status)} · 位置：{item.location ?? "未设置"}</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
|
||
{selectedAsset ? (
|
||
<div className="mobile-card mobile-focus-card space-y-4" data-testid="mobile-asset-scan-detail">
|
||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-zinc-900">{selectedAsset.assetNo}</h3>
|
||
<p className="text-sm text-zinc-500">{selectedAsset.name}</p>
|
||
</div>
|
||
<Button type="button" variant="secondary" onClick={() => navigate("/mobile/assets/scan")}>
|
||
继续扫码
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="mobile-info-grid">
|
||
<div className="mobile-subcard text-sm">类型：{assetTypeLabel(selectedAsset.assetType)}</div>
|
||
<div className="mobile-subcard text-sm">状态：{statusLabel(selectedAsset.status)}</div>
|
||
<div className="mobile-subcard text-sm">法体：{selectedAsset.legalEntity?.name ?? "-"}</div>
|
||
<div className="mobile-subcard text-sm">成本中心：{selectedAsset.costCenter?.name ?? "-"}</div>
|
||
<div className="mobile-subcard text-sm">位置：{selectedAsset.location ?? "-"}</div>
|
||
<div className="mobile-subcard text-sm">归属人：{selectedAsset.assignee?.name ?? "未分配"}</div>
|
||
<div className="mobile-subcard text-sm">序列号：{selectedAsset.serialNo ?? "-"}</div>
|
||
<div className="mobile-subcard text-sm">责任人：{selectedAsset.owner?.name ?? "-"}</div>
|
||
</div>
|
||
|
||
{isInventoryMode && canRecordInventory && selectedInventoryCheck ? (
|
||
<div className="mobile-subcard space-y-3 bg-zinc-50">
|
||
<div>
|
||
<h4 className="text-sm font-semibold text-zinc-900">盘点录入</h4>
|
||
<p className="text-xs text-zinc-500">仅在盘点中的任务可提交或离线缓存结果。</p>
|
||
</div>
|
||
<div className="mobile-info-grid">
|
||
<div className="space-y-2">
|
||
<label className="text-sm font-medium text-zinc-700">盘点结果</label>
|
||
<select className="select-std" value={recordResult} onChange={(event) => setRecordResult(event.target.value as InventoryCheckResult)}>
|
||
<option value="matched">一致</option>
|
||
<option value="missing">缺失</option>
|
||
<option value="extra">盘盈</option>
|
||
<option value="damaged">损坏</option>
|
||
</select>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<label className="text-sm font-medium text-zinc-700">备注</label>
|
||
<Input value={recordNote} onChange={(event) => setRecordNote(event.target.value)} placeholder="可选备注" />
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
<Button
|
||
type="button"
|
||
onClick={() => setConfirmRecordScan(true)}
|
||
disabled={recordMutation.isPending || !selectedInventoryCheck || selectedInventoryCheck.status === "completed"}
|
||
>
|
||
{isOnline ? (recordMutation.isPending ? "提交中..." : "提交盘点结果") : "离线加入队列"}
|
||
</Button>
|
||
{currentQueueItems.length ? (
|
||
<Button type="button" variant="secondary" disabled={!isOnline || syncMutation.isPending} onClick={() => syncMutation.mutate(currentQueueItems)}>
|
||
{syncMutation.isPending ? "同步中..." : `同步队列 (${currentQueueItems.length})`}
|
||
</Button>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
) : null}
|
||
|
||
{isInventoryMode && canRecordInventory ? (
|
||
<div className="mobile-card space-y-3" data-testid="mobile-asset-scan-queue">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<h3 className="text-base font-semibold text-zinc-900">离线盘点队列</h3>
|
||
<span className="text-sm text-zinc-500">{currentQueueItems.length ? `待同步 ${currentQueueItems.length} 项` : "无待同步项"}</span>
|
||
</div>
|
||
|
||
{!currentQueueItems.length ? (
|
||
<p className="text-sm text-zinc-500">当前任务暂无离线队列。</p>
|
||
) : null}
|
||
|
||
{currentQueueItems.map((item) => (
|
||
<div key={item.id} className="mobile-list-card text-sm">
|
||
<div className="font-medium text-zinc-900">{item.assetNo}</div>
|
||
<div className="text-zinc-500">结果：{inventoryResultLabel(item.result)} · 创建时间：{formatDateTime(item.createdAt)}</div>
|
||
<div className="text-zinc-500">备注：{item.note ?? "-"}</div>
|
||
<div className="text-zinc-500">最近错误：{item.lastError ?? "-"}</div>
|
||
<div className="mt-2">
|
||
<Button
|
||
type="button"
|
||
size="sm"
|
||
variant="secondary"
|
||
onClick={async () => {
|
||
await removeQueuedInventoryScan(item.id);
|
||
await queryClient.invalidateQueries({ queryKey: ["mobile", "inventory-scan-queue"] });
|
||
}}
|
||
>
|
||
移除
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : null}
|
||
|
||
<ActionConfirmDialog
|
||
open={confirmRecordScan}
|
||
onOpenChange={setConfirmRecordScan}
|
||
kind="submit"
|
||
targetName={selectedAsset?.assetNo}
|
||
description={`将按“${inventoryResultLabel(recordResult)}”记录当前资产盘点结果${isOnline ? "" : "，当前离线时会先进入待同步队列"}。请确认资产名称、位置和责任人摘要无误。`}
|
||
confirmLabel={isOnline ? "确认提交结果" : "确认加入队列"}
|
||
onConfirm={() => handleRecord()}
|
||
/>
|
||
</PageScaffold>
|
||
);
|
||
}
|