GovernmentDataResourceCenter/web/client/src/sections/metadataManagement/containers/businessMetadata.js

import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Spin, Row, Col, Tree, Tooltip } from 'antd';
import theStyle from './style.css';
import BusinessTab from './businessTab';
let expandedKeysData = [];
let allTreeNodeKeys = [];

const BusinessMetadata = (props) => {
    const { user, dispatch, actions, clientHeight, isRequesting } = props;
    const { metadataManagement } = actions;
    const [resourceCatalogData, setResourceCatalogData] = useState([]);
    const [selectedKeys, setSelectedKeys] = useState([]);
    const [expandedKeys, setExpandedKeys] = useState([]);
    const [modalVisible, setModalVisible] = useState(false);
    const [resourceCatalogId, setResourceCatalogId] = useState('');
    const [resourceCatalogKey, setResourceCatalogKey] = useState('');
    const [resourceCatalogPath, setResourceCatalogPath] = useState([]);

    useEffect(() => {
        const jumpBusinessSelectedKey = sessionStorage.getItem('jumpBusinessSelectedKey') || null;
        initData(jumpBusinessSelectedKey);
    }, [])
    const initData = (jumpBusinessSelectedKey) => {
        dispatch(metadataManagement.getResourceCatalog()).then(res => {
            const { data } = res.payload;
            if (res.success) {
                allTreeNodeKeys = []
                const resourceCatalogData = getTreeNodeData(data, null, 'rc');
                setResourceCatalogData(resourceCatalogData);
                if (data.length) {
                    if (jumpBusinessSelectedKey || selectedKeys.length)
                        expandedKeysData = jumpBusinessSelectedKey ? [jumpBusinessSelectedKey] : selectedKeys;
                    let expandedKeys = getExpandKeys(expandedKeysData);
                    setSelectedKeys(expandedKeysData);
                    setExpandedKeys(expandedKeys);
                    expandedKeysData = [];
                } else {
                    setExpandedKeys([]);
                    setSelectedKeys([]);
                };
            }
        })
    }
    const getExpandKeys = (selectedData) => {
        const keyArr = selectedData[0].split('-');
        keyArr.shift();//['rc-2-5']->返回'rc';keyArr:['2','5']
        const allExpandedKeys = allTreeNodeKeys.filter(k => keyArr.includes(k.id.toString()));
        setResourceCatalogId(keyArr.pop());
        setResourceCatalogKey(selectedData[0]);
        const resourceCatalogPath = allExpandedKeys.map(a => a.name);
        setResourceCatalogPath(resourceCatalogPath);
        return allExpandedKeys.map(a => a.key);
    }
    const getTreeNodeData = (dataSource, parent, key) => {
        let treeData = [];
        let data = [];
        if (!parent) {
            data = dataSource.filter(ds => !ds.parent);
            if (!expandedKeysData.length && data.length) {
                expandedKeysData.push(`rc-${data[0].id}`);
            }
        } else {
            data = dataSource.filter(ds => ds.parent == parent);
        }
        treeData = data.map(ds => {
            allTreeNodeKeys.push({ name: ds.name, key: `${key}-${ds.id}`, id: ds.id })
            return { title: renderTreeNode(ds), key: `${key}-${ds.id}`, id: ds.id }
        });
        for (let d of treeData) {
            d.children = getTreeNodeData(dataSource, d.id, d.key);
        }
        return treeData
    }

    const setTreeNodeTitle = (name) => {
        let content = <span>{name}</span>
        if (name.length > 6) {
            content = <Tooltip title={name}>
                {name.substring(0, 6) + '...'}
            </Tooltip>
        }
        return content;
    }

    const renderTreeNode = (ds) => {
        return <div className={theStyle.icon} style={{ width: 180 }}>
            {setTreeNodeTitle(ds.name)}
        </div >
    };
    return <Spin spinning={isRequesting}>
        <Row>
            <Col style={{ width: 240 }}>
                <Tree
                    // showLine
                    height={clientHeight - 180}
                    expandedKeys={expandedKeys}
                    selectedKeys={selectedKeys}
                    onSelect={(keys, e) => {
                        if (e.selected) {
                            setSelectedKeys(keys);
                            getExpandKeys(keys);
                        }
                        sessionStorage.setItem('jumpBusinessSelectedKey', keys.length ? keys[0] : selectedKeys && selectedKeys[0]);
                    }}
                    onExpand={(keys) => {
                        setExpandedKeys(keys);
                    }}
                    treeData={resourceCatalogData}
                />
            </Col>
            <Col style={{ width: 'calc(100% - 240px)' }}>
                <BusinessTab resourceCatalogId={resourceCatalogId}
                    resourceCatalogKey={resourceCatalogKey}
                    resourceCatalogPath={resourceCatalogPath} />
            </Col>
        </Row>
    </Spin>
}

function mapStateToProps(state) {
    const { global, auth, resourceCatalog } = state;
    return {
        user: auth.user,
        actions: global.actions,
        clientHeight: global.clientHeight,
        resourceCatalog: resourceCatalog?.data || [],
        isRequesting: resourceCatalog.isRequesting
    };
}
export default connect(mapStateToProps)(BusinessMetadata)