feat(inventory): 開放倉庫編號編輯、優化調撥單條碼搜尋與庫存匯入範本雙分頁說明
This commit is contained in:
@@ -1086,3 +1086,77 @@ import { Pencil } from 'lucide-react';
|
|||||||
5. ✅ **安全性**:統一的權限控制確保資料安全
|
5. ✅ **安全性**:統一的權限控制確保資料安全
|
||||||
|
|
||||||
當你在開發或審查 Star ERP 客戶端後台的 UI 時,請務必參考此規範!
|
當你在開發或審查 Star ERP 客戶端後台的 UI 時,請務必參考此規範!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 15. 批次匯入彈窗規範 (Batch Import Dialog)
|
||||||
|
|
||||||
|
為了確保系統中所有批次匯入功能(如:商品、庫存、客戶)的體驗一致,必須遵循以下 UI 結構與樣式。
|
||||||
|
|
||||||
|
### 15.1 標題結構
|
||||||
|
|
||||||
|
- **樣式**:保持簡潔,僅使用文字標題,不帶額外圖示。
|
||||||
|
- **文字**:統一為「匯入XXXX資料」。
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>匯入商品資料</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
請先下載範本,填寫完畢後上傳檔案進行批次處理。
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 15.2 分步引導區塊 (Step-by-Step Guide)
|
||||||
|
|
||||||
|
匯入流程必須分為三個清晰的步驟區塊:
|
||||||
|
|
||||||
|
#### 步驟 1:取得匯入範本
|
||||||
|
- **容器樣式**:`bg-gray-50 rounded-lg border border-gray-100 p-4 space-y-2`
|
||||||
|
- **標題圖示**:`<FileSpreadsheet className="w-4 h-4 text-green-600" />`
|
||||||
|
- **下載按鈕**:`variant="outline" size="sm" className="w-full sm:w-auto button-outlined-primary"`,並明確標註 `.xlsx`。
|
||||||
|
|
||||||
|
#### 步驟 2:設定資訊 (選甜)
|
||||||
|
- **容器樣式**:`space-y-2`
|
||||||
|
- **標題圖示**:`<Info className="w-4 h-4 text-primary-main" />`
|
||||||
|
- **欄位樣式**:使用標準 `Input`,標籤文字使用 `text-sm text-gray-700`。
|
||||||
|
- **預設值**:若有備註欄位,應提供合適的預設值(例如:「Excel 匯入」)。
|
||||||
|
|
||||||
|
#### 步驟 3:上傳填寫後的檔案
|
||||||
|
- **容器樣式**:`space-y-2`
|
||||||
|
- **標題圖示**:`<FileUp className="w-4 h-4 text-blue-600" />`
|
||||||
|
- **Input 樣式**:`type="file"`,並開啟 `cursor-pointer`。
|
||||||
|
|
||||||
|
### 15.3 規則說明面板 (Accordion Rules)
|
||||||
|
|
||||||
|
詳細的填寫說明必須收納於 `Accordion` 中,避免干擾主流程:
|
||||||
|
|
||||||
|
- **樣式**:標準灰色邊框,不使用特殊背景色 (如琥珀色)。
|
||||||
|
- **容器**:`className="w-full border rounded-lg px-2"`
|
||||||
|
- **觸發文字**:`text-sm text-gray-500`
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<Accordion type="single" collapsible className="w-full border rounded-lg px-2">
|
||||||
|
<AccordionItem value="rules" className="border-b-0">
|
||||||
|
<AccordionTrigger className="text-sm text-gray-500 hover:no-underline py-3">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Info className="h-4 w-4" />
|
||||||
|
匯入規則與提示
|
||||||
|
</div>
|
||||||
|
</AccordionTrigger>
|
||||||
|
<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></li>
|
||||||
|
<li>說明文字簡潔明瞭。</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
</Accordion>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 15.4 底部操作 (Footer)
|
||||||
|
|
||||||
|
- **取消按鈕**:`variant="outline"`,且為 `button-outlined-primary`。
|
||||||
|
- **提交按鈕**:`button-filled-primary`,且在處理中時顯示 `Loader2`。
|
||||||
|
|||||||
@@ -12,6 +12,10 @@ use App\Modules\Inventory\Models\Product;
|
|||||||
use App\Modules\Inventory\Models\Inventory;
|
use App\Modules\Inventory\Models\Inventory;
|
||||||
use App\Modules\Inventory\Models\InventoryTransaction;
|
use App\Modules\Inventory\Models\InventoryTransaction;
|
||||||
use App\Modules\Inventory\Models\WarehouseProductSafetyStock;
|
use App\Modules\Inventory\Models\WarehouseProductSafetyStock;
|
||||||
|
use App\Modules\Inventory\Imports\InventoryImport;
|
||||||
|
use App\Modules\Inventory\Exports\InventoryTemplateExport;
|
||||||
|
use Maatwebsite\Excel\Facades\Excel;
|
||||||
|
use Symfony\Component\HttpFoundation\BinaryFileResponse;
|
||||||
|
|
||||||
use App\Modules\Core\Contracts\CoreServiceInterface;
|
use App\Modules\Core\Contracts\CoreServiceInterface;
|
||||||
|
|
||||||
@@ -603,4 +607,35 @@ class InventoryController extends Controller
|
|||||||
|
|
||||||
return redirect()->back()->with('error', '未提供查詢參數');
|
return redirect()->back()->with('error', '未提供查詢參數');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 匯入入庫
|
||||||
|
*/
|
||||||
|
public function import(Request $request, Warehouse $warehouse)
|
||||||
|
{
|
||||||
|
$request->validate([
|
||||||
|
'file' => 'required|mimes:xlsx,xls,csv',
|
||||||
|
'inboundDate' => 'required|date',
|
||||||
|
'notes' => 'nullable|string',
|
||||||
|
]);
|
||||||
|
|
||||||
|
try {
|
||||||
|
Excel::import(
|
||||||
|
new InventoryImport($warehouse, $request->inboundDate, $request->notes),
|
||||||
|
$request->file('file')
|
||||||
|
);
|
||||||
|
|
||||||
|
return back()->with('success', '庫存資料匯入成功');
|
||||||
|
} catch (\Exception $e) {
|
||||||
|
return back()->withErrors(['file' => '匯入過程中發生錯誤: ' . $e->getMessage()]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 下載匯入範本 (.xlsx)
|
||||||
|
*/
|
||||||
|
public function template()
|
||||||
|
{
|
||||||
|
return Excel::download(new InventoryTemplateExport, '庫存匯入範本.xlsx');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -212,7 +212,8 @@ class TransferOrderController extends Controller
|
|||||||
return [
|
return [
|
||||||
'product_id' => (string) $inv->product_id,
|
'product_id' => (string) $inv->product_id,
|
||||||
'product_name' => $inv->product->name,
|
'product_name' => $inv->product->name,
|
||||||
'product_code' => $inv->product->code, // Added code
|
'product_code' => $inv->product->code,
|
||||||
|
'product_barcode' => $inv->product->barcode,
|
||||||
'batch_number' => $inv->batch_number,
|
'batch_number' => $inv->batch_number,
|
||||||
'quantity' => (float) $inv->quantity,
|
'quantity' => (float) $inv->quantity,
|
||||||
'unit_cost' => (float) $inv->unit_cost,
|
'unit_cost' => (float) $inv->unit_cost,
|
||||||
|
|||||||
@@ -123,6 +123,7 @@ class WarehouseController extends Controller
|
|||||||
public function store(Request $request)
|
public function store(Request $request)
|
||||||
{
|
{
|
||||||
$validated = $request->validate([
|
$validated = $request->validate([
|
||||||
|
'code' => 'required|string|max:20|unique:warehouses,code',
|
||||||
'name' => 'required|string|max:50',
|
'name' => 'required|string|max:50',
|
||||||
'address' => 'nullable|string|max:255',
|
'address' => 'nullable|string|max:255',
|
||||||
'description' => 'nullable|string',
|
'description' => 'nullable|string',
|
||||||
@@ -131,14 +132,6 @@ class WarehouseController extends Controller
|
|||||||
'driver_name' => 'nullable|string|max:50',
|
'driver_name' => 'nullable|string|max:50',
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// 自動產生代碼
|
|
||||||
$prefix = 'WH';
|
|
||||||
$lastWarehouse = Warehouse::latest('id')->first();
|
|
||||||
$nextId = $lastWarehouse ? $lastWarehouse->id + 1 : 1;
|
|
||||||
$code = $prefix . str_pad($nextId, 3, '0', STR_PAD_LEFT);
|
|
||||||
|
|
||||||
$validated['code'] = $code;
|
|
||||||
|
|
||||||
Warehouse::create($validated);
|
Warehouse::create($validated);
|
||||||
|
|
||||||
return redirect()->back()->with('success', '倉庫已建立');
|
return redirect()->back()->with('success', '倉庫已建立');
|
||||||
@@ -147,6 +140,7 @@ class WarehouseController extends Controller
|
|||||||
public function update(Request $request, Warehouse $warehouse)
|
public function update(Request $request, Warehouse $warehouse)
|
||||||
{
|
{
|
||||||
$validated = $request->validate([
|
$validated = $request->validate([
|
||||||
|
'code' => 'required|string|max:20|unique:warehouses,code,' . $warehouse->id,
|
||||||
'name' => 'required|string|max:50',
|
'name' => 'required|string|max:50',
|
||||||
'address' => 'nullable|string|max:255',
|
'address' => 'nullable|string|max:255',
|
||||||
'description' => 'nullable|string',
|
'description' => 'nullable|string',
|
||||||
|
|||||||
79
app/Modules/Inventory/Exports/InventoryTemplateExport.php
Normal file
79
app/Modules/Inventory/Exports/InventoryTemplateExport.php
Normal file
@@ -0,0 +1,79 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\Modules\Inventory\Exports;
|
||||||
|
|
||||||
|
use Maatwebsite\Excel\Concerns\WithMultipleSheets;
|
||||||
|
use Maatwebsite\Excel\Concerns\FromArray;
|
||||||
|
use Maatwebsite\Excel\Concerns\WithHeadings;
|
||||||
|
use Maatwebsite\Excel\Concerns\WithTitle;
|
||||||
|
use Maatwebsite\Excel\Concerns\ShouldAutoSize;
|
||||||
|
|
||||||
|
class InventoryTemplateExport implements WithMultipleSheets
|
||||||
|
{
|
||||||
|
public function sheets(): array
|
||||||
|
{
|
||||||
|
return [
|
||||||
|
new InventoryDataSheet(),
|
||||||
|
new InventoryInstructionSheet(),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class InventoryDataSheet implements FromArray, WithHeadings, WithTitle, ShouldAutoSize
|
||||||
|
{
|
||||||
|
public function array(): array
|
||||||
|
{
|
||||||
|
// 資料分頁保持完全空白
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
public function headings(): array
|
||||||
|
{
|
||||||
|
return [
|
||||||
|
'商品條碼',
|
||||||
|
'商品代號',
|
||||||
|
'商品名稱',
|
||||||
|
'數量',
|
||||||
|
'入庫單價',
|
||||||
|
'批號',
|
||||||
|
'產地',
|
||||||
|
'效期',
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
public function title(): string
|
||||||
|
{
|
||||||
|
return '資料填寫';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class InventoryInstructionSheet implements FromArray, WithHeadings, WithTitle, ShouldAutoSize
|
||||||
|
{
|
||||||
|
public function array(): array
|
||||||
|
{
|
||||||
|
return [
|
||||||
|
['商品條碼', '擇一輸入', '系統會「優先」依據條碼匹配商品。若有填寫,條碼必須存在於系統中'],
|
||||||
|
['商品代號', '擇一輸入', '若條碼未填寫,系統會依據代號匹配商品'],
|
||||||
|
['商品名稱', '選填', '僅供對照參考,匯入時系統會自動忽略此欄位內容'],
|
||||||
|
['數量', '必填', '入庫的商品數量,須為大於 0 的數字'],
|
||||||
|
['入庫單價', '選填', '未填寫時將預設使用商品的「採購成本價」'],
|
||||||
|
['批號', '選填', '如需批次控管請填寫,若留空系統會自動標記為 "NO-BATCH"'],
|
||||||
|
['產地', '選填', '商品的生產地資訊 (如:TW)'],
|
||||||
|
['效期', '選填', '格式請務必使用 YYYY-MM-DD (例如: 2026-12-31)'],
|
||||||
|
['', '', ''],
|
||||||
|
['匹配規則說明', '', '1. 系統會優先比對「商品條碼」。'],
|
||||||
|
['', '', '2. 若條碼欄位為空,則嘗試比對「商品代號」。'],
|
||||||
|
['', '', '3. 若上述兩者皆無法匹配到既有商品,該列資料將匯入失敗。'],
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
public function headings(): array
|
||||||
|
{
|
||||||
|
return ['欄位名稱', '必要性', '填寫說明'];
|
||||||
|
}
|
||||||
|
|
||||||
|
public function title(): string
|
||||||
|
{
|
||||||
|
return '填寫規則';
|
||||||
|
}
|
||||||
|
}
|
||||||
122
app/Modules/Inventory/Imports/InventoryImport.php
Normal file
122
app/Modules/Inventory/Imports/InventoryImport.php
Normal file
@@ -0,0 +1,122 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\Modules\Inventory\Imports;
|
||||||
|
|
||||||
|
use App\Modules\Inventory\Models\Product;
|
||||||
|
use App\Modules\Inventory\Models\Inventory;
|
||||||
|
use App\Modules\Inventory\Models\Warehouse;
|
||||||
|
use Maatwebsite\Excel\Concerns\ToModel;
|
||||||
|
use Maatwebsite\Excel\Concerns\WithHeadingRow;
|
||||||
|
use Maatwebsite\Excel\Concerns\WithValidation;
|
||||||
|
use Maatwebsite\Excel\Concerns\WithMapping;
|
||||||
|
use Maatwebsite\Excel\Imports\HeadingRowFormatter;
|
||||||
|
use Illuminate\Support\Facades\DB;
|
||||||
|
|
||||||
|
class InventoryImport implements ToModel, WithHeadingRow, WithValidation, WithMapping
|
||||||
|
{
|
||||||
|
private $warehouse;
|
||||||
|
private $inboundDate;
|
||||||
|
private $notes;
|
||||||
|
|
||||||
|
public function __construct(Warehouse $warehouse, string $inboundDate, ?string $notes = null)
|
||||||
|
{
|
||||||
|
HeadingRowFormatter::default('none');
|
||||||
|
$this->warehouse = $warehouse;
|
||||||
|
$this->inboundDate = $inboundDate;
|
||||||
|
$this->notes = $notes;
|
||||||
|
}
|
||||||
|
|
||||||
|
public function map($row): array
|
||||||
|
{
|
||||||
|
// 處理條碼或代號為字串
|
||||||
|
if (isset($row['商品條碼'])) {
|
||||||
|
$row['商品條碼'] = (string) $row['商品條碼'];
|
||||||
|
}
|
||||||
|
if (isset($row['商品代號'])) {
|
||||||
|
$row['商品代號'] = (string) $row['商品代號'];
|
||||||
|
}
|
||||||
|
return $row;
|
||||||
|
}
|
||||||
|
|
||||||
|
public function model(array $row)
|
||||||
|
{
|
||||||
|
// 查找商品
|
||||||
|
$product = null;
|
||||||
|
if (!empty($row['商品條碼'])) {
|
||||||
|
$product = Product::where('barcode', $row['商品條碼'])->first();
|
||||||
|
}
|
||||||
|
if (!$product && !empty($row['商品代號'])) {
|
||||||
|
$product = Product::where('code', $row['商品代號'])->first();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!$product) {
|
||||||
|
return null; // 透過 Validation 攔截
|
||||||
|
}
|
||||||
|
|
||||||
|
$quantity = (float) $row['數量'];
|
||||||
|
$unitCost = isset($row['入庫單價']) ? (float) $row['入庫單價'] : ($product->cost_price ?? 0);
|
||||||
|
|
||||||
|
// 批號邏輯:若 Excel 留空則使用 NO-BATCH
|
||||||
|
$batchNumber = !empty($row['批號']) ? $row['批號'] : 'NO-BATCH';
|
||||||
|
$originCountry = $row['產地'] ?? 'TW';
|
||||||
|
$expiryDate = !empty($row['效期']) ? $row['效期'] : null;
|
||||||
|
|
||||||
|
return DB::transaction(function () use ($product, $quantity, $unitCost, $batchNumber, $originCountry, $expiryDate) {
|
||||||
|
// 使用與 InventoryController 相同的 firstOrNew 邏輯
|
||||||
|
$inventory = $this->warehouse->inventories()->withTrashed()->firstOrNew(
|
||||||
|
[
|
||||||
|
'product_id' => $product->id,
|
||||||
|
'batch_number' => $batchNumber
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'quantity' => 0,
|
||||||
|
'unit_cost' => $unitCost,
|
||||||
|
'total_value' => 0,
|
||||||
|
'arrival_date' => $this->inboundDate,
|
||||||
|
'expiry_date' => $expiryDate,
|
||||||
|
'origin_country' => $originCountry,
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
||||||
|
if ($inventory->trashed()) {
|
||||||
|
$inventory->restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新數量
|
||||||
|
$oldQty = $inventory->quantity;
|
||||||
|
$inventory->quantity += $quantity;
|
||||||
|
|
||||||
|
// 更新單價與總價值
|
||||||
|
$inventory->unit_cost = $unitCost;
|
||||||
|
$inventory->total_value = $inventory->quantity * $unitCost;
|
||||||
|
$inventory->save();
|
||||||
|
|
||||||
|
// 記錄交易歷史
|
||||||
|
$inventory->transactions()->create([
|
||||||
|
'warehouse_id' => $this->warehouse->id,
|
||||||
|
'product_id' => $product->id,
|
||||||
|
'batch_number' => $inventory->batch_number,
|
||||||
|
'quantity' => $quantity,
|
||||||
|
'unit_cost' => $unitCost,
|
||||||
|
'transaction_type' => '手動入庫',
|
||||||
|
'reason' => 'Excel 匯入入庫',
|
||||||
|
'notes' => $this->notes,
|
||||||
|
'expiry_date' => $inventory->expiry_date,
|
||||||
|
]);
|
||||||
|
|
||||||
|
return $inventory;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
public function rules(): array
|
||||||
|
{
|
||||||
|
return [
|
||||||
|
'商品條碼' => ['nullable', 'string'],
|
||||||
|
'商品代號' => ['nullable', 'string'],
|
||||||
|
'數量' => ['required', 'numeric', 'min:0.01'],
|
||||||
|
'入庫單價' => ['nullable', 'numeric', 'min:0'],
|
||||||
|
'效期' => ['nullable', 'date'],
|
||||||
|
'產地' => ['nullable', 'string', 'max:2'],
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -56,6 +56,8 @@ Route::middleware('auth')->group(function () {
|
|||||||
Route::middleware('permission:inventory.adjust')->group(function () {
|
Route::middleware('permission:inventory.adjust')->group(function () {
|
||||||
Route::get('/warehouses/{warehouse}/inventory/create', [InventoryController::class, 'create'])->name('warehouses.inventory.create');
|
Route::get('/warehouses/{warehouse}/inventory/create', [InventoryController::class, 'create'])->name('warehouses.inventory.create');
|
||||||
Route::post('/warehouses/{warehouse}/inventory', [InventoryController::class, 'store'])->name('warehouses.inventory.store');
|
Route::post('/warehouses/{warehouse}/inventory', [InventoryController::class, 'store'])->name('warehouses.inventory.store');
|
||||||
|
Route::get('/warehouses/inventory/template', [InventoryController::class, 'template'])->name('warehouses.inventory.template');
|
||||||
|
Route::post('/warehouses/{warehouse}/inventory/import', [InventoryController::class, 'import'])->name('warehouses.inventory.import');
|
||||||
Route::get('/warehouses/{warehouse}/inventory/{inventoryId}/edit', [InventoryController::class, 'edit'])->name('warehouses.inventory.edit');
|
Route::get('/warehouses/{warehouse}/inventory/{inventoryId}/edit', [InventoryController::class, 'edit'])->name('warehouses.inventory.edit');
|
||||||
Route::put('/warehouses/{warehouse}/inventory/{inventoryId}', [InventoryController::class, 'update'])->name('warehouses.inventory.update');
|
Route::put('/warehouses/{warehouse}/inventory/{inventoryId}', [InventoryController::class, 'update'])->name('warehouses.inventory.update');
|
||||||
Route::delete('/warehouses/{warehouse}/inventory/{inventoryId}', [InventoryController::class, 'destroy'])->name('warehouses.inventory.destroy');
|
Route::delete('/warehouses/{warehouse}/inventory/{inventoryId}', [InventoryController::class, 'destroy'])->name('warehouses.inventory.destroy');
|
||||||
|
|||||||
@@ -0,0 +1,203 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { useForm } from "@inertiajs/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 { Download, FileUp, Loader2, AlertCircle, FileSpreadsheet, Info } from "lucide-react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { Alert, AlertDescription } from "@/Components/ui/alert";
|
||||||
|
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/Components/ui/accordion";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
open: boolean;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
warehouseId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function InventoryImportDialog({ open, onOpenChange, warehouseId }: Props) {
|
||||||
|
const { data, setData, post, processing, errors, reset, clearErrors } = useForm({
|
||||||
|
file: null as File | null,
|
||||||
|
inboundDate: new Date().toISOString().split('T')[0],
|
||||||
|
notes: "Excel 匯入",
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
post(route("warehouses.inventory.import", warehouseId), {
|
||||||
|
forceFormData: true,
|
||||||
|
onSuccess: () => {
|
||||||
|
toast.success("庫存匯入完成");
|
||||||
|
onOpenChange(false);
|
||||||
|
reset();
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
console.error("Import error:", err);
|
||||||
|
toast.error("匯入失敗,請檢查檔案格式");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDownloadTemplate = () => {
|
||||||
|
window.location.href = route("warehouses.inventory.template");
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={(val) => {
|
||||||
|
onOpenChange(val);
|
||||||
|
if (!val) {
|
||||||
|
reset();
|
||||||
|
clearErrors();
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
<DialogContent className="sm:max-w-[550px]">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>匯入庫存資料</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
請先下載範本,填寫完畢後上傳檔案進行批次入庫。
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
{/* 步驟 1: 下載範本 */}
|
||||||
|
<div className="space-y-2 p-4 bg-gray-50 rounded-lg border border-gray-100">
|
||||||
|
<Label className="font-medium flex items-center gap-2">
|
||||||
|
<FileSpreadsheet className="w-4 h-4 text-green-600" />
|
||||||
|
步驟 1:取得匯入範本
|
||||||
|
</Label>
|
||||||
|
<div className="text-sm text-gray-500 mb-2">
|
||||||
|
下載標準範本以確保資料格式正確。請勿修改標題欄位。
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={handleDownloadTemplate}
|
||||||
|
className="w-full sm:w-auto button-outlined-primary"
|
||||||
|
>
|
||||||
|
<Download className="w-4 h-4 mr-2" />
|
||||||
|
下載庫存匯入範本 (.xlsx)
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 步驟 2: 設定資訊 */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label className="font-medium flex items-center gap-2">
|
||||||
|
<Info className="w-4 h-4 text-primary-main" />
|
||||||
|
步驟 2:設定入庫資訊
|
||||||
|
</Label>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="inboundDate" className="text-sm text-gray-700 flex items-center gap-1.5 align-middle">
|
||||||
|
入庫日期 <span className="text-red-500">*</span>
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="inboundDate"
|
||||||
|
type="date"
|
||||||
|
value={data.inboundDate}
|
||||||
|
onChange={e => setData('inboundDate', e.target.value)}
|
||||||
|
required
|
||||||
|
className="cursor-pointer"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="notes" className="text-sm text-gray-700 flex items-center gap-1.5">
|
||||||
|
入庫備註
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="notes"
|
||||||
|
placeholder="選填備註"
|
||||||
|
value={data.notes}
|
||||||
|
onChange={e => setData('notes', e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 步驟 3: 上傳檔案 */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label className="font-medium flex items-center gap-2">
|
||||||
|
<FileUp className="w-4 h-4 text-blue-600" />
|
||||||
|
步驟 3:上傳填寫後的檔案
|
||||||
|
</Label>
|
||||||
|
<div className="grid w-full max-w-sm items-center gap-1.5">
|
||||||
|
<Input
|
||||||
|
id="file"
|
||||||
|
type="file"
|
||||||
|
accept=".xlsx,.xls,.csv"
|
||||||
|
onChange={e => setData('file', e.target.files ? e.target.files[0] : null)}
|
||||||
|
required
|
||||||
|
className="cursor-pointer"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{errors.file && (
|
||||||
|
<Alert variant="destructive" className="mt-2">
|
||||||
|
<AlertCircle className="h-4 w-4" />
|
||||||
|
<AlertDescription className="whitespace-pre-wrap">
|
||||||
|
{errors.file}
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 欄位說明 */}
|
||||||
|
<Accordion type="single" collapsible className="w-full border rounded-lg px-2">
|
||||||
|
<AccordionItem value="rules" className="border-b-0">
|
||||||
|
<AccordionTrigger className="text-sm text-gray-500 hover:no-underline py-3">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Info className="h-4 w-4" />
|
||||||
|
庫存匯入規則與提示
|
||||||
|
</div>
|
||||||
|
</AccordionTrigger>
|
||||||
|
<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>:優先使用「商品條碼」匹配,其次為「商品代號」。</li>
|
||||||
|
<li><span className="font-medium text-gray-700">無批號模式</span>:若 Excel 中的「批號」欄位<span className="underline">保持空白</span>,系統將自動累加至該商品的「通用紀錄」。</li>
|
||||||
|
<li><span className="font-medium text-gray-700">效期設定</span>:若商品無效期概念可留空,或輸入格式如:2026/12/31。</li>
|
||||||
|
<li><span className="font-medium text-gray-700">入庫單價</span>:未填寫時將預設使用商品的「採購成本價」。</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
</Accordion>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => onOpenChange(false)}
|
||||||
|
disabled={processing}
|
||||||
|
className="button-outlined-primary"
|
||||||
|
>
|
||||||
|
取消
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
disabled={processing || !data.file}
|
||||||
|
className="button-filled-primary"
|
||||||
|
>
|
||||||
|
{processing ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
上傳中...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
"開始匯入"
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -143,14 +143,15 @@ export default function WarehouseDialog({
|
|||||||
{/* 倉庫編號 */}
|
{/* 倉庫編號 */}
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<Label htmlFor="code">
|
<Label htmlFor="code">
|
||||||
倉庫編號
|
倉庫編號 <span className="text-red-500">*</span>
|
||||||
</Label>
|
</Label>
|
||||||
<Input
|
<Input
|
||||||
id="code"
|
id="code"
|
||||||
value={warehouse ? formData.code : ""}
|
value={formData.code}
|
||||||
disabled={true}
|
onChange={(e) => setFormData({ ...formData, code: e.target.value })}
|
||||||
placeholder={warehouse ? "" : "系統自動產生"}
|
placeholder="請輸入倉庫編號"
|
||||||
className="bg-gray-100"
|
required
|
||||||
|
className="h-9"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -84,7 +84,8 @@ export default function Show({ order }: any) {
|
|||||||
const toggleSelectAll = () => {
|
const toggleSelectAll = () => {
|
||||||
const filtered = availableInventory.filter(inv =>
|
const filtered = availableInventory.filter(inv =>
|
||||||
inv.product_name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
inv.product_name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
inv.product_code.toLowerCase().includes(searchQuery.toLowerCase())
|
inv.product_code.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
(inv.product_barcode && inv.product_barcode.toLowerCase().includes(searchQuery.toLowerCase()))
|
||||||
);
|
);
|
||||||
const filteredKeys = filtered.map(inv => `${inv.product_id}-${inv.batch_number}`);
|
const filteredKeys = filtered.map(inv => `${inv.product_id}-${inv.batch_number}`);
|
||||||
|
|
||||||
@@ -338,10 +339,10 @@ export default function Show({ order }: any) {
|
|||||||
<DialogContent className="max-w-4xl max-h-[85vh] flex flex-col p-6">
|
<DialogContent className="max-w-4xl max-h-[85vh] flex flex-col p-6">
|
||||||
<DialogHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
|
<DialogHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
|
||||||
<DialogTitle className="text-xl">選擇來源庫存 ({order.from_warehouse_name})</DialogTitle>
|
<DialogTitle className="text-xl">選擇來源庫存 ({order.from_warehouse_name})</DialogTitle>
|
||||||
<div className="relative w-64">
|
<div className="relative w-72">
|
||||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-grey-3" />
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-grey-3" />
|
||||||
<Input
|
<Input
|
||||||
placeholder="搜尋品名或代號..."
|
placeholder="搜尋品名、代號或條碼..."
|
||||||
className="pl-9 h-9 border-2 border-grey-3 focus:ring-primary-main"
|
className="pl-9 h-9 border-2 border-grey-3 focus:ring-primary-main"
|
||||||
value={searchQuery}
|
value={searchQuery}
|
||||||
onChange={(e) => setSearchQuery(e.target.value)}
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
@@ -364,7 +365,8 @@ export default function Show({ order }: any) {
|
|||||||
checked={availableInventory.length > 0 && (() => {
|
checked={availableInventory.length > 0 && (() => {
|
||||||
const filtered = availableInventory.filter(inv =>
|
const filtered = availableInventory.filter(inv =>
|
||||||
inv.product_name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
inv.product_name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
inv.product_code.toLowerCase().includes(searchQuery.toLowerCase())
|
inv.product_code.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
(inv.product_barcode && inv.product_barcode.toLowerCase().includes(searchQuery.toLowerCase()))
|
||||||
);
|
);
|
||||||
const filteredKeys = filtered.map(inv => `${inv.product_id}-${inv.batch_number}`);
|
const filteredKeys = filtered.map(inv => `${inv.product_id}-${inv.batch_number}`);
|
||||||
return filteredKeys.length > 0 && filteredKeys.every(k => selectedInventory.includes(k));
|
return filteredKeys.length > 0 && filteredKeys.every(k => selectedInventory.includes(k));
|
||||||
@@ -383,7 +385,8 @@ export default function Show({ order }: any) {
|
|||||||
{(() => {
|
{(() => {
|
||||||
const filtered = availableInventory.filter(inv =>
|
const filtered = availableInventory.filter(inv =>
|
||||||
inv.product_name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
inv.product_name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
inv.product_code.toLowerCase().includes(searchQuery.toLowerCase())
|
inv.product_code.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
(inv.product_barcode && inv.product_barcode.toLowerCase().includes(searchQuery.toLowerCase()))
|
||||||
);
|
);
|
||||||
|
|
||||||
if (filtered.length === 0) {
|
if (filtered.length === 0) {
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { useState, useMemo } from "react";
|
import { useState, useMemo } from "react";
|
||||||
import { ArrowLeft, PackagePlus, AlertTriangle, Shield, Boxes } from "lucide-react";
|
import { ArrowLeft, PackagePlus, AlertTriangle, Shield, Boxes, FileUp } from "lucide-react";
|
||||||
import { Button } from "@/Components/ui/button";
|
import { Button } from "@/Components/ui/button";
|
||||||
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
|
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
|
||||||
import { Head, Link, router } from "@inertiajs/react";
|
import { Head, Link, router } from "@inertiajs/react";
|
||||||
@@ -20,6 +20,7 @@ import {
|
|||||||
AlertDialogTitle,
|
AlertDialogTitle,
|
||||||
} from "@/Components/ui/alert-dialog";
|
} from "@/Components/ui/alert-dialog";
|
||||||
import { Can } from "@/Components/Permission/Can";
|
import { Can } from "@/Components/Permission/Can";
|
||||||
|
import InventoryImportDialog from "@/Components/Warehouse/Inventory/InventoryImportDialog";
|
||||||
|
|
||||||
// 庫存頁面 Props
|
// 庫存頁面 Props
|
||||||
interface Props {
|
interface Props {
|
||||||
@@ -38,6 +39,7 @@ export default function WarehouseInventoryPage({
|
|||||||
const [searchTerm, setSearchTerm] = useState("");
|
const [searchTerm, setSearchTerm] = useState("");
|
||||||
const [typeFilter, setTypeFilter] = useState<string>("all");
|
const [typeFilter, setTypeFilter] = useState<string>("all");
|
||||||
const [deleteId, setDeleteId] = useState<string | null>(null);
|
const [deleteId, setDeleteId] = useState<string | null>(null);
|
||||||
|
const [importDialogOpen, setImportDialogOpen] = useState(false);
|
||||||
|
|
||||||
// 篩選庫存列表
|
// 篩選庫存列表
|
||||||
const filteredInventories = useMemo(() => {
|
const filteredInventories = useMemo(() => {
|
||||||
@@ -157,6 +159,18 @@ export default function WarehouseInventoryPage({
|
|||||||
庫存警告:{lowStockItems} 項
|
庫存警告:{lowStockItems} 項
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
|
{/* 匯入入庫按鈕 */}
|
||||||
|
<Can permission="inventory.adjust">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="button-outlined-primary"
|
||||||
|
onClick={() => setImportDialogOpen(true)}
|
||||||
|
>
|
||||||
|
<FileUp className="mr-2 h-4 w-4" />
|
||||||
|
匯入入庫
|
||||||
|
</Button>
|
||||||
|
</Can>
|
||||||
|
|
||||||
{/* 新增庫存按鈕 */}
|
{/* 新增庫存按鈕 */}
|
||||||
<Can permission="inventory.adjust">
|
<Can permission="inventory.adjust">
|
||||||
<Link href={route('warehouses.inventory.create', warehouse.id)}>
|
<Link href={route('warehouses.inventory.create', warehouse.id)}>
|
||||||
@@ -210,6 +224,13 @@ export default function WarehouseInventoryPage({
|
|||||||
</AlertDialogFooter>
|
</AlertDialogFooter>
|
||||||
</AlertDialogContent>
|
</AlertDialogContent>
|
||||||
</AlertDialog>
|
</AlertDialog>
|
||||||
|
|
||||||
|
{/* 匯入對話框 */}
|
||||||
|
<InventoryImportDialog
|
||||||
|
open={importDialogOpen}
|
||||||
|
onOpenChange={setImportDialogOpen}
|
||||||
|
warehouseId={warehouse.id}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</AuthenticatedLayout>
|
</AuthenticatedLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user