import React, { useState, useEffect } from 'react'; import { Form, Modal, Input, Select, AutoComplete, Button, notification } from 'antd'; import { SetServiceConfig, AddWebSchema } from '@/services/webConfig/api'; const { Option } = Select; const AddModal = props => { const { callBackSubmit = () => {}, type, formObj, visible, listData } = props; const [loading, setLoading] = useState(false); const [form] = Form.useForm(); const { Item } = Form; // 提交 const onSubmit = () => { form.validateFields().then(validate => { if (validate) { setLoading(true); let obj = form.getFieldsValue(); AddWebSchema({ schemename: obj.schemename, }) .then(res => { setLoading(false); if (res.msg === '') { form.resetFields(); callBackSubmit(); notification.success({ message: '提示', duration: 3, description: '新增成功', }); } else { notification.error({ message: '提示', duration: 3, description: res.msg, }); } }) .catch(err => { notification.error({ message: '提示', duration: 3, description: '新增失败', }); setLoading(false); }); } }); }; const onFinish = value => {}; useEffect(() => { if (type != '') { form.setFieldsValue({ schemename: listData[0] }); } }, [visible]); const layout = { layout: 'horizontal', labelCol: { span: 3, }, wrapperCol: { span: 20, }, }; const handleChange = value => { form.setFieldsValue({ schemename: value }); }; return ( <Modal title={`${type === 'add' ? '元数据发布' : '编辑'}`} bodyStyle={{ width: '100%' }} style={{ top: '150px' }} width="700px" destroyOnClose maskClosable={false} cancelText="取消" okText="确认" {...props} onOk={() => onSubmit()} confirmLoading={loading} forceRender={true} getContainer={false} > {visible && ( <Form form={form} {...layout} onFinish={onFinish}> <Item label="方案名" name="schemename" rules={[{ required: true, message: '请选择服务名' }]} > <Select onChange={handleChange}> {listData.map((item, index) => { return ( <Option value={item} key={index}> {item} </Option> ); })} </Select> </Item> </Form> )} </Modal> ); }; export default AddModal;