TileConfig.jsx 6.6 KB
Newer Older
1
import { Space, Table, Button, Popconfirm, notification, Spin, Modal, Tooltip } from 'antd';
2
import React, { useState, useEffect } from 'react';
3 4 5
import styles from '../dimensionsConfig.less';
import { GetBaseMapList, DeleteBaseMap, GetSchemaBaseMapIsLast } from '@/services/webConfig/api';
import AddModal from './AddModal';
6
const TileData = props => {
7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 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 51 52
  const [treeLoading, setTreeLoading] = useState(false); // 弹窗显示
  const [tileData, setTileData] = useState([]); // table表格数据
  const [visible, setVisible] = useState(false); // 弹窗
  const [type, setType] = useState(''); // 弹窗类型
  const [formObj, setFormObj] = useState({});
  const [flag, setFlag] = useState(0); // 弹窗类型
  const [baseMap, setBaseMap] = useState([]); // 底图数据
  const [delVisible, setDelVisible] = useState(false); // 弹窗
  const [records, setRecords] = useState({}); // 弹窗
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      align: 'center',
    },
    {
      title: '透明度',
      dataIndex: 'opacity',
      key: 'opacity',
      align: 'center',
    },
    {
      title: 'url',
      dataIndex: 'url',
      key: 'url',
      align: 'center',
      with: 400,
      render: record => (
        <Tooltip placement="topLeft" title={record}>
          {record}
        </Tooltip>
      ),
      onCell: () => ({
        style: {
          maxWidth: 400,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
53
        },
54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87
      }),
    },
    {
      title: '编辑',
      align: 'center',
      render: (text, record) => (
        <Space>
          <Button
            type="primary"
            size="small"
            onClick={() => {
              changebaseMap(record);
            }}
          >
            编辑
          </Button>
          <div onClick={e => e.stopPropagation()}>
            <Popconfirm
              title="是否删除该底图?"
              okText="确认"
              cancelText="取消"
              onConfirm={() => {
                delConfirm(record);
              }}
            >
              <Button size="small" danger>
                删除
              </Button>
            </Popconfirm>
          </div>
        </Space>
      ),
    },
  ];
88

89 90 91 92 93 94 95 96 97
  const changebaseMap = record => {
    setType('edit');
    setFormObj(record);
    setVisible(true);
  };
  const onSubmit = prop => {
    setVisible(false);
    setFlag(flag + 1);
  };
98

99 100 101 102
  const delConfirm = record => {
    setRecords(record);
    GetSchemaBaseMapIsLast({ type: record.type }).then(res => {
      if (res.code === 0 && !res.data) {
103
        setTreeLoading(true);
shaoan123's avatar
shaoan123 committed
104
        DeleteBaseMap({
105 106 107 108
          type: record.type,
        })
          .then(res => {
            setFlag(flag + 1);
shaoan123's avatar
shaoan123 committed
109 110
            setTreeLoading(false);
            if (res.msg === '') {
111 112 113 114 115 116 117
              // form.resetFields();
              // callBackSubmit();
              notification.success({
                message: '提示',
                duration: 3,
                description: res.message || '删除成功',
              });
shaoan123's avatar
shaoan123 committed
118
            } else {
119 120 121 122 123
              notification.error({
                message: '提示',
                duration: 3,
                description: res.message || '删除失败',
              });
shaoan123's avatar
shaoan123 committed
124
            }
125 126 127
          })
          .catch(err => {
            setFlag(flag + 1);
shaoan123's avatar
shaoan123 committed
128
            setTreeLoading(false);
129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144
          });
      } else if (res.code === 0 && res.data) {
        setDelVisible(true);
      }
    });
  };
  const handleAdd = () => {
    if (baseMap.length) {
      setType('add');
      setVisible(true);
    } else {
      notification.warning({
        message: '提示',
        duration: 3,
        description: '地图类型已都存在,可编辑修改',
      });
shaoan123's avatar
shaoan123 committed
145
    }
146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 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 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230
  };
  useEffect(() => {
    renderTile();
  }, [flag]);
  // 获取瓦片数据配置数据
  const renderTile = () => {
    setTreeLoading(true);
    const baseMapData = [
      '高德街道',
      '高德影像',
      '天地图街道',
      '天地图影像',
      '百度街道',
      '百度影像',
      'mapBox地图',
      'arcgis地图',
    ];
    GetBaseMapList().then(res => {
      if (res.msg === 'Ok') {
        console.log('res', res.data);
        setTreeLoading(false);
        setTileData(res.data);
        res.data.map(item => {
          let index = baseMapData.indexOf(item.name);
          if (index != -1) {
            baseMapData.splice(index, 1);
          }
        });
        setBaseMap(baseMapData);
      } else {
        setTreeLoading(false);
        notification.error({
          message: '获取失败',
          description: res.message,
        });
      }
    });
  };
  const handleOk = () => {
    DeleteBaseMap({
      type: records.type,
    })
      .then(res => {
        setFlag(flag + 1);
        setTreeLoading(false);
        if (res.msg === '') {
          // form.resetFields();
          // callBackSubmit();
          setDelVisible(false);
          notification.success({
            message: '提示',
            duration: 3,
            description: res.message || '删除成功',
          });
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: res.message || '删除失败',
          });
        }
      })
      .catch(err => {
        setFlag(flag + 1);
        setTreeLoading(false);
      });
  };
  return (
    <>
      <Spin tip="loading..." spinning={treeLoading}>
        <div className={styles.tileBtn}>
          <Button
            type="primary"
            onClick={() => {
              handleAdd();
            }}
          >
            新增
          </Button>
        </div>
        <Table
          columns={columns}
          dataSource={tileData}
          bordered
          rowKey="type"
231
          scroll={{ y: 600 }}
232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256
          pagination={{
            showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
          }}
        />
        <Modal
          title="删除"
          visible={delVisible}
          onOk={handleOk}
          onCancel={() => setDelVisible(false)}
        >
          <p>有方案唯一地图为此地图,删掉此地图,方案也会被删掉,确认是否删除</p>
        </Modal>
        <AddModal
          visible={visible}
          onCancel={() => setVisible(false)}
          callBackSubmit={onSubmit}
          type={type}
          formObj={formObj}
          baseMap={baseMap}
        />
      </Spin>
    </>
  );
};
export default TileData;