From db1835c24e354816fb7c88dc381bd51a480d85e9 Mon Sep 17 00:00:00 2001
From: cuiwenlong7 <cuiwenlong7@jd.com>
Date: Sat, 7 May 2022 10:48:21 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E8=A1=A8=E5=8D=95=E6=AD=A5?=
 =?UTF-8?q?=E9=AA=A4=EF=BC=88=E4=B8=8D=E6=B6=89=E5=8F=8A=E7=AD=9B=E9=80=89?=
 =?UTF-8?q?=E6=AD=A5=E9=AA=A4=EF=BC=89=E3=80=81formFields=E5=8C=85?=
 =?UTF-8?q?=E8=A3=B9=E7=BB=84=E4=BB=B6=E5=A2=9E=E5=8A=A0=E5=89=AFLabel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/formFields/form/index.tsx          | 2 ++
 src/components/formFields/group/index.tsx         | 2 ++
 src/components/formFields/importSubform/index.tsx | 2 ++
 src/components/formFields/tabs/index.tsx          | 3 ++-
 src/steps/form/index.tsx                          | 5 ++++-
 5 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/formFields/form/index.tsx b/src/components/formFields/form/index.tsx
index 77d2fb1..ab35eb8 100644
--- a/src/components/formFields/form/index.tsx
+++ b/src/components/formFields/form/index.tsx
@@ -14,6 +14,7 @@ export default class FormFieldComponent extends FormField {
   renderItemFieldComponent = (props: IFormFieldItemField) => {
     const {
       label,
+      subLabel,
       status,
       message,
       extra,
@@ -31,6 +32,7 @@ export default class FormFieldComponent extends FormField {
         help={ message === '' ? null : message}
         {...formItemLayout(layout, fieldType, label)}
       >
+        {subLabel || null}
         {children}
       </Form.Item>
     )
diff --git a/src/components/formFields/group/index.tsx b/src/components/formFields/group/index.tsx
index aa638cc..42153d9 100644
--- a/src/components/formFields/group/index.tsx
+++ b/src/components/formFields/group/index.tsx
@@ -37,6 +37,7 @@ export default class GroupFieldComponent extends GroupField {
       layout,
       columns,
       label,
+      subLabel,
       visitable,
       status,
       message,
@@ -74,6 +75,7 @@ export default class GroupFieldComponent extends GroupField {
           className={styles[`ccms-antd-mini-form-${fieldType}`]}
           style={itemStyle}
         >
+          {subLabel || null}
           {children}
         </Form.Item>
       </div>
diff --git a/src/components/formFields/importSubform/index.tsx b/src/components/formFields/importSubform/index.tsx
index 3187024..2604694 100644
--- a/src/components/formFields/importSubform/index.tsx
+++ b/src/components/formFields/importSubform/index.tsx
@@ -41,6 +41,7 @@ export default class ImportSubformFieldComponent extends ImportSubformField {
       layout,
       columns,
       label,
+      subLabel,
       visitable,
       status,
       message,
@@ -77,6 +78,7 @@ export default class ImportSubformFieldComponent extends ImportSubformField {
           className={styles[`ccms-antd-mini-form-${fieldType}`]}
           style={itemStyle}
         >
+          {subLabel || null}
           {children}
         </Form.Item>
       </div>
diff --git a/src/components/formFields/tabs/index.tsx b/src/components/formFields/tabs/index.tsx
index 99a684f..55cc9ae 100644
--- a/src/components/formFields/tabs/index.tsx
+++ b/src/components/formFields/tabs/index.tsx
@@ -5,7 +5,6 @@ import { ITabsField, ITabsFieldItem, ITabsFieldItemField } from 'ccms/dist/src/c
 import getALLComponents from '../'
 import { Field } from 'ccms/dist/src/components/formFields/common'
 import { formItemLayout } from '../common'
-
 export default class TabsFieldComponent extends TabsField<{}> {
   // 各表单项对应的类型所使用的UI组件的类
   getALLComponents = (type: any): typeof Field => getALLComponents[type]
@@ -13,6 +12,7 @@ export default class TabsFieldComponent extends TabsField<{}> {
   renderItemFieldComponent = (props: ITabsFieldItemField) => {
     const {
       label,
+      subLabel,
       status,
       message,
       extra,
@@ -31,6 +31,7 @@ export default class TabsFieldComponent extends TabsField<{}> {
         help={ message === '' ? null : message}
         {...formItemLayout(layout, fieldType, label)}
       >
+        {subLabel || null}
         {children}
       </Form.Item>
     )
diff --git a/src/steps/form/index.tsx b/src/steps/form/index.tsx
index 6a1d502..6d25c7b 100644
--- a/src/steps/form/index.tsx
+++ b/src/steps/form/index.tsx
@@ -57,7 +57,8 @@ export default class FormStepComponent extends FormStep {
       <Form
         {...formItemLayout}
         // layout={layout}
-        layout="vertical" // 和drip同步 改为竖排
+        layout="horizontal" 
+        // layout="vertical" // 和drip同步 改为竖排
         className={newstyles['content']}
       >
         <div
@@ -99,6 +100,7 @@ export default class FormStepComponent extends FormStep {
       layout,
       columns,
       label,
+      subLabel,
       status,
       message,
       extra,
@@ -137,6 +139,7 @@ export default class FormStepComponent extends FormStep {
               style={itemStyle}
               className={styles[`ccms-antd-mini-form-${fieldType}`]}
             >
+              {subLabel || null}
               {children}
             </Form.Item>}
       </div>
-- 
Gitee


From abd54c1b08e49e79fdb25f7118e917e4e9fc6633 Mon Sep 17 00:00:00 2001
From: cuiwenlong7 <cuiwenlong7@jd.com>
Date: Sat, 7 May 2022 10:57:14 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E9=A2=84=E7=95=99layout=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E9=A1=B9=E5=90=AF=E7=94=A8=E6=97=B6=E6=89=80=E9=9C=80?=
 =?UTF-8?q?label=20css=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/formFields/common.less             | 7 +++++++
 src/components/formFields/form/index.tsx          | 2 ++
 src/components/formFields/group/index.tsx         | 2 ++
 src/components/formFields/importSubform/index.tsx | 2 ++
 src/components/formFields/tabs/index.tsx          | 3 +++
 src/steps/form/index.less                         | 7 +++++++
 src/steps/form/index.tsx                          | 1 +
 7 files changed, 24 insertions(+)
 create mode 100644 src/components/formFields/common.less

diff --git a/src/components/formFields/common.less b/src/components/formFields/common.less
new file mode 100644
index 0000000..6fe10b8
--- /dev/null
+++ b/src/components/formFields/common.less
@@ -0,0 +1,7 @@
+.ccms-antd-label-vertical-flex-start {
+  :global {
+    .ant-form-item-label > label {
+      align-items: flex-start!important;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/formFields/form/index.tsx b/src/components/formFields/form/index.tsx
index ab35eb8..d43b418 100644
--- a/src/components/formFields/form/index.tsx
+++ b/src/components/formFields/form/index.tsx
@@ -5,6 +5,7 @@ import { PlusOutlined, MinusCircleOutlined, ArrowUpOutlined, ArrowDownOutlined,
 import { IFormField, IFormFieldItem, IFormFieldItemField } from 'ccms/dist/src/components/formFields/form'
 import getALLComponents from '../'
 import { formItemLayout } from '../common'
+import commonStyles from '../common.less'
 
 export default class FormFieldComponent extends FormField {
   getALLComponents = (type: any) => getALLComponents[type]
@@ -31,6 +32,7 @@ export default class FormFieldComponent extends FormField {
         validateStatus={ status === 'normal' ? undefined : status === 'error' ? 'error' : 'validating' }
         help={ message === '' ? null : message}
         {...formItemLayout(layout, fieldType, label)}
+        // className={ layout === 'horizontal' && subLabel ? commonStyles['ccms-antd-label-vertical-flex-start']: null }
       >
         {subLabel || null}
         {children}
diff --git a/src/components/formFields/group/index.tsx b/src/components/formFields/group/index.tsx
index 42153d9..54baad6 100644
--- a/src/components/formFields/group/index.tsx
+++ b/src/components/formFields/group/index.tsx
@@ -4,6 +4,7 @@ import { IGroupField, GroupFieldConfig } from "ccms/dist/src/components/formFiel
 import { IFormItem } from "ccms/dist/src/steps/form";
 import { Form } from "antd"
 import getALLComponents from '../'
+import commonStyles from '../common.less'
 import styles from './index.less'
 import { formItemLayout, computedItemStyle, computedGapStyle } from "../common";
 
@@ -73,6 +74,7 @@ export default class GroupFieldComponent extends GroupField {
           validateStatus={status === 'normal' ? undefined : status === 'error' ? 'error' : 'validating'}
           help={fieldType === 'import_subform' || fieldType === 'group' || message === '' ? null : message}
           className={styles[`ccms-antd-mini-form-${fieldType}`]}
+          // className={ [styles[`ccms-antd-mini-form-${fieldType}`], layout === 'horizontal' && subLabel ? commonStyles['ccms-antd-label-vertical-flex-start']: null].join(' ') }
           style={itemStyle}
         >
           {subLabel || null}
diff --git a/src/components/formFields/importSubform/index.tsx b/src/components/formFields/importSubform/index.tsx
index 2604694..7c86ad8 100644
--- a/src/components/formFields/importSubform/index.tsx
+++ b/src/components/formFields/importSubform/index.tsx
@@ -5,6 +5,7 @@ import { IFormItem } from "ccms/dist/src/steps/form";
 import { Form } from "antd"
 import { FormItemProps } from "antd/lib/form";
 import getALLComponents from '../'
+import commonStyles from '../common.less'
 import styles from './index.less'
 import { computedItemStyle, computedGapStyle } from "../common";
 import InterfaceHelper from "../../../util/interface";
@@ -76,6 +77,7 @@ export default class ImportSubformFieldComponent extends ImportSubformField {
           validateStatus={status === 'normal' ? undefined : status === 'error' ? 'error' : 'validating'}
           help={fieldType === 'group' || fieldType === 'import_subform' || message === '' ? null : message}
           className={styles[`ccms-antd-mini-form-${fieldType}`]}
+          // className={ [styles[`ccms-antd-mini-form-${fieldType}`], layout === 'horizontal' && subLabel ? commonStyles['ccms-antd-label-vertical-flex-start']: null].join(' ') }
           style={itemStyle}
         >
           {subLabel || null}
diff --git a/src/components/formFields/tabs/index.tsx b/src/components/formFields/tabs/index.tsx
index 55cc9ae..eeb4772 100644
--- a/src/components/formFields/tabs/index.tsx
+++ b/src/components/formFields/tabs/index.tsx
@@ -5,6 +5,8 @@ import { ITabsField, ITabsFieldItem, ITabsFieldItemField } from 'ccms/dist/src/c
 import getALLComponents from '../'
 import { Field } from 'ccms/dist/src/components/formFields/common'
 import { formItemLayout } from '../common'
+import commonStyles from '../common.less'
+
 export default class TabsFieldComponent extends TabsField<{}> {
   // 各表单项对应的类型所使用的UI组件的类
   getALLComponents = (type: any): typeof Field => getALLComponents[type]
@@ -30,6 +32,7 @@ export default class TabsFieldComponent extends TabsField<{}> {
         validateStatus={ status === 'normal' ? undefined : status === 'error' ? 'error' : 'validating' }
         help={ message === '' ? null : message}
         {...formItemLayout(layout, fieldType, label)}
+        // className={ layout === 'horizontal' && subLabel ? commonStyles['ccms-antd-label-vertical-flex-start']: null }
       >
         {subLabel || null}
         {children}
diff --git a/src/steps/form/index.less b/src/steps/form/index.less
index 05534b2..b7acf1a 100644
--- a/src/steps/form/index.less
+++ b/src/steps/form/index.less
@@ -79,3 +79,10 @@
     border-bottom: 1px solid #f1f1f1;
   }
 }
+.ccms-antd-label-vertical-flex-start {
+  :global {
+    .ant-form-item-label > label {
+      align-items: flex-start!important;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/steps/form/index.tsx b/src/steps/form/index.tsx
index 6d25c7b..bfc738e 100644
--- a/src/steps/form/index.tsx
+++ b/src/steps/form/index.tsx
@@ -138,6 +138,7 @@ export default class FormStepComponent extends FormStep {
               help={fieldType === 'group' || fieldType === 'import_subform' || message === '' ? null : message}
               style={itemStyle}
               className={styles[`ccms-antd-mini-form-${fieldType}`]}
+              // className={ [styles[`ccms-antd-mini-form-${fieldType}`], layout === 'horizontal' && subLabel ? styles['ccms-antd-label-vertical-flex-start']: null].join(' ') } // 预留layout配置项启用时所需label css代码
             >
               {subLabel || null}
               {children}
-- 
Gitee