From a7132c2c993c15dfc073edcf2c52b8b02ac5e017 Mon Sep 17 00:00:00 2001 From: xujiang Date: Wed, 4 Nov 2020 23:30:38 +0800 Subject: [PATCH] =?UTF-8?q?:new:=20form=E7=BB=84=E4=BB=B6=E6=96=87?= =?UTF-8?q?=E6=9C=AC=E6=A1=86=E5=AD=97=E6=AE=B5=E4=BF=AE=E6=94=B9=20?= =?UTF-8?q?=E8=A1=A8=E5=8D=95=E7=BB=84=E4=BB=B6=E4=B8=AD=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E5=B1=95=E7=A4=BA=E5=9E=8B=E6=96=87=E6=9C=AC,=E7=94=A8?= =?UTF-8?q?=E6=9D=A5=E5=AF=B9=E5=AD=97=E6=AE=B5=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- readme.md | 3 +++ .../BasicComponents/Form/BaseForm.tsx | 5 +++++ .../BasicComponents/Form/BasePopoverForm.tsx | 16 ++++++++++++++ .../PanelComponents/FormEditor/types.ts | 13 +++++++++++- .../PanelComponents/FormItems/EditorModal.tsx | 21 ++++++++++++++++++- .../PanelComponents/FormItems/FormItems.tsx | 11 ++++++++-- src/pages/editor/components/Header/index.tsx | 13 +++++++++++- 7 files changed, 77 insertions(+), 5 deletions(-) diff --git a/readme.md b/readme.md index 96c6660..de503cb 100644 --- a/readme.md +++ b/readme.md @@ -107,6 +107,9 @@ FileSaver.saveAs(blob, "hello world.txt"); 15.升级图片组件为图文组件 16. 添加模版库 17. 添加可视化组件(基于g2)如折线图, 饼图, 面积图等 +18. form组件文本框字段修改 +19. 清空按钮添加确认框 +20. 表单组件中添加展示型文本,用来对字段说明 ## 正在完成功能 * 丰富组件库组件 diff --git a/src/components/BasicShop/BasicComponents/Form/BaseForm.tsx b/src/components/BasicShop/BasicComponents/Form/BaseForm.tsx index e1494d0..cac85fb 100644 --- a/src/components/BasicShop/BasicComponents/Form/BaseForm.tsx +++ b/src/components/BasicShop/BasicComponents/Form/BaseForm.tsx @@ -9,6 +9,7 @@ import { baseFormNumberTpl, baseFormTextAreaTpl, baseFormTextTpl, + baseFormTextTipTpl, baseFormUnionType, } from '@/components/PanelComponents/FormEditor/types'; // 维护表单控件， 提高form渲染性能 @@ -113,6 +114,10 @@ const BaseForm: TBaseForm = { ); }, + MyTextTip: (props: baseFormTextTipTpl) => { + const { label, color, fontSize } = props; + return {label}}>; + }, }; export default BaseForm; diff --git a/src/components/BasicShop/BasicComponents/Form/BasePopoverForm.tsx b/src/components/BasicShop/BasicComponents/Form/BasePopoverForm.tsx index fa758b1..d0ca43d 100644 --- a/src/components/BasicShop/BasicComponents/Form/BasePopoverForm.tsx +++ b/src/components/BasicShop/BasicComponents/Form/BasePopoverForm.tsx @@ -8,6 +8,7 @@ import { baseFormNumberTpl, baseFormTextAreaTpl, baseFormTextTpl, + baseFormTextTipTpl, baseFormUnionType, } from '@/components/PanelComponents/FormEditor/types'; @@ -88,6 +89,21 @@ const BaseForm: TBaseForm = { ); }, + MyTextTip: (props: baseFormTextTipTpl) => { + const { label } = props; + return ( + + ); + }, }; export default BaseForm; diff --git a/src/components/PanelComponents/FormEditor/types.ts b/src/components/PanelComponents/FormEditor/types.ts index a1a94f0..d6536f4 100644 --- a/src/components/PanelComponents/FormEditor/types.ts +++ b/src/components/PanelComponents/FormEditor/types.ts @@ -157,6 +157,15 @@ export type baseFormTextTpl = { label: string; placeholder: string; }; + +export type baseFormTextTipTpl = { + id: string; + type: 'MyTextTip'; + label: string; + color: string; + fontSize: number; +}; + export type baseFormNumberTpl = { id: string; type: 'Number'; @@ -198,9 +207,10 @@ export type baseFormDateTpl = { label: string; placeholder: string; }; -//类型不要乱加，这部分是FormItems的类型定义，只有新增formItems的配置项才需要加！ + export type baseFormUnion = | baseFormTextTpl + | baseFormTextTipTpl | baseFormNumberTpl | baseFormTextAreaTpl | baseFormMyRadioTpl @@ -209,6 +219,7 @@ export type baseFormUnion = | baseFormDateTpl; export type baseFormUnionType = | baseFormTextTpl['type'] + | baseFormTextTipTpl['type'] | baseFormNumberTpl['type'] | baseFormTextAreaTpl['type'] | baseFormMyRadioTpl['type'] diff --git a/src/components/PanelComponents/FormItems/EditorModal.tsx b/src/components/PanelComponents/FormItems/EditorModal.tsx index b5352db..4908d7d 100644 --- a/src/components/PanelComponents/FormItems/EditorModal.tsx +++ b/src/components/PanelComponents/FormItems/EditorModal.tsx @@ -1,6 +1,7 @@ import React, { FC, memo, useEffect } from 'react'; -import { Form, Select, Input, Modal, Button } from 'antd'; +import { Form, Select, Input, Modal, Button, InputNumber } from 'antd'; import { baseFormOptionsType } from '../FormEditor/types'; +import Color from '../Color'; const { Option } = Select; @@ -80,6 +81,24 @@ const EditorModal: FC = props => { )} + {!!item.fontSize && ( + + + + )} + {!!item.color && ( + + + + )} {!!item.placeholder && ( diff --git a/src/components/PanelComponents/FormItems/FormItems.tsx b/src/components/PanelComponents/FormItems/FormItems.tsx index 4b1b97e..f3d038f 100644 --- a/src/components/PanelComponents/FormItems/FormItems.tsx +++ b/src/components/PanelComponents/FormItems/FormItems.tsx @@ -14,13 +14,13 @@ const formTpl: TFormItemsDefaultType = [ { id: '1', type: 'Text', - label: '文本', + label: '文本框', placeholder: '请输入文本', }, { id: '2', type: 'Textarea', - label: '长文本', + label: '长文本框', placeholder: '请输入长文本请输入长文本', }, { @@ -54,6 +54,13 @@ const formTpl: TFormItemsDefaultType = [ label: '日期框', placeholder: '', }, + { + id: '7', + type: 'MyTextTip', + label: '纯文本', + fontSize: 12, + color: 'rgba(0,0,0,1)', + }, ]; interface FormItemsProps { diff --git a/src/pages/editor/components/Header/index.tsx b/src/pages/editor/components/Header/index.tsx index 22240ae..e20ff1d 100644 --- a/src/pages/editor/components/Header/index.tsx +++ b/src/pages/editor/components/Header/index.tsx @@ -131,6 +131,17 @@ const HeaderComponent = memo((props: HeaderComponentProps) => { window.location.href = `/h5_plus/login?tid=${tid}`; }; + const deleteAll = () => { + Modal.confirm({ + title: '确认清空画布?', + okText: '确认', + cancelText: '取消', + onOk() { + clearData(); + }, + }); + }; + const toBack = () => { history.push('/'); }; @@ -231,7 +242,7 @@ const HeaderComponent = memo((props: HeaderComponentProps) => { type="link" style={{ marginRight: '9px' }} title="清空" - onClick={clearData} + onClick={deleteAll} disabled={!pointData.length} >