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, Input } from 'antd';
import BusinessTab from './businessTab';
let expandedKeysData = [];
let allTreeNodeKeys = [];
let resourceCatalogRawData = [];

const BusinessMetadata = (props) => {
    const { user, dispatch, actions, clientHeight, isRequesting, resourceCatalog } = props;
    const { metadataManagement } = actions;
    const [isAdmin, setIsAdmin] = useState(false);
    const [resourceCatalogData, setResourceCatalogData] = useState([]);
    const [selectedKeys, setSelectedKeys] = useState([]);
    const [expandedKeys, setExpandedKeys] = useState([]);
    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) {
                resourceCatalogRawData = data;
                allTreeNodeKeys = []
                const resourceCatalogData = getTreeNodeData(data, null, 'rc', [], null);
                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()));
        const resourceCatalogId = keyArr.pop();
        setResourceCatalogId(resourceCatalogId);
        setIsAdmin(user?.username === 'SuperAdmin'
            || (user?.role === '系统管理员' && user?.orgId == resourceCatalogRawData.find(a => a.id == resourceCatalogId)?.orgId));
        setResourceCatalogKey(selectedData[0]);
        const resourceCatalogPath = allExpandedKeys.map(a => a.name);
        setResourceCatalogPath(resourceCatalogPath);
        return allExpandedKeys.map(a => a.key);
    }
    const getTreeNodeData = (dataSource, parent, key, searchKeys, searchvalue) => {
        let treeData = [];
        let data = [];
        if (!parent) {
            data = dataSource.filter(ds => !ds.parent);
            if (!expandedKeysData.length && data.length) {
                if (searchKeys && searchKeys.includes(`rc-${data[0].id}`) || !searchvalue)
                    expandedKeysData.push(`rc-${data[0].id}`);
            }
        } else {
            data = dataSource.filter(ds => ds.parent == parent);
        }
        data.map(ds => {
            if (!searchvalue)
                allTreeNodeKeys.push({ name: ds.name, key: `${key}-${ds.id}`, id: ds.id })
            if (searchKeys && searchKeys.includes(`${key}-${ds.id}`) || !searchvalue) {
                treeData.push({ title: renderTreeNode(ds, dataSource), key: `${key}-${ds.id}`, id: ds.id })
            }
        });
        for (let d of treeData) {
            d.children = getTreeNodeData(dataSource, d.id, d.key, searchKeys, searchvalue);
        }
        return treeData
    }

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

    const renderTreeNode = (ds) => {
        return <div style={{ width: 180 }}>
            {setTreeNodeTitle(ds.name)}
        </div >
    };
    const onSearch = value => {
        let searchKeys = [];
        let selectedKeys = [];
        //allTreeNodeKeys map遍历每个节点，找出所有相关节点及父节点
        allTreeNodeKeys.map(item => {
            if (item.name.indexOf(value) > -1) {
                let arr = item.key.split('-')
                if (arr.length) {
                    let str = '';
                    for (let i = 1; i < arr.length - 1; i++) {
                        if (str) {
                            str += '-' + arr[i];
                        }
                        else {
                            str += 'rc-' + arr[i];
                        }
                        if (!searchKeys.includes(str))
                            searchKeys.push(str);
                    }
                }
                if (!searchKeys.includes(item.key))
                    searchKeys.push(item.key);
                if (!selectedKeys.length)
                    selectedKeys.push(item.key);
            }
        });
        const resourceCatalogData = getTreeNodeData(resourceCatalog, null, 'rc', searchKeys, value);
        setResourceCatalogData(resourceCatalogData);
        if (selectedKeys.length) {
            let expandedKeys = getExpandKeys(selectedKeys);
            setSelectedKeys(selectedKeys);
            setExpandedKeys(expandedKeys);
        } else {
            setSelectedKeys([]);
            setExpandedKeys([]);
            setResourceCatalogId('');
            setResourceCatalogKey('');
            setResourceCatalogPath([]);
        }
    };
    const onChangeSearch = e => {
        const { value } = e.target;
        onSearch(value);
    };
    return <Spin spinning={isRequesting}>
        <Row>
            <Col style={{ width: 240 }}>
                <Input style={{ width: 220, marginBottom: 16 }} placeholder="输入资源目录关键字搜索"
                    allowClear onChange={onChangeSearch}
                    onKeyPress={onChangeSearch} />
                <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}
                    isAdmin={isAdmin} />
            </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)