import React, { useState, useEffect } from 'react'; import { Form, Modal, Input, Select, AutoComplete, Button, notification, message, Card } from 'antd'; import styles from '../dimensionsConfig.less' import { AddVectorData, publisService, GetProjectNames } from '@/services/webConfig/api'; import { PlusCircleOutlined, CloseCircleOutlined } from '@ant-design/icons'; const { Option } = Select; const AddModal = props => { const { callBackSubmit = () => { }, type, formObj, visible } = props; const [loading, setLoading] = useState(false); const [attributes, setAttributes] = useState([]) const [workList, setWorkList] = useState([]); const [allData, setAllData] = useState([]); const [gsIp, setGsIp] = useState([]); const [ports,setPorts]= useState(''); const [projectNmme, setProjectNmme] = useState([]); const [loadingProject,setLoadingProject] =useState(false) const [form] = Form.useForm(); const { Item } = Form; // 提交 const onSubmit = () => { form.validateFields().then(validate => { if (validate) { setLoading(true); let obj = form.getFieldsValue(); let attributesObj = {} attributes.map((item, index) => { let key = obj[`key${index}`] attributesObj[`${key}`] = obj[`value${index}`] }) if (type === 'add') { let url =allData[obj.name].fileName?`http://${obj.ip}:${obj.port}/${obj.projectName}/${obj.name}/${allData[obj.name].fileName}`:`http://${obj.ip}:${obj.port}/${obj.projectName}/${obj.name}` let query = { type: obj.type, projectName: obj.projectName, name: obj.name, url, attributes: attributesObj ||{}, ip: obj.ip, port: obj.port } AddVectorData(query) .then(res => { setLoading(false); if (res.msg === '') { form.resetFields(); callBackSubmit(); notification.success({ message: '提示', duration: 3, description: '新增成功', }); handlelocalStorage('add', obj.ip, obj.projectName) } else { notification.error({ message: '提示', duration: 3, description: res.msg, }); } }) .catch(err => { notification.error({ message: '提示', duration: 3, description: '新增失败', }); setLoading(false); }); } } }); }; const onFinish = value => { }; useEffect(() => { switch (type) { case 'add': let gsIp = []; let localStorageData = handlelocalStorage('get'); if (localStorageData) { gsIp = localStorageData.map(item => ({ value: item.gsIp, item: item.gsIp })); } setGsIp(gsIp) setAttributes([]) setProjectNmme([]) setWorkList([]) setPorts('') let localIps = ['192.168.12.97'] let port = localIps.includes(gsIp) ? '8083' : '8088' form.resetFields(); break; case 'edit': form.setFieldsValue({ ...formObj }); break; default: break; } }, [visible]); //存储到localstorage const handlelocalStorage = (type, gsIp, gisAppName) => { if (!localStorage) return null; let result = JSON.parse(localStorage.getItem('metaData')) if (type == 'get') { return result; } if (!result || !result.find(item => item.gsIp == gsIp)) { if (!result) result = []; result.push({ gsIp, gisAppName: [{ value: gisAppName, item: gisAppName }] }) localStorage.setItem('metaData', JSON.stringify(result)) return } let data = result.find(item => item.gsIp == gsIp) let isHasGisAppName = data.gisAppName.find(item => item.value == gisAppName); if (isHasGisAppName) return; data.gisAppName.push({ value: gisAppName, item: gisAppName }) localStorage.setItem('metaData', JSON.stringify(result)) }; const layout = { layout: 'horizontal', labelCol: { span: 4, }, wrapperCol: { span: 16, }, }; const selectIp = (value) => { let localIps = ['192.168.12.97'] let port = localIps.includes(value) ? '8083' : '8088' form.setFieldsValue({ port, serviceadress: value }); setPorts(port) } // 获取项目名 const getProject = () => { const obj = form.getFieldsValue(); if (obj.ip && obj.port) { setLoadingProject(true) GetProjectNames({ ip: obj.ip, port: obj.port }).then(res => { setLoadingProject(false) if (res.msg === 'Ok') { if(res.data=='{}'){ notification.info({ message: '提示', duration: 3, description: '该地址下项目为空', }); } else{ notification.success({ message: '提示', duration: 3, description: '获取成功', }); let data = Object.values(JSON.parse(res.data)) setProjectNmme(data) if (data.length) { form.setFieldsValue({ projectName: data[0] }); selectProject(data[0]) } } } else { notification.error({ message: '提示', duration: 3, description: '获取失败', }); } }).catch(e => { console.log('e', e); }) } else { message.warning("未输入ip或port") } } const selectProject = (value) => { const obj = form.getFieldsValue(); GetProjectNames({ ip: obj.ip, port: obj.port, projectname: value }).then(response => { let newArr = JSON.parse(response.data) let workArr = Object.keys(newArr.data) console.log('newArr',newArr); console.log('workArr',workArr); setAllData(newArr.data) if (workArr.length) { setWorkList(workArr) form.setFieldsValue({ name: workArr[0], type: newArr.data[workArr[0]].type }); } }) } const selectName = (value) => { form.setFieldsValue({ type: allData[value].type }); } const addExtra = () => { let attributesArr = [...attributes] attributesArr.push({}) setAttributes(attributesArr) } const deleteExtr = (index) => { let attributesArr = [...attributes] attributesArr.splice(index, 1); setAttributes(attributesArr) } const inputPort =(e)=>{ setPorts(e.target.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="IP" name="ip" rules={[{ required: true, message: '请选择ip地址' }]} > <AutoComplete placeholder="请输入IP" options={gsIp} onSelect={selectIp} /> </Item> <Item label="端口" name="port" rules={[{ required: true, message: '请输入端口' }]} > <div className={styles.imgList}> <Input placeholder="请输入GIS服务器端口" allowClear value={ports} onChange={inputPort} /> <Button style={{ marginLeft: '0.5rem' }} onClick={getProject} loading={loadingProject}>获取项目名</Button> </div> </Item> <Item label="项目名" name="projectName" rules={[{ required: true, message: '请选择项目名' }]} > <Select onChange={selectProject}> {projectNmme.length ? projectNmme.map((item, index) => { return <Option key={index} value={item}>{item}</Option> }) : ''} </Select> </Item> <Item label="数据源名" name="name" rules={[{ required: true, message: '请选择数据源名' }]} > <Select onChange={selectName}> {workList.length ? workList.map((item, index) => { return <Option key={index} value={item}>{item}</Option> }) : ''} </Select> </Item> <Item label="数据类型" name="type" rules={[{ required: true, message: '请输入数据类型' }]} > <Input placeholder="请输入数据类型" allowClear disabled /> </Item> <Button size="small" onClick={() => { addExtra() }}> 新增额外属性 </Button> <div style={{ maxHeight: '14rem', overflowY: 'scroll', marginTop: '0.2rem' }}> {attributes.length ? attributes.map((item, index) => { return <div key={index} className={styles.containerFileds}> <Item label="键" name={`key${index}`} style={{ width: '45%', marginTop: '24px' }} > <Input placeholder="" allowClear /> </Item> <Item label="值" name={`value${index}`} style={{ width: '45%', marginTop: '24px' }} > <Input placeholder="" allowClear /> </Item> <CloseCircleOutlined onClick={() => { deleteExtr(index) }} style={{ fontSize: '16px', color: 'red', cursor: 'pointer' }} /> </div> }) : ''} </div> </Form> )} </Modal> ); }; export default AddModal;