AddModal.jsx 6.01 KB
Newer Older
1
import React, { useState, useEffect } from 'react';
shaoan123's avatar
shaoan123 committed
2
import { Form, Modal, Input, Select, notification } from 'antd';
3
import {
shaoan123's avatar
shaoan123 committed
4
  GettMaplayer,
5
  GetVectorService,
6
  SetServiceConfig,
7
  bindSchemeBaseMap
8 9 10 11
} from '@/services/webConfig/api';
const { Item } = Form;
const { Option } = Select;
const AddModal = props => {
shaoan123's avatar
shaoan123 committed
12
  const { callBackSubmit = () => { }, type, formObj, visible, serviceList } = props;
13
  const [loading, setLoading] = useState(false);
14 15
  const [baseMap, setBaseMap] = useState([]);
  const [pipeArr, setPipeArr] = useState([]);
16

17

18 19 20 21 22
  const [form] = Form.useForm();
  // 提交
  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
23 24 25 26 27
        setLoading(true);
        let obj = form.getFieldsValue();
        if (type === 'add') {
          bindSchemeBaseMap({
            schemename: formObj.schemename,
28 29 30
            basemapName: obj.serverName
          }).then(res => {
            setLoading(false);
shaoan123's avatar
shaoan123 committed
31
            if (res.code === 0) {
32 33
              form.resetFields();
              callBackSubmit();
34
              prompt('success', '瓦片新增成功')
35
            }
36 37
            else {
              prompt('fail', '瓦片新增失败')
38 39 40 41 42
            }
          })
        } else {
          handleEdit();
        }
43 44 45
      }
    });
  };
46 47
  const prompt = (type, content) => {
    if (type == 'success') {
48 49 50 51 52 53
      notification.success({
        message: '提示',
        duration: 3,
        description: content,
      });
    }
54
    else {
55 56 57 58 59 60 61
      notification.error({
        message: '提示',
        duration: 3,
        description: content,
      });
    }
  }
62
  const handleEdit = () => {
63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78
    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,
      })
    }
    SetServiceConfig(query)
      .then(res => {
        setLoading(false);
shaoan123's avatar
shaoan123 committed
79
        if (res.msg === "Ok") {
80 81
          form.resetFields();
          callBackSubmit();
82
          prompt('success', '方案新增成功')
83
        } else {
84
          prompt('fail', '方案新增失败')
85 86 87 88 89
        }
      })
      .catch(err => {
        setLoading(false);
      });
90 91
  };

92 93 94
  const onFinish = value => {

  };
95 96 97
  useEffect(() => {
    switch (type) {
      case 'add':
98
        addTile()
99
        break;
100 101
      case 'schemeAdd':
        pipeNetwork()
102 103 104 105 106 107
        break;
      default:
        break;
    }
  }, [visible]);

108 109
  //添加瓦片
  const addTile = () => {
110 111 112
    form.setFieldsValue({
      serverName: serviceList[0]
    })
113 114 115 116
  }
  //获取管网及默认底图
  const pipeNetwork = () => {
    form.resetFields();
shaoan123's avatar
shaoan123 committed
117
    let req1 = GettMaplayer({ terminalType: 'base', isBaseMap: true })
118 119 120
    let req2 = GetVectorService()
    let pipeArr = [], baseMap = [];
    Promise.all([req1, req2]).then(res => {
shaoan123's avatar
shaoan123 committed
121 122
      if (res[0].msg === 'Ok') {
        (res[0].data.general.baseMap.layers || []).map(item => {
123 124 125
          baseMap.push(item.servicename)
        })
      }
shaoan123's avatar
shaoan123 committed
126 127 128
      if (res[1].msg === 'Ok') {
        (res[1].data.VectorList || []).map(item => {
          pipeArr.push(item.ServiceName.split(".")[0])
129 130 131 132 133 134 135 136 137
        })
      }
      setPipeArr(pipeArr)
      setBaseMap(baseMap)
      form.setFieldsValue({
        baseMap: baseMap[0]
      })
    })
  }
138 139 140 141 142 143 144 145 146 147 148 149 150
  const layout = {
    layout: 'horizontal',
    labelCol: {
      span: 4,
    },
    wrapperCol: {
      span: 16,
    },
  };

  //选择服务名
  const handleChange = () => { }
  //选择管网
151 152 153 154 155 156
  const handleService = (value) => {
    form.setFieldsValue({
      label: value,
      url: `http://{IP}/CityInterface/rest/services/MapServer.svc/${value}`
    })
  }
157

158
  //选择底图
159
  const handleBaseMap = () => { }
160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179
  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}>
          {type === 'add' ? <Item
            label="服务名"
180
            name="serverName"
181 182
          >
            <Select onChange={handleChange}>
183
              {serviceList.length ? serviceList.map((item, index) => { return <Option key={index} value={item}>{item}</Option> }) : ''}
184 185 186 187 188 189 190 191 192 193 194 195 196 197 198
            </Select>
          </Item> :
            <>
              <Item
                label="方案名"
                name="schemename"
                rules={[{ required: true, message: '请输入方案名' }]}
              >
                <Input placeholder="请输入方案名" allowClear />
              </Item>
              <Item
                label="管网"
                name="servicename"
              >
                <Select onChange={handleService}>
199
                  {pipeArr.length ? pipeArr.map((item, index) => { return <Option key={index} value={item}>{item}</Option> }) : ''}
200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215
                </Select>
              </Item>
              <Item
                label="标签"
                name="label"
              >
                <Input placeholder="请输入标签" allowClear />
              </Item>
              <Item
                label="url"
                name="url"
              >
                <Input placeholder="请输入url" allowClear />
              </Item>
              <Item
                label="默认底图"
216
                name="baseMap"
217 218 219
                rules={[{ required: true, message: '请选择底图' }]}
              >
                <Select onChange={handleBaseMap}>
220
                  {baseMap.length ? baseMap.map((item, index) => { return <Option key={index} value={item}>{item}</Option> }) : ''}
221 222 223 224 225 226 227 228 229 230 231 232
                </Select>
              </Item>
            </>
          }


        </Form>
      )}
    </Modal>
  );
};
export default AddModal;