AddModal.jsx 9.42 KB
Newer Older
1
import React, { useState, useEffect } from 'react';
2
import { Form, Modal, Input, Select, AutoComplete, Button, notification } from 'antd';
皮倩雯's avatar
皮倩雯 committed
3
import CryptoJS from 'crypto-js';
皮倩雯's avatar
皮倩雯 committed
4
import styles from '../SchemeConfig.less';
5

皮倩雯's avatar
皮倩雯 committed
6
import { GetGISServerMapList, publisService } from '@/services/webConfig/api';
7

8 9
const { Option } = Select;
const AddModal = props => {
皮倩雯's avatar
皮倩雯 committed
10
  const { callBackSubmit = () => {}, type, formObj, visible, solutionNames } = props;
11
  const [loading, setLoading] = useState(false);
12
  const [workSpace, setWorkSpace] = useState('');
xuchaozou's avatar
xuchaozou committed
13
  
皮倩雯's avatar
皮倩雯 committed
14 15 16 17 18 19
  const [serviceName, setServicename] = useState([
    {
      value: 'geoserver',
      item: 'geoserver',
    },
  ]);
20
  const [workList, setWorkList] = useState([]);
21
  const [gsIp, setGsIp] = useState([]);
22
  const [form] = Form.useForm();
23
  const { Item } = Form;
皮倩雯's avatar
皮倩雯 committed
24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

  const key = CryptoJS.enc.Utf8.parse('1p2a3n4d5a6o7m8s9a10n1e2t3c4o5re'); // 十六位十六进制数作为密钥
  const iv = CryptoJS.enc.Utf8.parse('1234567890000000');

  // 解密
  const Decrypt = word => {
    let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
    let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
    let decrypt = CryptoJS.AES.decrypt(srcs, key, {
      iv,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.Pkcs7,
    });
    let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
    return decryptedStr.toString();
  };

  // 加密
  const Encrypt = word => {
    let srcs = CryptoJS.enc.Utf8.parse(word);
    let encrypted = CryptoJS.AES.encrypt(srcs, key, {
      iv,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.Pkcs7,
    });
    return encrypted.ciphertext.toString().toUpperCase();
  };
51 52 53 54
  // 提交
  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
55 56 57
        setLoading(true);
        let obj = form.getFieldsValue();
        if (type === 'add') {
皮倩雯's avatar
皮倩雯 committed
58 59 60 61 62 63 64
          let query = {
            _version: 9999,
            gsIP: obj.serviceadress,
            gsPort: obj.port,
            gsAppName: obj.servicename,
            gsUser: obj.user,
            gsWorkspaceName: obj.workname,
皮倩雯's avatar
皮倩雯 committed
65
            gsPwd: Encrypt(obj.password),
66
            mapServerName: obj.name,
皮倩雯's avatar
皮倩雯 committed
67 68 69
            solution: solutionNames,
          };
          publisService(query, { timeout: 120000 })
70 71 72 73 74 75 76 77
            .then(res => {
              setLoading(false);
              if (res.success) {
                form.resetFields();
                callBackSubmit();
                notification.success({
                  message: '提示',
                  duration: 3,
皮倩雯's avatar
皮倩雯 committed
78
                  description: '新增成功',
79
                });
皮倩雯's avatar
皮倩雯 committed
80 81
                setWorkList([]);
                handlelocalStorage('add', obj.serviceadress, obj.servicename);
82 83 84 85
              } else {
                notification.error({
                  message: '提示',
                  duration: 3,
86
                  description: res.msg || '新增失败',
87 88 89 90
                });
              }
            })
            .catch(err => {
91 92 93
              notification.error({
                message: '提示',
                duration: 3,
皮倩雯's avatar
皮倩雯 committed
94
                description: '新增失败',
95
              });
96 97 98
              setLoading(false);
            });
        }
99 100 101
      }
    });
  };
102

皮倩雯's avatar
皮倩雯 committed
103
  const onFinish = value => {};
104
  useEffect(() => {
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
    if (visible) {
      switch (type) {
        case 'add':
          let gsIp = [];
          let localStorageData = handlelocalStorage('get');
          if (localStorageData) {
            gsIp = localStorageData.map(item => ({
              value: item.gsIp,
              item: item.gsIp,
            }));
          }
          setGsIp(gsIp);
          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 });
          break;
        case 'edit':
          form.setFieldsValue({ ...formObj });
          break;
        default:
          break;
      }
    } else {
      form.resetFields();
      setWorkSpace('');
130 131 132
    }
  }, [visible]);

133
  // 存储到localstorage
134 135
  const handlelocalStorage = (type, gsIp, gisAppName) => {
    if (!localStorage) return null;
皮倩雯's avatar
皮倩雯 committed
136
    let result = JSON.parse(localStorage.getItem('metaData'));
137 138 139 140 141 142 143
    if (type == 'get') {
      return result;
    }
    if (!result || !result.find(item => item.gsIp == gsIp)) {
      if (!result) result = [];
      result.push({
        gsIp,
皮倩雯's avatar
皮倩雯 committed
144 145 146 147 148 149 150 151 152
        gisAppName: [
          {
            value: gisAppName,
            item: gisAppName,
          },
        ],
      });
      localStorage.setItem('metaData', JSON.stringify(result));
      return;
153
    }
皮倩雯's avatar
皮倩雯 committed
154
    let data = result.find(item => item.gsIp == gsIp);
155 156 157 158
    let isHasGisAppName = data.gisAppName.find(item => item.value == gisAppName);
    if (isHasGisAppName) return;
    data.gisAppName.push({
      value: gisAppName,
皮倩雯's avatar
皮倩雯 committed
159 160 161
      item: gisAppName,
    });
    localStorage.setItem('metaData', JSON.stringify(result));
162
  };
163 164 165 166

  const layout = {
    layout: 'horizontal',
    labelCol: {
167
      span: 5,
168 169
    },
    wrapperCol: {
170
      span: 18,
171 172 173
    },
  };

174
  // 选择工作空间
175 176
  const selectWorkspace = () => {
    let obj = form.getFieldsValue();
皮倩雯's avatar
皮倩雯 committed
177 178 179 180 181 182 183 184 185
    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,
186
            gsPwd: obj.password,
皮倩雯's avatar
皮倩雯 committed
187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203
            isGeoServer: true,
            _version: 9999,
          };
          GetGISServerMapList(query).then(res => {
            if (Array.isArray(res.data)) {
              const defaultValue = res.data[0] || '';
              form.setFieldsValue({ name: defaultValue, workname: defaultValue });
              setWorkList(res.data);
              setWorkSpace(defaultValue);
            } else {
              notification.error({
                message: '提示',
                duration: 3,
                description: '获取工作空间失败',
              });
            }
          });
204
        }
皮倩雯's avatar
皮倩雯 committed
205
      });
206
  };
207
  // 选择工作空间
皮倩雯's avatar
皮倩雯 committed
208
  const handleWorkspace = value => {
209 210
    form.setFieldsValue({
      workname: value,
皮倩雯's avatar
皮倩雯 committed
211 212 213 214 215 216 217 218 219
      name: value,
    });
    setWorkSpace(value);
  };
  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 });
  };
220 221 222 223 224 225 226 227 228 229 230 231 232
  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}
233
      forceRender
234 235 236 237 238 239
      getContainer={false}
    >
      {visible && (
        <Form form={form} {...layout} onFinish={onFinish}>
          <Item
            label="GIS服务器地址"
240
            name="serviceadress"
241 242
            rules={[{ required: true, message: '请选择服务名' }]}
          >
皮倩雯's avatar
皮倩雯 committed
243
            <AutoComplete placeholder="请输入GIS服务器地址" options={gsIp} onSelect={selectIp} />
244 245 246 247 248 249 250 251 252 253 254
          </Item>
          <Item
            label="GIS服务器端口"
            name="port"
            rules={[{ required: true, message: '请输入GIS服务器端口' }]}
          >
            <Input placeholder="请输入GIS服务器端口" allowClear />
          </Item>

          <Item
            label="GIS服务器名"
255
            name="servicename"
256 257
            rules={[{ required: true, message: '请输入GIS服务器名' }]}
          >
皮倩雯's avatar
皮倩雯 committed
258
            <AutoComplete placeholder="Email" options={serviceName} />
259 260 261 262 263 264 265 266 267 268 269 270 271
          </Item>
          <Item
            label="用户名称"
            name="user"
            rules={[{ required: true, message: '请输入用户名称' }]}
          >
            <Input placeholder="请输入用户名称" allowClear />
          </Item>
          <Item
            label="用户密码"
            name="password"
            rules={[{ required: true, message: '请输入用户密码' }]}
          >
272
            <Input.Password placeholder="请输入用户密码" allowClear />
273 274 275
          </Item>
          <Item
            label="工作空间名称"
276
            name="workname"
277 278 279
            rules={[{ required: true, message: '请选择工作空间名称' }]}
          >
            <div className={styles.imgList}>
280 281 282
              <Select
                onChange={handleWorkspace}
                value={workSpace}
283
                style={{ width: '378px' }}
284 285
                showSearch
              >
皮倩雯's avatar
皮倩雯 committed
286
                {workList.length
287
                  ? workList.map((item, index) => (
288 289 290 291
                    <Option key={index} value={item}>
                      {item}
                    </Option>
                  ))
皮倩雯's avatar
皮倩雯 committed
292
                  : ''}
293
              </Select>
皮倩雯's avatar
皮倩雯 committed
294 295 296 297 298 299 300 301
              <Button
                style={{ marginLeft: '0.5rem' }}
                onClick={() => {
                  selectWorkspace();
                }}
              >
                选择工作空间
              </Button>
302 303 304 305 306 307 308 309 310 311 312 313 314 315 316
            </div>
          </Item>
          <Item
            label="服务名称"
            name="name"
            rules={[{ required: true, message: '请输入服务名称' }]}
          >
            <Input placeholder="请输入服务名称" allowClear />
          </Item>
        </Form>
      )}
    </Modal>
  );
};
export default AddModal;