import { Space, Table, Button, Popconfirm, notification, Spin } from 'antd'; import React, { useState, useEffect } from 'react'; import styles from '../SchemeConfig.less' import { GettMaplayer, deleteConfig } 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 columns = [ { title: '服务名', dataIndex: 'servicename', key: 'servicename', align: 'center' }, { title: '标签', dataIndex: 'label', key: 'label', align: 'center' }, { title: '类型', dataIndex: 'type', key: 'type', align: 'center' }, { title: '透明度', dataIndex: 'alpha', key: 'alpha', align: 'center' }, { 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) => { const { servicename = '' } = record; setTreeLoading(true); deleteConfig({ servicename: servicename, terminalType: 'base', isBaseMap: true }).then(res => { setFlag(flag + 1) setTreeLoading(false); if (res.msg === 'Ok') { // 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); }) } 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 = ['高德地形', '高德影像', '天地图地形', '天地图影像'] GettMaplayer({ terminalType: 'base', isBaseMap: true }).then( res => { if (res.msg === "Ok") { setTreeLoading(false); setTileData(res.data.general.baseMap.layers); res.data.general.baseMap.layers.map((item) => { let index = baseMapData.indexOf(item.servicename); if (index != -1) { baseMapData.splice(index, 1); } }) setBaseMap(baseMapData) } else { setTreeLoading(false); notification.error({ message: '获取失败', description: res.message, }); } } ) }; 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: 400 }} pagination={{ showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条` }} > </Table> <AddModal visible={visible} onCancel={() => setVisible(false)} callBackSubmit={onSubmit} type={type} formObj={formObj} baseMap={baseMap} /> </Spin> </> ) } export default TileData