DatabaseConfig.jsx 1.31 KB
Newer Older
1 2
import React, { useState } from 'react';
import { Card, Tabs } from 'antd';
3
import PageContainer from '@/components/BasePageContainer';
4 5 6 7
import SQLServerTable from './sqlServer/SQLServerTable';
import OracleTable from './oracle/OracleTable';
import MongDBTable from './mongDB/MongDBTable';
import MySQLTable from './mysqltable/MySQLTable';
8 9 10 11 12 13 14 15 16 17 18

const { TabPane } = Tabs;
const dataArr = [
  {
    title: 'SQLServer数据库连接',
    key: '0',
    component: <SQLServerTable />,
  },
  {
    title: 'Oracle数据库连接',
    key: '1',
19
    component: <OracleTable />,
20 21 22 23
  },
  {
    title: 'MongoDB数据库连接',
    key: '2',
24
    component: <MongDBTable />,
25 26 27 28
  },
  {
    title: 'MySQL数据库连接',
    key: '3',
29
    component: <MySQLTable />,
30 31 32 33
  },
];
const DatabaseConnectConfig = props => {
  const [flag, setFlag] = useState(false);
Maofei94's avatar
Maofei94 committed
34
  const [active, setActive] = useState('0');
35 36 37 38 39

  const handleChange = e => {
    console.log(e);
    setActive(e);
  };
40 41 42
  return (
    <PageContainer>
      <Card>
43
        <Tabs activeKey={active} onChange={e => handleChange(e)}>
44 45
          {dataArr.map(item => (
            <TabPane tab={item.title} key={item.key}>
46
              {active === item.key && item.component}
47 48 49 50 51 52 53 54 55
            </TabPane>
          ))}
        </Tabs>
      </Card>
    </PageContainer>
  );
};

export default DatabaseConnectConfig;