From b4337ec0a85e288ffe353735db5d77886045b226 Mon Sep 17 00:00:00 2001
From: zjt <zhenjintao1@jd.com>
Date: Thu, 20 Jan 2022 19:22:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20hidden=E3=80=81group=E3=80=81form?=
 =?UTF-8?q?=E3=80=81tabs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .DS_Store                                     | Bin 12292 -> 12292 bytes
 src/components/formFields/form/display.tsx    |  69 ++++++++++++++++++
 src/components/formFields/group/display.tsx   |  45 ++++++++++++
 src/components/formFields/hidden/display.tsx  |   4 +
 .../formFields/importSubform/display.tsx      |  53 ++++++++++++++
 src/components/formFields/index.tsx           |  12 ++-
 src/components/formFields/tabs/display.tsx    |  54 ++++++++++++++
 7 files changed, 236 insertions(+), 1 deletion(-)
 create mode 100644 src/components/formFields/form/display.tsx
 create mode 100644 src/components/formFields/group/display.tsx
 create mode 100644 src/components/formFields/hidden/display.tsx
 create mode 100644 src/components/formFields/importSubform/display.tsx
 create mode 100644 src/components/formFields/tabs/display.tsx

diff --git a/.DS_Store b/.DS_Store
index be8e15e699762fb77dc17917e05f0c7a926a6d6c..c75e4b861d9b3fdd3258c555752f8daa402c7179 100644
GIT binary patch
delta 76
zcmZokXi1ph&n?5iz`)GFAi%(oJTXRlvYrkbD<e>dWipR|IwQ-*9l`vpd>|#0trYHT
e783l)H}QemW^RRV>`ctIo0&EKu`@H<G5`Q_kr9>v

delta 104
zcmZokXi1ph&nwHoz`)GFAi%&-%uq5hN_(<_4vQ`$P>=<TQy4Nq5}rBv$w@i+NkB26
vN@iOit??fW7#KG02<B(xpEyB%Gq1o6{>|J9-`JTLKW}E%_{Yx7_?ZC!;4vHA

diff --git a/src/components/formFields/form/display.tsx b/src/components/formFields/form/display.tsx
new file mode 100644
index 0000000..430759b
--- /dev/null
+++ b/src/components/formFields/form/display.tsx
@@ -0,0 +1,69 @@
+import React from 'react'
+import { FormDisplay } from 'ccms'
+import { Form, Collapse, Space } from 'antd'
+import { IFormField, IFormFieldItem, IFormFieldItemField } from 'ccms/dist/src/components/formFields/form/display'
+import {display as getALLComponents} from '../'
+
+export default class FormDisplayComponent extends FormDisplay {
+  getALLComponents = (type: any) => getALLComponents[type]
+
+  remove: () => Promise<void> = async () => {}
+
+  renderItemFieldComponent = (props: IFormFieldItemField) => {
+    const {
+      label,
+      children
+    } = props
+    return (
+      <Form.Item
+        label={label}
+      >
+        {children}
+      </Form.Item>
+    )
+  }
+
+  renderItemComponent = (props: IFormFieldItem) => {
+    const {
+      title,
+      index,
+      canCollapse,
+      children
+    } = props
+
+    return (
+      <Collapse.Panel
+        header={<div style={{ display: 'inline-block', width: 'calc(100% - 60px)' }}>{title}</div>}
+        key={index}
+        forceRender={true}
+        showArrow={!!canCollapse}
+      >
+        {children}
+    </Collapse.Panel>
+    )
+  }
+
+  renderComponent = (props: IFormField) => {
+    const {
+      canCollapse,
+      children
+    } = props
+
+    const collapsePaneldDefaultActiveKeys = Array.from(Array(children.length), (v,k) =>k)
+    const CollapseProps = canCollapse? {
+      accordion: true
+    }: {
+      activeKey: collapsePaneldDefaultActiveKeys
+    }
+    return (
+      <React.Fragment>
+        <Space
+          style={{ width: '100%' }}
+          direction="vertical"
+        >
+          <Collapse bordered={false} style={{marginBottom: '24px'}} {...CollapseProps} >{children}</Collapse>
+        </Space>
+      </React.Fragment>
+    )
+  }
+}
diff --git a/src/components/formFields/group/display.tsx b/src/components/formFields/group/display.tsx
new file mode 100644
index 0000000..c7b0342
--- /dev/null
+++ b/src/components/formFields/group/display.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import { GroupDisplay } from 'ccms';
+import { IGroupField, GroupFieldConfig } from "ccms/dist/src/components/formFields/group";
+import { IFormItem } from "ccms/dist/src/steps/form";
+import { Form } from "antd"
+import {display as getALLComponents} from '../'
+import styles from './index.less'
+
+export const PropsType = (props: GroupFieldConfig) => { };
+
+export default class GroupDisplayComponent extends GroupDisplay {
+  getALLComponents = (type: any) => getALLComponents[type]
+
+  renderComponent = (props: IGroupField) => {
+    const {
+      children
+    } = props
+    return (
+      <div>
+        {children}
+      </div>
+    )
+  }
+
+  renderItemComponent = (props: IFormItem) => {
+    const {
+      key,
+      label,
+      visitable,
+      fieldType,
+      children
+    } = props
+
+    return (
+      <Form.Item
+        key={key}
+        label={label}
+        className={styles[`ccms-antd-mini-form-${fieldType}`]}
+        style={visitable ? {} : { overflow: 'hidden', width: 0, height: 0, margin: 0, padding: 0 }}
+      >
+        {children}
+      </Form.Item>
+    )
+  }
+}
\ No newline at end of file
diff --git a/src/components/formFields/hidden/display.tsx b/src/components/formFields/hidden/display.tsx
new file mode 100644
index 0000000..1beed5f
--- /dev/null
+++ b/src/components/formFields/hidden/display.tsx
@@ -0,0 +1,4 @@
+import { HiddenDisplay } from 'ccms'
+
+export default class HiddenDisplayComponent extends HiddenDisplay {
+}
diff --git a/src/components/formFields/importSubform/display.tsx b/src/components/formFields/importSubform/display.tsx
new file mode 100644
index 0000000..69566ac
--- /dev/null
+++ b/src/components/formFields/importSubform/display.tsx
@@ -0,0 +1,53 @@
+
+import React from "react";
+import { ImportSubformDisplay } from "ccms";
+import { IImportSubformField } from "ccms/dist/src/components/detail/importSubform";
+import { Display } from "ccms/dist/src/components/formFields/common";
+import { IDetailItem } from "ccms/dist/src/steps/detail";
+import { display as getALLComponents } from '../'
+import InterfaceHelper from "../../../util/interface";
+import { Form } from "antd";
+import styles from './index.less'
+
+export default class ImportSubformDisplayComponent extends ImportSubformDisplay {
+  getALLComponents = (type: any): typeof Display => getALLComponents[type]
+
+  interfaceHelper = new InterfaceHelper()
+
+  renderComponent = (props: IImportSubformField) => {
+    const {
+      children
+    } = props
+    return (
+      <div>
+        {children}
+      </div>
+    )
+  }
+
+  /**
+   * 表单项组件 - UI渲染方法
+   * 各UI库需重写该方法
+   * @param props
+   */
+  renderItemComponent = (props: IDetailItem) => {
+    const {
+      key,
+      label,
+      visitable,
+      fieldType,
+      children
+    } = props
+
+    return (
+      <Form.Item
+        key={key}
+        label={label}
+        className={styles[`ccms-antd-mini-form-${fieldType}`]}
+        style={visitable ? {} : { overflow: 'hidden', width: 0, height: 0 }}
+      >
+        {children}
+      </Form.Item>
+    )
+  }
+}
diff --git a/src/components/formFields/index.tsx b/src/components/formFields/index.tsx
index c2f26a4..40adc7b 100644
--- a/src/components/formFields/index.tsx
+++ b/src/components/formFields/index.tsx
@@ -21,16 +21,21 @@ import ImportSubformField from './importSubform'
 import AnyField from './any'
 
 import TextDisplayComponent from './text/display'
+import FormDisplayComponent from './form/display'
 import LongTextDisplayComponent from './longtext/display'
 import RadioDisplayComponent from './radio/display'
 import ColorDisplayComponent from './color/display'
 import NumberDisplayComponent from './number/display'
 import SwitchDisplayComponent from './switch/display'
+import GroupDisplayComponent from './group/display'
 import UploadDisplayComponent from './upload/display'
 import DatetimeDisplayComponent from './datetime/display'
 import DatetimeRangeDisplayComponent from './datetimeRange/display'
 import SelectSingleDisplayComponent from './select/single/display'
 import SelectMultipleDisplayComponent from './select/multiple/display'
+import TabsDisplayComponent from './tabs/display'
+import MultipleTextDisplayComponent from './multipleText/display'
+import ImportSubformDisplayComponent from './importSubform/display'
 
 export default {
   text: TextField,
@@ -58,6 +63,7 @@ export default {
 
 export const display = {
   text: TextDisplayComponent,
+  form: FormDisplayComponent,
   radio: RadioDisplayComponent,
   longtext: LongTextDisplayComponent,
   number: NumberDisplayComponent,
@@ -67,5 +73,9 @@ export const display = {
   select_single: SelectSingleDisplayComponent,
   select_multiple: SelectMultipleDisplayComponent,
   color: ColorDisplayComponent,
-  upload: UploadDisplayComponent
+  upload: UploadDisplayComponent,
+  group: GroupDisplayComponent,
+  tabs: TabsDisplayComponent,
+  multiple_text: MultipleTextDisplayComponent,
+  import_subform: ImportSubformDisplayComponent,
 }
\ No newline at end of file
diff --git a/src/components/formFields/tabs/display.tsx b/src/components/formFields/tabs/display.tsx
new file mode 100644
index 0000000..47e7910
--- /dev/null
+++ b/src/components/formFields/tabs/display.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import { TabsDisplay } from 'ccms'
+import { Form, Tabs } from 'antd'
+import { ITabsField, ITabsFieldItem, ITabsFieldItemField } from 'ccms/dist/src/components/formFields/tabs/display'
+import {display as getALLComponents} from '../'
+import { Display } from 'ccms/dist/src/components/formFields/common'
+
+export default class TabsDisplayComponent extends TabsDisplay<{}> {
+    // 各表单项对应的类型所使用的UI组件的类
+    getALLComponents = (type: any): typeof Display => getALLComponents[type]
+  
+    renderItemFieldComponent = (props: ITabsFieldItemField) => {
+      const {
+        label,
+        children
+      } = props
+  
+      return (
+      <Form.Item
+        label={label}
+      >
+        {children}
+      </Form.Item>
+    )
+  }
+
+  renderItemComponent = (props: ITabsFieldItem) => {
+    const {
+      key,
+      label,
+      children
+    } = props
+
+    return (
+      <Tabs.TabPane tab={label} key={key} forceRender={true}>
+        {children}
+      </Tabs.TabPane>
+    )
+  }
+
+  renderComponent = (props: ITabsField) => {
+    const {
+      children
+    } = props
+
+    return (
+      <React.Fragment>
+        <Tabs animated={true} style={{ width: '100%' }}>
+          {children}
+        </Tabs>
+      </React.Fragment>
+    )
+  }
+}
-- 
Gitee