wangsli/hyb-oa
1
0
派生 0
代码 工单 合并请求 工作流 3 软件包 项目 发布 百科 活动

统一业务台账首屏设计（05-30-unified-page-design-review）

浏览代码
这个提交包含在：
wangsli
2026-05-30 19:54:22 +08:00
父节点 8423ca63b5
当前提交 d5ef8189f1
共修改 15 个文件，包含 121 行新增和 446 行删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件
client/src/pages/PurchaseRequestsPage.tsx
+8 -156
查看文件
@@ -1,7 +1,7 @@
import { useEffect, useMemo, useRef, useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Link, useSearchParams } from "react-router-dom";
import { Archive, ArrowRight, Clock3, FilePenLine, RotateCcw, Wrench } from "lucide-react";
import { Wrench } from "lucide-react";
import { toast } from "sonner";
import { isApiError } from "../api/types";
import { mapApiErrorMessage } from "../api/errorMessages";
@@ -117,48 +117,6 @@ function statusOptions(): Array<{ value: PurchaseRequestStatus | ""; label: stri
];
}
const PURCHASE_TASK_STATUS_OPTIONS = [
{
value: "rejected",
title: "退回待补材料",
idleNote: "暂无被退回的采购",
activeNote: "按审批意见补材料后重新提交",
icon: RotateCcw,
accentClass: "border-red-200 bg-red-50 text-red-700",
},
{
value: "draft",
title: "草稿待完善",
idleNote: "还没有采购草稿",
activeNote: "继续补供应商、明细和附件",
icon: FilePenLine,
accentClass: "border-amber-200 bg-amber-50 text-amber-700",
},
{
value: "reviewing",
title: "审批中进度",
idleNote: "暂无审批中的采购",
activeNote: "查看当前节点和审批进度",
icon: Clock3,
accentClass: "border-sky-200 bg-sky-50 text-sky-700",
},
{
value: "approved",
title: "待验收 / 归档",
idleNote: "暂无已通过待跟进采购",
activeNote: "核对到货并登记 PO / 合同摘要",
icon: Archive,
accentClass: "border-emerald-200 bg-emerald-50 text-emerald-700",
},
] satisfies Array<{
value: PurchaseRequestStatus;
title: string;
idleNote: string;
activeNote: string;
icon: typeof RotateCcw;
accentClass: string;
}>;
function formatPurchaseCurrency(value: string | number | null | undefined, currencyCode = "CNY") {
const amount = Number(value ?? 0);
if (!Number.isFinite(amount)) {
@@ -486,26 +444,6 @@ export function PurchaseRequestsPage() {
}),
});
const draftSummaryQuery = useQuery({
queryKey: ["purchase-requests", "task-summary", "mine", "draft"],
queryFn: () => fetchPurchaseRequests({ status: "draft", mine: true, page: 1, pageSize: 1 }),
});
const rejectedSummaryQuery = useQuery({
queryKey: ["purchase-requests", "task-summary", "mine", "rejected"],
queryFn: () => fetchPurchaseRequests({ status: "rejected", mine: true, page: 1, pageSize: 1 }),
});
const reviewingSummaryQuery = useQuery({
queryKey: ["purchase-requests", "task-summary", "mine", "reviewing"],
queryFn: () => fetchPurchaseRequests({ status: "reviewing", mine: true, page: 1, pageSize: 1 }),
});
const approvedSummaryQuery = useQuery({
queryKey: ["purchase-requests", "task-summary", "mine", "approved"],
queryFn: () => fetchPurchaseRequests({ status: "approved", mine: true, page: 1, pageSize: 1 }),
});
const detailQuery = useQuery({
enabled: Boolean(selectedId),
queryKey: ["purchase-requests", "detail", selectedId],
@@ -534,22 +472,6 @@ export function PurchaseRequestsPage() {
}
}, [searchParams, selectedId]);
useEffect(() => {
if (selectedId) {
if (detailQuery.isLoading) {
return;
}
if (!detailQuery.isError) {
return;
}
}
const nextId = listQuery.data?.items?.[0]?.id ?? "";
if (nextId !== selectedId) {
setSelectedId(nextId);
}
}, [detailQuery.isError, detailQuery.isLoading, listQuery.data?.items, selectedId]);
useEffect(() => {
const currentId = searchParams.get("id") ?? "";
if (!selectedId && !currentId) {
@@ -645,12 +567,6 @@ export function PurchaseRequestsPage() {
const totalPages = Math.max(1, Math.ceil((listQuery.data?.total ?? 0) / PAGE_SIZE));
const purchaseItems = listQuery.data?.items ?? [];
const taskSummaryTotalByStatus = {
draft: draftSummaryQuery.data?.total,
rejected: rejectedSummaryQuery.data?.total,
reviewing: reviewingSummaryQuery.data?.total,
approved: approvedSummaryQuery.data?.total,
};
const hasAdvancedFilters = Boolean(supplierFilter || legalEntityFilter || costCenterFilter || (canViewAll && !mine));
const canShowLedgerTools =
canViewAll ||
@@ -1000,15 +916,6 @@ export function PurchaseRequestsPage() {
}
};
function focusPurchaseStatus(nextStatus: PurchaseRequestStatus | "") {
setStatus(nextStatus);
setMine(true);
setSupplierFilter("");
setLegalEntityFilter("");
setCostCenterFilter("");
setPage(1);
}
const erpTrack = erpTrackQuery.data ?? null;
const canRetryErp = Boolean(canIntegrationManage && erpTrack?.permissions.canRetry);
const showArchiveSection = Boolean(detail && (detail.status === "approved" || archiveOrder));
@@ -1033,9 +940,7 @@ export function PurchaseRequestsPage() {
<ListWorkspace>
{downloadReasonDialog}
<WorkspaceHeader
eyebrow="采购"
title="采购申请"
subtitle={mine ? "先看与你相关的采购任务，再进入单据核对材料和进度。" : "当前为全范围台账视角，处理动作仍回到详情或审批任务。"}
actions={
canCreate ? (
<Button
@@ -1053,50 +958,12 @@ export function PurchaseRequestsPage() {
{formError ? (
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
{formError}
</p>
</p>
) : null}
<section className="grid gap-3 md:grid-cols-2 xl:grid-cols-4" aria-label="我的采购任务">
{PURCHASE_TASK_STATUS_OPTIONS.map((item) => {
const Icon = item.icon;
const count = taskSummaryTotalByStatus[item.value];
const active = status === item.value && mine && !hasAdvancedFilters;
const displayCount = typeof count === "number" ? count : "-";
return (
<button
className={`card-std min-h-[124px] p-4 text-left transition hover:border-primary/40 hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-200 ${
active ? "border-primary/40 bg-primary/5" : ""
}`}
data-testid={`purchase-task-card-${item.value}`}
key={item.value}
onClick={() => focusPurchaseStatus(item.value)}
type="button"
>
<div className="flex items-start justify-between gap-3">
<span className={`flex size-9 items-center justify-center rounded-lg border ${item.accentClass}`}>
<Icon aria-hidden className="size-4" />
</span>
<ArrowRight aria-hidden className="mt-1 size-4 text-zinc-300" />
</div>
<div className="mt-4 flex items-end justify-between gap-3">
<div className="min-w-0">
<div className="text-sm font-semibold text-zinc-900">{item.title}</div>
<div className="mt-1 text-xs leading-5 text-zinc-500">
{typeof count === "number" && count > 0 ? item.activeNote : item.idleNote}
</div>
</div>
<div className="text-3xl font-semibold tabular-nums text-zinc-950">{displayCount}</div>
</div>
</button>
);
})}
</section>
<FilterBar className="ops-command-bar space-y-3 !p-3 md:!p-3.5">
<div className="ops-command-bar__row">
<div className="min-w-0 space-y-2">
<div className="text-xs font-semibold text-zinc-500">采购记录</div>
<div className="min-w-0">
<Tabs
data-testid="purchase-status-tabs"
value={status}
@@ -1230,7 +1097,7 @@ export function PurchaseRequestsPage() {
) : null}
</FilterBar>
<div className="grid gap-6 xl:grid-cols-[420px_minmax(0,1fr)]">
<div className="grid gap-6">
<div className="card-std space-y-4 p-4 md:p-5">
<div className="flex items-center justify-between">
<h3 className="text-base font-semibold text-zinc-900">采购单列表</h3>
@@ -1296,9 +1163,6 @@ export function PurchaseRequestsPage() {
</div>
<div className={`mt-0.5 ${evidenceHint.className}`}>{evidenceHint.label}</div>
</div>
<div className="col-span-2 rounded-md bg-slate-50 px-2 py-1.5 text-zinc-700">
下一步：{resolvePurchaseNextStep(item)}
</div>
</div>
</button>
);
@@ -1318,7 +1182,7 @@ export function PurchaseRequestsPage() {
<TableHead>金额 / 供应商</TableHead>
<TableHead>项目 / 合同</TableHead>
<TableHead>状态 / 证据</TableHead>
<TableHead>下一步</TableHead>
<TableHead className="w-28">操作</TableHead>
</tr>
</TableHeader>
<TableBody>
@@ -1329,12 +1193,8 @@ export function PurchaseRequestsPage() {
<TableRow
key={item.id}
className={item.id === selectedId ? "bg-zinc-50" : undefined}
onClick={() => {
setSelectedId(item.id);
setHydratedDetailId("");
}}
>
<TableCell className="cursor-pointer">
<TableCell>
<div className="font-medium text-zinc-900">
<CompactBusinessCode value={resolvePurchaseDisplayCode(item)} />
</div>
@@ -1368,11 +1228,7 @@ export function PurchaseRequestsPage() {
<div className={`mt-1 text-xs ${evidenceHint.className}`}>{evidenceHint.label}</div>
</TableCell>
<TableCell>
<div className="max-w-[160px] text-xs leading-5 text-zinc-600" data-testid="purchase-row-next-step">
{resolvePurchaseNextStep(item)}
</div>
<Button
className="mt-2"
data-testid="purchase-row-open"
size="sm"
type="button"
@@ -1413,13 +1269,8 @@ export function PurchaseRequestsPage() {
/>
</div>
{selectedId ? (
<div className="card-std space-y-5 p-4 md:p-5">
{!selectedId ? (
<div className="rounded-lg border border-dashed border-zinc-300 p-8 text-center text-sm text-zinc-500">
请先在左侧选择采购单，或新建一张采购草稿。
</div>
) : null}
{selectedId && detailQuery.isLoading ? <TableSkeleton columns={3} rows={8} /> : null}
{selectedId && detailQuery.isError ? (
@@ -2199,6 +2050,7 @@ export function PurchaseRequestsPage() {
</>
) : null}
</div>
) : null}
</div>
<ActionConfirmDialog
open={Boolean(submitPrecheckConfirm)}