From dd901df41173f80a71fca9bc3291f853bb440369 Mon Sep 17 00:00:00 2001 From: cuiwenlong7 Date: Fri, 5 Nov 2021 18:47:59 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E8=AF=A6=E6=83=85=E6=AD=A5?= =?UTF-8?q?=E9=AA=A4text=E3=80=81group?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/detail/common.ts | 29 ++++++++++ src/components/detail/group/index.less | 33 ++++++++++++ src/components/detail/group/index.tsx | 44 +++++++++++++++ src/components/detail/index.tsx | 7 +++ src/components/detail/text/index.tsx | 16 ++++++ src/index.tsx | 3 ++ src/steps/detail/index.less | 33 ++++++++++++ src/steps/detail/index.tsx | 74 ++++++++++++++++++++++++++ src/steps/index.tsx | 4 +- 9 files changed, 242 insertions(+), 1 deletion(-) create mode 100644 src/components/detail/common.ts create mode 100644 src/components/detail/group/index.less create mode 100644 src/components/detail/group/index.tsx create mode 100644 src/components/detail/index.tsx create mode 100644 src/components/detail/text/index.tsx create mode 100644 src/steps/detail/index.less create mode 100644 src/steps/detail/index.tsx diff --git a/src/components/detail/common.ts b/src/components/detail/common.ts new file mode 100644 index 0000000..709e1d1 --- /dev/null +++ b/src/components/detail/common.ts @@ -0,0 +1,29 @@ +import { FormItemProps } from "antd"; + +export function formItemLayout (layout: 'horizontal' | 'vertical' | 'inline', fieldType: string, label: string | undefined) { + const formItemLayout: FormItemProps = { labelAlign: 'left' } + if (layout === 'vertical') { + if (label) { + formItemLayout.labelCol = { span: 24 } + formItemLayout.wrapperCol = { span: 24 } + } else { + formItemLayout.wrapperCol = { span: 24 } + } + } else { + if (['form', 'group', 'object', 'import_subform', 'tabs'].includes(fieldType)) { + if (label) { + formItemLayout.labelCol = { span: 24 } + } + formItemLayout.wrapperCol = { span: 24 } + } else { + if (label) { + formItemLayout.labelCol = { span: 6 } + formItemLayout.wrapperCol = { span: 18 } + } else { + formItemLayout.wrapperCol = { span: 24 } + } + } + } + + return formItemLayout +} \ No newline at end of file diff --git a/src/components/detail/group/index.less b/src/components/detail/group/index.less new file mode 100644 index 0000000..f465c35 --- /dev/null +++ b/src/components/detail/group/index.less @@ -0,0 +1,33 @@ +.ccms-antd-mini-form-import_subform, .ccms-antd-mini-form-group { + margin-bottom: 0 !important; + + &>:global(.ant-form-item-label) { + width: calc(100% + 16px) !important; + max-width: calc(100% + 16px) !important; + margin-left: -8px !important; + padding: 2px 8px !important; + flex: 0 0 auto !important; + background-color: #00000008 !important; + } + &>:global(.ant-form-item-control) { + margin-left: -8px !important; + margin-right: -8px !important; + padding: 8px !important; + max-width: calc(100% + 16px) !important; + background-color: #00000004 !important; + } + &>:global(.ant-form-item-control):first-child { + padding-top: 0 !important; + background-color: #00000000 !important; + } +} + +.ccms-antd-mini-form-form, .ccms-antd-mini-form-object { + &>:global(.ant-form-item-control) { + &>:global(.ant-form-item-control-input) { + &>:global(.ant-form-item-control-input-content) { + min-height: 24px !important; + } + } + } +} \ No newline at end of file diff --git a/src/components/detail/group/index.tsx b/src/components/detail/group/index.tsx new file mode 100644 index 0000000..70613db --- /dev/null +++ b/src/components/detail/group/index.tsx @@ -0,0 +1,44 @@ +import React from "react"; +import { DetailGroupField } from 'ccms'; +import { IGroupField, GroupFieldConfig } from "ccms/dist/src/components/detail/group"; +import { IFormItem } from "ccms/dist/src/steps/detail"; +import { Form } from "antd" +import getALLComponents from '../' +import styles from './index.less' +import { formItemLayout } from "../common"; + +export const PropsType = (props: GroupFieldConfig) => { }; + +export default class GroupFieldComponent extends DetailGroupField { + getALLComponents = (type: any) => getALLComponents[type] + + renderComponent = (props: IGroupField) => { + const { + children + } = props + return ( +
+ {children} +
+ ) + } + + renderItemComponent = (props: IFormItem) => { + const { + layout, + label, + fieldType, + children + } = props + + return ( + + {children} + + ) + } +} \ No newline at end of file diff --git a/src/components/detail/index.tsx b/src/components/detail/index.tsx new file mode 100644 index 0000000..ff733d3 --- /dev/null +++ b/src/components/detail/index.tsx @@ -0,0 +1,7 @@ +import TextField from './text' +import GroupField from './group' + +export default { + text: TextField, + group: GroupField, +} diff --git a/src/components/detail/text/index.tsx b/src/components/detail/text/index.tsx new file mode 100644 index 0000000..8a6d391 --- /dev/null +++ b/src/components/detail/text/index.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import { DetailTextField } from 'ccms' +import { ITextField, TextFieldConfig } from 'ccms/dist/src/components/detail/text' + +export const PropsType = (props: TextFieldConfig) => {} + +export default class TextFieldComponent extends DetailTextField { + renderComponent = (props: ITextField) => { + const { + value + } = props + return ( +
{value}
+ ) + } +} diff --git a/src/index.tsx b/src/index.tsx index 38888d4..1b721d0 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -10,3 +10,6 @@ export { default as SelectMultipleField } from './components/formFields/select/m export { default as Table } from './steps/table' export { default as Fetch } from './steps/fetch' +export { default as DetailStep } from './steps/detail' +export { default as DetailGroupField } from './components/detail/group' +export { default as DetailTextField } from './components/detail/text' \ No newline at end of file diff --git a/src/steps/detail/index.less b/src/steps/detail/index.less new file mode 100644 index 0000000..99a6272 --- /dev/null +++ b/src/steps/detail/index.less @@ -0,0 +1,33 @@ +.ccms-antd-mini-form-import_subform, .ccms-antd-mini-form-group { + margin-bottom: 0 !important; + + &>:global(.ant-form-item-label) { + width: calc(100% + 16px) !important; + max-width: calc(100% + 16px) !important; + margin-left: -8px !important; + padding: 2px 8px !important; + flex: 0 0 auto !important; + background-color: #00000008 !important; + } + &>:global(.ant-form-item-control) { + margin-left: -8px !important; + margin-right: -8px !important; + padding: 8px !important; + max-width: calc(100% + 16px) !important; + background-color: #00000004 !important; + } + &>:global(.ant-form-item-control):first-child { + padding-top: 0 !important; + background-color: #00000000 !important; + } +} + +.ccms-antd-mini-form-form { + &>:global(.ant-form-item-control) { + &>:global(.ant-form-item-control-input) { + &>:global(.ant-form-item-control-input-content) { + min-height: 24px !important; + } + } + } +} \ No newline at end of file diff --git a/src/steps/detail/index.tsx b/src/steps/detail/index.tsx new file mode 100644 index 0000000..769f356 --- /dev/null +++ b/src/steps/detail/index.tsx @@ -0,0 +1,74 @@ +import React from 'react' +import { Button, Form, Space } from 'antd' +import { FormProps } from 'antd/lib/form' +import { FormStep } from 'ccms' +import { IForm, IFormItem, DetailConfig } from 'ccms/dist/src/steps/detail' + +import getALLComponents from '../../components/detail' +import styles from "./index.less" +import { formItemLayout } from '../../components/formFields/common' +import newstyles from "../../main.less" + +export default class FormStepComponent extends FormStep { + getALLComponents = (type: any) => getALLComponents[type] + + renderComponent = (props: IForm) => { + const { + layout, // layout?? + onBack, + backText, + children + } = props + + const formItemLayout: FormProps | null = + layout === 'horizontal' + ? { + labelAlign: 'left', + labelCol: { span: 6 }, + wrapperCol: { span: 18 } + } + : null + + return ( +
+ {children} + { + onBack && + + {} + + + } +
+ ) + } + + renderItemComponent = (props: IFormItem) => { + const { + layout, + label, + // status, + fieldType, + children + } = props + + return ( + + {children} + + ) + } +} +// +export const PropsType = (props: IForm) => {}; + +export const PropsTypeFormConfig = (props: DetailConfig) => {}; +export const PropsTypeStep = (props: FormStep) => {}; \ No newline at end of file diff --git a/src/steps/index.tsx b/src/steps/index.tsx index 9cae75d..16e4e41 100644 --- a/src/steps/index.tsx +++ b/src/steps/index.tsx @@ -3,11 +3,13 @@ import FormStep from './form' import SkipStep from './skip' import TableStep from './table' import FilterStep from './filter' +import DetailStep from './detail' export default { fetch: FetchStep, form: FormStep, skip: SkipStep, table: TableStep, - filter: FilterStep + filter: FilterStep, + detail: DetailStep } -- Gitee From 04029f46aa5f669b2274c365c6f93c1b0adf3238 Mon Sep 17 00:00:00 2001 From: cuiwenlong7 Date: Wed, 10 Nov 2021 14:49:02 +0800 Subject: [PATCH 2/3] =?UTF-8?q?fix:=20react=E5=BC=80=E5=8F=91=E7=8E=AF?= =?UTF-8?q?=E5=A2=83key=E6=8A=A5=E8=AD=A6=E5=91=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/formFields/group/index.tsx | 2 ++ src/steps/detail/index.tsx | 8 +++++--- src/steps/form/index.tsx | 2 ++ 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/formFields/group/index.tsx b/src/components/formFields/group/index.tsx index 0b3749c..7573cf0 100644 --- a/src/components/formFields/group/index.tsx +++ b/src/components/formFields/group/index.tsx @@ -25,6 +25,7 @@ export default class GroupFieldComponent extends GroupField { renderItemComponent = (props: IFormItem) => { const { + key, layout, label, status, @@ -35,6 +36,7 @@ export default class GroupFieldComponent extends GroupField { return ( getALLComponents[type] renderComponent = (props: IForm) => { @@ -49,6 +49,7 @@ export default class FormStepComponent extends FormStep { renderItemComponent = (props: IFormItem) => { const { + key, layout, label, // status, @@ -58,6 +59,7 @@ export default class FormStepComponent extends FormStep { return ( {}; export const PropsTypeFormConfig = (props: DetailConfig) => {}; -export const PropsTypeStep = (props: FormStep) => {}; \ No newline at end of file +export const PropsTypeStep = (props: DetailStep) => {}; \ No newline at end of file diff --git a/src/steps/form/index.tsx b/src/steps/form/index.tsx index 687ffee..e9938b6 100644 --- a/src/steps/form/index.tsx +++ b/src/steps/form/index.tsx @@ -52,6 +52,7 @@ export default class FormStepComponent extends FormStep { renderItemComponent = (props: IFormItem) => { const { + key, layout, label, status, @@ -62,6 +63,7 @@ export default class FormStepComponent extends FormStep { return ( Date: Tue, 23 Nov 2021 06:20:07 +0000 Subject: [PATCH 3/3] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E5=8F=98=E9=87=8F=E5=90=8D=E7=A7=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/detail/group/index.tsx | 4 ++-- src/steps/detail/index.tsx | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/detail/group/index.tsx b/src/components/detail/group/index.tsx index 70613db..7a9c45b 100644 --- a/src/components/detail/group/index.tsx +++ b/src/components/detail/group/index.tsx @@ -1,7 +1,7 @@ import React from "react"; import { DetailGroupField } from 'ccms'; import { IGroupField, GroupFieldConfig } from "ccms/dist/src/components/detail/group"; -import { IFormItem } from "ccms/dist/src/steps/detail"; +import { IDetailItem } from "ccms/dist/src/steps/detail"; import { Form } from "antd" import getALLComponents from '../' import styles from './index.less' @@ -23,7 +23,7 @@ export default class GroupFieldComponent extends DetailGroupField { ) } - renderItemComponent = (props: IFormItem) => { + renderItemComponent = (props: IDetailItem) => { const { layout, label, diff --git a/src/steps/detail/index.tsx b/src/steps/detail/index.tsx index 456b5a5..1d34e29 100644 --- a/src/steps/detail/index.tsx +++ b/src/steps/detail/index.tsx @@ -2,7 +2,7 @@ import React from 'react' import { Button, Form, Space } from 'antd' import { FormProps } from 'antd/lib/form' import { DetailStep } from 'ccms' -import { IForm, IFormItem, DetailConfig } from 'ccms/dist/src/steps/detail' +import { IDetail, IDetailItem, DetailConfig } from 'ccms/dist/src/steps/detail' import getALLComponents from '../../components/detail' import styles from "./index.less" @@ -12,7 +12,7 @@ import newstyles from "../../main.less" export default class DetailStepComponent extends DetailStep { getALLComponents = (type: any) => getALLComponents[type] - renderComponent = (props: IForm) => { + renderComponent = (props: IDetail) => { const { layout, // layout?? onBack, @@ -47,7 +47,7 @@ export default class DetailStepComponent extends DetailStep { ) } - renderItemComponent = (props: IFormItem) => { + renderItemComponent = (props: IDetailItem) => { const { key, layout, @@ -70,7 +70,7 @@ export default class DetailStepComponent extends DetailStep { } } // -export const PropsType = (props: IForm) => {}; +export const PropsType = (props: IDetail) => {}; export const PropsTypeFormConfig = (props: DetailConfig) => {}; export const PropsTypeStep = (props: DetailStep) => {}; \ No newline at end of file -- Gitee