import React, { useState, useEffect } from 'react'; import { Form, Modal, Input, Select, AutoComplete, Button, notification } from 'antd'; import { SetServiceConfig } 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(); SetServiceConfig({ schemename: obj.schemename, terminalType: type === 'add' ? 'web' : 'phone', isBaseMap: 'false', jsonCfg: type === 'add' ? JSON.stringify({ type: 'dynamic' }) : JSON.stringify({ isDefault: false }), }) .then(res => { setLoading(false); if (res.code == '0') { form.resetFields(); callBackSubmit(); notification.success({ message: '提示', duration: 3, description: '新增成功', }); } else { notification.error({ message: '提示', duration: 3, description: '新增失败', }); } }) .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;