Răsfoiți Sursa

♻️ refactor(goods-management): 优化父子商品面板的数据处理与类型定义

- 移除未使用的 `useQueryClient` 和 `Label` 导入,简化依赖
- 从 `GoodsParentChildPanel` 导入 `ParentChildData` 和 `BatchSpecTemplate` 类型,统一类型定义
- 使用 `useCallback` 包装 `handleParentChildDataChange` 函数,优化性能并适配子组件回调类型
- 更新 `parentChildData` 状态初始化与编辑时的数据映射逻辑,确保与子组件类型一致
- 修复编辑商品时 `spuName` 可能为 `undefined` 的问题,提供默认值处理

📝 docs(goods-parent-child-panel): 导出组件内部类型供外部使用

- 将 `ParentChildData` 和 `BatchSpecTemplate` 接口标记为 `export`,增强类型可复用性
yourname 1 lună în urmă
părinte
comite
42444f2bc7

+ 19 - 11
packages/goods-management-ui-mt/src/components/GoodsManagement.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import React, { useState, useCallback } from 'react';
+import { useQuery, useMutation } from '@tanstack/react-query';
 import { format } from 'date-fns'; 
 import { zhCN } from 'date-fns/locale';
 import { toast } from 'sonner';
@@ -9,7 +9,6 @@ import type { InferRequestType, InferResponseType } from 'hono/client';
 
 import { Button } from '@d8d/shared-ui-components/components/ui/button';
 import { Input } from '@d8d/shared-ui-components/components/ui/input';
-import { Label } from '@d8d/shared-ui-components/components/ui/label';
 import { Badge } from '@d8d/shared-ui-components/components/ui/badge';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@d8d/shared-ui-components/components/ui/card';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@d8d/shared-ui-components/components/ui/table';
@@ -25,8 +24,8 @@ import { FileSelector } from '@d8d/file-management-ui-mt';
 import { GoodsCategoryCascadeSelector } from '@d8d/goods-category-management-ui-mt/components';
 import { SupplierSelector } from '@d8d/supplier-management-ui-mt/components';
 import { MerchantSelector } from '@d8d/merchant-management-ui-mt/components';
-import { GoodsParentChildPanel } from './GoodsParentChildPanel';
-import { Search, Plus, Edit, Trash2, Package, Layers } from 'lucide-react';
+import { GoodsParentChildPanel, type ParentChildData, type BatchSpecTemplate } from './GoodsParentChildPanel';
+import { Search, Plus, Edit, Trash2, Package } from 'lucide-react';
 
 type CreateRequest = InferRequestType<typeof goodsClient.index.$post>['json'];
 type UpdateRequest = InferRequestType<typeof goodsClient[':id']['$put']>['json'];
@@ -36,7 +35,6 @@ const createFormSchema = AdminCreateGoodsDto;
 const updateFormSchema = AdminUpdateGoodsDto;
 
 export const GoodsManagement: React.FC = () => {
-  const queryClient = useQueryClient();
   const [searchParams, setSearchParams] = useState({ page: 1, limit: 10, search: '' });
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [editingGoods, setEditingGoods] = useState<GoodsResponse | null>(null);
@@ -47,7 +45,7 @@ export const GoodsManagement: React.FC = () => {
     spuId: 0,
     spuName: null as string | null,
     childGoodsIds: [] as number[],
-    batchSpecs: [] as Array<{ name: string; price: number; costPrice: number; stock: number; sort: number }>
+    batchSpecs: [] as BatchSpecTemplate[]
   });
 
   // 创建表单
@@ -214,8 +212,8 @@ export const GoodsManagement: React.FC = () => {
     // 更新父子商品数据
     setParentChildData({
       spuId: goods.spuId,
-      spuName: goods.spuName,
-      childGoodsIds: goods.childGoods?.map(child => child.id) || [],
+      spuName: goods.spuName ?? null,
+      childGoodsIds: goods.childGoodsIds || [],
       batchSpecs: []
     });
 
@@ -263,6 +261,16 @@ export const GoodsManagement: React.FC = () => {
     }
   };
 
+  // 处理父子商品数据变化,适配GoodsParentChildPanel的onDataChange类型
+  const handleParentChildDataChange = useCallback((data: ParentChildData) => {
+    setParentChildData({
+      spuId: data.spuId,
+      spuName: data.spuName ?? null,
+      childGoodsIds: data.childGoodsIds,
+      batchSpecs: data.batchSpecs || []
+    });
+  }, [setParentChildData]);
+
   return (
     <div className="space-y-4">
       <div className="flex justify-between items-center">
@@ -849,10 +857,10 @@ export const GoodsManagement: React.FC = () => {
               goodsId={isCreateForm ? undefined : editingGoods?.id}
               goodsName={isCreateForm ? createForm.watch('name') : editingGoods?.name}
               spuId={parentChildData.spuId}
-              spuName={parentChildData.spuName}
+              spuName={parentChildData.spuName ?? undefined}
               childGoodsIds={parentChildData.childGoodsIds}
               batchSpecs={isCreateForm ? parentChildData.batchSpecs : undefined}
-              onDataChange={setParentChildData}
+              onDataChange={handleParentChildDataChange}
               onUpdate={refetch}
               disabled={isCreateForm ? createMutation.isPending : updateMutation.isPending}
             />

+ 2 - 2
packages/goods-management-ui-mt/src/components/GoodsParentChildPanel.tsx

@@ -35,14 +35,14 @@ interface GoodsParentChildPanelProps {
   disabled?: boolean;
 }
 
-interface ParentChildData {
+export interface ParentChildData {
   spuId: number;
   spuName: string | null;
   childGoodsIds: number[];
   batchSpecs?: BatchSpecTemplate[];
 }
 
-interface BatchSpecTemplate {
+export interface BatchSpecTemplate {
   name: string;
   price: number;
   costPrice: number;