DatabaseConfig.jsx 1.56 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
  },
];
Maofei94's avatar
Maofei94 committed
32
const Hr = () => <hr style={{ width: 'calc( 100% - 40px)' }} />;
33 34
const DatabaseConnectConfig = props => {
  const [flag, setFlag] = useState(false);
Maofei94's avatar
Maofei94 committed
35
  const [active, setActive] = useState('0');
36 37 38 39

  const handleChange = e => {
    setActive(e);
  };
Maofei94's avatar
Maofei94 committed
40

41 42 43
  return (
    <PageContainer>
      <Card>
Maofei94's avatar
Maofei94 committed
44
        {/* <Tabs activeKey={active} onChange={e => handleChange(e)}>
45 46
          {dataArr.map(item => (
            <TabPane tab={item.title} key={item.key}>
47
              {active === item.key && item.component}
48 49
            </TabPane>
          ))}
Maofei94's avatar
Maofei94 committed
50 51 52 53 54 55 56 57 58 59 60 61
        </Tabs> */}
        <Hr />
        <SQLServerTable />
        <br />
        <Hr />
        <OracleTable />
        <br />
        <Hr />
        <MongDBTable />
        <br />
        <Hr />
        <MySQLTable />
62 63 64 65 66 67
      </Card>
    </PageContainer>
  );
};

export default DatabaseConnectConfig;