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

import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Tabs } from 'antd';
import BusinessDatabaseTable from './businessDatabaseTable';
import BusinessFilesTable from './businessFilesTable';
import BusinessRestapisTable from './businessRestapisTable';

const BusinessTab = (props) => {
    const { resourceCatalogId, resourceCatalogKey, resourceCatalogPath, actions, dispatch, isAdmin } = props;
    const [activeKey, setActiveKey] = useState('databases');
    useEffect(() => {
        setActiveKey('databases');
    }, [resourceCatalogId]);

    const onTabChange = (key) => {
        setActiveKey(key)
    }
    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 ? <BusinessDatabaseTable resourceCatalogId={resourceCatalogId}
                resourceCatalogKey={resourceCatalogKey} resourceCatalogPath={resourceCatalogPath} isAdmin={isAdmin} /> :
                activeKey === 'files' && resourceCatalogId ? <BusinessFilesTable resourceCatalogId={resourceCatalogId}
                    resourceCatalogKey={resourceCatalogKey} resourceCatalogPath={resourceCatalogPath} isAdmin={isAdmin} /> :
                    activeKey === 'restapis' && resourceCatalogId ? <BusinessRestapisTable resourceCatalogId={resourceCatalogId}
                        resourceCatalogKey={resourceCatalogKey} resourceCatalogPath={resourceCatalogPath} isAdmin={isAdmin} /> :
                        null
        }
    </div>
}
function mapStateToProps(state) {
    const { global, auth } = state;
    return {
        user: auth.user,
        actions: global.actions
    };
}
export default connect(mapStateToProps)(BusinessTab)