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

import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Tabs } from 'antd';
import DatabaseTable from './databasesTable';
import FilesTable from './filesTable';
import RestapisTable from './restapisTable';
import { push } from 'react-router-redux';

const MetadataTab = (props) => {
    const { resourceCatalogId, resourceCatalogKey, resourceCatalogPath, actions, dispatch, params } = props;
    const [activeKey, setActiveKey] = useState(params?.type || 'databases');
    useEffect(() => {
        if (!params?.type)
            setActiveKey('databases');
    }, [resourceCatalogId]);

    const onTabChange = (key) => {
        setActiveKey(key)
    }
    const onView = (record) => {
        sessionStorage.setItem('jumpSelectedKey', resourceCatalogKey);
        dispatch(push(`/metadataManagement/latestMetadata/detail/${record.id}`));
    }
    return <div>
        <Tabs defaultActiveKey="databases"
            onChange={onTabChange}
            activeKey={activeKey}
            items={[
                {
                    label: <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;库表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>,
                    key: 'databases'
                },
                {
                    label: <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;文件&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>,
                    key: 'files'
                },
                {
                    label: <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;接口&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>,
                    key: 'restapis'
                }
            ]}>
        </Tabs>
        {
            activeKey === 'databases' && resourceCatalogId ? <DatabaseTable params={params} resourceCatalogId={resourceCatalogId}
                resourceCatalogKey={resourceCatalogKey} resourceCatalogPath={resourceCatalogPath} setView={onView} /> :
                activeKey === 'files' && resourceCatalogId ? <FilesTable params={params} resourceCatalogId={resourceCatalogId}
                    resourceCatalogKey={resourceCatalogKey} resourceCatalogPath={resourceCatalogPath} /> :
                    activeKey === 'restapis' && resourceCatalogId ? < RestapisTable params={params} resourceCatalogId={resourceCatalogId}
                        resourceCatalogKey={resourceCatalogKey} resourceCatalogPath={resourceCatalogPath} /> : null
        }
    </div>
}
function mapStateToProps(state) {
    const { global, auth } = state;
    return {
        user: auth.user,
        actions: global.actions
    };
}
export default connect(mapStateToProps)(MetadataTab)