feat: 統一清單頁面分頁與每頁顯示 UI

2026-01-13 17:09:52 +08:00
parent f18fb169f3
commit 566dfa31ae
7 changed files with 131 additions and 66 deletions
--- a/resources/js/Pages/PurchaseOrder/Index.tsx
+++ b/resources/js/Pages/PurchaseOrder/Index.tsx
@@ -3,7 +3,7 @@
 */

 import { useState, useCallback } from "react";
-import { Plus, Search, X, ShoppingCart } from 'lucide-react';
+import { Plus, ShoppingCart } from 'lucide-react';
 import { Button } from "@/Components/ui/button";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { Head, router } from "@inertiajs/react";
@@ -15,6 +15,7 @@ import { debounce } from "lodash";
 import Pagination from "@/Components/shared/Pagination";
 import { getBreadcrumbs } from "@/utils/breadcrumb";
 import { Can } from "@/Components/Permission/Can";
+import { SearchableSelect } from "@/Components/ui/searchable-select";

 interface Props {
    orders: {
@@ -30,6 +31,7 @@ interface Props {
        warehouse_id?: string;
        sort_field?: string;
        sort_direction?: string;
+        per_page?: string;
    };
    warehouses: { id: number; name: string }[];
 }
@@ -38,6 +40,7 @@ export default function PurchaseOrderIndex({ orders, filters, warehouses }: Prop
    const [searchQuery, setSearchQuery] = useState(filters.search || "");
    const [statusFilter, setStatusFilter] = useState<string>(filters.status || "all");
    const [requesterFilter, setRequesterFilter] = useState<string>(filters.warehouse_id || "all");
+    const [perPage, setPerPage] = useState<string>(filters.per_page || "10");
    const [dateRange, setDateRange] = useState<DateRange | null>(null);

    const handleFilterChange = (newFilters: any) => {
@@ -87,6 +90,18 @@ export default function PurchaseOrderIndex({ orders, filters, warehouses }: Prop
        router.get("/purchase-orders/create");
    };

+    const handlePerPageChange = (value: string) => {
+        setPerPage(value);
+        router.get("/purchase-orders", {
+            ...filters,
+            per_page: value,
+            page: 1,
+        }, {
+            preserveState: false,
+            replace: true,
+        });
+    };
+
    return (
        <AuthenticatedLayout breadcrumbs={getBreadcrumbs("purchaseOrders")}>
            <Head title="採購管理 - 管理採購單" />
@@ -134,7 +149,24 @@ export default function PurchaseOrderIndex({ orders, filters, warehouses }: Prop
                    orders={orders.data}
                />

-                <div className="mt-6 flex justify-center">
+                {/* 分頁元件 - 統一樣式 */}
+                <div className="mt-4 flex flex-col sm:flex-row items-center justify-between gap-4">
+                    <div className="flex items-center gap-2 text-sm text-gray-500">
+                        <span>每頁顯示</span>
+                        <SearchableSelect
+                            value={perPage}
+                            onValueChange={handlePerPageChange}
+                            options={[
+                                { label: "10", value: "10" },
+                                { label: "20", value: "20" },
+                                { label: "50", value: "50" },
+                                { label: "100", value: "100" }
+                            ]}
+                            className="w-[80px] h-8"
+                            showSearch={false}
+                        />
+                        <span>筆</span>
+                    </div>
                    <Pagination links={orders.links} />
                </div>
            </div>