feat(P20T2-4): 差旅支付轨道卡片与发票绑定前端交互

client/src/pages/invoice-pool/InvoiceBindCard.tsx

@@ -1,30 +1,68 @@
 import type { UseMutationResult, UseQueryResult } from "@tanstack/react-query";
 import type { InvoicePoolListResponse } from "../../api/invoicePool";
 import type { ReimbursementListResponse } from "../../api/reimbursements";
+import type { TravelRequestDetail, TravelRequestListResponse } from "../../api/travelRequests";
 import { Button } from "../../components/ui/button";
 
+export type InvoiceBindMode = "reimbursement" | "travelOrder";
+
 export type InvoiceBindCardProps = {
   listQuery: UseQueryResult<InvoicePoolListResponse, Error>;
   reimbursementQuery: UseQueryResult<ReimbursementListResponse, Error>;
+  travelRequestQuery: UseQueryResult<TravelRequestListResponse, Error>;
+  travelRequestDetailQuery: UseQueryResult<TravelRequestDetail, Error>;
   bindMutation: UseMutationResult<Record<string, unknown>, Error, void>;
+  bindMode: InvoiceBindMode;
+  setBindMode: (mode: InvoiceBindMode) => void;
+  canManageTravelPayments: boolean;
   selectedInvoiceId: string;
   setSelectedInvoiceId: (id: string) => void;
   selectedReimbursementId: string;
   setSelectedReimbursementId: (id: string) => void;
+  selectedTravelRequestId: string;
+  setSelectedTravelRequestId: (id: string) => void;
+  selectedTravelOrderId: string;
+  setSelectedTravelOrderId: (id: string) => void;
 };
 
 export function InvoiceBindCard({
   listQuery,
   reimbursementQuery,
+  travelRequestQuery,
+  travelRequestDetailQuery,
   bindMutation,
+  bindMode,
+  setBindMode,
+  canManageTravelPayments,
   selectedInvoiceId,
   setSelectedInvoiceId,
   selectedReimbursementId,
   setSelectedReimbursementId,
+  selectedTravelRequestId,
+  setSelectedTravelRequestId,
+  selectedTravelOrderId,
+  setSelectedTravelOrderId,
 }: InvoiceBindCardProps) {
+  const bindableTravelOrders = (travelRequestDetailQuery.data?.travelOrders ?? []).filter((item) =>
+    ["confirmed", "paid"].includes(item.status),
+  );
+
   return (
     <div className="card-std p-6 space-y-4">
-      <h3 className="card-title">绑定报销</h3>
+      <div className="flex items-center justify-between gap-3">
+        <h3 className="card-title">绑定业务单据</h3>
+        {canManageTravelPayments ? (
+          <select
+            className="select-std max-w-[180px]"
+            value={bindMode}
+            onChange={(event) => setBindMode(event.target.value as InvoiceBindMode)}
+          >
+            <option value="reimbursement">绑定报销</option>
+            <option value="travelOrder">绑定差旅订单</option>
+          </select>
+        ) : null}
+      </div>
+
       <select
         className="select-std"
         data-testid="invoice-bind-invoice"
@@ -39,25 +77,65 @@ export function InvoiceBindCard({
         ))}
       </select>
 
-      <select
-        className="select-std"
-        data-testid="invoice-bind-reimbursement"
-        onChange={(event) => setSelectedReimbursementId(event.target.value)}
-        value={selectedReimbursementId}
-      >
-        <option value="">选择报销单</option>
-        {(reimbursementQuery.data?.items ?? []).map((item) => (
-          <option key={item.id} value={item.id}>
-            {item.formNumber ?? item.id} ({item.status})
-          </option>
-        ))}
-      </select>
+      {bindMode === "reimbursement" ? (
+        <select
+          className="select-std"
+          data-testid="invoice-bind-reimbursement"
+          onChange={(event) => setSelectedReimbursementId(event.target.value)}
+          value={selectedReimbursementId}
+        >
+          <option value="">选择报销单</option>
+          {(reimbursementQuery.data?.items ?? []).map((item) => (
+            <option key={item.id} value={item.id}>
+              {item.formNumber ?? item.id} ({item.status})
+            </option>
+          ))}
+        </select>
+      ) : (
+        <>
+          <select
+            className="select-std"
+            data-testid="invoice-bind-travel-request"
+            onChange={(event) => {
+              setSelectedTravelRequestId(event.target.value);
+              setSelectedTravelOrderId("");
+            }}
+            value={selectedTravelRequestId}
+          >
+            <option value="">选择差旅申请</option>
+            {(travelRequestQuery.data?.items ?? []).map((item) => (
+              <option key={item.id} value={item.id}>
+                {item.requestNo ?? item.purpose} ({item.status})
+              </option>
+            ))}
+          </select>
+
+          <select
+            className="select-std"
+            data-testid="invoice-bind-travel-order"
+            onChange={(event) => setSelectedTravelOrderId(event.target.value)}
+            value={selectedTravelOrderId}
+            disabled={!selectedTravelRequestId}
+          >
+            <option value="">选择差旅订单</option>
+            {bindableTravelOrders.map((item) => (
+              <option key={item.id} value={item.id}>
+                {item.externalOrderNo} ({item.status})
+              </option>
+            ))}
+          </select>
+        </>
+      )}
 
       <div className="pt-2">
         <Button
           data-testid="invoice-bind-submit"
           className="btn-primary"
-          disabled={bindMutation.isPending || !selectedInvoiceId || !selectedReimbursementId}
+          disabled={
+            bindMutation.isPending ||
+            !selectedInvoiceId ||
+            (bindMode === "reimbursement" ? !selectedReimbursementId : !selectedTravelOrderId)
+          }
           onClick={() => bindMutation.mutate()}
           type="button"
         >