import { Space, Table, Button, Popconfirm, notification, Spin } from 'antd'; import React, { useState, useEffect } from 'react'; import styles from '../dimensionsConfig.less'; import { GetVectorDataList, DeleteVectorData, RefreshVectorData } from '@/services/webConfig/api'; import AddModal from './AddModal'; // import PreviewModal from './VectorPreviewModal' const VectorData = props => { const [treeLoading, setTreeLoading] = useState(false); // 弹窗显示 const [tileData, setTileData] = useState([]); // table表格数据 const [visible, setVisible] = useState(false); // 弹窗 const [flag, setFlag] = useState(0); // 更新list const [loading, setLoading] = useState([]); // 更新状态 const [type, setType] = useState(''); // 弹窗类型 const [formObj, setFormObj] = useState({ user: 'admin', password: 'geoserver' }); const columns = [ { title: '项目名', dataIndex: 'projectName', key: 'projectName', align: 'center', }, { title: 'IP', dataIndex: 'ip', key: 'ip', align: 'center', }, { title: '端口', dataIndex: 'port', key: 'port', align: 'center', }, { title: '数据源名', dataIndex: 'name', key: 'name', align: 'center', }, { title: '类型', dataIndex: 'type', key: 'type', align: 'center', }, { title: '发布时间', dataIndex: 'publishDatetime', key: 'publishDatetime', align: 'center', }, { title: '编辑', align: 'center', render: (text, record, index) => ( <Space> <Button type="primary" size="small" loading={loading[index]} onClick={() => enterLoading(record, index)} > 更新 </Button> <div onClick={e => e.stopPropagation()}> <Popconfirm title="是否删除该矢量数据?" okText="确认" cancelText="取消" onConfirm={() => { delConfirm(record); }} > <Button size="small" danger> 删除 </Button> </Popconfirm> </div> </Space> ), }, ]; // 更新 const enterLoading = (record, index) => { const newLoadings = [...loading]; newLoadings[index] = true; setLoading(newLoadings); let query = { id: record.id, }; RefreshVectorData(query) .then(res => { const newLoadings = [...loading]; newLoadings[index] = false; setLoading(newLoadings); if (res.msg === '') { setFlag(flag + 1); notification.success({ message: '提示', duration: 3, description: '更新元数据成功', }); } else { notification.error({ message: '提示', duration: 3, description: res.msg, }); } }) .catch(err => { const newLoadings = [...loading]; newLoadings[index] = false; setLoading(newLoadings); notification.error({ message: '提示', duration: 3, description: '服务无法访问', }); }); }; const onSubmit = prop => { setVisible(false); setFlag(flag + 1); }; const delConfirm = record => { DeleteVectorData(record.id).then(res => { if (res.msg === '') { setFlag(flag + 1); notification.success({ message: '提示', duration: 3, description: '删除元数据成功', }); } else { notification.error({ message: '提示', duration: 3, description: '删除元数据失败', }); } }); }; const handleAdd = () => { setType('add'); setVisible(true); }; useEffect(() => { renderTile(); }, [flag]); // 获取瓦片数据配置数据 const renderTile = () => { setTreeLoading(true); GetVectorDataList().then(res => { if (res.msg === 'Ok') { let arr = []; res.data.map(item => { arr.push(false); }); setLoading(arr); setTreeLoading(false); setTileData(res.data); } 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="id" scroll={{ y: 600 }} pagination={{ showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`, }} /> <AddModal visible={visible} onCancel={() => setVisible(false)} callBackSubmit={onSubmit} type={type} formObj={formObj} /> </Spin> </> ); }; export default VectorData;