sky121113
0a955fb993
All checks were successful
ERP-Deploy-Demo / deploy-demo (push) Successful in 1m0s
665 lines
33 KiB
TypeScript
665 lines
33 KiB
TypeScript
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/Components/ui/dialog";
|
|
import { Badge } from "@/Components/ui/badge";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/Components/ui/table";
|
|
import { User, Clock, Package, Activity as ActivityIcon } from "lucide-react";
|
|
|
|
interface Activity {
|
|
id: number;
|
|
description: string;
|
|
subject_type: string;
|
|
event: string;
|
|
causer: string;
|
|
created_at: string;
|
|
properties: {
|
|
attributes?: Record<string, any>;
|
|
old?: Record<string, any>;
|
|
snapshot?: Record<string, any>;
|
|
sub_subject?: string;
|
|
items_diff?: {
|
|
added: any[];
|
|
removed: any[];
|
|
updated: any[];
|
|
};
|
|
};
|
|
}
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
activity: Activity | null;
|
|
}
|
|
|
|
// 欄位翻譯對照表
|
|
const fieldLabels: Record<string, string> = {
|
|
id: 'ID',
|
|
created_at: '建立時間',
|
|
updated_at: '更新時間',
|
|
deleted_at: '刪除時間',
|
|
name: '名稱',
|
|
code: '商品代號',
|
|
username: '登入帳號',
|
|
description: '描述',
|
|
// ... (保持原有翻譯)
|
|
price: '價格',
|
|
cost: '成本',
|
|
stock: '庫存',
|
|
category_id: '分類',
|
|
unit_id: '單位',
|
|
is_active: '啟用狀態',
|
|
conversion_rate: '換算率',
|
|
specification: '規格',
|
|
brand: '品牌',
|
|
base_unit_id: '基本單位',
|
|
large_unit_id: '大單位',
|
|
purchase_unit_id: '採購單位',
|
|
email: 'Email',
|
|
password: '密碼',
|
|
phone: '電話',
|
|
address: '地址',
|
|
role_id: '角色',
|
|
email_verified_at: '電子郵件驗證時間',
|
|
remember_token: '登入權杖',
|
|
barcode: '條碼',
|
|
external_pos_id: '外部 POS ID',
|
|
cost_price: '成本價',
|
|
member_price: '會員價',
|
|
wholesale_price: '批發價',
|
|
// 快照欄位
|
|
category_name: '分類名稱',
|
|
base_unit_name: '基本單位名稱',
|
|
large_unit_name: '大單位名稱',
|
|
purchase_unit_name: '採購單位名稱',
|
|
// 廠商欄位
|
|
short_name: '簡稱',
|
|
tax_id: '統編',
|
|
owner: '負責人',
|
|
contact_name: '聯絡人',
|
|
tel: '電話',
|
|
remark: '備註',
|
|
license_plate: '車牌號碼',
|
|
driver_name: '司機姓名',
|
|
default_transit_warehouse_id: '預設在途倉庫',
|
|
// 倉庫與庫存欄位
|
|
warehouse_name: '倉庫名稱',
|
|
product_name: '商品名稱',
|
|
warehouse_id: '倉庫',
|
|
product_id: '商品',
|
|
quantity: '數量',
|
|
safety_stock: '安全庫存',
|
|
location: '儲位',
|
|
unit_cost: '單位成本',
|
|
total_value: '總價值',
|
|
// 庫存欄位
|
|
batch_number: '批號',
|
|
box_number: '箱號',
|
|
origin_country: '來源國家',
|
|
arrival_date: '入庫日期',
|
|
expiry_date: '有效期限',
|
|
source_purchase_order_id: '來源採購單',
|
|
quality_status: '品質狀態',
|
|
quality_remark: '品質備註',
|
|
purchase_order_id: '來源採購單',
|
|
inventory_id: '庫存 ID',
|
|
balance_before: '異動前餘額',
|
|
balance_after: '異動後餘額',
|
|
reference_type: '參考單據類型',
|
|
reference_id: '參考單據 ID',
|
|
actual_time: '實際時點',
|
|
// 採購單欄位
|
|
po_number: '採購單號',
|
|
vendor_id: '廠商',
|
|
vendor_name: '廠商名稱',
|
|
user_name: '建單人員',
|
|
user_id: '建單人員',
|
|
total_amount: '小計',
|
|
expected_delivery_date: '預計到貨日',
|
|
order_date: '下單日期',
|
|
status: '狀態',
|
|
tax_amount: '稅額',
|
|
grand_total: '總計',
|
|
invoice_number: '發票號碼',
|
|
invoice_date: '發票日期',
|
|
invoice_amount: '發票金額',
|
|
last_price: '供貨價格',
|
|
// 公共事業費欄位
|
|
transaction_date: '費用日期',
|
|
category: '費用類別',
|
|
amount: '金額',
|
|
// 進貨單欄位
|
|
gr_number: '進貨單號',
|
|
received_date: '入庫日期',
|
|
type: '入庫類型',
|
|
remarks: '備註',
|
|
// 生產管理欄位
|
|
production_number: '工單編號',
|
|
production_date: '生產日期',
|
|
actual_quantity: '實際產量',
|
|
consumption_status: '物料消耗狀態',
|
|
recipe_id: '生產配方',
|
|
recipe_name: '配方名稱',
|
|
yield_quantity: '預期產量',
|
|
// 庫存單據通用欄位
|
|
doc_no: '單據編號',
|
|
snapshot_date: '快照日期',
|
|
completed_at: '完成日期',
|
|
posted_at: '過帳日期',
|
|
from_warehouse_id: '來源倉庫',
|
|
from_warehouse_name: '來源倉庫名稱',
|
|
to_warehouse_id: '目的地倉庫',
|
|
to_warehouse_name: '目的地倉庫名稱',
|
|
reason: '原因',
|
|
count_doc_id: '盤點單 ID',
|
|
count_doc_no: '盤點單號',
|
|
created_by: '建立者',
|
|
updated_by: '更新者',
|
|
completed_by: '完成者',
|
|
posted_by: '過帳者',
|
|
counted_qty: '盤點數量',
|
|
adjust_qty: '調整數量',
|
|
// 調撥單專有欄位
|
|
transit_warehouse_id: '在途倉庫',
|
|
transit_warehouse_name: '在途倉庫名稱',
|
|
dispatched_at: '出貨日期',
|
|
dispatched_by: '出貨人',
|
|
received_at: '收貨日期',
|
|
received_by: '收貨人',
|
|
reserved_quantity: '預扣數量',
|
|
snapshot_quantity: '異動前庫存 (快照)',
|
|
// 門市叫貨欄位
|
|
store_warehouse_id: '申請倉庫',
|
|
store_warehouse_name: '申請倉庫',
|
|
supply_warehouse_id: '供貨倉庫',
|
|
supply_warehouse_name: '供貨倉庫',
|
|
approved_by: '審核人',
|
|
approved_user_name: '審核人',
|
|
approved_at: '審核時間',
|
|
submitted_at: '提交時間',
|
|
reject_reason: '駁回原因',
|
|
status_label: '處理狀態',
|
|
transfer_order_id: '調撥單 ID',
|
|
transfer_order_name: '調撥單號',
|
|
};
|
|
|
|
// 狀態翻譯對照表
|
|
const statusMap: Record<string, string> = {
|
|
// 採購單狀態
|
|
draft: '草稿',
|
|
pending: '待審核',
|
|
approved: '已核准',
|
|
ordered: '已下單',
|
|
received: '已收貨',
|
|
cancelled: '已取消',
|
|
completed: '已完成',
|
|
closed: '已結案',
|
|
partial: '部分收貨',
|
|
// 庫存單據狀態
|
|
counting: '盤點中',
|
|
posted: '已過帳',
|
|
no_adjust: '無需盤調',
|
|
adjusted: '已盤調',
|
|
// 生產工單狀態
|
|
planned: '已計畫',
|
|
in_progress: '生產中',
|
|
// 調撥單狀態
|
|
voided: '已作廢',
|
|
dispatched: '已出貨',
|
|
};
|
|
|
|
// 主體類型解析 (Model 類名轉中文)
|
|
const subjectTypeMap: Record<string, string> = {
|
|
// 完整路徑映射
|
|
'App\\Modules\\Inventory\\Models\\Product': '商品資料',
|
|
'App\\Modules\\Inventory\\Models\\Warehouse': '倉庫資料',
|
|
'App\\Modules\\Inventory\\Models\\Inventory': '庫存異動',
|
|
'App\\Modules\\Inventory\\Models\\Category': '商品分類',
|
|
'App\\Modules\\Inventory\\Models\\Unit': '單位',
|
|
'App\\Modules\\Inventory\\Models\\InventoryTransaction': '庫存異動紀錄',
|
|
'App\\Modules\\Inventory\\Models\\GoodsReceipt': '進貨單',
|
|
'App\\Modules\\Inventory\\Models\\InventoryCountDoc': '庫存盤點單',
|
|
'App\\Modules\\Inventory\\Models\\InventoryAdjustDoc': '庫存盤調單',
|
|
'App\\Modules\\Inventory\\Models\\StoreRequisition': '門市叫貨單',
|
|
// 簡寫映射 (應對後端回傳 class_basename 的情況)
|
|
'Product': '商品資料',
|
|
'Warehouse': '倉庫資料',
|
|
'Inventory': '庫存異動',
|
|
'InventoryTransaction': '庫存異動紀錄',
|
|
'Category': '商品分類',
|
|
'Unit': '單位',
|
|
'Vendor': '廠商資料',
|
|
'PurchaseOrder': '採購單',
|
|
'GoodsReceipt': '進貨單',
|
|
'ProductionOrder': '生產工單',
|
|
'Recipe': '生產配方',
|
|
'InventoryCountDoc': '庫存盤點單',
|
|
'InventoryAdjustDoc': '庫存盤調單',
|
|
'InventoryTransferOrder': '庫庫調撥單',
|
|
'StoreRequisition': '門市叫貨單',
|
|
'StockMovementDoc': '庫存單據',
|
|
'User': '使用者帳號',
|
|
'Role': '角色權限',
|
|
'UtilityFee': '公共事業費',
|
|
};
|
|
|
|
// 庫存品質狀態對照表
|
|
const qualityStatusMap: Record<string, string> = {
|
|
normal: '正常',
|
|
frozen: '凍結',
|
|
rejected: '瑕疵/拒收',
|
|
};
|
|
|
|
// 入庫類型翻譯對照表
|
|
const typeMap: Record<string, string> = {
|
|
standard: '採購進貨',
|
|
miscellaneous: '雜項入庫',
|
|
other: '其他入庫',
|
|
};
|
|
|
|
export default function ActivityDetailDialog({ open, onOpenChange, activity }: Props) {
|
|
if (!activity) return null;
|
|
|
|
const attributes = activity.properties?.attributes || {};
|
|
const old = activity.properties?.old || {};
|
|
const snapshot = activity.properties?.snapshot || {};
|
|
|
|
// 取得屬性和舊值的所有鍵，以確保顯示所有變更
|
|
const allKeys = Array.from(new Set([...Object.keys(attributes), ...Object.keys(old)]));
|
|
|
|
// 自訂欄位排序順序
|
|
const sortOrder = [
|
|
'doc_no', 'po_number', 'gr_number', 'production_number', 'transfer_order_name',
|
|
'vendor_name', 'warehouse_name', 'order_date', 'expected_delivery_date', 'status', 'remark',
|
|
'invoice_number', 'invoice_date', 'invoice_amount',
|
|
'total_amount', 'tax_amount', 'grand_total'
|
|
];
|
|
|
|
// 過濾掉通常會記錄但對使用者無用的內部鍵，以及已被解析為名稱的原始 ID 欄位
|
|
const filteredKeys = allKeys
|
|
.filter(key => {
|
|
if (['created_at', 'updated_at', 'deleted_at', 'id', 'remember_token', 'activityProperties'].includes(key)) return false;
|
|
|
|
// 隱藏冗餘的狀態標籤 (因為後端已統一替換 status 內容)
|
|
if (key === 'status_label') return false;
|
|
|
|
// 隱藏技術用的 ID 欄位 (如果已有對應的名稱欄位)
|
|
if (key.endsWith('_id')) {
|
|
const nameKey = key.replace('_id', '_name');
|
|
const userNameKey = key.replace('_id', '_user_name');
|
|
if (allKeys.includes(nameKey) || allKeys.includes(userNameKey)) return false;
|
|
}
|
|
// 特別隱藏調撥單 ID
|
|
if (key === 'transfer_order_id' && (allKeys.includes('transfer_order_name') || allKeys.includes('transfer_order_doc_no'))) return false;
|
|
|
|
return true;
|
|
})
|
|
.sort((a, b) => {
|
|
const indexA = sortOrder.indexOf(a);
|
|
const indexB = sortOrder.indexOf(b);
|
|
if (indexA !== -1 && indexB !== -1) return indexA - indexB;
|
|
if (indexA !== -1) return -1;
|
|
if (indexB !== -1) return 1;
|
|
return a.localeCompare(b);
|
|
});
|
|
|
|
// 檢查鍵是否為快照名稱欄位或輔助名稱欄位的輔助函式
|
|
const isSnapshotField = (key: string) => {
|
|
const snapshotFields = [
|
|
'category_name', 'base_unit_name', 'large_unit_name', 'purchase_unit_name',
|
|
'warehouse_name', 'user_name', 'from_warehouse_name', 'to_warehouse_name',
|
|
'created_by_name', 'updated_by_name', 'completed_by_name', 'posted_by_name',
|
|
'vendor_name', 'product_name', 'recipe_name'
|
|
];
|
|
if (snapshotFields.includes(key)) return true;
|
|
if (key.endsWith('_name')) return true;
|
|
return false;
|
|
};
|
|
|
|
const getEventBadgeClass = (event: string) => {
|
|
switch (event) {
|
|
case 'created': return 'bg-green-50 text-green-700 border-green-200';
|
|
case 'updated': return 'bg-blue-50 text-blue-700 border-blue-200';
|
|
case 'deleted': return 'bg-red-50 text-red-700 border-red-200';
|
|
default: return 'bg-gray-50 text-gray-700 border-gray-200';
|
|
}
|
|
};
|
|
|
|
const getEventLabel = (event: string) => {
|
|
switch (event) {
|
|
case 'created': return '新增';
|
|
case 'updated': return '更新';
|
|
case 'deleted': return '刪除';
|
|
case 'updated_items': return '異動品項';
|
|
default: return event;
|
|
}
|
|
};
|
|
|
|
const formatValue = (key: string, value: any) => {
|
|
if (key === 'password') return '******';
|
|
if (value === null || value === undefined) return '-';
|
|
if (typeof value === 'boolean') return value ? '是' : '否';
|
|
if (key === 'is_active') return value ? '啟用' : '停用';
|
|
|
|
if (key === 'status' && typeof value === 'string' && statusMap[value]) {
|
|
return statusMap[value];
|
|
}
|
|
if (key === 'quality_status' && typeof value === 'string' && qualityStatusMap[value]) {
|
|
return qualityStatusMap[value];
|
|
}
|
|
if (key === 'type' && typeof value === 'string' && typeMap[value]) {
|
|
return typeMap[value];
|
|
}
|
|
|
|
// 處理日期與時間
|
|
if ((key === 'order_date' || key === 'expected_delivery_date' || key === 'invoice_date' || key === 'arrival_date' || key === 'expiry_date' || key === 'received_date' || key === 'production_date') && typeof value === 'string') {
|
|
return value.split('T')[0].split(' ')[0];
|
|
}
|
|
if ((key === 'snapshot_date' || key === 'completed_at' || key === 'posted_at' || key === 'created_at' || key === 'updated_at' || key === 'actual_time' || key === 'submitted_at' || key === 'approved_at') && typeof value === 'string') {
|
|
try {
|
|
// 處理部分 ISO 字串包含 T 的情況
|
|
const normalizedValue = value.replace('T', ' ');
|
|
const date = new Date(normalizedValue);
|
|
if (isNaN(date.getTime())) return value;
|
|
|
|
return date.toLocaleString('zh-TW', {
|
|
timeZone: 'Asia/Taipei',
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit',
|
|
hour12: false
|
|
}).replace(/\//g, '-');
|
|
} catch (e) {
|
|
return value;
|
|
}
|
|
}
|
|
return String(value);
|
|
};
|
|
|
|
const getFormattedValue = (key: string, value: any) => {
|
|
if (key.endsWith('_id')) {
|
|
const nameKey = key.replace('_id', '_name');
|
|
const nameValue = snapshot[nameKey] || attributes[nameKey];
|
|
if (nameValue) return `${nameValue}`;
|
|
}
|
|
return formatValue(key, value);
|
|
};
|
|
|
|
const getFieldLabel = (key: string) => fieldLabels[key] || key;
|
|
const getSubjectTypeLabel = (type: string) => subjectTypeMap[type] || type;
|
|
|
|
const getSubjectName = () => {
|
|
if ((snapshot.warehouse_name || attributes.warehouse_name) && (snapshot.product_name || attributes.product_name)) {
|
|
return `${snapshot.warehouse_name || attributes.warehouse_name} - ${snapshot.product_name || attributes.product_name}`;
|
|
}
|
|
const nameParams = ['doc_no', 'po_number', 'gr_number', 'production_number', 'name', 'code', 'product_name', 'warehouse_name', 'category_name', 'title'];
|
|
for (const param of nameParams) {
|
|
if (snapshot[param]) return snapshot[param];
|
|
if (attributes[param]) return attributes[param];
|
|
if (old[param]) return old[param];
|
|
}
|
|
if (attributes.id || old.id) return `#${attributes.id || old.id}`;
|
|
return '';
|
|
};
|
|
|
|
const subjectName = getSubjectName();
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto p-0 gap-0">
|
|
<DialogHeader className="p-6 pb-4 border-b pr-12">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<DialogTitle className="text-xl font-bold text-gray-900">
|
|
操作詳情
|
|
</DialogTitle>
|
|
<Badge variant="outline" className={getEventBadgeClass(activity.event)}>
|
|
{getEventLabel(activity.event)}
|
|
</Badge>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-6 pt-2 text-sm text-gray-500">
|
|
<div className="flex items-center gap-2">
|
|
<User className="w-4 h-4 text-gray-400" />
|
|
<span className="font-medium text-gray-700">{activity.causer}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Clock className="w-4 h-4 text-gray-400" />
|
|
<span>{activity.created_at}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Package className="w-4 h-4 text-gray-400" />
|
|
<span className="font-medium text-gray-700">
|
|
{subjectName ? `${subjectName} ` : ''}
|
|
({getSubjectTypeLabel(activity.properties?.sub_subject || activity.subject_type)})
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</DialogHeader>
|
|
{/* 僅在描述與事件名稱不同時顯示（不太可能發生但為了安全起見） */}
|
|
{activity.description !== getEventLabel(activity.event) &&
|
|
activity.description !== 'created' && activity.description !== 'updated' && (
|
|
<div className="flex items-center gap-2 px-6 pb-2 -mt-2">
|
|
<ActivityIcon className="w-4 h-4 text-gray-400" />
|
|
<span className="text-sm text-gray-500">{activity.description}</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className="bg-gray-50/50 p-6 min-h-[300px]">
|
|
{activity.event === 'created' ? (
|
|
<div className="border rounded-md overflow-hidden bg-white shadow-sm">
|
|
<Table className="table-fixed w-full">
|
|
<TableHeader>
|
|
<TableRow className="bg-gray-50/50 hover:bg-gray-50/50">
|
|
<TableHead className="w-[140px]">欄位</TableHead>
|
|
<TableHead className="w-1/2">異動前</TableHead>
|
|
<TableHead className="w-1/2">異動後</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredKeys
|
|
.filter(key => attributes[key] !== null && attributes[key] !== '' && !isSnapshotField(key))
|
|
.map((key) => (
|
|
<TableRow key={key}>
|
|
<TableCell className="font-medium text-gray-700 w-[140px] truncate">{getFieldLabel(key)}</TableCell>
|
|
<TableCell className="text-gray-500">-</TableCell>
|
|
<TableCell className="text-gray-900 font-medium break-all whitespace-pre-wrap">
|
|
{getFormattedValue(key, attributes[key])}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
{filteredKeys.filter(key => attributes[key] !== null && attributes[key] !== '' && !isSnapshotField(key)).length === 0 && (
|
|
<TableRow>
|
|
<TableCell colSpan={3} className="h-24 text-center text-gray-500">
|
|
無初始資料
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
) : (
|
|
<div className="border rounded-md overflow-hidden bg-white shadow-sm">
|
|
<Table className="table-fixed w-full">
|
|
<TableHeader>
|
|
<TableRow className="bg-gray-50 hover:bg-gray-50">
|
|
<TableHead className="w-[140px]">欄位</TableHead>
|
|
<TableHead className="w-1/2">異動前</TableHead>
|
|
<TableHead className="w-1/2">異動後</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredKeys.some(key => !isSnapshotField(key)) ? (
|
|
filteredKeys
|
|
.filter(key => {
|
|
if (isSnapshotField(key)) return false;
|
|
|
|
// 如果是更新事件，僅顯示有變動的欄位
|
|
if (activity.event === 'updated') {
|
|
const oldValue = old[key];
|
|
const newValue = attributes[key];
|
|
return JSON.stringify(oldValue) !== JSON.stringify(newValue);
|
|
}
|
|
|
|
return true;
|
|
})
|
|
.map((key) => {
|
|
const oldValue = old[key];
|
|
const newValue = attributes[key];
|
|
const isChanged = JSON.stringify(oldValue) !== JSON.stringify(newValue);
|
|
|
|
// 對於刪除事件，我們希望在 "變更前" 欄位顯示當前屬性
|
|
const displayBefore = activity.event === 'deleted'
|
|
? getFormattedValue(key, newValue || oldValue)
|
|
: getFormattedValue(key, oldValue);
|
|
|
|
const displayAfter = activity.event === 'deleted'
|
|
? '-'
|
|
: getFormattedValue(key, newValue);
|
|
|
|
return (
|
|
<TableRow key={key} className={isChanged ? 'bg-amber-50/30 hover:bg-amber-50/50' : 'hover:bg-gray-50/50'}>
|
|
<TableCell className="font-medium text-gray-700 w-[140px] truncate">{getFieldLabel(key)}</TableCell>
|
|
<TableCell className="text-gray-500 break-all whitespace-pre-wrap">
|
|
{displayBefore}
|
|
</TableCell>
|
|
<TableCell className="text-gray-900 font-medium break-all whitespace-pre-wrap">
|
|
{displayAfter}
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
})
|
|
) : (
|
|
<TableRow>
|
|
<TableCell colSpan={3} className="h-24 text-center text-gray-500">
|
|
無詳細異動內容
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
)}
|
|
{/* 項目差異區塊（採購單專用） */}
|
|
{activity.properties?.items_diff && (
|
|
<div className="mt-6 space-y-4">
|
|
<h3 className="text-sm font-bold text-gray-900 flex items-center gap-2 px-1">
|
|
<Package className="w-4 h-4 text-primary-main" />
|
|
品項異動明細
|
|
</h3>
|
|
|
|
<div className="border rounded-md overflow-hidden bg-white shadow-sm">
|
|
<Table className="table-fixed w-full">
|
|
<TableHeader className="bg-gray-50/50">
|
|
<TableRow>
|
|
<TableHead className="w-1/3">商品名稱</TableHead>
|
|
<TableHead className="w-[100px] text-center">異動類型</TableHead>
|
|
<TableHead className="w-1/2">異動詳情 (舊 → 新)</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{/* 1. 處理物件格式的 items_diff (現有的採購、盤點、調撥初始紀錄格式) */}
|
|
{!Array.isArray(activity.properties?.items_diff) && (
|
|
<>
|
|
{/* 更新項目 */}
|
|
{activity.properties?.items_diff?.updated?.map((item: any, idx: number) => (
|
|
<TableRow key={`upd-${idx}`} className="bg-blue-50/10 hover:bg-blue-50/20">
|
|
<TableCell className="font-medium">{item.product_name}</TableCell>
|
|
<TableCell className="text-center">
|
|
<Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">更新</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-sm">
|
|
<div className="space-y-1 text-xs">
|
|
{item.old?.quantity !== item.new?.quantity && item.old?.quantity !== undefined && (
|
|
<div>數量: <span className="text-gray-500 line-through">{item.old.quantity}</span> → <span className="text-blue-700 font-bold">{item.new.quantity}</span></div>
|
|
)}
|
|
{item.old?.counted_qty !== item.new?.counted_qty && item.old?.counted_qty !== undefined && (
|
|
<div>盤點量: <span className="text-gray-500 line-through">{item.old.counted_qty ?? '未盤'}</span> → <span className="text-blue-700 font-bold">{item.new.counted_qty ?? '未盤'}</span></div>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
)) || null}
|
|
|
|
{/* 新增項目 */}
|
|
{activity.properties?.items_diff?.added?.map((item: any, idx: number) => (
|
|
<TableRow key={`add-${idx}`} className="bg-green-50/10 hover:bg-green-50/20">
|
|
<TableCell className="font-medium">{item.product_name}</TableCell>
|
|
<TableCell className="text-center">
|
|
<Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">新增</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-sm">
|
|
數量: {item.new?.quantity ?? item.quantity} {item.unit_name || item.new?.unit_name || ''}
|
|
</TableCell>
|
|
</TableRow>
|
|
)) || null}
|
|
|
|
{/* 移除項目 */}
|
|
{activity.properties?.items_diff?.removed?.map((item: any, idx: number) => (
|
|
<TableRow key={`rem-${idx}`} className="bg-red-50/10 hover:bg-red-50/20">
|
|
<TableCell className="font-medium text-gray-400 line-through">{item.product_name}</TableCell>
|
|
<TableCell className="text-center">
|
|
<Badge variant="outline" className="bg-red-50 text-red-700 border-red-200">移除</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-sm text-gray-400">
|
|
原數量: {item.old?.quantity ?? item.quantity} {item.unit_name || item.old?.unit_name || ''}
|
|
</TableCell>
|
|
</TableRow>
|
|
)) || null}
|
|
</>
|
|
)}
|
|
|
|
{/* 2. 處理陣列格式的 items_diff (調撥單過帳/收貨的複合紀錄格式) */}
|
|
{Array.isArray(activity.properties?.items_diff) && activity.properties.items_diff.map((item: any, idx: number) => (
|
|
<TableRow key={`trf-${idx}`} className="hover:bg-gray-50/50">
|
|
<TableCell className="font-medium">
|
|
{item.product_name}
|
|
<div className="text-[10px] text-gray-400 font-normal">批號: {item.batch_number}</div>
|
|
</TableCell>
|
|
<TableCell className="text-center">
|
|
<Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-200">異動</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-xs p-2">
|
|
<div className="flex flex-col gap-2">
|
|
{item.source_warehouse && (
|
|
<div className="flex items-center gap-2">
|
|
<span className="w-16 text-gray-400 truncate">來源 ({item.source_warehouse}):</span>
|
|
<span className="text-gray-400 line-through">{Number(item.source_before || 0).toFixed(0)}</span>
|
|
<span className="text-rose-600 font-bold">→ {Number(item.source_after || 0).toFixed(0)}</span>
|
|
<span className="text-[10px] bg-rose-50 text-rose-600 px-1 rounded">-{item.quantity}</span>
|
|
</div>
|
|
)}
|
|
{item.target_warehouse && (
|
|
<div className="flex items-center gap-2">
|
|
<span className="w-16 text-gray-400 truncate">目的 ({item.target_warehouse}):</span>
|
|
<span className="text-gray-400 line-through">{Number(item.target_before || 0).toFixed(0)}</span>
|
|
<span className="text-emerald-600 font-bold">→ {Number(item.target_after || 0).toFixed(0)}</span>
|
|
<span className="text-[10px] bg-emerald-50 text-emerald-600 px-1 rounded">+{item.quantity}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</DialogContent >
|
|
</Dialog >
|
|
);
|
|
}
|