大更新

resources/js/Pages/Vendor/Show.tsx

@@ -33,8 +33,14 @@ interface VendorProduct {
     id: number;
     name: string;
     unit?: string;
-    base_unit?: string;
+    // Relations might be camelCase or snake_case depending on serialization settings
+    baseUnit?: { name: string };
+    base_unit?: { name: string };
+    largeUnit?: { name: string };
+    large_unit?: { name: string };
+    purchaseUnit?: string; // Note: if it's a relation it might be an object, but original code treated it as string
     purchase_unit?: string;
+    conversion_rate?: number;
     pivot: Pivot;
 }
 
@@ -54,13 +60,29 @@ export default function VendorShow({ vendor, products }: ShowProps) {
     const [selectedProduct, setSelectedProduct] = useState<SupplyProduct | null>(null);
 
     // 轉換後端資料格式為前端組件需要的格式
-    const supplyProducts: SupplyProduct[] = vendor.products.map(p => ({
-        id: String(p.id),
-        productId: String(p.id),
-        productName: p.name,
-        unit: p.purchase_unit || p.base_unit || "個",
-        lastPrice: p.pivot.last_price || undefined,
-    }));
+    const supplyProducts: SupplyProduct[] = vendor.products.map(p => {
+        // Laravel load('relationName') usually results in camelCase key in JSON if method is camelCase
+        const baseUnitName = p.baseUnit?.name || p.base_unit?.name;
+        const largeUnitName = p.largeUnit?.name || p.large_unit?.name;
+
+        // Check purchase unit - seemingly originally a field string, but if relation, check if object
+        // Assuming purchase_unit is a string field on product table here based on original code usage?
+        // Wait, original code usage: p.purchase_unit || ...
+        // In Product model: purchase_unit_id exists, purchaseUnit is relation.
+        // If p.purchase_unit was working before, it might be an attribute (accessors).
+        // Let's stick to safe access.
+
+        return {
+            id: String(p.id),
+            productId: String(p.id),
+            productName: p.name,
+            unit: p.purchase_unit || baseUnitName || "個",
+            baseUnit: baseUnitName,
+            largeUnit: largeUnitName,
+            conversionRate: p.conversion_rate,
+            lastPrice: p.pivot.last_price || undefined,
+        };
+    });
 
     const handleAddProduct = (productId: string, lastPrice?: number) => {
         router.post(route('vendors.products.store', vendor.id), {