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

import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Spin, Row, Col, Tree, Button, Tooltip, Popconfirm } from 'antd';
import { PlusCircleOutlined, EditOutlined, MinusCircleOutlined } from '@ant-design/icons';
import theStyle from './style.css';
import ResourceCatalogModal from '../components/resourceCatalogModal';
import MetadataTab from './metadataTab';
import MetadataDetails from './metadataDetails';
let expandedKeysData = [];
let allTreeNodeKeys = [];

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

    useEffect(() => {
        const jumpSelectedKey = sessionStorage.getItem('jumpSelectedKey') || null;
        initData(true, jumpSelectedKey);
    }, [])
    const initData = (configRefresh, jumpSelectedKey) => {
        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 (configRefresh) {
                        if (jumpSelectedKey || selectedKeys.length)
                            expandedKeysData = jumpSelectedKey ? [jumpSelectedKey] : 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, dataSource), 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, dataSource) => {
        return <div className={theStyle.icon} style={{ width: 180 }}>
            {setTreeNodeTitle(ds.name)}
            <EditOutlined title='修改' className={theStyle.tip} onClick={() => {
                let record = JSON.parse(JSON.stringify(ds));
                let parentData = dataSource.filter(rc => rc.id === record.parent);
                record.parentName = parentData.length ? parentData[0].name : '';
                setEditData({ record: record, title: '修改子类', child: ds.parent ? true : false, });
                setModalVisible(true);
            }} />
            <Popconfirm placement="top" title={'确定删除该资源目录吗？'} onConfirm={() => {
                dispatch(metadataManagement.delResourceCatalog(ds.id)).then((res) => {
                    if (res.success) {
                        expandedKeysData = []; initData(true);
                    }
                    setModalVisible(false);
                });
            }} okText="确定" cancelText="取消">
                <MinusCircleOutlined title='删除' className={theStyle.tip} />
            </Popconfirm>
            <PlusCircleOutlined title='新建' className={theStyle.tip} onClick={() => {
                setEditData({ record: { parent: ds.id, parentName: ds.name }, title: '新建子类', child: true, add: true });
                setModalVisible(true);
            }} />
        </div >
    };
    //新建、修改
    const onConfirm = (values) => {
        let obj = { ...values }
        if (editData.add) {
            obj = { ...values, ...editData.record || {} }
            dispatch(metadataManagement.postResourceCatalog(obj)).then(() => {
                initData(); setModalVisible(false);
            });
        } else {
            dispatch(metadataManagement.putResourceCatalog(editData.record.id, obj)).then(() => {
                initData(); setModalVisible(false);
            });
        }
    }
    return <Spin spinning={isRequesting}>
        <Row>
            <Col style={{ width: 240 }}>
                <Button type='primary' style={{ marginBottom: 16 }} onClick={() => {
                    setEditData({ title: '新建资源目录', add: true });
                    setModalVisible(true);
                }}>新建资源目录</Button>
                <Tree
                    // showLine
                    height={clientHeight - 180}
                    expandedKeys={expandedKeys}
                    selectedKeys={selectedKeys}
                    onSelect={(keys, e) => {
                        if (e.selected) {
                            setSelectedKeys(keys);
                            getExpandKeys(keys);
                        }
                        sessionStorage.setItem('jumpSelectedKey', keys.length ? keys[0] : selectedKeys && selectedKeys[0]);
                        history.push(`/metadataManagement/latestMetadata`);
                    }}
                    onExpand={(keys) => {
                        setExpandedKeys(keys);
                    }}
                    treeData={resourceCatalogData}
                />
            </Col>
            <Col style={{ width: 'calc(100% - 240px)' }}>
                {location.pathname.indexOf('detail') > -1 ?
                    <MetadataDetails resourceCatalogId={resourceCatalogId}
                        resourceCatalogKey={resourceCatalogKey}
                        resourceCatalogPath={resourceCatalogPath}
                        match={match} /> :
                    <MetadataTab resourceCatalogId={resourceCatalogId}
                        resourceCatalogKey={resourceCatalogKey}
                        resourceCatalogPath={resourceCatalogPath} />
                }
            </Col>
        </Row>
        {
            modalVisible ?
                <ResourceCatalogModal
                    resourceCatalog={resourceCatalog}
                    editData={editData}
                    onCancel={() => setModalVisible(false)}
                    onConfirm={onConfirm} /> : ''
        }
    </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)(LatestMetadata)