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;