mama/star-erp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增採購單發票欄位、更新 SearchableSelect 樣式與搜尋門檻至 10 個項目
All checks were successful
Koori-ERP-Deploy-System / deploy-demo (push) Successful in 1m17s
Details
Koori-ERP-Deploy-System / deploy-production (push) Has been skipped
Details

Browse Source
This commit is contained in:
sky121113
2026-01-09 10:18:52 +08:00
parent d60367ac57
commit 24ae6f3eee
13 changed files with 451 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
resources/js/Pages/PurchaseOrder/Create.tsx
View File

@@ -7,13 +7,7 @@ import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Textarea } from "@/Components/ui/textarea";
import { Alert, AlertDescription } from "@/Components/ui/alert";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/Components/ui/select";
import { SearchableSelect } from "@/Components/ui/searchable-select";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head, Link, router } from "@inertiajs/react";
import { PurchaseOrderItemsTable } from "@/Components/PurchaseOrder/PurchaseOrderItemsTable";
@@ -58,6 +52,12 @@ export default function CreatePurchaseOrder({
updateItem,
status,
setStatus,
invoiceNumber,
invoiceDate,
invoiceAmount,
setInvoiceNumber,
setInvoiceDate,
setInvoiceAmount,
} = usePurchaseOrderForm({ order, suppliers });
@@ -110,6 +110,9 @@ export default function CreatePurchaseOrder({
expected_delivery_date: expectedDate,
remark: notes,
status: status,
invoice_number: invoiceNumber || null,
invoice_date: invoiceDate || null,
invoice_amount: invoiceAmount ? parseFloat(invoiceAmount) : null,
items: validItems.map(item => ({
productId: item.productId,
quantity: item.quantity,
@@ -191,40 +194,26 @@ export default function CreatePurchaseOrder({
<label className="text-sm font-bold text-gray-700">
預計入庫倉庫
</label>
<Select
<SearchableSelect
value={String(warehouseId)}
onValueChange={setWarehouseId}
disabled={isOrderSent}
>
<SelectTrigger className="h-12 border-gray-200 focus:ring-primary/20">
<SelectValue placeholder="請選擇倉庫" />
</SelectTrigger>
<SelectContent>
{warehouses.map((w) => (
<SelectItem key={w.id} value={String(w.id)}>
{w.name}
</SelectItem>
))}
</SelectContent>
</Select>
options={warehouses.map((w) => ({ label: w.name, value: String(w.id) }))}
placeholder="請選擇倉庫"
searchPlaceholder="搜尋倉庫..."
/>
</div>
<div className="space-y-3">
<label className="text-sm font-bold text-gray-700">供應商</label>
<Select
<SearchableSelect
value={String(supplierId)}
onValueChange={setSupplierId}
disabled={isOrderSent}
>
<SelectTrigger className="h-12 border-gray-200">
<SelectValue placeholder="選擇供應商" />
</SelectTrigger>
<SelectContent>
{suppliers.map((s) => (
<SelectItem key={s.id} value={String(s.id)}>{s.name}</SelectItem>
))}
</SelectContent>
</Select>
options={suppliers.map((s) => ({ label: s.name, value: String(s.id) }))}
placeholder="選擇供應商"
searchPlaceholder="搜尋供應商..."
/>
</div>
</div>
@@ -245,21 +234,12 @@ export default function CreatePurchaseOrder({
{order && (
<div className="space-y-3">
<label className="text-sm font-bold text-gray-700">狀態</label>
<Select
<SearchableSelect
value={status}
onValueChange={(v) => setStatus(v as any)}
>
<SelectTrigger className="h-12 border-gray-200">
<SelectValue placeholder="選擇狀態" />
</SelectTrigger>
<SelectContent>
{STATUS_OPTIONS.map((opt) => (
<SelectItem key={opt.value} value={opt.value}>
{opt.label}
</SelectItem>
))}
</SelectContent>
</Select>
options={STATUS_OPTIONS.map((opt) => ({ label: opt.label, value: opt.value }))}
placeholder="選擇狀態"
/>
</div>
)}
</div>
@@ -276,11 +256,71 @@ export default function CreatePurchaseOrder({
</div>
</div>
{/* 步驟二：品項明細 */}
{/* 發票資訊 */}
<div className="bg-white rounded-lg border shadow-sm overflow-hidden">
<div className="p-6 bg-gray-50/50 border-b flex items-center gap-3">
<div className="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold">2</div>
<h2 className="text-lg font-bold">發票資訊</h2>
<span className="text-sm text-gray-500">（選填）</span>
</div>
<div className="p-8 space-y-8">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="space-y-3">
<label className="text-sm font-bold text-gray-700">
發票號碼
</label>
<Input
type="text"
value={invoiceNumber}
onChange={(e) => setInvoiceNumber(e.target.value)}
placeholder="AB-12345678"
maxLength={11}
className="h-12 border-gray-200"
/>
<p className="text-xs text-gray-500">格式：2 碼英文 + 分隔線 + 8 碼數字</p>
</div>
<div className="space-y-3">
<label className="text-sm font-bold text-gray-700">
發票日期
</label>
<Input
type="date"
value={invoiceDate}
onChange={(e) => setInvoiceDate(e.target.value)}
className="h-12 border-gray-200"
/>
</div>
<div className="space-y-3">
<label className="text-sm font-bold text-gray-700">
發票金額
</label>
<Input
type="number"
value={invoiceAmount}
onChange={(e) => setInvoiceAmount(e.target.value)}
placeholder="0"
min="0"
step="0.01"
className="h-12 border-gray-200"
/>
{invoiceAmount && totalAmount > 0 && parseFloat(invoiceAmount) !== totalAmount && (
<p className="text-xs text-amber-600">
⚠️ 發票金額與採購總額不一致（總額：{formatCurrency(totalAmount)}）
</p>
)}
</div>
</div>
</div>
</div>
{/* 步驟三：品項明細 */}
<div className={`bg-white rounded-lg border shadow-sm overflow-hidden transition-all duration-300 ${!hasSupplier ? 'opacity-60 saturate-50' : ''}`}>
<div className="p-6 bg-gray-50/50 border-b flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold">2</div>
<div className="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold">3</div>
<h2 className="text-lg font-bold">採購商品明細</h2>
</div>
<Button