feat(inventory): 實作過期與瑕疵庫存總計顯示，並強化庫存明細過期提示
This commit is contained in:
@@ -1,411 +0,0 @@
|
||||
import { useEffect } from "react";
|
||||
import { Wand2 } from "lucide-react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/Components/ui/dialog";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import { Input } from "@/Components/ui/input";
|
||||
import { Label } from "@/Components/ui/label";
|
||||
import { Textarea } from "@/Components/ui/textarea";
|
||||
import { SearchableSelect } from "@/Components/ui/searchable-select";
|
||||
import { useForm } from "@inertiajs/react";
|
||||
import { toast } from "sonner";
|
||||
import type { Product, Category } from "@/Pages/Product/Index";
|
||||
import type { Unit } from "@/Components/Unit/UnitManagerDialog";
|
||||
|
||||
|
||||
interface ProductDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
product: Product | null;
|
||||
categories: Category[];
|
||||
units: Unit[];
|
||||
onSave?: (product: any) => void; // Legacy prop, can be removed if fully switching to Inertia submit within dialog
|
||||
}
|
||||
|
||||
export default function ProductDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
product,
|
||||
categories,
|
||||
units,
|
||||
}: ProductDialogProps) {
|
||||
const { data, setData, post, put, processing, errors, reset, clearErrors } = useForm({
|
||||
code: "",
|
||||
barcode: "",
|
||||
name: "",
|
||||
category_id: "",
|
||||
brand: "",
|
||||
specification: "",
|
||||
base_unit_id: "",
|
||||
large_unit_id: "",
|
||||
conversion_rate: "",
|
||||
purchase_unit_id: "",
|
||||
location: "",
|
||||
cost_price: "",
|
||||
price: "",
|
||||
member_price: "",
|
||||
wholesale_price: "",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
clearErrors();
|
||||
if (product) {
|
||||
setData({
|
||||
code: product.code,
|
||||
barcode: product.barcode || "",
|
||||
name: product.name,
|
||||
category_id: product.categoryId.toString(),
|
||||
brand: product.brand || "",
|
||||
specification: product.specification || "",
|
||||
base_unit_id: product.baseUnitId?.toString() || "",
|
||||
large_unit_id: product.largeUnitId?.toString() || "",
|
||||
conversion_rate: product.conversionRate ? product.conversionRate.toString() : "",
|
||||
purchase_unit_id: product.purchaseUnitId?.toString() || "",
|
||||
location: product.location || "",
|
||||
cost_price: product.cost_price?.toString() || "",
|
||||
price: product.price?.toString() || "",
|
||||
member_price: product.member_price?.toString() || "",
|
||||
wholesale_price: product.wholesale_price?.toString() || "",
|
||||
});
|
||||
} else {
|
||||
reset();
|
||||
// Set default category if available
|
||||
if (categories.length > 0) {
|
||||
setData("category_id", categories[0].id.toString());
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [open, product, categories]);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (product) {
|
||||
put(route("products.update", product.id), {
|
||||
onSuccess: () => {
|
||||
onOpenChange(false);
|
||||
reset();
|
||||
},
|
||||
onError: () => {
|
||||
toast.error("更新失敗，請檢查輸入資料");
|
||||
}
|
||||
});
|
||||
} else {
|
||||
post(route("products.store"), {
|
||||
onSuccess: () => {
|
||||
onOpenChange(false);
|
||||
reset();
|
||||
},
|
||||
onError: () => {
|
||||
toast.error("新增失敗，請檢查輸入資料");
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const generateRandomBarcode = () => {
|
||||
const randomDigits = Math.floor(Math.random() * 9000000000) + 1000000000;
|
||||
setData("barcode", randomDigits.toString());
|
||||
};
|
||||
|
||||
const generateRandomCode = () => {
|
||||
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
|
||||
let result = "";
|
||||
for (let i = 0; i < 8; i++) {
|
||||
result += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
}
|
||||
setData("code", result);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{product ? "編輯商品" : "新增商品"}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{product ? "修改商品資料" : "建立新的商品資料"}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6 py-4">
|
||||
|
||||
{/* 基本資訊區塊 */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-medium border-b pb-2">基本資訊</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="category_id">
|
||||
分類 <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<SearchableSelect
|
||||
value={data.category_id}
|
||||
onValueChange={(value) => setData("category_id", value)}
|
||||
options={categories.map((c) => ({ label: c.name, value: c.id.toString() }))}
|
||||
placeholder="選擇分類"
|
||||
searchPlaceholder="搜尋分類..."
|
||||
className={errors.category_id ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.category_id && <p className="text-sm text-red-500">{errors.category_id}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">
|
||||
商品名稱 <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={data.name}
|
||||
onChange={(e) => setData("name", e.target.value)}
|
||||
placeholder="例：法國麵粉"
|
||||
className={errors.name ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.name && <p className="text-sm text-red-500">{errors.name}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="code">
|
||||
商品代號 <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="code"
|
||||
value={data.code}
|
||||
onChange={(e) => setData("code", e.target.value)}
|
||||
placeholder="例：A1 (2-8碼)"
|
||||
maxLength={8}
|
||||
className={`flex-1 ${errors.code ? "border-red-500" : ""}`}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={generateRandomCode}
|
||||
title="隨機生成代號"
|
||||
className="shrink-0 button-outlined-primary"
|
||||
>
|
||||
<Wand2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
{errors.code && <p className="text-sm text-red-500">{errors.code}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="barcode">
|
||||
條碼編號 <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="barcode"
|
||||
value={data.barcode}
|
||||
onChange={(e) => setData("barcode", e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
// 掃描後自動跳轉到下一個欄位（品牌）
|
||||
document.getElementById('brand')?.focus();
|
||||
}
|
||||
}}
|
||||
placeholder="輸入條碼或自動生成"
|
||||
className={`flex-1 ${errors.barcode ? "border-red-500" : ""}`}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={generateRandomBarcode}
|
||||
title="隨機生成條碼"
|
||||
className="shrink-0 button-outlined-primary"
|
||||
>
|
||||
<Wand2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
{errors.barcode && <p className="text-sm text-red-500">{errors.barcode}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="brand">品牌</Label>
|
||||
<Input
|
||||
id="brand"
|
||||
value={data.brand}
|
||||
onChange={(e) => setData("brand", e.target.value)}
|
||||
placeholder="例：鳥越製粉"
|
||||
/>
|
||||
{errors.brand && <p className="text-sm text-red-500">{errors.brand}</p>}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="location">儲位</Label>
|
||||
<Input
|
||||
id="location"
|
||||
value={data.location}
|
||||
onChange={(e) => setData("location", e.target.value)}
|
||||
placeholder="例：A-1-1"
|
||||
/>
|
||||
{errors.location && <p className="text-sm text-red-500">{errors.location}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 col-span-2">
|
||||
<Label htmlFor="specification">規格描述</Label>
|
||||
<Textarea
|
||||
id="specification"
|
||||
value={data.specification}
|
||||
onChange={(e) => setData("specification", e.target.value)}
|
||||
placeholder="例：25kg/袋，灰分0.45%"
|
||||
className="resize-none"
|
||||
/>
|
||||
{errors.specification && <p className="text-sm text-red-500">{errors.specification}</p>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 價格設定區塊 */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-medium border-b pb-2">價格設定</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="cost_price">成本價</Label>
|
||||
<Input
|
||||
id="cost_price"
|
||||
type="number"
|
||||
min="0"
|
||||
step="any"
|
||||
value={data.cost_price}
|
||||
onChange={(e) => setData("cost_price", e.target.value)}
|
||||
placeholder="0"
|
||||
className={errors.cost_price ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.cost_price && <p className="text-sm text-red-500">{errors.cost_price}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="price">售價</Label>
|
||||
<Input
|
||||
id="price"
|
||||
type="number"
|
||||
min="0"
|
||||
step="any"
|
||||
value={data.price}
|
||||
onChange={(e) => setData("price", e.target.value)}
|
||||
placeholder="0"
|
||||
className={errors.price ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.price && <p className="text-sm text-red-500">{errors.price}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="member_price">會員價</Label>
|
||||
<Input
|
||||
id="member_price"
|
||||
type="number"
|
||||
min="0"
|
||||
step="any"
|
||||
value={data.member_price}
|
||||
onChange={(e) => setData("member_price", e.target.value)}
|
||||
placeholder="0"
|
||||
className={errors.member_price ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.member_price && <p className="text-sm text-red-500">{errors.member_price}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="wholesale_price">批發價</Label>
|
||||
<Input
|
||||
id="wholesale_price"
|
||||
type="number"
|
||||
min="0"
|
||||
step="any"
|
||||
value={data.wholesale_price}
|
||||
onChange={(e) => setData("wholesale_price", e.target.value)}
|
||||
placeholder="0"
|
||||
className={errors.wholesale_price ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.wholesale_price && <p className="text-sm text-red-500">{errors.wholesale_price}</p>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 單位設定區塊 */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-medium border-b pb-2">單位設定</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="base_unit_id">
|
||||
基本庫存單位 <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<SearchableSelect
|
||||
value={data.base_unit_id}
|
||||
onValueChange={(value) => setData("base_unit_id", value)}
|
||||
options={units.map((u) => ({ label: u.name, value: u.id.toString() }))}
|
||||
placeholder="選擇單位"
|
||||
searchPlaceholder="搜尋單位..."
|
||||
className={errors.base_unit_id ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.base_unit_id && <p className="text-sm text-red-500">{errors.base_unit_id}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="large_unit_id">大單位</Label>
|
||||
<SearchableSelect
|
||||
value={data.large_unit_id}
|
||||
onValueChange={(value) => setData("large_unit_id", value)}
|
||||
options={[
|
||||
{ label: "無", value: "none" },
|
||||
...units.map((u) => ({ label: u.name, value: u.id.toString() }))
|
||||
]}
|
||||
placeholder="無"
|
||||
searchPlaceholder="搜尋單位..."
|
||||
className={errors.large_unit_id ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.large_unit_id && <p className="text-sm text-red-500">{errors.large_unit_id}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="conversion_rate">
|
||||
換算率
|
||||
{data.large_unit_id && <span className="text-red-500">*</span>}
|
||||
</Label>
|
||||
<Input
|
||||
id="conversion_rate"
|
||||
type="number"
|
||||
step="any"
|
||||
value={data.conversion_rate}
|
||||
onChange={(e) => setData("conversion_rate", e.target.value)}
|
||||
placeholder={data.large_unit_id && data.base_unit_id ? `1 ${units.find(u => u.id.toString() === data.large_unit_id)?.name} = ? ${units.find(u => u.id.toString() === data.base_unit_id)?.name}` : ""}
|
||||
disabled={!data.large_unit_id}
|
||||
/>
|
||||
{errors.conversion_rate && <p className="text-sm text-red-500">{errors.conversion_rate}</p>}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{data.large_unit_id && data.base_unit_id && data.conversion_rate && (
|
||||
<div className="bg-blue-50 p-3 rounded text-sm text-blue-700">
|
||||
預覽：1 {units.find(u => u.id.toString() === data.large_unit_id)?.name} = {data.conversion_rate} {units.find(u => u.id.toString() === data.base_unit_id)?.name}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
className="button-outlined-primary"
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button type="submit" className="button-filled-primary" disabled={processing}>
|
||||
{processing ? "儲存... " : (product ? "儲存變更" : "新增")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog >
|
||||
);
|
||||
}
|
||||
331
resources/js/Components/Product/ProductForm.tsx
Normal file
331
resources/js/Components/Product/ProductForm.tsx
Normal file
@@ -0,0 +1,331 @@
|
||||
import { Wand2 } from "lucide-react";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import { Input } from "@/Components/ui/input";
|
||||
import { Label } from "@/Components/ui/label";
|
||||
import { Textarea } from "@/Components/ui/textarea";
|
||||
import { SearchableSelect } from "@/Components/ui/searchable-select";
|
||||
import { useForm } from "@inertiajs/react";
|
||||
import { toast } from "sonner";
|
||||
import type { Category, Product } from "@/Pages/Product/Index";
|
||||
import type { Unit } from "@/Components/Unit/UnitManagerDialog";
|
||||
|
||||
interface ProductFormProps {
|
||||
initialData?: Product | null;
|
||||
categories: Category[];
|
||||
units: Unit[];
|
||||
onSubmitsuccess?: () => void;
|
||||
}
|
||||
|
||||
export default function ProductForm({
|
||||
initialData,
|
||||
categories,
|
||||
units,
|
||||
}: ProductFormProps) {
|
||||
const isEdit = !!initialData;
|
||||
|
||||
const { data, setData, post, put, processing, errors } = useForm({
|
||||
code: initialData?.code || "",
|
||||
barcode: initialData?.barcode || "",
|
||||
name: initialData?.name || "",
|
||||
category_id: initialData?.categoryId?.toString() || (categories.length > 0 ? categories[0].id.toString() : ""),
|
||||
brand: initialData?.brand || "",
|
||||
specification: initialData?.specification || "",
|
||||
base_unit_id: initialData?.baseUnitId?.toString() || "",
|
||||
large_unit_id: initialData?.largeUnitId?.toString() || "",
|
||||
conversion_rate: initialData?.conversionRate?.toString() || "",
|
||||
purchase_unit_id: initialData?.purchaseUnitId?.toString() || "",
|
||||
location: initialData?.location || "",
|
||||
cost_price: initialData?.cost_price?.toString() || "",
|
||||
price: initialData?.price?.toString() || "",
|
||||
member_price: initialData?.member_price?.toString() || "",
|
||||
wholesale_price: initialData?.wholesale_price?.toString() || "",
|
||||
});
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (isEdit) {
|
||||
put(route("products.update", initialData.id), {
|
||||
onSuccess: () => toast.success("商品已更新"),
|
||||
onError: () => toast.error("更新失敗，請檢查輸入資料"),
|
||||
});
|
||||
} else {
|
||||
post(route("products.store"), {
|
||||
onSuccess: () => toast.success("商品已建立"),
|
||||
onError: () => toast.error("新增失敗，請檢查輸入資料"),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const generateRandomBarcode = () => {
|
||||
const randomDigits = Math.floor(Math.random() * 9000000000) + 1000000000;
|
||||
setData("barcode", randomDigits.toString());
|
||||
};
|
||||
|
||||
const generateRandomCode = () => {
|
||||
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
|
||||
let result = "";
|
||||
for (let i = 0; i < 8; i++) {
|
||||
result += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
}
|
||||
setData("code", result);
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* 基本資訊 */}
|
||||
<div className="bg-white rounded-xl border border-gray-200 shadow-sm p-6 space-y-6">
|
||||
<div className="flex items-center justify-between border-b pb-2">
|
||||
<h3 className="text-lg font-bold text-grey-0">基本資訊</h3>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="category_id">
|
||||
分類 <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<SearchableSelect
|
||||
value={data.category_id}
|
||||
onValueChange={(value) => setData("category_id", value)}
|
||||
options={categories.map((c) => ({ label: c.name, value: c.id.toString() }))}
|
||||
placeholder="選擇分類"
|
||||
className={errors.category_id ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.category_id && <p className="text-sm text-red-500">{errors.category_id}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">
|
||||
商品名稱 <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={data.name}
|
||||
onChange={(e) => setData("name", e.target.value)}
|
||||
placeholder="例：法國麵粉"
|
||||
className={errors.name ? "border-red-500 h-9" : "h-9"}
|
||||
/>
|
||||
{errors.name && <p className="text-sm text-red-500">{errors.name}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="code">
|
||||
商品代號 <span className="text-gray-400 font-normal">(選填，未填將自動生成)</span>
|
||||
</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="code"
|
||||
value={data.code}
|
||||
onChange={(e) => setData("code", e.target.value)}
|
||||
placeholder="例:A1 (未填將自動生成)"
|
||||
maxLength={8}
|
||||
className={`flex-1 h-9 ${errors.code ? "border-red-500" : ""}`}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={generateRandomCode}
|
||||
title="隨機生成代號"
|
||||
className="shrink-0 button-outlined-primary h-9 w-9"
|
||||
>
|
||||
<Wand2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
{errors.code && <p className="text-sm text-red-500">{errors.code}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="barcode">
|
||||
條碼編號 <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="barcode"
|
||||
value={data.barcode}
|
||||
onChange={(e) => setData("barcode", e.target.value)}
|
||||
placeholder="輸入條碼或自動生成"
|
||||
className={`flex-1 h-9 ${errors.barcode ? "border-red-500" : ""}`}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={generateRandomBarcode}
|
||||
title="隨機生成條碼"
|
||||
className="shrink-0 button-outlined-primary h-9 w-9"
|
||||
>
|
||||
<Wand2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
{errors.barcode && <p className="text-sm text-red-500">{errors.barcode}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="brand">品牌</Label>
|
||||
<Input
|
||||
id="brand"
|
||||
value={data.brand}
|
||||
onChange={(e) => setData("brand", e.target.value)}
|
||||
placeholder="例：鳥越製粉"
|
||||
className="h-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="location">儲位</Label>
|
||||
<Input
|
||||
id="location"
|
||||
value={data.location}
|
||||
onChange={(e) => setData("location", e.target.value)}
|
||||
placeholder="例：A-1-1"
|
||||
className="h-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 md:col-span-2">
|
||||
<Label htmlFor="specification">規格描述</Label>
|
||||
<Textarea
|
||||
id="specification"
|
||||
value={data.specification}
|
||||
onChange={(e) => setData("specification", e.target.value)}
|
||||
placeholder="例：25kg/袋，灰分0.45%"
|
||||
className="resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 價格設定 */}
|
||||
<div className="bg-white rounded-xl border border-gray-200 shadow-sm p-6 space-y-6">
|
||||
<div className="flex items-center justify-between border-b pb-2">
|
||||
<h3 className="text-lg font-bold text-grey-0">價格設定</h3>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="cost_price">成本價</Label>
|
||||
<Input
|
||||
id="cost_price"
|
||||
type="number"
|
||||
step="any"
|
||||
value={data.cost_price}
|
||||
onChange={(e) => setData("cost_price", e.target.value)}
|
||||
placeholder="0"
|
||||
className="h-9 text-right"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="price">售價</Label>
|
||||
<Input
|
||||
id="price"
|
||||
type="number"
|
||||
step="any"
|
||||
value={data.price}
|
||||
onChange={(e) => setData("price", e.target.value)}
|
||||
placeholder="0"
|
||||
className="h-9 text-right"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="member_price">會員價</Label>
|
||||
<Input
|
||||
id="member_price"
|
||||
type="number"
|
||||
step="any"
|
||||
value={data.member_price}
|
||||
onChange={(e) => setData("member_price", e.target.value)}
|
||||
placeholder="0"
|
||||
className="h-9 text-right"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="wholesale_price">批發價</Label>
|
||||
<Input
|
||||
id="wholesale_price"
|
||||
type="number"
|
||||
step="any"
|
||||
value={data.wholesale_price}
|
||||
onChange={(e) => setData("wholesale_price", e.target.value)}
|
||||
placeholder="0"
|
||||
className="h-9 text-right"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 單位設定 */}
|
||||
<div className="bg-white rounded-xl border border-gray-200 shadow-sm p-6 space-y-6">
|
||||
<div className="flex items-center justify-between border-b pb-2">
|
||||
<h3 className="text-lg font-bold text-grey-0">單位設定</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="base_unit_id">
|
||||
基本庫存單位 <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<SearchableSelect
|
||||
value={data.base_unit_id}
|
||||
onValueChange={(value) => setData("base_unit_id", value)}
|
||||
options={units.map((u) => ({ label: u.name, value: u.id.toString() }))}
|
||||
placeholder="選擇單位"
|
||||
className={errors.base_unit_id ? "border-red-500" : ""}
|
||||
/>
|
||||
{errors.base_unit_id && <p className="text-sm text-red-500">{errors.base_unit_id}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="large_unit_id">大單位 (選填)</Label>
|
||||
<SearchableSelect
|
||||
value={data.large_unit_id}
|
||||
onValueChange={(value) => setData("large_unit_id", value)}
|
||||
options={[
|
||||
{ label: "無", value: "" },
|
||||
...units.map((u) => ({ label: u.name, value: u.id.toString() }))
|
||||
]}
|
||||
placeholder="無"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="conversion_rate">
|
||||
換算率 {data.large_unit_id && <span className="text-red-500">*</span>}
|
||||
</Label>
|
||||
<Input
|
||||
id="conversion_rate"
|
||||
type="number"
|
||||
step="any"
|
||||
value={data.conversion_rate}
|
||||
onChange={(e) => setData("conversion_rate", e.target.value)}
|
||||
placeholder={data.large_unit_id && data.base_unit_id ? `1 ${units.find(u => u.id.toString() === data.large_unit_id)?.name} = ? ${units.find(u => u.id.toString() === data.base_unit_id)?.name}` : "例如: 25"}
|
||||
disabled={!data.large_unit_id}
|
||||
className="h-9"
|
||||
/>
|
||||
{errors.conversion_rate && <p className="text-sm text-red-500">{errors.conversion_rate}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{data.large_unit_id && data.base_unit_id && data.conversion_rate && (
|
||||
<div className="bg-primary-lightest p-3 rounded-lg text-sm text-primary-main font-medium border border-primary-light">
|
||||
預覽：1 {units.find(u => u.id.toString() === data.large_unit_id)?.name} = {data.conversion_rate} {units.find(u => u.id.toString() === data.base_unit_id)?.name}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 提交按鈕 */}
|
||||
<div className="flex justify-end pt-6 border-t">
|
||||
<Button
|
||||
type="submit"
|
||||
className="button-filled-primary px-8"
|
||||
disabled={processing}
|
||||
>
|
||||
{processing ? "處理中..." : (isEdit ? "儲存變更" : "建立商品")}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -111,8 +111,9 @@ export default function ProductImportDialog({ open, onOpenChange }: ProductImpor
|
||||
<AccordionContent>
|
||||
<div className="text-sm text-gray-600 space-y-2 pb-2 pl-6">
|
||||
<ul className="list-disc space-y-1">
|
||||
<li><span className="font-medium text-gray-700">必填欄位</span>：商品代號 (2-8 碼)、條碼、商品名稱、類別名稱、基本單位。</li>
|
||||
<li><span className="font-medium text-gray-700">唯一性</span>：商品代號與條碼不可與現有資料重複。</li>
|
||||
<li><span className="font-medium text-gray-700">必填欄位</span>：商品名稱、類別名稱、基本單位、條碼。</li>
|
||||
<li><span className="font-medium text-gray-700">商品代號</span>：2-8 碼，非必填（未填將自動生成，大寫英文+數字 8 碼）。</li>
|
||||
<li><span className="font-medium text-gray-700">唯一性</span>：商品代號（若有填寫）與條碼不可與現有資料重複。</li>
|
||||
<li><span className="font-medium text-gray-700">自動關聯</span>：類別與單位請填寫系統當前存在的「名稱」（如：飲品、瓶）。</li>
|
||||
<li><span className="font-medium text-gray-700">大單位</span>：若填寫大單位，則「換算率」為必填（需大於 0）。</li>
|
||||
</ul>
|
||||
|
||||
@@ -27,11 +27,11 @@ import {
|
||||
AlertDialogTrigger,
|
||||
} from "@/Components/ui/alert-dialog";
|
||||
import { Can } from "@/Components/Permission/Can";
|
||||
import { Link } from "@inertiajs/react";
|
||||
import type { Product } from "@/Pages/Product/Index";
|
||||
|
||||
interface ProductTableProps {
|
||||
products: Product[];
|
||||
onEdit: (product: Product) => void;
|
||||
onDelete: (id: string) => void;
|
||||
|
||||
startIndex: number;
|
||||
@@ -42,7 +42,6 @@ interface ProductTableProps {
|
||||
|
||||
export default function ProductTable({
|
||||
products,
|
||||
onEdit,
|
||||
onDelete,
|
||||
startIndex,
|
||||
sortField,
|
||||
@@ -96,8 +95,8 @@ export default function ProductTable({
|
||||
基本單位 <SortIcon field="base_unit_id" />
|
||||
</button>
|
||||
</TableHead>
|
||||
<TableHead className="w-[200px]">規格</TableHead>
|
||||
<TableHead>換算率</TableHead>
|
||||
<TableHead className="w-[200px]">規格</TableHead>
|
||||
<TableHead>儲位</TableHead>
|
||||
<TableHead className="text-center">操作</TableHead>
|
||||
</TableRow>
|
||||
@@ -133,6 +132,15 @@ export default function ProductTable({
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>{product.baseUnit?.name || '-'}</TableCell>
|
||||
<TableCell>
|
||||
{product.largeUnit ? (
|
||||
<span className="text-sm text-gray-500">
|
||||
1 {product.largeUnit?.name} = {Number(product.conversionRate)} {product.baseUnit?.name}
|
||||
</span>
|
||||
) : (
|
||||
'-'
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="max-w-[200px]">
|
||||
<TooltipProvider delayDuration={300}>
|
||||
<Tooltip>
|
||||
@@ -149,15 +157,6 @@ export default function ProductTable({
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{product.largeUnit ? (
|
||||
<span className="text-sm text-gray-500">
|
||||
1 {product.largeUnit?.name} = {Number(product.conversionRate)} {product.baseUnit?.name}
|
||||
</span>
|
||||
) : (
|
||||
'-'
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="text-sm text-gray-600">{product.location || '-'}</span>
|
||||
</TableCell>
|
||||
@@ -174,14 +173,16 @@ export default function ProductTable({
|
||||
</Button>
|
||||
*/}
|
||||
<Can permission="products.edit">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onEdit(product)}
|
||||
className="button-outlined-primary"
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Link href={route("products.edit", product.id)}>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="button-outlined-primary"
|
||||
title="編輯"
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</Can>
|
||||
<Can permission="products.delete">
|
||||
<AlertDialog>
|
||||
|
||||
Reference in New Issue
Block a user