diff --git a/src/components/BasicShop/BasicComponents/Form/BasePopoverForm.tsx b/src/components/BasicShop/BasicComponents/Form/BasePopoverForm.tsx new file mode 100644 index 0000000..08c1eb4 --- /dev/null +++ b/src/components/BasicShop/BasicComponents/Form/BasePopoverForm.tsx @@ -0,0 +1,96 @@ +import styles from './baseForm.less'; +import React, { ReactText } from 'react'; +import { Button } from 'antd'; +import { + baseFormDateTpl, + baseFormMyRadioTpl, + baseFormMyCheckboxTpl, + baseFormMySelectTpl, + baseFormNumberTpl, + baseFormTextAreaTpl, + baseFormTextTpl, + baseFormUnionType, +} from '@/components/PanelComponents/FormEditor/types'; + +// 维护表单控件， 提高form渲染性能 + +type TBaseForm = { + [key in baseFormUnionType]: any; +}; + +const BaseForm: TBaseForm = { + Text: (props: baseFormTextTpl & { onChange: (v: string | undefined) => void }) => { + const { label, onChange } = props; + return ( + + ); + }, + Textarea: (props: baseFormTextAreaTpl & { onChange: (v: string | undefined) => void }) => { + const { label, onChange } = props; + return ( + + ); + }, + Number: (props: baseFormNumberTpl & { onChange: (v: string | undefined | number) => void }) => { + const { label, onChange } = props; + return ( + + ); + }, + MyRadio: (props: baseFormMyRadioTpl & { onChange: (v: string | undefined | number) => void }) => { + const { label, onChange } = props; + return ( +
+ +
+ ); + }, + MyCheckbox: ( + props: baseFormMyCheckboxTpl & { onChange: (v: Array | undefined) => void }, + ) => { + const { label, onChange } = props; + return ( +
+ +
+ ); + }, + Date: (props: baseFormDateTpl & { onChange: (v: Date) => void }) => { + const { label, onChange } = props; + return ( + + ); + }, + MySelect: ( + props: baseFormMySelectTpl & { onChange: ((v: Record) => void) | undefined }, + ) => { + const { label, onChange } = props; + return ( + + ); + }, +}; + +export default BaseForm; diff --git a/src/components/BasicShop/BasicComponents/Form/baseForm.less b/src/components/BasicShop/BasicComponents/Form/baseForm.less index 130208c..ccc6fe8 100644 --- a/src/components/BasicShop/BasicComponents/Form/baseForm.less +++ b/src/components/BasicShop/BasicComponents/Form/baseForm.less @@ -1,8 +1,7 @@ .radioWrap { margin-bottom: 10px; .radioTitle { - padding: 6px 16px; - // font-size: 15px; + padding: 19px 14px; } .radioItem { margin-top: 10px; diff --git a/src/components/CommonComponents/VisualComponents/Form/baseForm.less b/src/components/CommonComponents/VisualComponents/Form/baseForm.less index 130208c..bf11ee9 100644 --- a/src/components/CommonComponents/VisualComponents/Form/baseForm.less +++ b/src/components/CommonComponents/VisualComponents/Form/baseForm.less @@ -1,7 +1,7 @@ .radioWrap { margin-bottom: 10px; .radioTitle { - padding: 6px 16px; + padding: 19px 14px; // font-size: 15px; } .radioItem { diff --git a/src/components/PanelComponents/Color/index.tsx b/src/components/PanelComponents/Color/index.tsx index b446bcd..06023e8 100644 --- a/src/components/PanelComponents/Color/index.tsx +++ b/src/components/PanelComponents/Color/index.tsx @@ -36,7 +36,7 @@ class colorPicker extends React.Component {
{ >
{ )} {item.type === 'FormItems' && ( - + )} diff --git a/src/components/PanelComponents/FormItems/FormItems.tsx b/src/components/PanelComponents/FormItems/FormItems.tsx index 2f1852a..f26f764 100644 --- a/src/components/PanelComponents/FormItems/FormItems.tsx +++ b/src/components/PanelComponents/FormItems/FormItems.tsx @@ -1,10 +1,12 @@ import React, { memo, useState } from 'react'; import BaseForm from '../../BasicShop/BasicComponents/Form/BaseForm'; +import BasePopoverForm from '../../BasicShop/BasicComponents/Form/BasePopoverForm'; import EditorModal from './EditorModal'; -import { EditOutlined, MinusCircleOutlined } from '@ant-design/icons'; +import { MinusCircleFilled, EditFilled, PlusOutlined } from '@ant-design/icons'; import styles from './formItems.less'; import { baseFormUnion, TFormItemsDefaultType } from '../FormEditor/types'; import { uuid } from '@/utils/tool'; +import { Button, Popover } from 'antd'; // import { Popconfirm } from 'antd'; @@ -65,6 +67,7 @@ const FormItems = (props: FormItemsProps) => { const [formData, setFormData] = useState(formList || []); const [visible, setVisible] = useState(false); const [curItem, setCurItem] = useState(); + const [isFormTplVisible, setFormTplVisible] = useState(false); const handleAddItem = (item: baseFormUnion) => { let tpl = formTpl.find(v => v.type === item.type); @@ -95,8 +98,12 @@ const FormItems = (props: FormItemsProps) => { onChange && onChange(newData); setVisible(false); }; + const handleVisibleChange = (visible: boolean) => { + setFormTplVisible(visible); + }; return (
+
表单控件
{formData.map((item: baseFormUnion, i: number) => { let FormItem = BaseForm[item.type]; @@ -105,34 +112,62 @@ const FormItems = (props: FormItemsProps) => {
-
- handleEditItem(item)}> - - +
handleDelItem(item)}> - + + +
+
+ handleEditItem(item)}> +
); })} +
+ +
+ {formTpl.map((item, i) => { + let FormItem = BasePopoverForm[item.type]; + return ( +
handleAddItem(item)}> +
+ +
+
+ ); + })} +
+ {/* setFormTplVisible(false)}>Close */} + + } + color="#4A4A4A" + overlayStyle={{ width: '200px' }} + // title="表单模板" + trigger="click" + placement="left" + visible={isFormTplVisible} + autoAdjustOverflow + onVisibleChange={handleVisibleChange} + > + + +
-
-

表单模版

- {formTpl.map((item, i) => { - let FormItem = BaseForm[item.type]; - return ( -
-
- -
- handleAddItem(item)}> - 添加 - -
- ); - })} -
+ label { - color: #4A4A4A !important; +#form_editor .ant-form-item-label > label { + position: fixed; + color: #4A4A4A; +} +#form_editor .ant-form-item-label { + text-align: start +} +#form_editor .ant-form-item-control { + text-align: end; +} +#form_editor .ant-form-item { + margin-bottom: 20px; +} +#form_editor .ant-input-number-handler-wrap { + width: 12px; +} +#form_editor .ant-input, #form_editor .ant-input-number { + background-color: #f6f6f6; + width: 160px; +} +#form_editor .ant-input-number { + width: 42px; + height: 24px; + border: 1px solid #DBDBDB; +} +#form_editor .ant-input-number-handler-down-inner { + text-align: right; + transform: translateY(-50%) translateX(13%); +} +#form_editor .ant-input-number-handler-up-inner { + text-align: right; + transform: translateY(-26%) translateX(15%); +} +#form_editor .ant-input-number-input { + height: 20px; + line-height: 20px; + padding-left: 4px; +} +#form_editor .ant-form-item-control-input-content { + line-height: 14px; +} +#form_editor .ant-form-item-label > label::after { + content: ''; +} +#form_editor .za-cell:after { + border-top: 0px; +} +#form_editor .za-cell__content { + font-size: 14px; +} +#form_editor .za-select--arrow .za-select__input:after { + display: none; } \ No newline at end of file diff --git a/src/pages/editor/Container.tsx b/src/pages/editor/Container.tsx index e56b035..33e4f54 100644 --- a/src/pages/editor/Container.tsx +++ b/src/pages/editor/Container.tsx @@ -542,7 +542,7 @@ const Container = (props: { className={styles.rightcolla} style={{ position: 'absolute', - right: rightColla ? 0 : '400px', + right: rightColla ? 0 : '304px', transform: 'translate(0,-50%)', transition: 'all ease-in-out 0.5s', }} diff --git a/src/pages/editor/index.less b/src/pages/editor/index.less index 97e1ed0..b25613d 100644 --- a/src/pages/editor/index.less +++ b/src/pages/editor/index.less @@ -232,8 +232,8 @@ } } .attrSetting { - width: 400px; - padding: 20px 0 60px 20px; + width: 304px; + padding: 23px 0 60px 20px; background: #fff; height: 100%; box-shadow: -2px 0px 4px 0px rgba(0, 0, 0, 0.1); @@ -243,6 +243,7 @@ .tit { margin-bottom: 16px; color: #000; + font-weight: bold; } .posWrap { padding: 20px; @@ -300,7 +301,7 @@ display: flex; justify-content: center; align-items: center; - right: 400px; + right: 304px; top: 50%; cursor: pointer; &:hover {