|  | @ -1,6 +1,7 @@ | 
			
		
	
		
		
			
				
					|  |  | import React from 'react'; |  |  | 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 moment from 'moment'; | 
			
		
	
		
		
			
				
					|  |  |  |  |  | import styles from './index.module.less' | 
			
		
	
		
		
			
				
					|  |  | const FormItem = Form.Item |  |  | const FormItem = Form.Item | 
			
		
	
		
		
			
				
					|  |  | const { RangePicker } = DatePicker; |  |  | const { RangePicker } = DatePicker; | 
			
		
	
		
		
			
				
					|  |  | const { Option } = Select; |  |  | const { Option } = Select; | 
			
		
	
	
		
		
			
				
					|  | @ -9,23 +10,40 @@ interface INum { | 
			
		
	
		
		
			
				
					|  |  |   value: string |  |  |   value: string | 
			
		
	
		
		
			
				
					|  |  | } |  |  | } | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					|  |  |  |  |  | interface IConfigData { | 
			
		
	
		
		
			
				
					|  |  |  |  |  |   [key: string]: any | 
			
		
	
		
		
			
				
					|  |  |  |  |  | } | 
			
		
	
		
		
			
				
					|  |  | interface IProps { |  |  | interface IProps { | 
			
		
	
		
		
			
				
					|  |  |   schema: { |  |  |   schema: { | 
			
		
	
		
		
			
				
					|  |  |     type: string, |  |  |     type: string, | 
			
		
	
		
		
			
				
					|  |  |     properties: { [key: string]: any } |  |  |     properties: { [key: string]: any } | 
			
		
	
		
		
			
				
					
					|  |  |   } |  |  |   }, | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |  |  |  |   configData: IConfigData, | 
			
		
	
		
		
			
				
					|  |  |  |  |  |   changeConfigData: (data: IConfigData) => void | 
			
		
	
		
		
			
				
					|  |  | } |  |  | } | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					|  |  | const formLayout = { |  |  | const formLayout = { | 
			
		
	
		
		
			
				
					
					|  |  |   labelCol: { span: 6 }, |  |  |   labelCol: { span: 8 }, | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |   wrapperCol: { span: 18 } |  |  |   wrapperCol: { span: 16 } | 
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					|  |  | }; |  |  | }; | 
			
		
	
		
		
			
				
					|  |  | 
 |  |  | 
 | 
			
		
	
		
		
			
				
					|  |  | const SchemaForm: React.FC<IProps> = (props) => { |  |  | const SchemaForm: React.FC<IProps> = (props) => { | 
			
		
	
		
		
			
				
					|  |  |  |  |  |   const { schema, configData, changeConfigData } = props | 
			
		
	
		
		
			
				
					|  |  |  |  |  |   const [form] = Form.useForm() | 
			
		
	
		
		
			
				
					|  |  |  |  |  |   const onClickSave = (): void => { | 
			
		
	
		
		
			
				
					|  |  |  |  |  |     changeConfigData(form.getFieldsValue()) | 
			
		
	
		
		
			
				
					|  |  |  |  |  |     message.success('保存成功!') | 
			
		
	
		
		
			
				
					|  |  |  |  |  |   } | 
			
		
	
		
		
			
				
					|  |  |  |  |  | 
 | 
			
		
	
		
		
			
				
					|  |  |   return ( |  |  |   return ( | 
			
		
	
		
		
			
				
					
					|  |  |     props.schema && Object.keys(props.schema).length > 0 ? <Form {...formLayout}> |  |  |     schema && Object.keys(schema).length > 0 ? | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |       {props.schema?.properties && Object.keys(props.schema.properties).map((key: string) => { |  |  |       <Form | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         const obj = props.schema.properties[key] |  |  |         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) => { |  |  |           const options: INum[] = obj.enum ? obj.enum.map((item: string, idx: number) => { | 
			
		
	
		
		
			
				
					|  |  |             return { label: item, value: obj.enumNames[idx] } |  |  |             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> |  |  |               <Option key={item.value} value={item.value}>{item.label}</Option> | 
			
		
	
		
		
			
				
					|  |  |             )}</Select> |  |  |             )}</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') { |  |  |           if (obj.type === 'array' && obj.hasOwnProperty('enum') && obj['ui:widget'] === 'multiSelect') { | 
			
		
	
		
		
			
				
					|  |  |             ele = <Select allowClear mode="multiple"> |  |  |             ele = <Select allowClear mode="multiple"> | 
			
		
	
	
		
		
			
				
					|  | @ -64,7 +78,7 @@ const SchemaForm: React.FC<IProps> = (props) => { | 
			
		
	
		
		
			
				
					|  |  |           } |  |  |           } | 
			
		
	
		
		
			
				
					|  |  |           // 时间选择
 |  |  |           // 时间选择
 | 
			
		
	
		
		
			
				
					|  |  |           if (obj.type === 'string' && obj.format === 'time') { |  |  |           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') { |  |  |           if (obj.type === 'range' && obj.format === 'date') { | 
			
		
	
	
		
		
			
				
					|  | @ -76,11 +90,14 @@ const SchemaForm: React.FC<IProps> = (props) => { | 
			
		
	
		
		
			
				
					|  |  |           } |  |  |           } | 
			
		
	
		
		
			
				
					|  |  |           return <FormItem |  |  |           return <FormItem | 
			
		
	
		
		
			
				
					|  |  |             label={obj.title} |  |  |             label={obj.title} | 
			
		
	
		
		
			
				
					
					|  |  |           name={obj.title} |  |  |             name={key} | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					|  |  |           > |  |  |           > | 
			
		
	
		
		
			
				
					|  |  |             {ele} |  |  |             {ele} | 
			
		
	
		
		
			
				
					|  |  |           </FormItem> |  |  |           </FormItem> | 
			
		
	
		
		
			
				
					|  |  |         })} |  |  |         })} | 
			
		
	
		
		
			
				
					|  |  |  |  |  |         <div className={styles.btnWrap}> | 
			
		
	
		
		
			
				
					|  |  |  |  |  |           <Button size='small' className={styles.btn} type={'primary'} onClick={onClickSave}>保存</Button> | 
			
		
	
		
		
			
				
					|  |  |  |  |  |         </div> | 
			
		
	
		
		
			
				
					|  |  |       </Form> : |  |  |       </Form> : | 
			
		
	
		
		
			
				
					|  |  |       <Empty |  |  |       <Empty | 
			
		
	
		
		
			
				
					|  |  |         description={'请编辑投放配置schema'} |  |  |         description={'请编辑投放配置schema'} | 
			
		
	
	
		
		
			
				
					|  | 
 |