AddModal.jsx 10.1 KB
Newer Older
1
import React, { useState, useEffect } from 'react';
2
import { Form, Modal, Input, Select, AutoComplete, Button, notification, message, Card } from 'antd';
3 4 5
import styles from '../dimensionsConfig.less'

import {
6
  AddVectorData,
7
  publisService, GetProjectNames
8
} from '@/services/webConfig/api';
9
import {
10
  PlusCircleOutlined, CloseCircleOutlined
11
} from '@ant-design/icons';
12 13 14

const { Option } = Select;
const AddModal = props => {
15
  const { callBackSubmit = () => { }, type, formObj, visible } = props;
16
  const [loading, setLoading] = useState(false);
17
  const [attributes, setAttributes] = useState([])
18
  const [workList, setWorkList] = useState([]);
19
  const [allData, setAllData] = useState([]);
20
  const [gsIp, setGsIp] = useState([]);
21
  const [ports,setPorts]= useState('');
22
  const [projectNmme, setProjectNmme] = useState([]);
shaoan123's avatar
shaoan123 committed
23
  const [loadingProject,setLoadingProject] =useState(false)
24 25 26 27 28 29 30 31
  const [form] = Form.useForm();
  const { Item } = Form;
  // 提交
  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
        setLoading(true);
        let obj = form.getFieldsValue();
32 33 34 35 36
        let attributesObj = {}
        attributes.map((item, index) => {
          let key = obj[`key${index}`]
          attributesObj[`${key}`] = obj[`value${index}`]
        })
37
        if (type === 'add') {
38
          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}`
39
          let query = {
40 41 42 43 44 45 46
            type: obj.type,
            projectName: obj.projectName,
            name: obj.name,
            url,
            attributes: attributesObj ||{},
            ip: obj.ip,
            port: obj.port
47
          }
48
          AddVectorData(query)
49 50
            .then(res => {
              setLoading(false);
51
              if (res.msg === '') {
52 53 54 55 56 57 58
                form.resetFields();
                callBackSubmit();
                notification.success({
                  message: '提示',
                  duration: 3,
                  description: '新增成功',
                });
59
                handlelocalStorage('add', obj.ip, obj.projectName)
60 61 62 63
              } else {
                notification.error({
                  message: '提示',
                  duration: 3,
64
                  description: res.msg,
65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
                });
              }
            })
            .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)
96 97 98 99 100 101 102
        setAttributes([])
        setProjectNmme([])
        setWorkList([])
        setPorts('')
        let localIps = ['192.168.12.97']
        let port = localIps.includes(gsIp) ? '8083' : '8088'
        form.resetFields();
103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151
        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) => {
152 153
    let localIps = ['192.168.12.97']
    let port = localIps.includes(value) ? '8083' : '8088'
154
    form.setFieldsValue({ port, serviceadress: value });
155
    setPorts(port)
156

157 158 159
  }
  // 获取项目名
  const getProject = () => {
shaoan123's avatar
shaoan123 committed
160
 
161 162
    const obj = form.getFieldsValue();
    if (obj.ip && obj.port) {
shaoan123's avatar
shaoan123 committed
163
      setLoadingProject(true)
164
      GetProjectNames({ ip: obj.ip, port: obj.port }).then(res => {
shaoan123's avatar
shaoan123 committed
165
        setLoadingProject(false)
166
        if (res.msg === 'Ok') {
shaoan123's avatar
shaoan123 committed
167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185
          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])
            }
186
          }
shaoan123's avatar
shaoan123 committed
187
         
188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206
        } 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)
207 208
      console.log('newArr',newArr);
      console.log('workArr',workArr);
209 210 211 212 213 214 215 216 217 218 219 220
      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 = () => {
221 222 223 224 225 226 227 228
    let attributesArr = [...attributes]
    attributesArr.push({})
    setAttributes(attributesArr)
  }
  const deleteExtr = (index) => {
    let attributesArr = [...attributes]
    attributesArr.splice(index, 1);
    setAttributes(attributesArr)
229
  }
230 231 232
  const  inputPort =(e)=>{
    setPorts(e.target.value)
  } 
233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252
  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"
253 254
            name="ip"
            rules={[{ required: true, message: '请选择ip地址' }]}
255 256 257 258 259
          >
            <AutoComplete
              placeholder="请输入IP"
              options={gsIp}
              onSelect={selectIp}
260

261 262 263 264 265 266 267
            />
          </Item>
          <Item
            label="端口"
            name="port"
            rules={[{ required: true, message: '请输入端口' }]}
          >
268
            <div className={styles.imgList}>
269
              <Input placeholder="请输入GIS服务器端口" allowClear value={ports} onChange={inputPort} />
shaoan123's avatar
shaoan123 committed
270
              <Button style={{ marginLeft: '0.5rem' }} onClick={getProject} loading={loadingProject}>获取项目名</Button>
271
            </div>
272 273 274 275 276 277
          </Item>
          <Item
            label="项目名"
            name="projectName"
            rules={[{ required: true, message: '请选择项目名' }]}
          >
278 279
            <Select onChange={selectProject}>
              {projectNmme.length ? projectNmme.map((item, index) => { return <Option key={index} value={item}>{item}</Option> }) : ''}
280 281 282 283
            </Select>
          </Item>
          <Item
            label="数据源名"
284
            name="name"
285 286
            rules={[{ required: true, message: '请选择数据源名' }]}
          >
287
            <Select onChange={selectName}>
288 289 290 291 292
              {workList.length ? workList.map((item, index) => { return <Option key={index} value={item}>{item}</Option> }) : ''}
            </Select>
          </Item>
          <Item
            label="数据类型"
293
            name="type"
294 295
            rules={[{ required: true, message: '请输入数据类型' }]}
          >
296
            <Input placeholder="请输入数据类型" allowClear disabled />
297
          </Item>
298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326
          <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>
327 328 329 330 331 332
        </Form>
      )}
    </Modal>
  );
};
export default AddModal;