feat: 優化採購單操作紀錄與統一刪除確認 UI
- 優化採購單更新與刪除的活動紀錄邏輯 (PurchaseOrderController) - 整合更新異動為單一紀錄，包含品項差異 - 刪除時記錄當下品項快照 - 統一採購單刪除確認介面，使用 AlertDialog 取代原生 confirm (PurchaseOrderActions) - Refactor: 將 ActivityDetailDialog 移至 Components/ActivityLog 並優化樣式與大數據顯示 - 調整 UI 文字：將「總金額」統一為「小計」 - 其他模型與 Controller 的活動紀錄支援更新
This commit is contained in:
440
resources/js/Components/ActivityLog/ActivityDetailDialog.tsx
Normal file
440
resources/js/Components/ActivityLog/ActivityDetailDialog.tsx
Normal file
@@ -0,0 +1,440 @@
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/Components/ui/dialog";
|
||||
import { Badge } from "@/Components/ui/badge";
|
||||
import { ScrollArea } from "@/Components/ui/scroll-area";
|
||||
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;
|
||||
}
|
||||
|
||||
// Field translation map
|
||||
const fieldLabels: Record<string, string> = {
|
||||
name: '名稱',
|
||||
code: '代碼',
|
||||
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: '角色',
|
||||
// Snapshot fields
|
||||
category_name: '分類名稱',
|
||||
base_unit_name: '基本單位名稱',
|
||||
large_unit_name: '大單位名稱',
|
||||
purchase_unit_name: '採購單位名稱',
|
||||
// Vendor fields
|
||||
short_name: '簡稱',
|
||||
tax_id: '統編',
|
||||
owner: '負責人',
|
||||
contact_name: '聯絡人',
|
||||
tel: '電話',
|
||||
remark: '備註',
|
||||
// Warehouse & Inventory fields
|
||||
warehouse_name: '倉庫名稱',
|
||||
product_name: '商品名稱',
|
||||
warehouse_id: '倉庫',
|
||||
product_id: '商品',
|
||||
quantity: '數量',
|
||||
safety_stock: '安全庫存',
|
||||
location: '儲位',
|
||||
// Purchase Order fields
|
||||
po_number: '採購單號',
|
||||
vendor_id: '廠商',
|
||||
vendor_name: '廠商名稱',
|
||||
user_name: '建單人員',
|
||||
user_id: '建單人員',
|
||||
total_amount: '小計',
|
||||
expected_delivery_date: '預計到貨日',
|
||||
status: '狀態',
|
||||
tax_amount: '稅額',
|
||||
grand_total: '總計',
|
||||
invoice_number: '發票號碼',
|
||||
invoice_date: '發票日期',
|
||||
invoice_amount: '發票金額',
|
||||
last_price: '供貨價格',
|
||||
};
|
||||
|
||||
// Purchase Order Status Map
|
||||
const statusMap: Record<string, string> = {
|
||||
draft: '草稿',
|
||||
pending: '待審核',
|
||||
approved: '已核准',
|
||||
ordered: '已下單',
|
||||
received: '已收貨',
|
||||
cancelled: '已取消',
|
||||
completed: '已完成',
|
||||
};
|
||||
|
||||
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 || {};
|
||||
|
||||
// Get all keys from both attributes and old to ensure we show all changes
|
||||
const allKeys = Array.from(new Set([...Object.keys(attributes), ...Object.keys(old)]));
|
||||
|
||||
// Custom sort order for fields
|
||||
const sortOrder = [
|
||||
'po_number', 'vendor_name', 'warehouse_name', 'expected_delivery_date', 'status', 'remark',
|
||||
'invoice_number', 'invoice_date', 'invoice_amount',
|
||||
'total_amount', 'tax_amount', 'grand_total' // Ensure specific order for amounts
|
||||
];
|
||||
|
||||
// Filter out internal keys often logged but not useful for users
|
||||
const filteredKeys = allKeys
|
||||
.filter(key =>
|
||||
!['created_at', 'updated_at', 'deleted_at', 'id'].includes(key)
|
||||
)
|
||||
.sort((a, b) => {
|
||||
const indexA = sortOrder.indexOf(a);
|
||||
const indexB = sortOrder.indexOf(b);
|
||||
|
||||
// If both are in sortOrder, compare indices
|
||||
if (indexA !== -1 && indexB !== -1) return indexA - indexB;
|
||||
// If only A is in sortOrder, it comes first (or wherever logic dictates, usually put known fields first)
|
||||
if (indexA !== -1) return -1;
|
||||
if (indexB !== -1) return 1;
|
||||
// Otherwise alphabetical or default
|
||||
return a.localeCompare(b);
|
||||
});
|
||||
|
||||
// Helper to check if a key is a snapshot name field
|
||||
|
||||
// Helper to check if a key is a snapshot name field
|
||||
const isSnapshotField = (key: string) => {
|
||||
return [
|
||||
'category_name', 'base_unit_name', 'large_unit_name', 'purchase_unit_name',
|
||||
'warehouse_name', 'user_name'
|
||||
].includes(key);
|
||||
};
|
||||
|
||||
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 (value === null || value === undefined) return '-';
|
||||
if (typeof value === 'boolean') return value ? '是' : '否';
|
||||
if (key === 'is_active') return value ? '啟用' : '停用';
|
||||
|
||||
// Handle Purchase Order Status
|
||||
if (key === 'status' && typeof value === 'string' && statusMap[value]) {
|
||||
return statusMap[value];
|
||||
}
|
||||
|
||||
// Handle Date Fields (YYYY-MM-DD)
|
||||
if ((key === 'expected_delivery_date' || key === 'invoice_date') && typeof value === 'string') {
|
||||
// Take only the date part (YYYY-MM-DD)
|
||||
return value.split('T')[0].split(' ')[0];
|
||||
}
|
||||
|
||||
return String(value);
|
||||
};
|
||||
|
||||
const getFormattedValue = (key: string, value: any) => {
|
||||
// If it's an ID field, try to find a corresponding name in snapshot or attributes
|
||||
if (key.endsWith('_id')) {
|
||||
const nameKey = key.replace('_id', '_name');
|
||||
// Check snapshot first, then attributes
|
||||
const nameValue = snapshot[nameKey] || attributes[nameKey];
|
||||
if (nameValue) {
|
||||
return `${nameValue}`;
|
||||
}
|
||||
}
|
||||
return formatValue(key, value);
|
||||
};
|
||||
|
||||
// Helper to get translated field label
|
||||
const getFieldLabel = (key: string) => {
|
||||
return fieldLabels[key] || key;
|
||||
};
|
||||
|
||||
// Get subject name for header
|
||||
const getSubjectName = () => {
|
||||
// Special handling for Inventory: show "Warehouse - Product"
|
||||
if ((snapshot.warehouse_name || attributes.warehouse_name) && (snapshot.product_name || attributes.product_name)) {
|
||||
const wName = snapshot.warehouse_name || attributes.warehouse_name;
|
||||
const pName = snapshot.product_name || attributes.product_name;
|
||||
return `${wName} - ${pName}`;
|
||||
}
|
||||
|
||||
const nameParams = ['po_number', 'name', 'code', 'product_name', 'warehouse_name', 'category_name', 'base_unit_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-3xl max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden">
|
||||
<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>
|
||||
|
||||
{/* Modern Metadata Strip */}
|
||||
<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} ` : ''}
|
||||
{activity.properties?.sub_subject || activity.subject_type}
|
||||
</span>
|
||||
</div>
|
||||
{/* Only show 'description' if it differs from event name (unlikely but safe) */}
|
||||
{activity.description !== getEventLabel(activity.event) &&
|
||||
activity.description !== 'created' && activity.description !== 'updated' && (
|
||||
<div className="flex items-center gap-2">
|
||||
<ActivityIcon className="w-4 h-4 text-gray-400" />
|
||||
<span>{activity.description}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex-1 overflow-hidden bg-gray-50/50">
|
||||
<ScrollArea className="h-full max-h-[calc(90vh-140px)] p-6">
|
||||
{activity.event === 'created' ? (
|
||||
<div className="border rounded-md overflow-hidden bg-white shadow-sm">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-gray-50/50 hover:bg-gray-50/50">
|
||||
<TableHead className="w-[150px]">欄位</TableHead>
|
||||
<TableHead>異動前</TableHead>
|
||||
<TableHead>異動後</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-[150px]">{getFieldLabel(key)}</TableCell>
|
||||
<TableCell className="text-gray-500 break-words max-w-[200px]">-</TableCell>
|
||||
<TableCell className="text-gray-900 font-medium break-words max-w-[200px]">
|
||||
{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>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-gray-50 hover:bg-gray-50">
|
||||
<TableHead className="w-[150px]">欄位</TableHead>
|
||||
<TableHead>異動前</TableHead>
|
||||
<TableHead>異動後</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredKeys.some(key => !isSnapshotField(key)) ? (
|
||||
filteredKeys
|
||||
.filter(key => !isSnapshotField(key))
|
||||
.map((key) => {
|
||||
const oldValue = old[key];
|
||||
const newValue = attributes[key];
|
||||
const isChanged = JSON.stringify(oldValue) !== JSON.stringify(newValue);
|
||||
|
||||
// For deleted events, we want to show the current attributes in the "Before" column
|
||||
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-[150px]">{getFieldLabel(key)}</TableCell>
|
||||
<TableCell className="text-gray-500 break-words max-w-[200px]">
|
||||
{displayBefore}
|
||||
</TableCell>
|
||||
<TableCell className="text-gray-900 font-medium break-words max-w-[200px]">
|
||||
{displayAfter}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell colSpan={3} className="h-24 text-center text-gray-500">
|
||||
無詳細異動內容
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
{/* Items Diff Section (Special for Purchase Orders) */}
|
||||
{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>
|
||||
<TableHeader className="bg-gray-50/50">
|
||||
<TableRow>
|
||||
<TableHead>商品名稱</TableHead>
|
||||
<TableHead className="text-center">異動類型</TableHead>
|
||||
<TableHead>異動詳情 (舊 → 新)</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{/* Updated Items */}
|
||||
{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">
|
||||
{item.old.quantity !== item.new.quantity && (
|
||||
<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.unit_name !== item.new.unit_name && (
|
||||
<div>單位: <span className="text-gray-500 line-through">{item.old.unit_name || '-'}</span> → <span className="text-blue-700 font-bold">{item.new.unit_name || '-'}</span></div>
|
||||
)}
|
||||
{item.old.subtotal !== item.new.subtotal && (
|
||||
<div>小計: <span className="text-gray-500 line-through">${item.old.subtotal}</span> → <span className="text-blue-700 font-bold">${item.new.subtotal}</span></div>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
|
||||
{/* Added Items */}
|
||||
{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.quantity} {item.unit_name} / 小計: ${item.subtotal}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
|
||||
{/* Removed Items */}
|
||||
{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.quantity} {item.unit_name}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user