AddModal.jsx 9.17 KB
Newer Older
1
/* eslint-disable indent */
2
import React, { useState, useEffect } from 'react';
3
import { Form, Modal, Input, Select, notification, Radio } from 'antd';
4
import {
shaoan123's avatar
shaoan123 committed
5
  GettMaplayer,
6
  GetVectorService,
7
  SetServiceConfig,
8
  bindSchemeBaseMap,
9
  GetbaseMapschemeName,
10 11 12 13
} from '@/services/webConfig/api';
const { Item } = Form;
const { Option } = Select;
const AddModal = props => {
14 15 16 17 18 19 20 21 22
  const {
    callBackSubmit = () => {},
    type,
    formObj,
    visible,
    serviceList,
    keepData,
    nameData,
  } = props;
23
  const [loading, setLoading] = useState(false);
24 25
  const [baseMap, setBaseMap] = useState([]);
  const [pipeArr, setPipeArr] = useState([]);
26
  const [list, setList] = useState([]);
27
  const [radio, setRadio] = useState('');
28

29 30 31 32 33
  const [form] = Form.useForm();
  // 提交
  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
34 35 36 37 38
        setLoading(true);
        let obj = form.getFieldsValue();
        if (type === 'add') {
          bindSchemeBaseMap({
            schemename: formObj.schemename,
39
            basemapName: obj.serverName,
40 41
          }).then(res => {
            setLoading(false);
42
            if (res.code == '0') {
43 44
              form.resetFields();
              callBackSubmit();
45
              prompt('success', '分级底图新增成功');
46
            } else {
47
              prompt('fail', '分级底图新增失败');
48
            }
49
          });
50 51 52
        } else {
          handleEdit();
        }
53 54 55
      }
    });
  };
56 57
  const prompt = (type, content) => {
    if (type == 'success') {
58 59 60 61 62
      notification.success({
        message: '提示',
        duration: 3,
        description: content,
      });
63
    } else {
64 65 66 67 68 69
      notification.error({
        message: '提示',
        duration: 3,
        description: content,
      });
    }
70
  };
71
  const handleEdit = () => {
72 73 74 75 76 77 78 79 80 81 82
    let obj = form.getFieldsValue();
    let query = {
      schemename: obj.schemename,
      terminalType: 'scheme',
      isBaseMap: 'false',
      jsonCfg: JSON.stringify({
        baseMap: [obj.baseMap],
        servicename: obj.servicename,
        label: obj.label,
        url: obj.url,
        alpha: 1,
83 84
      }),
    };
85 86 87
    SetServiceConfig(query)
      .then(res => {
        setLoading(false);
88
        if (res.code == '0') {
89 90
          form.resetFields();
          callBackSubmit();
91
          prompt('success', '方案新增成功');
92
        } else {
93
          prompt('fail', '方案新增失败');
94 95 96 97 98
        }
      })
      .catch(err => {
        setLoading(false);
      });
99 100
  };

101
  const onFinish = value => {};
102
  useEffect(() => {
103
    console.log(keepData);
104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122
    if (visible) {
      switch (type) {
        case 'add':
          addTile();
          break;
        case 'schemeAdd':
          pipeNetwork();
          setRadio('基础底图');
          form.setFieldsValue({ choose: '基础底图' });
          form.setFieldsValue({
            baseMap: keepData[0],
          });
          break;
        default:
          break;
      }
    } else {
      setRadio('');
      form.resetFields();
123 124 125
    }
  }, [visible]);

126
  // 添加瓦片
127
  const addTile = () => {
128
    console.log(formObj);
129
    form.setFieldsValue({
130 131 132 133
      serverName: serviceList[0],
    });
  };
  // 获取管网及默认底图
134 135
  const pipeNetwork = () => {
    form.resetFields();
136
    let req1 = GetbaseMapschemeName();
137
    let req2 = GetVectorService();
138 139
    let pipeArr = [];
    let baseMap = [];
140
    Promise.all([req1, req2]).then(res => {
141
      if (res[0].code == '0') {
142 143
        (res[0].data || []).map(item => {
          baseMap.push(item);
144
        });
145
      }
shaoan123's avatar
shaoan123 committed
146 147
      if (res[1].msg === 'Ok') {
        (res[1].data.VectorList || []).map(item => {
148 149
          pipeArr.push(item.ServiceName.split('.')[0]);
        });
150
      }
151
      console.log(baseMap);
152 153
      setPipeArr(pipeArr);
      setBaseMap(baseMap);
154 155 156
      // form.setFieldsValue({
      //   baseMap: baseMap[0],
      // });
157 158
    });
  };
159 160 161 162 163 164
  const layout = {
    layout: 'horizontal',
    labelCol: {
      span: 4,
    },
    wrapperCol: {
165
      span: 18,
166 167 168
    },
  };

169 170 171 172
  // 选择服务名
  const handleChange = () => {};
  // 选择管网
  const handleService = value => {
173 174
    form.setFieldsValue({
      label: value,
175
      // url: `http://{IP}/PandaGIS/MapServer/Export?mapServerName=${value}`,
176
      url: `http://{IP}/PandaGIS/MapServer/${value}`,
177 178
    });
  };
179

180 181 182 183 184 185 186 187 188 189 190 191 192 193
  const onChange = e => {
    console.log(keepData);
    setRadio(e.target.value);
    if (e.target.value === '基础底图') {
      form.setFieldsValue({
        baseMap: keepData[0],
      });
    } else {
      form.setFieldsValue({
        baseMap: baseMap[0],
      });
    }
  };

194 195
  // 选择底图
  const handleBaseMap = () => {};
196 197
  return (
    <Modal
198
      title={`${type === 'add' ? '添加分级底图' : '添加方案'}`}
199 200 201 202 203 204 205 206 207 208
      bodyStyle={{ width: '100%', minHeight: '100px' }}
      style={{ top: '150px' }}
      width="700px"
      destroyOnClose
      maskClosable={false}
      cancelText="取消"
      okText="确认"
      {...props}
      onOk={() => onSubmit()}
      confirmLoading={loading}
209
      forceRender
210 211 212 213
      getContainer={false}
    >
      {visible && (
        <Form form={form} {...layout} onFinish={onFinish}>
214
          {type === 'add' ? (
215
            <Item label="分级底图" name="serverName">
216 217
              <Select onChange={handleChange}>
                {serviceList.length
218 219 220 221 222
                  ? serviceList.map((item, index) => (
                      <Option key={index} value={item}>
                        {item}
                      </Option>
                    ))
223 224 225 226
                  : ''}
              </Select>
            </Item>
          ) : (
227 228 229 230
            <>
              <Item
                label="方案名"
                name="schemename"
231 232 233 234 235 236 237 238 239 240 241 242
                rules={[
                  { required: true, message: '请输入方案名' },
                  {
                    validator: (rule, value) => {
                      let aa = form.getFieldValue().schemename;
                      if (nameData.indexOf(aa) != -1) {
                        return Promise.reject('方案名已存在');
                      }
                      return Promise.resolve();
                    },
                  },
                ]}
243 244 245
              >
                <Input placeholder="请输入方案名" allowClear />
              </Item>
246
              <Item label="管网" name="servicename" placeholder="请选择管网">
247
                <Select onChange={handleService} showSearch>
248
                  {pipeArr.length
249 250 251 252 253
                    ? pipeArr.map((item, index) => (
                        <Option key={index} value={item}>
                          {item}
                        </Option>
                      ))
254
                    : ''}
255 256
                </Select>
              </Item>
257
              <Item label="标签" name="label">
258 259
                <Input placeholder="请输入标签" allowClear />
              </Item>
260
              <Item label="url" name="url">
261 262
                <Input placeholder="请输入url" allowClear />
              </Item>
263 264 265 266 267 268 269 270 271 272 273 274 275 276
              <Item name="choose" style={{ marginLeft: '110px' }}>
                <Radio.Group onChange={onChange} value={radio}>
                  <Radio value="基础底图">基础底图</Radio>
                  <Radio value="分级底图">分级底图</Radio>
                </Radio.Group>
              </Item>
              {form.getFieldsValue().choose === '分级底图' ? (
                <Item
                  label="默认分级底图"
                  name="baseMap"
                  rules={[{ required: true, message: '请选择分级底图' }]}
                >
                  <Select onChange={handleBaseMap}>
                    {baseMap.length
277 278 279 280 281
                      ? baseMap.map((item, index) => (
                          <Option key={index} value={item}>
                            {item}
                          </Option>
                        ))
282 283 284 285 286 287 288 289 290 291 292
                      : ''}
                  </Select>
                </Item>
              ) : (
                <Item
                  label="默认基础底图"
                  name="baseMap"
                  rules={[{ required: true, message: '请选择基础底图' }]}
                >
                  <Select onChange={handleBaseMap}>
                    {keepData.length
293 294 295 296 297
                      ? keepData.map((item, index) => (
                          <Option key={index} value={item}>
                            {item}
                          </Option>
                        ))
298 299 300 301 302
                      : ''}
                  </Select>
                </Item>
              )}
              {/* <Item
303
                label="默认底图方案"
304
                name="baseMap"
305
                rules={[{ required: true, message: '请选择底图方案' }]}
306 307
              >
                <Select onChange={handleBaseMap}>
308 309 310 311 312 313 314 315 316
                  {baseMap.length
                    ? baseMap.map((item, index) => {
                        return (
                          <Option key={index} value={item}>
                            {item}
                          </Option>
                        );
                      })
                    : ''}
317
                </Select>
318
              </Item> */}
319
            </>
320
          )}
321 322 323 324 325 326
        </Form>
      )}
    </Modal>
  );
};
export default AddModal;