/* eslint-disable indent */ import React, { useState, useEffect } from 'react'; import { Form, Modal, Input, Select, notification } from 'antd'; import { GetVectorService, bindSchemeBaseMap, UpdateSchemPipeNetwork, } from '@/services/webConfig/api'; const { Item } = Form; const { Option } = Select; const EditModal = props => { const { callBackSubmit = () => {}, formObj, visible } = props; const [loading, setLoading] = useState(false); const [pipeArr, setPipeArr] = useState([]); const [form] = Form.useForm(); // 提交 const onSubmit = () => { form.validateFields().then(validate => { if (validate) { setLoading(true); let obj = form.getFieldsValue(); UpdateSchemPipeNetwork({ schemename: formObj.schemename, ...obj, }).then(res => { setLoading(false); if (res.code == '0') { form.resetFields(); callBackSubmit(); notification.success({ message: '提示', duration: 3, description: '修改成功', }); } else { notification.error({ message: '提示', duration: 3, description: res.msg, }); } }); } }); }; useEffect(() => { if (visible) { pipeNetwork(); form.setFieldsValue({ servicename: formObj.servicename, label: formObj.label, url: formObj.url, }); } else { form.resetFields(); } }, [visible]); // 获取管网及默认底图 const pipeNetwork = () => { form.resetFields(); let pipeArr1 = []; GetVectorService().then(res => { if (res.code === 0) { if (res.data.VectorList.length > 0) { res.data.VectorList.map(item => { pipeArr1.push(item.ServiceName.split('.')[0]); }); } setPipeArr(pipeArr1); } }); }; const layout = { layout: 'horizontal', labelCol: { span: 4, }, wrapperCol: { span: 18, }, }; // 选择管网 const handleService = value => { form.setFieldsValue({ label: value, // url: `http://{IP}/PandaGIS/MapServer/Export?mapServerName=${value}`, url: `http://{IP}/PandaGIS/MapServer/${value}`, }); }; return ( <Modal title="修改管网" 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}> <Item label="管网" name="servicename"> <Select onChange={handleService} placeholder="请选择管网"> {pipeArr.length ? pipeArr.map((item, index) => { return ( <Option key={index} value={item}> {item} </Option> ); }) : ''} </Select> </Item> <Item label="标签" name="label"> <Input placeholder="请输入标签" allowClear /> </Item> <Item label="url" name="url"> <Input placeholder="请输入url" allowClear /> </Item> </Form> )} </Modal> ); }; export default EditModal;