|
|
@ -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,23 +10,40 @@ 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<IProps> = (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 ? <Form {...formLayout}> |
|
|
|
{props.schema?.properties && Object.keys(props.schema.properties).map((key: string) => { |
|
|
|
const obj = props.schema.properties[key] |
|
|
|
schema && Object.keys(schema).length > 0 ? |
|
|
|
<Form |
|
|
|
form={form} |
|
|
|
initialValues={configData} |
|
|
|
{...formLayout} |
|
|
|
> |
|
|
|
{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] } |
|
|
|
}) : [] |
|
|
@ -48,10 +66,6 @@ const SchemaForm: React.FC<IProps> = (props) => { |
|
|
|
<Option key={item.value} value={item.value}>{item.label}</Option> |
|
|
|
)}</Select> |
|
|
|
} |
|
|
|
// 点击单选
|
|
|
|
if (obj.type === 'string' && obj.hasOwnProperty('enum') && obj['ui:widget'] === 'radio') { |
|
|
|
ele = <Radio /> |
|
|
|
} |
|
|
|
// 下拉多选
|
|
|
|
if (obj.type === 'array' && obj.hasOwnProperty('enum') && obj['ui:widget'] === 'multiSelect') { |
|
|
|
ele = <Select allowClear mode="multiple"> |
|
|
@ -64,7 +78,7 @@ const SchemaForm: React.FC<IProps> = (props) => { |
|
|
|
} |
|
|
|
// 时间选择
|
|
|
|
if (obj.type === 'string' && obj.format === 'time') { |
|
|
|
ele = <TimePicker defaultOpenValue={moment('00:00:00', 'HH:mm:ss')} /> |
|
|
|
ele = <TimePicker defaultValue={moment('00:00:00', 'HH:mm:ss')} /> |
|
|
|
} |
|
|
|
// 日期范围
|
|
|
|
if (obj.type === 'range' && obj.format === 'date') { |
|
|
@ -76,11 +90,14 @@ const SchemaForm: React.FC<IProps> = (props) => { |
|
|
|
} |
|
|
|
return <FormItem |
|
|
|
label={obj.title} |
|
|
|
name={obj.title} |
|
|
|
name={key} |
|
|
|
> |
|
|
|
{ele} |
|
|
|
</FormItem> |
|
|
|
})} |
|
|
|
<div className={styles.btnWrap}> |
|
|
|
<Button size='small' className={styles.btn} type={'primary'} onClick={onClickSave}>保存</Button> |
|
|
|
</div> |
|
|
|
</Form> : |
|
|
|
<Empty |
|
|
|
description={'请编辑投放配置schema'} |
|
|
|