import React, { useState } from 'react'; import { Card, Tabs } from 'antd'; import PageContainer from '@/components/BasePageContainer'; import SQLServerTable from './sqlServer/SQLServerTable'; import OracleTable from './oracle/OracleTable'; import MongDBTable from './mongDB/MongDBTable'; import MySQLTable from './mysqltable/MySQLTable'; const { TabPane } = Tabs; const dataArr = [ { title: 'SQLServer数据库连接', key: '0', component: <SQLServerTable />, }, { title: 'Oracle数据库连接', key: '1', component: <OracleTable />, }, { title: 'MongoDB数据库连接', key: '2', component: <MongDBTable />, }, { title: 'MySQL数据库连接', key: '3', component: <MySQLTable />, }, ]; const Hr = () => <hr style={{ width: 'calc( 100% - 40px)' }} />; const DatabaseConnectConfig = props => { const [flag, setFlag] = useState(false); const [active, setActive] = useState('0'); const handleChange = e => { setActive(e); }; return ( <PageContainer> <Card> {/* <Tabs activeKey={active} onChange={e => handleChange(e)}> {dataArr.map(item => ( <TabPane tab={item.title} key={item.key}> {active === item.key && item.component} </TabPane> ))} </Tabs> */} <Hr /> <SQLServerTable /> <br /> <Hr /> <OracleTable /> <br /> <Hr /> <MongDBTable /> <br /> <Hr /> <MySQLTable /> </Card> </PageContainer> ); }; export default DatabaseConnectConfig;