[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

@@ -88,3 +88,13 @@ trigger: always_on
* **自動化部署**:本專案使用 CI/CD 自動化部署,開發者只需 push 程式碼至對應分支即可。
* **Demo 環境 (對應 `demo` 分支)**:若需查修測試站問題(例如查看 Error Log 或資料庫),請連線 `ssh gitea_work`
* **Production 環境 (對應 `main` 分支)**:若需查修正式站問題,請連線 `ssh erp`
## 11. 瀏覽器測試規範 (Browser Testing)
當需要進行瀏覽器自動化測試或手動驗證時,請遵守以下連線資訊:
* **本地測試網址**`http://localhost:8081/`
* **預設管理員帳號**`admin`
* **預設管理員密碼**`password`
> [!IMPORTANT]
> 在執行 browser subagent 或進行 E2E 測試時,請務必確認為 `8081` Port以避免連線至錯誤的服務環境。

View File

@@ -266,14 +266,13 @@ export default function WarehouseDialog({
{/* 倉庫地址 */}
<div className="space-y-2">
<Label htmlFor="address">
<span className="text-red-500">*</span>
</Label>
<Input
id="address"
value={formData.address}
onChange={(e) => setFormData({ ...formData, address: e.target.value })}
placeholder="例台北市信義區信義路五段7號"
required
className="h-9"
/>
</div>

View File

@@ -27,22 +27,33 @@ export default function Pagination({ links, className }: PaginationProps) {
const isNext = label === "Next";
const activeIndex = links.findIndex(l => l.active);
// Tablet/Mobile visibility logic (< md):
// Show: Previous, Next, Active, and up to 2 neighbors (Total ~5 numeric pages)
// Hide others on small screens (hidden md:flex)
// User requested: "small than 800... display 5 pages"
const isVisibleOnTablet =
// Responsive visibility logic:
// Global: Previous, Next, Active are always visible
// Mobile (< sm): Active, +-1, First, Last, and Ellipses
// Tablet (sm < md): Active, +-2, First, Last, and Ellipses
// Desktop (>= md): All standard pages
const isFirst = key === 1;
const isLast = key === links.length - 2;
const isEllipsis = !isPrevious && !isNext && !link.url;
const isMobileVisible =
isPrevious ||
isNext ||
link.active ||
isFirst ||
isLast ||
isEllipsis ||
key === activeIndex - 1 ||
key === activeIndex + 1 ||
key === activeIndex + 1;
const isTabletVisible =
isMobileVisible ||
key === activeIndex - 2 ||
key === activeIndex + 2;
const baseClasses = cn(
isVisibleOnTablet ? "flex" : "hidden md:flex",
"h-9 items-center justify-center rounded-md border px-3 text-sm"
"h-9 items-center justify-center rounded-md border px-3 text-sm",
isMobileVisible ? "flex" : (isTabletVisible ? "hidden sm:flex md:flex" : "hidden md:flex")
);
// 如果是 Previous/Next 但沒有 URL則不渲染或者渲染為 disabled

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">

View File

@@ -64,10 +64,6 @@ export const validateWarehouse = (formData: {
return { isValid: false, error: "倉庫名稱為必填欄位" };
}
if (!formData.address.trim()) {
return { isValid: false, error: "倉庫地址為必填欄位" };
}
return { isValid: true };
};