feat: 整合門市領料日誌、API 文件存取、修改庫存與併發編號問題、供應商商品內聯編輯及日誌 UI 優化
All checks were successful
ERP-Deploy-Demo / deploy-demo (push) Successful in 1m0s
All checks were successful
ERP-Deploy-Demo / deploy-demo (push) Successful in 1m0s
This commit is contained in:
@@ -1,193 +0,0 @@
|
||||
/**
|
||||
* 新增供貨商品對話框
|
||||
*/
|
||||
|
||||
import { useState, useMemo } from "react";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import { Input } from "@/Components/ui/input";
|
||||
import { Label } from "@/Components/ui/label";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from "@/Components/ui/dialog";
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from "@/Components/ui/command";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/Components/ui/popover";
|
||||
import { Check, ChevronsUpDown } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { Product } from "@/types/product";
|
||||
import type { SupplyProduct } from "@/types/vendor";
|
||||
|
||||
interface AddSupplyProductDialogProps {
|
||||
open: boolean;
|
||||
products: Product[];
|
||||
existingSupplyProducts: SupplyProduct[];
|
||||
onClose: () => void;
|
||||
onAdd: (productId: string, lastPrice?: number) => void;
|
||||
}
|
||||
|
||||
export default function AddSupplyProductDialog({
|
||||
open,
|
||||
products,
|
||||
existingSupplyProducts,
|
||||
onClose,
|
||||
onAdd,
|
||||
}: AddSupplyProductDialogProps) {
|
||||
const [selectedProductId, setSelectedProductId] = useState<string>("");
|
||||
const [lastPrice, setLastPrice] = useState<string>("");
|
||||
const [openCombobox, setOpenCombobox] = useState(false);
|
||||
|
||||
// 過濾掉已經在供貨列表中的商品
|
||||
const availableProducts = useMemo(() => {
|
||||
const existingIds = new Set(existingSupplyProducts.map(sp => String(sp.productId)));
|
||||
return products.filter(p => !existingIds.has(String(p.id)));
|
||||
}, [products, existingSupplyProducts]);
|
||||
|
||||
const selectedProduct = availableProducts.find(p => p.id === selectedProductId);
|
||||
|
||||
const handleAdd = () => {
|
||||
if (!selectedProductId) return;
|
||||
|
||||
const price = lastPrice ? parseFloat(lastPrice) : undefined;
|
||||
onAdd(selectedProductId, price);
|
||||
|
||||
// 重置表單
|
||||
setSelectedProductId("");
|
||||
setLastPrice("");
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setSelectedProductId("");
|
||||
setLastPrice("");
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onClose}>
|
||||
<DialogContent className="max-w-xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>新增供貨商品</DialogTitle>
|
||||
<DialogDescription>選擇該廠商可供應的商品並設定採購價格。</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* 商品選擇 */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label className="text-sm font-medium">商品名稱</Label>
|
||||
<Popover open={openCombobox} onOpenChange={setOpenCombobox}>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
role="combobox"
|
||||
aria-expanded={openCombobox}
|
||||
className="flex h-9 w-full items-center justify-between rounded-md border-2 border-grey-3 !bg-grey-5 px-3 py-1 text-sm font-normal text-grey-0 text-left outline-none transition-colors hover:!bg-grey-5 hover:border-primary/50 focus-visible:border-[var(--primary-main)] focus-visible:ring-[3px] focus-visible:ring-[var(--primary-main)]/20"
|
||||
onClick={() => setOpenCombobox(!openCombobox)}
|
||||
>
|
||||
{selectedProduct ? (
|
||||
<span className="font-medium text-gray-900">{selectedProduct.name}</span>
|
||||
) : (
|
||||
<span className="text-gray-400">請選擇商品...</span>
|
||||
)}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[450px] p-0 shadow-lg border-2 z-[9999]" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="搜尋商品名稱..." />
|
||||
<CommandList className="max-h-[300px]">
|
||||
<CommandEmpty className="py-6 text-center text-sm text-gray-500">
|
||||
找不到符合的商品
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{availableProducts.map((product) => (
|
||||
<CommandItem
|
||||
key={product.id}
|
||||
value={product.name}
|
||||
onSelect={() => {
|
||||
setSelectedProductId(product.id);
|
||||
setOpenCombobox(false);
|
||||
}}
|
||||
className="cursor-pointer aria-selected:bg-primary/5 aria-selected:text-primary py-3"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4 text-primary",
|
||||
selectedProductId === product.id ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<div className="flex items-center justify-between flex-1">
|
||||
<span className="font-medium">{product.name}</span>
|
||||
<span className="text-xs text-gray-400 bg-gray-50 px-2 py-1 rounded">
|
||||
{product.baseUnit?.name || (product.base_unit as any)?.name || product.base_unit || "個"}
|
||||
</span>
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{/* 單位（自動帶入） */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label className="text-sm font-medium text-gray-500">單位</Label>
|
||||
<div className="h-10 px-3 py-2 bg-gray-50 border border-gray-200 rounded-md text-gray-600 font-medium text-sm flex items-center">
|
||||
{selectedProduct ? (selectedProduct.baseUnit?.name || (selectedProduct.base_unit as any)?.name || selectedProduct.base_unit || "個") : "-"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 上次採購價格 */}
|
||||
<div>
|
||||
<Label className="text-muted-foreground text-xs">
|
||||
上次採購單價 / {selectedProduct ? (selectedProduct.baseUnit?.name || (selectedProduct.base_unit as any)?.name || selectedProduct.base_unit || "個") : "單位"}
|
||||
</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min="0"
|
||||
step="any"
|
||||
placeholder="輸入價格"
|
||||
value={lastPrice}
|
||||
onChange={(e) => setLastPrice(e.target.value)}
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleCancel}
|
||||
className="gap-2 button-outlined-primary"
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={handleAdd}
|
||||
disabled={!selectedProductId}
|
||||
className="gap-2 button-filled-primary"
|
||||
>
|
||||
新增
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -1,119 +0,0 @@
|
||||
/**
|
||||
* 編輯供貨商品對話框
|
||||
*/
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import { Input } from "@/Components/ui/input";
|
||||
import { Label } from "@/Components/ui/label";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from "@/Components/ui/dialog";
|
||||
import type { SupplyProduct } from "@/types/vendor";
|
||||
|
||||
interface EditSupplyProductDialogProps {
|
||||
open: boolean;
|
||||
product: SupplyProduct | null;
|
||||
onClose: () => void;
|
||||
onSave: (productId: string, lastPrice?: number) => void;
|
||||
}
|
||||
|
||||
export default function EditSupplyProductDialog({
|
||||
open,
|
||||
product,
|
||||
onClose,
|
||||
onSave,
|
||||
}: EditSupplyProductDialogProps) {
|
||||
const [lastPrice, setLastPrice] = useState<string>("");
|
||||
|
||||
useEffect(() => {
|
||||
if (product) {
|
||||
setLastPrice(product.lastPrice?.toString() || "");
|
||||
}
|
||||
}, [product, open]);
|
||||
|
||||
const handleSave = () => {
|
||||
if (!product) return;
|
||||
|
||||
const price = lastPrice ? parseFloat(lastPrice) : undefined;
|
||||
onSave(product.productId, price);
|
||||
setLastPrice("");
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setLastPrice("");
|
||||
onClose();
|
||||
};
|
||||
|
||||
if (!product) return null;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onClose}>
|
||||
<DialogContent className="max-w-xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>編輯供貨商品</DialogTitle>
|
||||
<DialogDescription>修改商品的採購價格資訊。</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* 商品名稱（不可編輯） */}
|
||||
<div>
|
||||
<Label className="text-muted-foreground text-xs">商品名稱</Label>
|
||||
<Input
|
||||
value={product.productName}
|
||||
disabled
|
||||
className="mt-1 bg-muted"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 單位（不可編輯） */}
|
||||
<div>
|
||||
<Label className="text-muted-foreground text-xs">單位</Label>
|
||||
<Input
|
||||
value={product.unit}
|
||||
disabled
|
||||
className="mt-1 bg-muted"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 上次採購價格 */}
|
||||
<div>
|
||||
<Label className="text-muted-foreground text-xs">上次採購單價 / {product.baseUnit || "單位"}</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min="0"
|
||||
step="any"
|
||||
placeholder="輸入價格"
|
||||
value={lastPrice}
|
||||
onChange={(e) => setLastPrice(e.target.value)}
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleCancel}
|
||||
className="gap-2 button-outlined-primary"
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={handleSave}
|
||||
className="gap-2 button-filled-primary"
|
||||
>
|
||||
儲存
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
155
resources/js/Components/Vendor/SupplyProductList.tsx
vendored
155
resources/js/Components/Vendor/SupplyProductList.tsx
vendored
@@ -1,5 +1,7 @@
|
||||
import { Pencil, Trash2 } from "lucide-react";
|
||||
import { Trash2 } from "lucide-react";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import { Input } from "@/Components/ui/input";
|
||||
import { SearchableSelect } from "@/Components/ui/searchable-select";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
@@ -8,90 +10,129 @@ import {
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/Components/ui/table";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
AlertDialogTrigger,
|
||||
} from "@/Components/ui/alert-dialog";
|
||||
import type { SupplyProduct } from "@/types/vendor";
|
||||
|
||||
interface SupplyProductListProps {
|
||||
products: SupplyProduct[];
|
||||
onEdit: (product: SupplyProduct) => void;
|
||||
onRemove: (product: SupplyProduct) => void;
|
||||
items: SupplyProduct[];
|
||||
allProducts: any[];
|
||||
onRemoveItem: (index: number) => void;
|
||||
onItemChange: (index: number, field: keyof SupplyProduct, value: string | number) => void;
|
||||
}
|
||||
|
||||
export default function SupplyProductList({
|
||||
products,
|
||||
onEdit,
|
||||
onRemove,
|
||||
items,
|
||||
allProducts,
|
||||
onRemoveItem,
|
||||
onItemChange,
|
||||
}: SupplyProductListProps) {
|
||||
return (
|
||||
<div className="bg-white rounded-lg border shadow-sm">
|
||||
<div className="bg-white rounded-lg border shadow-sm overflow-hidden">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableRow className="bg-gray-50 hover:bg-gray-50 text-grey-0">
|
||||
<TableHead className="w-[50px] text-center">#</TableHead>
|
||||
<TableHead>商品名稱</TableHead>
|
||||
<TableHead>基本單位</TableHead>
|
||||
<TableHead>轉換率</TableHead>
|
||||
<TableHead className="text-right">
|
||||
<TableHead className="w-[40%] text-left">商品名稱</TableHead>
|
||||
<TableHead className="w-[15%] text-left">基本單位</TableHead>
|
||||
<TableHead className="w-[20%] text-left">
|
||||
上次採購單價
|
||||
<div className="text-xs font-normal text-muted-foreground">(以基本單位計算)</div>
|
||||
<span className="text-[10px] font-normal text-muted-foreground block">(以基本單位計)</span>
|
||||
</TableHead>
|
||||
<TableHead className="text-center w-[150px]">操作</TableHead>
|
||||
<TableHead className="text-center w-[80px]">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{products.length === 0 ? (
|
||||
{items.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={6} className="text-center text-muted-foreground py-8">
|
||||
尚無供貨商品，請點擊上方按鈕新增
|
||||
<TableCell colSpan={5} className="text-center text-muted-foreground py-12 italic text-sm">
|
||||
尚未新增任何供貨商品，點擊上方按鈕新增
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
products.map((product, index) => (
|
||||
<TableRow key={product.id}>
|
||||
items.map((item, index) => (
|
||||
<TableRow key={item.id}>
|
||||
<TableCell className="text-gray-500 font-medium text-center">
|
||||
{index + 1}
|
||||
</TableCell>
|
||||
<TableCell>{product.productName}</TableCell>
|
||||
|
||||
<TableCell>
|
||||
{product.baseUnit || product.unit || "-"}
|
||||
<SearchableSelect
|
||||
value={item.productId}
|
||||
onValueChange={(value) => onItemChange(index, "productId", value)}
|
||||
options={allProducts.map(p => ({
|
||||
label: p.name,
|
||||
value: String(p.id)
|
||||
}))}
|
||||
placeholder="選擇商品"
|
||||
searchPlaceholder="搜尋商品..."
|
||||
className="w-full h-10"
|
||||
/>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
{product.largeUnit && product.conversionRate ? (
|
||||
<span className="text-sm text-gray-500">
|
||||
1 {product.largeUnit} = {Number(product.conversionRate)} {product.baseUnit || product.unit}
|
||||
</span>
|
||||
) : (
|
||||
"-"
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{product.lastPrice ? (
|
||||
<span>
|
||||
${product.lastPrice.toLocaleString()} / {product.baseUnit || product.unit || "單位"}
|
||||
</span>
|
||||
) : (
|
||||
"-"
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onEdit(product)}
|
||||
className="button-outlined-primary"
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onRemove(product)}
|
||||
className="button-outlined-error"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
<div className="h-10 px-3 py-2 bg-gray-50/50 border border-border rounded-md text-gray-600 font-medium text-sm flex items-center">
|
||||
{item.baseUnit || "-"}
|
||||
</div>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative flex-1">
|
||||
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs">$</span>
|
||||
<Input
|
||||
type="number"
|
||||
min="0"
|
||||
step="any"
|
||||
value={item.lastPrice === undefined ? "" : item.lastPrice}
|
||||
onChange={(e) => onItemChange(index, "lastPrice", e.target.value === "" ? 0 : Number(e.target.value))}
|
||||
placeholder="0.00"
|
||||
className="pl-6 h-10 w-full text-right"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
|
||||
<TableCell className="text-center">
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="button-outlined-error h-10 w-10 p-0"
|
||||
title="移除項目"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>確定要移除此商品嗎？</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
此動作將從待更新清單中移除「{item.productName || "此商品"}」。需點擊下方的「更新供貨商品」才會正式生效。
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel className="button-outlined-primary">取消</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={() => onRemoveItem(index)}
|
||||
className="bg-red-600 hover:bg-red-700 text-white"
|
||||
>
|
||||
確定移除
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user