[FEAT] 實作配方與生產工單自動搜尋,優化分頁 RWD,將倉庫地址改為選填並更新文件
All checks were successful
ERP-Deploy-Demo / deploy-demo (push) Successful in 1m22s

This commit is contained in:
2026-03-09 13:48:06 +08:00
parent 3f7a625191
commit 89291918fd
7 changed files with 82 additions and 73 deletions

View File

@@ -318,10 +318,10 @@ export default function ActivityLogIndex({ activities, filters, subject_types, u
from={activities.from}
/>
<div className="mt-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="flex items-center gap-4">
<div className="mt-6 flex flex-wrap items-center justify-between gap-4">
<div className="flex flex-wrap items-center justify-center sm:justify-start gap-4 w-full sm:w-auto">
<div className="flex items-center gap-2 text-sm text-gray-500">
<span></span>
<span className="shrink-0"></span>
<SearchableSelect
value={perPage}
onValueChange={handlePerPageChange}
@@ -334,11 +334,11 @@ export default function ActivityLogIndex({ activities, filters, subject_types, u
className="w-[100px] h-8"
showSearch={false}
/>
<span></span>
<span className="shrink-0"></span>
</div>
<span className="text-sm text-gray-500"> {activities.total} </span>
<span className="text-sm text-gray-500 whitespace-nowrap"> {activities.total} </span>
</div>
<div className="w-full md:w-auto flex justify-center md:justify-end">
<div className="w-full sm:w-auto flex justify-center sm:justify-end shrink-0">
<Pagination links={activities.links} />
</div>
</div>

View File

@@ -2,8 +2,9 @@
* 生產工單管理主頁面
*/
import { useState, useEffect } from "react";
import { useState, useEffect, useCallback } from "react";
import { Plus, Factory, Search, Eye, Pencil, Trash2 } from 'lucide-react';
import { debounce } from "lodash";
import { formatQuantity } from "@/lib/utils";
import { Button } from "@/Components/ui/button";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
@@ -77,16 +78,25 @@ export default function ProductionIndex({ productionOrders, filters }: Props) {
setPerPage(filters.per_page || productionOrders.per_page?.toString() || "10");
}, [filters]);
const handleFilter = () => {
router.get(
route('production-orders.index'),
{
search,
status: status === 'all' ? undefined : status,
per_page: perPage,
},
{ preserveState: true, replace: true, preserveScroll: true }
);
const debouncedFilter = useCallback(
debounce((params: any) => {
router.get(route("production-orders.index"), params, {
preserveState: true,
replace: true,
preserveScroll: true,
});
}, 300),
[]
);
const handleSearchChange = (term: string) => {
setSearch(term);
debouncedFilter({
...filters,
search: term,
status: status === "all" ? undefined : status,
per_page: perPage,
});
};
@@ -129,16 +139,12 @@ export default function ProductionIndex({ productionOrders, filters }: Props) {
<Input
placeholder="搜尋生產單號、批號、商品名稱..."
value={search}
onChange={(e) => setSearch(e.target.value)}
onChange={(e) => handleSearchChange(e.target.value)}
className="pl-10 pr-10 h-9"
onKeyDown={(e) => e.key === 'Enter' && handleFilter()}
/>
{search && (
<button
onClick={() => {
setSearch("");
router.get(route('production-orders.index'), { ...filters, search: "" }, { preserveState: true, replace: true, preserveScroll: true });
}}
onClick={() => handleSearchChange("")}
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
>
<Trash2 className="h-4 w-4" />
@@ -172,15 +178,6 @@ export default function ProductionIndex({ productionOrders, filters }: Props) {
{/* Action Buttons */}
<div className="flex gap-2 w-full md:w-auto">
<Button
variant="outline"
className="button-outlined-primary"
onClick={handleFilter}
>
<Search className="w-4 h-4 mr-2" />
</Button>
<Can permission="production_orders.create">
<Button
onClick={handleNavigateToCreate}

View File

@@ -2,8 +2,9 @@
* 配方管理主頁面
*/
import { useState, useEffect } from "react";
import { useState, useEffect, useCallback } from "react";
import { Plus, Search, Pencil, Trash2, BookOpen, Eye } from 'lucide-react';
import { debounce } from "lodash";
import { Button } from "@/Components/ui/button";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head, router, Link } from "@inertiajs/react";
@@ -73,17 +74,25 @@ export default function RecipeIndex({ recipes, filters }: Props) {
setPerPage(filters.per_page || "10");
}, [filters]);
const handleFilter = () => {
router.get(
route('recipes.index'),
{
search,
per_page: perPage,
},
{ preserveState: true, replace: true, preserveScroll: true }
);
};
const debouncedFilter = useCallback(
debounce((params: any) => {
router.get(route("recipes.index"), params, {
preserveState: true,
replace: true,
preserveScroll: true,
});
}, 300),
[]
);
const handleSearchChange = (term: string) => {
setSearch(term);
debouncedFilter({
...filters,
search: term,
per_page: perPage,
});
};
const handlePerPageChange = (value: string) => {
setPerPage(value);
@@ -140,16 +149,12 @@ export default function RecipeIndex({ recipes, filters }: Props) {
<Input
placeholder="搜尋配方代號、名稱、產品名稱..."
value={search}
onChange={(e) => setSearch(e.target.value)}
onChange={(e) => handleSearchChange(e.target.value)}
className="pl-10 pr-10 h-9"
onKeyDown={(e) => e.key === 'Enter' && handleFilter()}
/>
{search && (
<button
onClick={() => {
setSearch("");
router.get(route('recipes.index'), { ...filters, search: "" }, { preserveState: true, replace: true, preserveScroll: true });
}}
onClick={() => handleSearchChange("")}
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
>
<Trash2 className="h-4 w-4" /> {/* Using Trash2/X as clear icon, need to check imports. Inventory used X. */}
@@ -159,15 +164,6 @@ export default function RecipeIndex({ recipes, filters }: Props) {
{/* Action Buttons */}
<div className="flex gap-2 w-full md:w-auto">
<Button
variant="outline"
className="button-outlined-primary"
onClick={handleFilter}
>
<Search className="w-4 h-4 mr-2" />
</Button>
<Can permission="recipes.create">
<Link href={route('recipes.create')}>
<Button className="button-filled-primary">