TileConfig.jsx 6.6 KB
import { Space, Table, Button, Popconfirm, notification, Spin, Modal, Tooltip } from 'antd';
import React, { useState, useEffect } from 'react';
import styles from '../dimensionsConfig.less';
import { GetBaseMapList, DeleteBaseMap, GetSchemaBaseMapIsLast } from '@/services/webConfig/api';
import AddModal from './AddModal';
const TileData = props => {
  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',
        },
      }),
    },
    {
      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>
      ),
    },
  ];

  const changebaseMap = record => {
    setType('edit');
    setFormObj(record);
    setVisible(true);
  };
  const onSubmit = prop => {
    setVisible(false);
    setFlag(flag + 1);
  };

  const delConfirm = record => {
    setRecords(record);
    GetSchemaBaseMapIsLast({ type: record.type }).then(res => {
      if (res.code === 0 && !res.data) {
        setTreeLoading(true);
        DeleteBaseMap({
          type: record.type,
        })
          .then(res => {
            setFlag(flag + 1);
            setTreeLoading(false);
            if (res.msg === '') {
              // form.resetFields();
              // callBackSubmit();
              notification.success({
                message: '提示',
                duration: 3,
                description: res.message || '删除成功',
              });
            } else {
              notification.error({
                message: '提示',
                duration: 3,
                description: res.message || '删除失败',
              });
            }
          })
          .catch(err => {
            setFlag(flag + 1);
            setTreeLoading(false);
          });
      } 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: '地图类型已都存在,可编辑修改',
      });
    }
  };
  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"
          scroll={{ y: 600 }}
          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;