52 行
2.3 KiB
TypeScript
52 行
2.3 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 { BusinessDetailAside, BusinessDetailMain, BusinessDetailWorkspace } from "../patterns/BusinessDetailTemplate";
|
|
import { EntityOverviewHero } from "../patterns/EntityOverviewHero";
|
|
import { PageScaffold } from "../patterns/PageScaffold";
|
|
import { SectionPanel } from "../patterns/SectionPanel";
|
|
|
|
type Props = {
|
|
model: ReimbursementWorkspaceModel;
|
|
capabilities?: ReimbursementEvidenceCapabilities;
|
|
slots: ReimbursementWorkspaceSlots;
|
|
};
|
|
|
|
export function ReimbursementDesktopWorkspaceShell({ model, capabilities, slots }: Props) {
|
|
return (
|
|
<PageScaffold data-testid="reimbursement-desktop-workspace">
|
|
{slots.backAction}
|
|
<EntityOverviewHero
|
|
title={`报销单 ${model.header.displayCode}`}
|
|
subtitle={model.header.description || "未填写事由"}
|
|
meta={(
|
|
<>
|
|
{slots.status}
|
|
<span className="info-chip">报销人：{model.header.ownerName}</span>
|
|
<span className="info-chip">日期：{formatDisplayDate(model.header.reimbursementDate)}</span>
|
|
<span className="info-chip">合计：{formatMoney(model.amountSummary.authoritativeTotalAmount)}</span>
|
|
</>
|
|
)}
|
|
/>
|
|
{slots.transientFeedback}
|
|
<BusinessDetailWorkspace className="detail-workspace-grid--payment mx-auto w-full max-w-7xl">
|
|
<BusinessDetailMain>
|
|
{slots.headerDetails}
|
|
{slots.beforeEvidence}
|
|
<SectionPanel title="报销内容" className="scroll-mt-24">
|
|
<div id="reimbursement-workspace-evidence">
|
|
<ReimbursementItemEvidenceList amountSummary={model.amountSummary} evidence={model.evidence} capabilities={capabilities} />
|
|
</div>
|
|
</SectionPanel>
|
|
{slots.afterEvidence}
|
|
</BusinessDetailMain>
|
|
<BusinessDetailAside>
|
|
{slots.actionPanel}
|
|
{slots.asideContext}
|
|
</BusinessDetailAside>
|
|
</BusinessDetailWorkspace>
|
|
</PageScaffold>
|
|
);
|
|
}
|