Procházet zdrojové kódy

修复双栏下改变标签宽度不生效问题

pm před 2 měsíci
rodič
revize
54406bf10b
1 změnil soubory, kde provedl 39 přidání a 12 odebrání
  1. 39 12
      src/components/FormDesigner.tsx

+ 39 - 12
src/components/FormDesigner.tsx

@@ -1020,6 +1020,21 @@ const FieldRenderer: React.FC<{
         <AntdForm.Item
         <AntdForm.Item
           label={field.label + (formConfig?.labelSuffix || '')}
           label={field.label + (formConfig?.labelSuffix || '')}
           required={field.required && !formConfig?.hideRequiredMark}
           required={field.required && !formConfig?.hideRequiredMark}
+          labelCol={
+            formConfig?.labelPosition === 'top'
+              ? undefined
+              : {
+                  flex: `${labelWidth}px`,
+                  style: {
+                    minWidth: `${labelWidth}px`,
+                    textAlign:
+                      formConfig?.labelPosition === 'right'
+                        ? 'right'
+                        : 'left',
+                  },
+                }
+          }
+          wrapperCol={formConfig?.labelPosition === 'top' ? undefined : { flex: 'auto' }}
           className="mb-0"
           className="mb-0"
           rules={(() => {
           rules={(() => {
             const rules: any[] = [];
             const rules: any[] = [];
@@ -2539,12 +2554,18 @@ export default function FormDesigner() {
                         layout={formConfig.labelPosition === 'top' ? 'vertical' : formConfig.labelPosition === 'left' ? 'horizontal' : 'horizontal'}
                         layout={formConfig.labelPosition === 'top' ? 'vertical' : formConfig.labelPosition === 'left' ? 'horizontal' : 'horizontal'}
                         size={formConfig.formSize === 'default' ? 'middle' : formConfig.formSize}
                         size={formConfig.formSize === 'default' ? 'middle' : formConfig.formSize}
                         requiredMark={formConfig.hideRequiredMark ? false : undefined}
                         requiredMark={formConfig.hideRequiredMark ? false : undefined}
-                        labelCol={formConfig.labelWidth ? { 
-                          style: { 
-                            width: `${formConfig.labelWidth}px`,
-                            textAlign: formConfig.labelPosition === 'left' ? 'left' : formConfig.labelPosition === 'right' ? 'right' : 'left'
-                          } 
-                        } : undefined}
+                        labelCol={
+                          formConfig.labelPosition === 'top' || !formConfig.labelWidth
+                            ? undefined
+                            : {
+                                flex: `${formConfig.labelWidth}px`,
+                                style: {
+                                  minWidth: `${formConfig.labelWidth}px`,
+                                  textAlign: formConfig.labelPosition === 'right' ? 'right' : 'left',
+                                },
+                              }
+                        }
+                        wrapperCol={formConfig.labelPosition === 'top' ? undefined : { flex: 'auto' }}
                       >
                       >
                         <div style={gridStyle} className={layoutColumns === 1 ? 'space-y-4' : ''}>
                         <div style={gridStyle} className={layoutColumns === 1 ? 'space-y-4' : ''}>
                           {fields.map((field, index) => (
                           {fields.map((field, index) => (
@@ -2623,12 +2644,18 @@ export default function FormDesigner() {
                         layout={formConfig.labelPosition === 'top' ? 'vertical' : formConfig.labelPosition === 'left' ? 'horizontal' : 'horizontal'}
                         layout={formConfig.labelPosition === 'top' ? 'vertical' : formConfig.labelPosition === 'left' ? 'horizontal' : 'horizontal'}
                         size={formConfig.formSize === 'default' ? 'middle' : formConfig.formSize}
                         size={formConfig.formSize === 'default' ? 'middle' : formConfig.formSize}
                         requiredMark={formConfig.hideRequiredMark ? false : undefined}
                         requiredMark={formConfig.hideRequiredMark ? false : undefined}
-                        labelCol={formConfig.labelWidth ? { 
-                          style: { 
-                            width: `${formConfig.labelWidth}px`,
-                            textAlign: formConfig.labelPosition === 'left' ? 'left' : formConfig.labelPosition === 'right' ? 'right' : 'left'
-                          } 
-                        } : undefined}
+                        labelCol={
+                          formConfig.labelPosition === 'top' || !formConfig.labelWidth
+                            ? undefined
+                            : {
+                                flex: `${formConfig.labelWidth}px`,
+                                style: {
+                                  minWidth: `${formConfig.labelWidth}px`,
+                                  textAlign: formConfig.labelPosition === 'right' ? 'right' : 'left',
+                                },
+                              }
+                        }
+                        wrapperCol={formConfig.labelPosition === 'top' ? undefined : { flex: 'auto' }}
                       >
                       >
                         <CanvasDropZone
                         <CanvasDropZone
                           onDrop={(type, uploadType, layoutCols) => {
                           onDrop={(type, uploadType, layoutCols) => {