Просмотр исходного кода

✨ feat(商品管理): 新增父子商品面板显示控制功能

- 新增 `isVisible` 状态变量,用于控制父子商品管理面板的显示与隐藏
- 在创建商品和编辑商品的父子商品面板外层添加条件渲染容器,根据 `isVisible` 状态决定是否显示面板内容
yourname 1 месяц назад
Родитель
Сommit
18ecabbc93
1 измененных файлов с 17 добавлено и 11 удалено
  1. 17 11
      packages/goods-management-ui-mt/src/components/GoodsManagement.tsx

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

@@ -50,6 +50,8 @@ export const GoodsManagement: React.FC = () => {
     batchSpecs: [] as Array<{ name: string; price: number; costPrice: number; stock: number; sort: number }>
   });
 
+  const [isVisible, setIsVisible] = useState(false);
+
   // 创建表单
   const createForm = useForm<CreateRequest>({
     resolver: zodResolver(createFormSchema),
@@ -625,17 +627,19 @@ export const GoodsManagement: React.FC = () => {
                 />
 
                 {/* 父子商品管理面板 */}
-                <div className="mt-6 pt-6 border-t">
-                  <GoodsParentChildPanel
-                    mode="create"
-                    goodsName={createForm.watch('name')}
-                    spuId={parentChildData.spuId}
-                    spuName={parentChildData.spuName}
-                    childGoodsIds={parentChildData.childGoodsIds}
-                    batchSpecs={parentChildData.batchSpecs}
-                    onDataChange={setParentChildData}
-                    disabled={createMutation.isPending}
-                  />
+                <div style={{ display: isVisible ? 'block' : 'none' }}>
+                  <div className="mt-6 pt-6 border-t">
+                    <GoodsParentChildPanel
+                      mode="create"
+                      goodsName={createForm.watch('name')}
+                      spuId={parentChildData.spuId}
+                      spuName={parentChildData.spuName}
+                      childGoodsIds={parentChildData.childGoodsIds}
+                      batchSpecs={parentChildData.batchSpecs}
+                      onDataChange={setParentChildData}
+                      disabled={createMutation.isPending}
+                    />
+                  </div>
                 </div>
 
                 <DialogFooter>
@@ -862,6 +866,7 @@ export const GoodsManagement: React.FC = () => {
                 />
 
                 {/* 父子商品管理面板 */}
+                <div style={{ display: isVisible ? 'block' : 'none' }}>
                 <div className="mt-6 pt-6 border-t">
                   <GoodsParentChildPanel
                     mode="edit"
@@ -875,6 +880,7 @@ export const GoodsManagement: React.FC = () => {
                     disabled={updateMutation.isPending}
                   />
                 </div>
+                </div>
 
                 <DialogFooter>
                   <Button