MeteDataModal.jsx

import React, { useEffect, useState, useRef } from 'react';
import { Spin, notification, Table, Modal, Tooltip, message } from 'antd';
import { ApartmentOutlined, PartitionOutlined } from '@ant-design/icons';
import Tree from '@/components/ExpendableTree';
import { GetLayerList, GetMetaDataPreview, GetLayerMetaDataPreview, EditLayerMetaDataInfo } 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 [selectLayerIds,setSelectLayerIds] = useState ([])
  const layerList = useRef([])

  useEffect(() => {
    if (visible) {
      getMeteData();
    } else {
      setMetedataList([]);
      setCurrentMeta([]);
    }
  }, [visible]);

  const handleLayerTree = (list) =>{
    let treeList = []
    list.forEach(i=>{
        if(i.parentLayerId == -1){
           let param= {
            title:<span onClick={()=>{onSelect(i)}}>{i.title}</span>,
            key:i.key,
            children:list.filter(j=>j.parentLayerId === i.layerID).map(k=>{
              return {
                title: <span onClick={()=>{onSelect(k)}}>{k.title}</span>,
                key:k.key,
                children:[]
              }
            })
           }
           treeList.push(param)
        }
    })
    return treeList
  }

  const getMeteData = () => {
    setIsLoading(true)
    GetLayerList({ serviceName: metaData.GISServerProjectName }).then(res => {
      setIsLoading(false)
      if (res.success) {
        getTree();
        let allKeys = []
        let roots = []
        res.root.forEach(i=>{
          if(i.layerID){
            let key = `${i.parentLayerId}_${i.layerID}`
            let params = {
              ...i,
              title:i.layerName,
              key,
            }
            if(i.defaultVisibility && i.parentLayerId != -1){
              allKeys.push(key)
            }
            roots.push(params)
          }
        })
        layerList.current = roots
        setSelectLayerIds(allKeys)
        setMetedataList(handleLayerTree(roots));
      } else {
        notification.error({
          message: '提示',
          duration: 3,
          description: res.message,
        });
      }
    });
  };

  const getTree = () => {
    setLoading(true);
    GetMetaDataPreview({ serviceName: metaData.GISServerProjectName }).then(res => {
      setExpendKey('0-0');
      setLoading(false);
      setCurrentMeta(res);
    });
  };

  const handleCheck = (keys) =>{
    setSelectLayerIds(keys)
  }

  // 渲染机构树
  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 => {
    setLoading(true);
    if (e?.layerID != null) {
      GetLayerMetaDataPreview({
        serviceName: metaData.GISServerProjectName,
        layerID: e.layerID,
      }).then(res => {
        setLoading(false);
        setCurrentMeta(res);
      });
    } else {
      getTree();
    }
  };

  const onSubmit = () => {
    let items = [];
    layerList.current.forEach(i => {
      let defaultVisibility = selectLayerIds.includes(i.key)
      if(i.parentLayerId == -1 ){
        defaultVisibility = selectLayerIds.some(j=>j.includes(`${i.layerID}_`))
      }
      let name = i.layerName.split(':')[1]
      items.push({
        name,
        infos: {
          defaultVisibility,
        },
      });
    });
    EditLayerMetaDataInfo(metaData.GISServerProjectName,items).then(res=>{
      if(res.code ==0){
        onCancel()
        return message.success(res.data)
      }else{
        return message.info(res?.data || '元数据信息修改失败！')
      }
    })
  };
  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' }}>
              <div
                className={styles.layerTitle}
                onClick={() => {
                  onSelect();
                }}
              >
                <div className={styles.layerTitle_icon} />
                <span>地图文档</span>
              </div>
              <Tree
                showIcon="true"
                blockNode
                defaultExpandAll
                treeData={metedataList}
                checkable
                autoExpandParent={true}
                onCheck={handleCheck}
                checkedKeys={selectLayerIds}
                expandedKeys = {metedataList?.[0]?.key || ''}
              />
            </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;