From 092a0b7c0656ea338dc6470d9c9725ca8c109e35 Mon Sep 17 00:00:00 2001 From: yangpei <2517625275@qq.com> Date: Wed, 20 Jan 2021 00:23:40 +0800 Subject: [PATCH] feat: save config schema --- .../components/schemaForm/index.module.less | 9 ++ .../core/src/components/schemaForm/index.tsx | 143 ++++++++++-------- .../mods/settingBar/components/json/index.tsx | 22 ++- .../mods/settingBar/components/json/json.ts | 20 --- .../settingBar/mods/basic/index.module.less | 2 +- 5 files changed, 111 insertions(+), 85 deletions(-) create mode 100644 packages/core/src/components/schemaForm/index.module.less diff --git a/packages/core/src/components/schemaForm/index.module.less b/packages/core/src/components/schemaForm/index.module.less new file mode 100644 index 0000000..7d7fdc1 --- /dev/null +++ b/packages/core/src/components/schemaForm/index.module.less @@ -0,0 +1,9 @@ +.btnWrap{ + width:100%; + display:flex; + flex-direction: row; + justify-content:flex-end; + .btn{ + margin-top: 20px; + } +} diff --git a/packages/core/src/components/schemaForm/index.tsx b/packages/core/src/components/schemaForm/index.tsx index 0a32dcb..3e35240 100644 --- a/packages/core/src/components/schemaForm/index.tsx +++ b/packages/core/src/components/schemaForm/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import { Form, Input, Switch, Select, Radio, Checkbox, DatePicker, TimePicker, Empty } from 'antd'; +import { Form, Input, Switch, Select, Checkbox, DatePicker, TimePicker, Empty, Button, message } from 'antd'; import moment from 'moment'; +import styles from './index.module.less' const FormItem = Form.Item const { RangePicker } = DatePicker; const { Option } = Select; @@ -9,79 +10,95 @@ interface INum { value: string } +interface IConfigData { + [key: string]: any +} interface IProps { schema: { type: string, properties: { [key: string]: any } - } + }, + configData: IConfigData, + changeConfigData: (data: IConfigData) => void } const formLayout = { - labelCol: { span: 6 }, - wrapperCol: { span: 18 } + labelCol: { span: 8 }, + wrapperCol: { span: 16 } }; const SchemaForm: React.FC = (props) => { + const { schema, configData, changeConfigData } = props + const [form] = Form.useForm() + const onClickSave = (): void => { + changeConfigData(form.getFieldsValue()) + message.success('保存成功!') + } + return ( - props.schema && Object.keys(props.schema).length > 0 ?
- {props.schema?.properties && Object.keys(props.schema.properties).map((key: string) => { - const obj = props.schema.properties[key] - const options: INum[] = obj.enum ? obj.enum.map((item: string, idx: number) => { - return { label: item, value: obj.enumNames[idx] } - }) : [] - let ele = null - // 输入框 - if (obj.type === 'string' && !obj.hasOwnProperty('format') && !obj.hasOwnProperty('enum')) { - ele = - } - // 编辑框 - if (obj.type === 'string' && obj.format === 'textarea') { - ele = - } - // switch - if (obj.type === 'boolean' && obj['ui:widget'] === 'switch') { - ele = - } - // 下拉单选 - if (obj.type === 'string' && obj.hasOwnProperty('enum') && !obj.hasOwnProperty('ui:widget')) { - ele = - } - // 点击单选 - if (obj.type === 'string' && obj.hasOwnProperty('enum') && obj['ui:widget'] === 'radio') { - ele = - } - // 下拉多选 - if (obj.type === 'array' && obj.hasOwnProperty('enum') && obj['ui:widget'] === 'multiSelect') { - ele = - } - // 点击多选 - if (obj.type === 'array' && obj.hasOwnProperty('enum') && !obj.hasOwnProperty('ui:widget')) { - ele = - } - // 时间选择 - if (obj.type === 'string' && obj.format === 'time') { - ele = - } - // 日期范围 - if (obj.type === 'range' && obj.format === 'date') { - ele = - } - // 日期选择 - if (obj.type === 'string' && obj.format === 'date') { - ele = - } - return - {ele} - - })} - : + schema && Object.keys(schema).length > 0 ? +
+ {schema?.properties && Object.keys(schema.properties).map((key: string) => { + const obj = schema.properties[key] + const options: INum[] = obj.enum ? obj.enum.map((item: string, idx: number) => { + return { label: item, value: obj.enumNames[idx] } + }) : [] + let ele = null + // 输入框 + if (obj.type === 'string' && !obj.hasOwnProperty('format') && !obj.hasOwnProperty('enum')) { + ele = + } + // 编辑框 + if (obj.type === 'string' && obj.format === 'textarea') { + ele = + } + // switch + if (obj.type === 'boolean' && obj['ui:widget'] === 'switch') { + ele = + } + // 下拉单选 + if (obj.type === 'string' && obj.hasOwnProperty('enum') && !obj.hasOwnProperty('ui:widget')) { + ele = + } + // 下拉多选 + if (obj.type === 'array' && obj.hasOwnProperty('enum') && obj['ui:widget'] === 'multiSelect') { + ele = + } + // 点击多选 + if (obj.type === 'array' && obj.hasOwnProperty('enum') && !obj.hasOwnProperty('ui:widget')) { + ele = + } + // 时间选择 + if (obj.type === 'string' && obj.format === 'time') { + ele = + } + // 日期范围 + if (obj.type === 'range' && obj.format === 'date') { + ele = + } + // 日期选择 + if (obj.type === 'string' && obj.format === 'date') { + ele = + } + return + {ele} + + })} +
+ +
+ : void; } +interface IConfigData { + [key: string]: any +} + interface ISchemaProps { type: string, properties: { [key: string]: any } @@ -33,6 +37,7 @@ const Json: React.FC = (props) => { const { title, value, isConfig, onValueChange, selectedCell } = props; const [visible, setVisible] = useState(false); const [schema, setSchema] = useState({ type: '', properties: {} }) + const [configData, setConfigData] = useState({}); const defaultSchema = useMemo(() => { if (selectedCell) { @@ -45,6 +50,14 @@ const Json: React.FC = (props) => { } }, [selectedCell]) + const defaultConfigData = useMemo(() => { + if (selectedCell) { + const { configData = {} } = selectedCell.getData(); + setConfigData(configData); + return configData + } + }, [selectedCell]) + const onClickEdit = (): void => { setVisible(true); }; @@ -59,6 +72,9 @@ const Json: React.FC = (props) => { setVisible(false); setSchema(schema); } + const changeConfigData = (configData: IConfigData) => { + selectedCell && selectedCell.setData({ configData }); + } return ( 编辑}> @@ -71,7 +87,11 @@ const Json: React.FC = (props) => { src={safeParse(value)} />} - {isConfig && } + {isConfig && + }