|  | @ -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,79 +10,95 @@ 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} | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         const options: INum[] = obj.enum ? obj.enum.map((item: string, idx: number) => { |  |  |         initialValues={configData} | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |           return { label: item, value: obj.enumNames[idx] } |  |  |         {...formLayout} | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         }) : [] |  |  |       > | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         let ele = null |  |  |         {schema?.properties && Object.keys(schema.properties).map((key: string) => { | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         // 输入框
 |  |  |           const obj = schema.properties[key] | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         if (obj.type === 'string' && !obj.hasOwnProperty('format') && !obj.hasOwnProperty('enum')) { |  |  |           const options: INum[] = obj.enum ? obj.enum.map((item: string, idx: number) => { | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |           ele = <Input /> |  |  |             return { label: item, value: obj.enumNames[idx] } | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         } |  |  |           }) : [] | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         // 编辑框
 |  |  |           let ele = null | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         if (obj.type === 'string' && obj.format === 'textarea') { |  |  |           // 输入框
 | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |           ele = <Input.TextArea /> |  |  |           if (obj.type === 'string' && !obj.hasOwnProperty('format') && !obj.hasOwnProperty('enum')) { | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         } |  |  |             ele = <Input /> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         // switch
 |  |  |           } | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         if (obj.type === 'boolean' && obj['ui:widget'] === 'switch') { |  |  |           // 编辑框
 | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |           ele = <Switch /> |  |  |           if (obj.type === 'string' && obj.format === 'textarea') { | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         } |  |  |             ele = <Input.TextArea /> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         // 下拉单选
 |  |  |           } | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         if (obj.type === 'string' && obj.hasOwnProperty('enum') && !obj.hasOwnProperty('ui:widget')) { |  |  |           // switch
 | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |           ele = <Select allowClear>{options.map(item => |  |  |           if (obj.type === 'boolean' && obj['ui:widget'] === 'switch') { | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |             <Option key={item.value} value={item.value}>{item.label}</Option> |  |  |             ele = <Switch /> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |           )}</Select> |  |  |           } | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         } |  |  |           // 下拉单选
 | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         // 点击单选
 |  |  |           if (obj.type === 'string' && obj.hasOwnProperty('enum') && !obj.hasOwnProperty('ui:widget')) { | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         if (obj.type === 'string' && obj.hasOwnProperty('enum') && obj['ui:widget'] === 'radio') { |  |  |             ele = <Select allowClear>{options.map(item => | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |           ele = <Radio /> |  |  |               <Option key={item.value} value={item.value}>{item.label}</Option> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         } |  |  |             )}</Select> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         // 下拉多选
 |  |  |           } | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         if (obj.type === 'array' && obj.hasOwnProperty('enum') && obj['ui:widget'] === 'multiSelect') { |  |  |           // 下拉多选
 | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |           ele = <Select allowClear mode="multiple"> |  |  |           if (obj.type === 'array' && obj.hasOwnProperty('enum') && obj['ui:widget'] === 'multiSelect') { | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |             {options.map(item => <Option key={item.value} value={item.value}>{item.label}</Option>)} |  |  |             ele = <Select allowClear mode="multiple"> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |           </Select> |  |  |               {options.map(item => <Option key={item.value} value={item.value}>{item.label}</Option>)} | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         } |  |  |             </Select> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         // 点击多选
 |  |  |           } | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         if (obj.type === 'array' && obj.hasOwnProperty('enum') && !obj.hasOwnProperty('ui:widget')) { |  |  |           // 点击多选
 | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |           ele = <Checkbox.Group options={options} /> |  |  |           if (obj.type === 'array' && obj.hasOwnProperty('enum') && !obj.hasOwnProperty('ui:widget')) { | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         } |  |  |             ele = <Checkbox.Group options={options} /> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         // 时间选择
 |  |  |           } | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         if (obj.type === 'string' && obj.format === 'time') { |  |  |           // 时间选择
 | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |           ele = <TimePicker defaultOpenValue={moment('00:00:00', 'HH:mm:ss')} /> |  |  |           if (obj.type === 'string' && obj.format === 'time') { | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         } |  |  |             ele = <TimePicker defaultValue={moment('00:00:00', 'HH:mm:ss')} /> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         // 日期范围
 |  |  |           } | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         if (obj.type === 'range' && obj.format === 'date') { |  |  |           // 日期范围
 | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |           ele = <DatePicker /> |  |  |           if (obj.type === 'range' && obj.format === 'date') { | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         } |  |  |             ele = <DatePicker /> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         // 日期选择
 |  |  |           } | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         if (obj.type === 'string' && obj.format === 'date') { |  |  |           // 日期选择
 | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |           ele = <RangePicker /> |  |  |           if (obj.type === 'string' && obj.format === 'date') { | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         } |  |  |             ele = <RangePicker /> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         return <FormItem |  |  |           } | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |           label={obj.title} |  |  |           return <FormItem | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |           name={obj.title} |  |  |             label={obj.title} | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         > |  |  |             name={key} | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |           {ele} |  |  |           > | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |         </FormItem> |  |  |             {ele} | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |       })} |  |  |           </FormItem> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |     </Form> : |  |  |         })} | 
			
				
				
			
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
	
		
		
			
				
					|  |  |  |  |  |         <div className={styles.btnWrap}> | 
			
		
	
		
		
			
				
					|  |  |  |  |  |           <Button size='small' className={styles.btn} type={'primary'} onClick={onClickSave}>保存</Button> | 
			
		
	
		
		
			
				
					|  |  |  |  |  |         </div> | 
			
		
	
		
		
			
				
					|  |  |  |  |  |       </Form> : | 
			
		
	
		
		
			
				
					|  |  |       <Empty |  |  |       <Empty | 
			
		
	
		
		
			
				
					|  |  |         description={'请编辑投放配置schema'} |  |  |         description={'请编辑投放配置schema'} | 
			
		
	
		
		
			
				
					|  |  |         image={Empty.PRESENTED_IMAGE_SIMPLE} |  |  |         image={Empty.PRESENTED_IMAGE_SIMPLE} | 
			
		
	
	
		
		
			
				
					|  | 
 |