AddModal.jsx 13.6 KB
Newer Older
1 2 3
/* eslint-disable eqeqeq */
/* eslint-disable import/order */
/* eslint-disable react/jsx-boolean-value */
皮倩雯's avatar
皮倩雯 committed
4
/* eslint-disable indent */
5 6
import React, { useState, useEffect } from 'react';
import {
皮倩雯's avatar
皮倩雯 committed
7 8 9 10 11 12 13 14 15 16
  Form,
  Modal,
  Input,
  Select,
  AutoComplete,
  Button,
  notification,
  message,
  Card,
  Space,
17 18 19
  Tooltip,
  Row,
  Col,
皮倩雯's avatar
皮倩雯 committed
20 21 22
} from 'antd';
import styles from '../dimensionsConfig.less';

23 24
import { AddVectorData, GetProjectNames } from '@/services/webConfig/api';
import { CloseCircleOutlined, MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
25 26 27

const { Option } = Select;
const AddModal = props => {
皮倩雯's avatar
皮倩雯 committed
28
  const { callBackSubmit = () => {}, type, formObj, visible } = props;
29
  const [loading, setLoading] = useState(false);
皮倩雯's avatar
皮倩雯 committed
30
  const [attributes, setAttributes] = useState([]);
31
  const [workList, setWorkList] = useState([]);
32
  const [allData, setAllData] = useState([]);
33
  const [gsIp, setGsIp] = useState([]);
皮倩雯's avatar
皮倩雯 committed
34
  const [ports, setPorts] = useState('');
35
  const [projectNmme, setProjectNmme] = useState([]);
皮倩雯's avatar
皮倩雯 committed
36
  const [loadingProject, setLoadingProject] = useState(false);
37 38 39 40 41 42 43 44
  const [form] = Form.useForm();
  const { Item } = Form;
  // 提交
  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
        setLoading(true);
        let obj = form.getFieldsValue();
皮倩雯's avatar
皮倩雯 committed
45
        let attributesObj = {};
46 47 48 49 50 51 52 53 54 55
        if (obj.users) {
          obj.users.map(item => {
            attributesObj[item.nodeName] = item.nodeValue;
          });
        }

        // attributes.map((item, index) => {
        //   let key = obj[`key${index}`];
        //   attributesObj[`${key}`] = obj[`value${index}`];
        // });
56
        if (type === 'add') {
皮倩雯's avatar
皮倩雯 committed
57 58 59 60 61
          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}`;
62
          let query = {
63 64 65 66
            type: obj.type,
            projectName: obj.projectName,
            name: obj.name,
            url,
皮倩雯's avatar
皮倩雯 committed
67
            attributes: attributesObj || {},
68
            ip: obj.ip,
皮倩雯's avatar
皮倩雯 committed
69 70
            port: obj.port,
          };
71
          AddVectorData(query)
72 73
            .then(res => {
              setLoading(false);
74
              if (res.msg === '') {
75 76 77 78 79 80 81
                form.resetFields();
                callBackSubmit();
                notification.success({
                  message: '提示',
                  duration: 3,
                  description: '新增成功',
                });
皮倩雯's avatar
皮倩雯 committed
82
                handlelocalStorage('add', obj.ip, obj.projectName);
83 84 85 86
              } else {
                notification.error({
                  message: '提示',
                  duration: 3,
87
                  description: res.msg,
88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103
                });
              }
            })
            .catch(err => {
              notification.error({
                message: '提示',
                duration: 3,
                description: '新增失败',
              });
              setLoading(false);
            });
        }
      }
    });
  };

皮倩雯's avatar
皮倩雯 committed
104
  const onFinish = value => {};
105 106 107 108 109 110 111 112
  useEffect(() => {
    switch (type) {
      case 'add':
        let gsIp = [];
        let localStorageData = handlelocalStorage('get');
        if (localStorageData) {
          gsIp = localStorageData.map(item => ({
            value: item.gsIp,
皮倩雯's avatar
皮倩雯 committed
113
            item: item.gsIp,
114 115
          }));
        }
皮倩雯's avatar
皮倩雯 committed
116 117 118 119 120 121 122
        setGsIp(gsIp);
        setAttributes([]);
        setProjectNmme([]);
        setWorkList([]);
        setPorts('');
        let localIps = ['192.168.12.97'];
        let port = localIps.includes(gsIp) ? '8083' : '8088';
123
        form.resetFields();
124 125 126 127 128 129 130 131 132
        break;
      case 'edit':
        form.setFieldsValue({ ...formObj });
        break;
      default:
        break;
    }
  }, [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 167 168 169
  };

  const layout = {
    layout: 'horizontal',
    labelCol: {
      span: 4,
    },
    wrapperCol: {
170
      span: 18,
171 172 173
    },
  };

皮倩雯's avatar
皮倩雯 committed
174 175 176
  const selectIp = value => {
    let localIps = ['192.168.12.97'];
    let port = localIps.includes(value) ? '8083' : '8088';
177
    form.setFieldsValue({ port, serviceadress: value });
皮倩雯's avatar
皮倩雯 committed
178 179
    setPorts(port);
  };
180 181 182 183
  // 获取项目名
  const getProject = () => {
    const obj = form.getFieldsValue();
    if (obj.ip && obj.port) {
皮倩雯's avatar
皮倩雯 committed
184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209
      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({
shaoan123's avatar
shaoan123 committed
210 211
              message: '提示',
              duration: 3,
皮倩雯's avatar
皮倩雯 committed
212
              description: '获取失败',
shaoan123's avatar
shaoan123 committed
213
            });
214
          }
皮倩雯's avatar
皮倩雯 committed
215 216 217 218
        })
        .catch(e => {
          console.log('e', e);
        });
219
    } else {
皮倩雯's avatar
皮倩雯 committed
220
      message.warning('未输入ip或port');
221
    }
皮倩雯's avatar
皮倩雯 committed
222 223
  };
  const selectProject = value => {
224 225
    const obj = form.getFieldsValue();
    GetProjectNames({ ip: obj.ip, port: obj.port, projectname: value }).then(response => {
皮倩雯's avatar
皮倩雯 committed
226 227 228
      let newArr = JSON.parse(response.data);
      let workArr = Object.keys(newArr.data);
      setAllData(newArr.data);
229
      if (workArr.length) {
皮倩雯's avatar
皮倩雯 committed
230
        setWorkList(workArr);
231 232
        form.setFieldsValue({ name: workArr[0], type: newArr.data[workArr[0]].type });
      }
皮倩雯's avatar
皮倩雯 committed
233 234 235
    });
  };
  const selectName = value => {
236
    form.setFieldsValue({ type: allData[value].type });
皮倩雯's avatar
皮倩雯 committed
237
  };
238 239 240 241 242 243 244 245 246 247
  // const addExtra = () => {
  //   let attributesArr = [...attributes];
  //   attributesArr.push({});
  //   setAttributes(attributesArr);
  // };
  // const deleteExtr = index => {
  //   let attributesArr = [...attributes];
  //   attributesArr.splice(index, 1);
  //   setAttributes(attributesArr);
  // };
皮倩雯's avatar
皮倩雯 committed
248 249 250
  const inputPort = e => {
    setPorts(e.target.value);
  };
251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267
  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 && (
皮倩雯's avatar
皮倩雯 committed
268 269 270
        <Form form={form} {...layout} onFinish={onFinish} style={{ marginBottom: '20px' }}>
          <Item label="IP" name="ip" rules={[{ required: true, message: '请选择ip地址' }]}>
            <AutoComplete placeholder="请输入IP" options={gsIp} onSelect={selectIp} />
271
          </Item>
皮倩雯's avatar
皮倩雯 committed
272
          <Item label="端口" name="port" rules={[{ required: true, message: '请输入端口' }]}>
273
            <div className={styles.imgList}>
皮倩雯's avatar
皮倩雯 committed
274 275 276 277 278 279
              <Input
                placeholder="请输入GIS服务器端口"
                allowClear
                value={ports}
                onChange={inputPort}
              />
280
            </div>
281 282 283 284 285 286
          </Item>
          <Item
            label="项目名"
            name="projectName"
            rules={[{ required: true, message: '请选择项目名' }]}
          >
287
            <Select onChange={selectProject} style={{ width: '379px' }}>
皮倩雯's avatar
皮倩雯 committed
288 289 290 291 292 293 294 295 296
              {projectNmme.length
                ? projectNmme.map((item, index) => {
                    return (
                      <Option key={index} value={item}>
                        {item}
                      </Option>
                    );
                  })
                : ''}
297
            </Select>
298
            <Button style={{ marginLeft: '0.5rem' }} onClick={getProject}>
皮倩雯's avatar
皮倩雯 committed
299 300
              获取项目名
            </Button>
301 302 303
          </Item>
          <Item
            label="数据源名"
304
            name="name"
305 306
            rules={[{ required: true, message: '请选择数据源名' }]}
          >
307
            <Select onChange={selectName}>
皮倩雯's avatar
皮倩雯 committed
308 309 310 311 312 313 314 315 316
              {workList.length
                ? workList.map((item, index) => {
                    return (
                      <Option key={index} value={item}>
                        {item}
                      </Option>
                    );
                  })
                : ''}
317 318 319 320
            </Select>
          </Item>
          <Item
            label="数据类型"
321
            name="type"
322 323
            rules={[{ required: true, message: '请输入数据类型' }]}
          >
324
            <Input placeholder="请输入数据类型" allowClear disabled />
325
          </Item>
326
          {/* <Button
皮倩雯's avatar
皮倩雯 committed
327 328 329 330 331 332
            size="small"
            style={{ width: '71%', marginLeft: '109px', lineHeight: '32px', height: '32px' }}
            onClick={() => {
              addExtra();
            }}
          >
333
            新增额外属性
334
          </Button> */}
皮倩雯's avatar
皮倩雯 committed
335 336
          <div
            style={{
337
              maxHeight: '200px',
皮倩雯's avatar
皮倩雯 committed
338 339 340 341 342
              overflowY: 'scroll',
              marginLeft: '66px',
              width: '88%',
            }}
          >
343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395
            <Form.List name="users">
              {(fields, { add, remove }) => (
                <>
                  {fields.map(({ key, name, fieldKey, ...restField }) => (
                    <Space key={key} style={{ display: 'flex', marginBottom: 8 }}>
                      <div style={{ display: 'flex', alignItems: 'middle' }}>
                        <Form.Item
                          {...restField}
                          name={[name, 'nodeName']}
                          label="键"
                          fieldKey={[fieldKey, 'frist']}
                        >
                          <Input
                            placeholder="请输入名称"
                            style={{ marginLeft: '2px', width: '224px' }}
                          />
                        </Form.Item>
                        <Form.Item
                          {...restField}
                          name={[name, 'nodeValue']}
                          label="值"
                          fieldKey={[fieldKey, 'last']}
                          style={{ marginLeft: '10px' }}
                        >
                          <Input
                            placeholder="请输入值"
                            style={{ marginLeft: '2px', width: '224px' }}
                          />
                        </Form.Item>
                        <Tooltip title="移除额外属性">
                          <MinusCircleOutlined
                            onClick={() => remove(name)}
                            style={{ marginLeft: '20px', marginTop: '11px', fontSize: '20px' }}
                          />
                        </Tooltip>
                      </div>
                    </Space>
                  ))}
                  <Form.Item>
                    <Button
                      type="dashed"
                      onClick={() => add()}
                      block
                      icon={<PlusOutlined />}
                      style={{ width: '489px', marginLeft: '43px' }}
                    >
                      新增额外属性
                    </Button>
                  </Form.Item>
                </>
              )}
            </Form.List>
            {/* {attributes.length
皮倩雯's avatar
皮倩雯 committed
396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425
              ? attributes.map((item, index) => {
                  return (
                    <div key={index} className={styles.containerFileds}>
                      <Item
                        label="键"
                        name={`key${index}`}
                        style={{ width: '100%', marginTop: '24px' }}
                      >
                        <Input placeholder="" allowClear />
                      </Item>
                      <Item
                        label="值"
                        name={`value${index}`}
                        style={{ width: '100%', marginTop: '24px' }}
                      >
                        <Input placeholder="" allowClear />
                      </Item>
                      <CloseCircleOutlined
                        onClick={() => {
                          deleteExtr(index);
                        }}
                        style={{
                          fontSize: '16px',
                          color: 'red',
                          cursor: 'pointer',
                        }}
                      />
                    </div>
                  );
                })
426
              : ''} */}
427
          </div>
428 429 430 431 432 433
        </Form>
      )}
    </Modal>
  );
};
export default AddModal;