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: 4, }, wrapperCol: { span: 16, }, }; const handleChange = (value) => { form.setFieldsValue({ schemename: value}); } return ( <Modal title={`${type === 'add' ? '元数据发布' : '编辑'}`} bodyStyle={{ width: '100%', minHeight: '100px' }} 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;