Parcourir la source

♻️ refactor(goods-management): 重构商品管理对话框布局

- 为创建和编辑表单添加唯一ID(create-goods-form/edit-goods-form)
- 将父子商品管理面板移出表单,统一放置到表单下方
- 将对话框底部按钮移出表单,统一放置到面板下方
- 优化按钮提交逻辑,通过form属性关联对应表单
- 简化条件渲染逻辑,减少重复代码
yourname il y a 1 mois
Parent
commit
94a9a134a1
1 fichiers modifiés avec 40 ajouts et 53 suppressions
  1. 40 53
      packages/goods-management-ui-mt/src/components/GoodsManagement.tsx

+ 40 - 53
packages/goods-management-ui-mt/src/components/GoodsManagement.tsx

@@ -393,9 +393,10 @@ export const GoodsManagement: React.FC = () => {
             </DialogDescription>
           </DialogHeader>
 
+
           {isCreateForm ? (
             <Form {...createForm}>
-              <form onSubmit={createForm.handleSubmit(handleSubmit)} className="space-y-4">
+              <form id="create-goods-form" onSubmit={createForm.handleSubmit(handleSubmit)} className="space-y-4">
                 <FormField
                   control={createForm.control}
                   name="name"
@@ -624,37 +625,12 @@ 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>
 
-                <DialogFooter>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={() => setIsModalOpen(false)}
-                  >
-                    取消
-                  </Button>
-                  <Button type="submit" disabled={createMutation.isPending}>
-                    {createMutation.isPending ? '创建中...' : '创建'}
-                  </Button>
-                </DialogFooter>
               </form>
             </Form>
           ) : (
             <Form {...updateForm}>
-              <form onSubmit={updateForm.handleSubmit(handleSubmit)} className="space-y-4">
+              <form id="edit-goods-form" onSubmit={updateForm.handleSubmit(handleSubmit)} className="space-y-4">
                 <FormField
                   control={updateForm.control}
                   name="name"
@@ -861,36 +837,47 @@ export const GoodsManagement: React.FC = () => {
                   )}
                 />
 
-                {/* 父子商品管理面板 */}
-                <div className="mt-6 pt-6 border-t">
-                  <GoodsParentChildPanel
-                    mode="edit"
-                    goodsId={editingGoods?.id}
-                    goodsName={editingGoods?.name}
-                    spuId={parentChildData.spuId}
-                    spuName={parentChildData.spuName}
-                    childGoodsIds={parentChildData.childGoodsIds}
-                    onDataChange={setParentChildData}
-                    onUpdate={refetch}
-                    disabled={updateMutation.isPending}
-                  />
-                </div>
 
-                <DialogFooter>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={() => setIsModalOpen(false)}
-                  >
-                    取消
-                  </Button>
-                  <Button type="submit" disabled={updateMutation.isPending}>
-                    {updateMutation.isPending ? '更新中...' : '更新'}
-                  </Button>
-                </DialogFooter>
               </form>
             </Form>
           )}
+
+          {/* 父子商品管理面板 - 移到表单下方 */}
+          <div className="mt-6 pt-6 border-t">
+            <GoodsParentChildPanel
+              mode={isCreateForm ? 'create' : 'edit'}
+              goodsId={isCreateForm ? undefined : editingGoods?.id}
+              goodsName={isCreateForm ? createForm.watch('name') : editingGoods?.name}
+              spuId={parentChildData.spuId}
+              spuName={parentChildData.spuName}
+              childGoodsIds={parentChildData.childGoodsIds}
+              batchSpecs={isCreateForm ? parentChildData.batchSpecs : undefined}
+              onDataChange={setParentChildData}
+              onUpdate={refetch}
+              disabled={isCreateForm ? createMutation.isPending : updateMutation.isPending}
+            />
+          </div>
+
+          {/* 对话框底部按钮 */}
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setIsModalOpen(false)}
+            >
+              取消
+            </Button>
+            <Button
+              type="submit"
+              form={isCreateForm ? "create-goods-form" : "edit-goods-form"}
+              disabled={isCreateForm ? createMutation.isPending : updateMutation.isPending}
+            >
+              {isCreateForm
+                ? (createMutation.isPending ? '创建中...' : '创建')
+                : (updateMutation.isPending ? '更新中...' : '更新')
+              }
+            </Button>
+          </DialogFooter>
         </DialogContent>
       </Dialog>