VectorData.jsx 6.61 KB
import { Space, Table, Button, Popconfirm, notification, Spin } from 'antd';
import React, { useState, useEffect } from 'react';
import styles from '../dimensionsConfig.less'
import {
    GetVectorDataList,DeleteVectorData
} 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 = {
        //     serviceName: record.ServiceName,
        //     _version: 9999,
        //     solution: solutionNames
        // }

        // updatePublishedMetaData(query).then(res => {
        //     const newLoadings = [...loading];
        //     newLoadings[index] = false
        //     setLoading(newLoadings)
        //     if (res.success) {
        //         setFlag(flag + 1)
        //         notification.success({
        //             message: '提示',
        //             duration: 3,
        //             description: '更新元数据成功',
        //         });
        //     } else {
        //         notification.error({
        //             message: '提示',
        //             duration: 3,
        //             description: '更新元数据失败',
        //         });
        //     };
        // }).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: 400 }}
                    pagination={{
                        showTotal: (total, range) =>
                            `第${range[0]}-${range[1]} 条/共 ${total} 条`

                    }}
                >
                </Table>
                <AddModal
                    visible={visible}
                    onCancel={() => setVisible(false)}
                    callBackSubmit={onSubmit}
                    type={type}
                    formObj={formObj}
                />

            </Spin>
        </>
    )
}
export default VectorData