重构审批中心与报销详情降噪(approval-detail-simplification-refactor)
这个提交包含在:
@@ -20,6 +20,9 @@ export interface ReimbursementActionsProps {
|
||||
submitDisabled?: boolean;
|
||||
submitHint?: string;
|
||||
submitNotice?: string;
|
||||
showSubmitAction?: boolean;
|
||||
showWithdrawAction?: boolean;
|
||||
showPayAction?: boolean;
|
||||
isPending: boolean;
|
||||
onSubmit: () => void;
|
||||
onWithdraw: (comment: string) => void;
|
||||
@@ -33,6 +36,9 @@ export function ReimbursementActions({
|
||||
submitDisabled = false,
|
||||
submitHint = "",
|
||||
submitNotice = "",
|
||||
showSubmitAction = true,
|
||||
showWithdrawAction = true,
|
||||
showPayAction = true,
|
||||
isPending,
|
||||
onSubmit,
|
||||
onWithdraw,
|
||||
@@ -43,9 +49,16 @@ export function ReimbursementActions({
|
||||
const [paymentDate, setPaymentDate] = useState("2026-02-08");
|
||||
const [paymentChannel, setPaymentChannel] = useState<PaymentChannel>("bank");
|
||||
const [paymentNote, setPaymentNote] = useState("");
|
||||
const canShowSubmit = showSubmitAction && ["draft", "rejected"].includes(status);
|
||||
const canShowWithdraw = showWithdrawAction && status === "reviewing";
|
||||
const canShowPay = showPayAction && canPay && status === "approved";
|
||||
|
||||
if (!canShowSubmit && !canShowWithdraw && !canShowPay && !actionError && !submitHint && !submitNotice) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="card-std space-y-4 p-6">
|
||||
<div id="reimbursement-action-panel" className="card-std space-y-4 p-6">
|
||||
<h3 className="text-base font-semibold text-zinc-900">可执行动作</h3>
|
||||
|
||||
{actionError ? (
|
||||
@@ -57,16 +70,18 @@ export function ReimbursementActions({
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
data-testid="reimbursement-submit"
|
||||
disabled={isPending || !["draft", "rejected"].includes(status) || submitDisabled}
|
||||
onClick={onSubmit}
|
||||
type="button"
|
||||
>
|
||||
提交报销
|
||||
</Button>
|
||||
</div>
|
||||
{canShowSubmit ? (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
data-testid="reimbursement-submit"
|
||||
disabled={isPending || submitDisabled}
|
||||
onClick={onSubmit}
|
||||
type="button"
|
||||
>
|
||||
提交报销
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
{submitHint ? <p className="text-sm text-zinc-500">{submitHint}</p> : null}
|
||||
{submitNotice ? (
|
||||
<p className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-700">
|
||||
@@ -74,7 +89,7 @@ export function ReimbursementActions({
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{status === "reviewing" ? (
|
||||
{canShowWithdraw ? (
|
||||
<div className="space-y-2 rounded-lg border border-zinc-200 p-4">
|
||||
<p className="text-sm font-medium text-zinc-800">撤回报销</p>
|
||||
<Textarea
|
||||
@@ -95,7 +110,7 @@ export function ReimbursementActions({
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{canPay ? (
|
||||
{canShowPay ? (
|
||||
<div className="space-y-2 rounded-lg border border-zinc-200 p-4">
|
||||
<p className="text-sm font-medium text-zinc-800">财务支付</p>
|
||||
<Input
|
||||
@@ -134,7 +149,7 @@ export function ReimbursementActions({
|
||||
<Button
|
||||
data-testid="reimbursement-pay"
|
||||
variant="secondary"
|
||||
disabled={isPending || !["approved", "paid"].includes(status)}
|
||||
disabled={isPending}
|
||||
onClick={() =>
|
||||
onPay({
|
||||
paymentVoucherNo: paymentVoucherNo.trim(),
|
||||
|
||||
在新工单中引用
屏蔽一个用户