import React, { useEffect, useState, useRef } from 'react'; import { Spin, notification, Table, Modal, Tooltip } from 'antd'; import { ApartmentOutlined, PartitionOutlined } from '@ant-design/icons'; import Tree from '@/components/ExpendableTree'; import { GetLayerList, GetMetaDataPreview, GetLayerMetaDataPreview } from '@/services/gis/gis'; import { set } from 'lodash'; import styles from '../SchemeConfig.less'; const MeteDataModal = props => { const { metaData, visible, onCancel } = props; const [currentMeta, setCurrentMeta] = useState([]); const [metedataList, setMetedataList] = useState([]); const [isLoading, setIsLoading] = useState(false); const [loading, setLoading] = useState(false); const [expendKey, setExpendKey] = useState(''); // 保存默认展开项 const [recored, setRecored] = useState(''); const setRowClassName = e => (e.layerID === recored.layerID ? styles.clickRowStyle : ''); useEffect(() => { if (visible) { getMeteData(); } else { setMetedataList([]); setCurrentMeta([]); } }, [visible]); const getMeteData = () => { GetLayerList({ serviceName: metaData.GISServerProjectName }).then(res => { if (res.success) { getTree(); setMetedataList(res.root); setRecored(res.root[0]); } else { notification.error({ message: '提示', duration: 3, description: res.message, }); } }); }; const getTree = () => { setLoading(true); GetMetaDataPreview({ serviceName: metaData.GISServerProjectName }).then(res => { console.log(res); setExpendKey('0-0'); setLoading(false); setCurrentMeta(res); }); }; const columns = [ { title: '图层', dataIndex: 'layerName', width: 150, key: 'layerName', }, ]; // 渲染机构树 const mapTree = org => { const haveChildren = Array.isArray(org.children) && org.children.length > 0; return { title: ( <div className={styles.title1}> <span className={styles.titleText}> {org.children.length == 0 ? ( <span /> ) : ( <PartitionOutlined style={{ fontSize: '14px', color: '#1890FF' }} /> )} <span style={{ marginLeft: '5px' }}> <Tooltip placement="left" title={org.text} overlayStyle={{ maxWidth: 800, maxHeight: 900, overflowY: 'scroll', overflowX: 'hidden', }} > {org.text} </Tooltip> </span> </span> </div> ), key: org.id, // 判断它是否存在子集,若果存在就进行再次进行遍历操作,知道不存在子集便对其他的元素进行操作 children: haveChildren ? org.children.map(i => mapTree(i)) : [], }; }; const onSelect = e => { console.log(e); setRecored(e); setLoading(true); if (e.layerID != null) { GetLayerMetaDataPreview({ serviceName: metaData.GISServerProjectName, layerID: e.layerID, }).then(res => { setLoading(false); setCurrentMeta(res); }); } else { getTree(); } }; const onSubmit = () => {}; return ( <Modal visible={visible} title={metaData ? `${metaData.ServiceName}的元数据` : '元数据'} bodyStyle={{ width: '100%', height: '650px' }} style={{ top: 50, borderRadius: '20px' }} width="1050px" cancelText="取消" okText="确认" {...props} onOk={() => onSubmit()} > <div className={styles.treeHeight}> <Spin spinning={isLoading}> <div style={{ width: '1000px', height: '640px', display: 'flex' }}> <div style={{ width: '300px' }}> <Table onRow={record => ({ onClick: e => { onSelect(record); }, // 点击行 })} bordered rowClassName={setRowClassName} pagination={false} style={{ width: '300px' }} columns={columns} dataSource={metedataList} size="small" scroll={{ y: '600px', }} /> </div> <Spin spinning={loading}> <div style={{ display: 'inline-block', border: '1px solid #f0f0f0', width: '700px', }} > <Tree showIcon="true" blockNode defaultExpandAll autoExpandParent treeData={currentMeta.map(t => mapTree(t))} // selectedKeys={[menuID]} expandedKeys={currentMeta[0] && currentMeta[0].id} /> </div> </Spin> </div> </Spin> </div> </Modal> ); }; export default MeteDataModal;