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

import {
6 7
  GetGISServerMapList,
  publisService
8
} from '@/services/webConfig/api';
9 10


11 12
const { Option } = Select;
const AddModal = props => {
13
  const { callBackSubmit = () => { }, type, formObj, visible,solutionNames } = props;
14
  const [loading, setLoading] = useState(false);
15 16 17 18 19 20
  const [workSpace, setWorkSpace] = useState('');
  const [serviceName, setServicename] = useState([{
    value: 'geoserver',
    item: 'geoserver'
  }]);
  const [workList, setWorkList] = useState([]);
21
  const [gsIp, setGsIp] = useState([]);
22
  const [form] = Form.useForm();
23
  const { Item } = Form;
24 25 26 27
  // 提交
  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
28 29 30 31 32 33 34 35 36 37 38 39 40 41
        setLoading(true);
        let obj = form.getFieldsValue();
        if (type === 'add') {
            let query = {
              _version: 9999,
              gsIP: obj.serviceadress,
              gsPort:  obj.port,
              gsAppName: obj.servicename,
              gsUser:  obj.user,
              gsWorkspaceName:  obj.workname,
              gsPwd:  obj.password,
              serviceName:  obj.name,
              solution: solutionNames,
            }
42
          publisService(query,{timeout:120000})
43 44 45 46 47 48 49 50
            .then(res => {
              setLoading(false);
              if (res.success) {
                form.resetFields();
                callBackSubmit();
                notification.success({
                  message: '提示',
                  duration: 3,
51
                  description:  '新增成功',
52
                });
53
                setWorkList([])
54 55 56 57 58
                handlelocalStorage('add',obj.serviceadress, obj.servicename)
              } else {
                notification.error({
                  message: '提示',
                  duration: 3,
59
                  description:  '新增失败',
60 61 62 63
                });
              }
            })
            .catch(err => {
64 65 66 67 68
              notification.error({
                message: '提示',
                duration: 3,
                description:  '新增失败',
              });
69 70 71
              setLoading(false);
            });
        }
72 73 74
      }
    });
  };
75

shaoan123's avatar
shaoan123 committed
76

77 78 79 80 81

  const onFinish = value => { };
  useEffect(() => {
    switch (type) {
      case 'add':
82 83 84 85 86 87 88 89
        let gsIp = [];
        let localStorageData = handlelocalStorage('get');
        if (localStorageData) {
          gsIp = localStorageData.map(item => ({
            value: item.gsIp,
            item: item.gsIp
          }));
        }
90
        setGsIp(gsIp)
91 92 93
        let localIps = ['192.168.12.7', '192.168.19.100']
        let port = localIps.includes(gsIp) ? 8080 : 8088
        form.setFieldsValue({ servicename: serviceName[0].value, port, ...formObj });
94 95 96 97 98 99 100 101 102
        break;
      case 'edit':
        form.setFieldsValue({ ...formObj });
        break;
      default:
        break;
    }
  }, [visible]);

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
  //存储到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))
  };
131 132 133 134

  const layout = {
    layout: 'horizontal',
    labelCol: {
135
      span: 5,
136 137 138 139 140 141
    },
    wrapperCol: {
      span: 16,
    },
  };

142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157

  //选择工作空间
  const selectWorkspace = () => {
    let obj = form.getFieldsValue();
    form.validateFields(['serviceadress', 'port', 'servicename', 'user', 'password']).then(validate => {
      if (validate) {
        let query = {
          GISServerIP: obj.serviceadress,
          GISServerPort: obj.port,
          gsAppName: obj.servicename,
          gsUser: obj.user,
          gsPwd: obj.password,
          isGeoServer: true,
          _version: 9999,
        }
        GetGISServerMapList(query).then(res => {
158

159 160
          if (Array.isArray(res.data)) {
            const defaultValue= res.data[0]||''
161
            form.setFieldsValue({ name:defaultValue,workname:defaultValue});
162
            setWorkList(res.data)
163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184
            setWorkSpace(defaultValue)
          }
          else {
            notification.error({
              message: '提示',
              duration: 3,
              description: '获取工作空间失败',
            });
          }
        })
      }
    })

  };
  //选择工作空间
  const handleWorkspace = (value) => {
    form.setFieldsValue({
      workname: value,
      name:value
    })
    setWorkSpace(value)
  }
185 186 187 188 189 190
  const selectIp = (value)=>{
    let localIps = ['192.168.12.7', '192.168.19.100']
    let port = localIps.includes(value) ? 8080 : 8088
    form.setFieldsValue({ port,serviceadress:value });
    
  }
191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210
  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="GIS服务器地址"
211
            name="serviceadress"
212 213
            rules={[{ required: true, message: '请选择服务名' }]}
          >
214 215 216 217 218
            <AutoComplete
              placeholder="请输入GIS服务器地址"
              options={gsIp}
              onSelect={selectIp}
            />
219 220 221 222 223 224 225 226 227 228 229
          </Item>
          <Item
            label="GIS服务器端口"
            name="port"
            rules={[{ required: true, message: '请输入GIS服务器端口' }]}
          >
            <Input placeholder="请输入GIS服务器端口" allowClear />
          </Item>

          <Item
            label="GIS服务器名"
230
            name="servicename"
231 232
            rules={[{ required: true, message: '请输入GIS服务器名' }]}
          >
233 234 235 236
            <AutoComplete
              placeholder="Email"
              options={serviceName}
            />
237 238 239 240 241 242 243 244 245 246 247 248 249
          </Item>
          <Item
            label="用户名称"
            name="user"
            rules={[{ required: true, message: '请输入用户名称' }]}
          >
            <Input placeholder="请输入用户名称" allowClear />
          </Item>
          <Item
            label="用户密码"
            name="password"
            rules={[{ required: true, message: '请输入用户密码' }]}
          >
250
            <Input.Password placeholder="请输入用户密码" allowClear />
251 252 253
          </Item>
          <Item
            label="工作空间名称"
254
            name="workname"
255 256 257
            rules={[{ required: true, message: '请选择工作空间名称' }]}
          >
            <div className={styles.imgList}>
258
              <Select onChange={handleWorkspace} value ={workSpace}>
259
                {workList.length ? workList.map((item, index) => { return <Option key={index} value={item}>{item}</Option> }) : ''}
260
              </Select>
261
              <Button style={{ marginLeft: '0.5rem' }} onClick={() => { selectWorkspace() }}>选择工作空间</Button>
262 263 264 265 266 267 268 269 270 271 272 273 274 275 276
            </div>
          </Item>
          <Item
            label="服务名称"
            name="name"
            rules={[{ required: true, message: '请输入服务名称' }]}
          >
            <Input placeholder="请输入服务名称" allowClear />
          </Item>
        </Form>
      )}
    </Modal>
  );
};
export default AddModal;