import React, { useState, useEffect } from 'react'; import { Form, Modal, Input, Select, notification, Button } from 'antd'; import { AddSchema, AddSchemaBaseMap, bindSchemeBaseMap, GetBaseMapList, GetVectorDataList } from '@/services/webConfig/api'; import MapScope from '@/components/ThreeMapScope' const { Item } = Form; const { Option } = Select; const AddModal = props => { const { callBackSubmit = () => { }, type, formObj, visible, serviceList } = props; const [loading, setLoading] = useState(false); const [baseMap, setBaseMap] = useState([]); const [pipeArr, setPipeArr] = useState([]); const [data, setData] = useState([]); const [mapSettings, setMapSettings] = useState({ areaName: '选择视角' }); const [mapScopeVisible, setMapScopeVisible] = useState(false) const [baseMapData, setBaseMapData] = useState([]) const [form] = Form.useForm(); const baseMapList = { 'amap-v': "高德街道", 'amap-i': "高德影像", 'tianditu-v': "天地图街道", 'tianditu-i': "天地图影像", 'bmap-v': "百度街道", 'bmap-i': "百度影像" } const onSubmit = () => { form.validateFields().then(validate => { if (validate) { setLoading(true); let obj = form.getFieldsValue(); if (type === 'add') { AddSchemaBaseMap({ schemename: formObj.schemename, type: obj.serverName }).then(res => { setLoading(false); if (res.msg === '') { form.resetFields(); callBackSubmit(); prompt('success', '瓦片新增成功') } else { prompt('fail', '瓦片新增失败') } }) } else { handleEdit(); } } }); }; const prompt = (type, content) => { if (type == 'success') { notification.success({ message: '提示', duration: 3, description: content, }); } else { notification.error({ message: '提示', duration: 3, description: content, }); } } const handleEdit = () => { let obj = form.getFieldsValue(); AddSchema({ schemename: obj.schemename, data, mapSettings: mapSettings.areaName === '选择视角' ? {} : mapSettings, baseMap: baseMapData }) .then(res => { setLoading(false); if (res.msg === "") { form.resetFields(); callBackSubmit(); prompt('success', '方案新增成功') } else { prompt('fail', res.msg) } }) .catch(err => { setLoading(false); }); }; const onFinish = value => { }; useEffect(() => { switch (type) { case 'add': console.log('serviceList', serviceList); addTile() break; case 'schemeAdd': pipeNetwork() break; default: break; } }, [visible]); //添加瓦片 const addTile = () => { form.setFieldsValue({ serverName: serviceList[0] }) } //获取管网及默认底图 const pipeNetwork = () => { form.resetFields(); setMapSettings({ areaName: '选择视角' }) let req1 = GetBaseMapList() let req2 = GetVectorDataList() let pipeArr = [], baseMap = []; Promise.all([req1, req2]).then(res => { if (res[0].msg === 'Ok') { setBaseMap(res[0].data) } if (res[1].msg === 'Ok') { (res[1].data || []).map(item => { pipeArr.push(item.id) }) } setPipeArr(pipeArr) form.setFieldsValue({ baseMap: res[0].data[0].name }) }) } const layout = { layout: 'horizontal', labelCol: { span: 4, }, wrapperCol: { span: 16, }, }; //选择服务名 const handleChange = (value) => { } //选择管网 const handleService = (value) => { setData(value) } //选择底图 const handleBaseMap = (value, option) => { let baseMapDataArr = [] value.map((item, index) => { baseMapDataArr.push({ type: item, status: index == 0 ? 'active' : 'notActive' }) }) setBaseMapData(baseMapDataArr) } const submitExtent = (mapSettings) => { setMapScopeVisible(false) if (JSON.stringify(mapSettings) != '{}') { setMapSettings(mapSettings) form.setFieldsValue({ camera: mapSettings.areaName }) } } 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}> {type === 'add' ? <Item label="服务名" name="serverName" > <Select onChange={handleChange}> {serviceList.length ? serviceList.map((item, index) => { return <Option key={index} value={item}>{baseMapList[item]}</Option>; }) : ''} </Select> </Item> : <> <Item label="方案名" name="schemename" rules={[{ required: true, message: '请输入方案名' }]} > <Input placeholder="请输入方案名" allowClear /> </Item> <Item label="数据源" > <Select onChange={handleService} mode="multiple" > {pipeArr.length ? pipeArr.map((item, index) => { return <Option key={index} value={item}>{item}</Option>; }) : ''} </Select> </Item> <Item label="瓦片" name='' rules={[{ required: true, message: '请选择瓦片' }]} > <Select onChange={handleBaseMap} mode="multiple"> {baseMap.length ? baseMap.map((item, index) => { return <Option key={index} value={item.type}>{item.name}</Option>; }) : ''} </Select> </Item> <Item label="视角" name="camera" > <Button style={{ width: '100%' }} onClick={() => setMapScopeVisible(true)}>{mapSettings.areaName}</Button> </Item> </>} </Form> )} </Modal> <MapScope visible={mapScopeVisible} onCancel={() => setMapScopeVisible(false)} confirmModal={submitExtent} /></> ); }; export default AddModal;