59 行
2.7 KiB
TypeScript
59 行
2.7 KiB
TypeScript
import type { ReimbursementEvidenceCapabilities } from "./ReimbursementItemEvidenceList";
|
|
import { ReimbursementItemEvidenceList } from "./ReimbursementItemEvidenceList";
|
|
import type { ReimbursementWorkspaceModel, ReimbursementWorkspaceSlots } from "../../lib/reimbursementWorkspace";
|
|
import { formatDisplayDate, formatMoney } from "../../lib/displayFormat";
|
|
import { MobileDetailHeader } from "../mobile/MobileDetailHeader";
|
|
import { MOBILE_STICKY_ACTION_PAGE_CLASS } from "../patterns/MobileStickyActionBar";
|
|
import { PageScaffold } from "../patterns/PageScaffold";
|
|
|
|
type Props = {
|
|
model: ReimbursementWorkspaceModel;
|
|
capabilities?: ReimbursementEvidenceCapabilities;
|
|
slots: ReimbursementWorkspaceSlots;
|
|
fallbackTo: string;
|
|
};
|
|
|
|
export function ReimbursementMobileWorkspaceShell({ model, capabilities, slots, fallbackTo }: Props) {
|
|
return (
|
|
<PageScaffold className={slots.mobileActions ? MOBILE_STICKY_ACTION_PAGE_CLASS : undefined} data-testid="reimbursement-mobile-workspace">
|
|
<MobileDetailHeader
|
|
fallbackTo={fallbackTo}
|
|
status={slots.status}
|
|
subtitle="报销详情"
|
|
testId="mobile-reimbursement-detail-header"
|
|
title={model.header.displayCode}
|
|
/>
|
|
{slots.transientFeedback}
|
|
<section className="mobile-card mobile-focus-card mobile-page-stack">
|
|
<div>
|
|
<p className="text-xs text-zinc-500">报销合计</p>
|
|
<p className="mt-1 text-3xl font-semibold text-zinc-950">{formatMoney(model.header.totalAmount)}</p>
|
|
</div>
|
|
<div className="mobile-info-grid">
|
|
<div className="mobile-list-card">
|
|
<p className="text-xs text-zinc-500">报销人</p>
|
|
<p className="mt-1 font-medium text-zinc-900">{model.header.ownerName}</p>
|
|
</div>
|
|
<div className="mobile-list-card">
|
|
<p className="text-xs text-zinc-500">报销日期</p>
|
|
<p className="mt-1 font-medium text-zinc-900">{formatDisplayDate(model.header.reimbursementDate)}</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-zinc-500">事由</p>
|
|
<p className="mt-1 text-sm leading-6 text-zinc-700">{model.header.description || "未填写事由"}</p>
|
|
</div>
|
|
{slots.headerDetails}
|
|
</section>
|
|
{slots.beforeEvidence}
|
|
<section className="mobile-card scroll-mt-20" data-testid="reimbursement-workspace-evidence" id="reimbursement-workspace-evidence">
|
|
<h2 className="mb-3 text-base font-semibold text-zinc-900">明细与票据</h2>
|
|
<ReimbursementItemEvidenceList evidence={model.evidence} capabilities={capabilities} mobile />
|
|
</section>
|
|
{slots.afterEvidence}
|
|
{slots.timeline}
|
|
{slots.mobileActions}
|
|
</PageScaffold>
|
|
);
|
|
}
|