import { Button,Spin } from 'antd'; import React, { useState, useEffect } from 'react'; import styles from '../dimensionsConfig.less' import { GetSchemaInfoList } from '@/services/webConfig/api'; import AddModal from './AddModal' import Cards from './components/card' const VectorData = props => { const [treeLoading, setTreeLoading] = useState(false);// 弹窗显示 const [tileData, setTileData] = useState([]); // 页面初始化数据 const [visible, setVisible] = useState(false); // 弹窗 const [flag, setFlag] = useState(0); // 状态更新 const [type, setType] = useState(''); // 弹窗类型 const [formObj, setFormObj] = useState({}); const onSubmit = prop => { setVisible(false); setFlag(flag + 1) }; const onDeletebaseMap = (value) => { setFlag(flag + 1) } const handleAdd = () => { setType('schemeAdd'); setVisible(true); } useEffect(() => { renderTile(); }, [flag]); // 获取瓦片数据配置数据 const renderTile = () => { setTreeLoading(true); GetSchemaInfoList().then( res => { if (res.msg ==='Ok') { setTreeLoading(false); setTileData(res.data); } else { setTreeLoading(false); } } ) }; return ( <> <Spin tip="loading..." spinning={treeLoading}> <div style={{ width: 'calc(100vw - 265px)' }}> <div className={styles.tileBtn}> <Button type="primary" onClick={() => { handleAdd(); }} > 新增 </Button> </div> <div className={styles.cardsList}> {tileData && tileData.length ? tileData.map((item, index) => { return <div className={styles.cardItem} key={index} span={5} offset={2} style={{ marginBottom: '1rem' }}> <Cards item={item} deletebaseMaps={onDeletebaseMap} ></Cards> </div> }) : ''} </div > <AddModal visible={visible} onCancel={() => setVisible(false)} callBackSubmit={onSubmit} type={type} formObj={formObj} /> </div> </Spin> </> ) } export default VectorData