1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import React, { useState, useEffect } from 'react';
import { Card, Tabs, Form, Input, Button, notification } from 'antd';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
import { SaveMainServer, GetMainServer, DeleteMainServer } from '@/services/database/api';
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';
import MasterTable from './master/MasterTable';
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 [form] = Form.useForm();
const [flag, setFlag] = useState(false);
const [active, setActive] = useState('0');
const [isLink, setIsLink] = useState(false); //主站配置是否连接
useEffect(() => {
getData();
}, []);
const handleChange = e => {
setActive(e);
};
const getData = () => {
GetMainServer().then(res => {
if (res.code === 0) {
form.setFieldsValue({ url: res.data });
// if (res.data) {
// setIsLink(true);
// form.setFieldsValue({ url: res.data });
// } else {
// setIsLink(false);
// form.setFieldsValue({ url: window.location.origin });
// }
}
});
};
const deleteConfig = () => {
DeleteMainServer().then(res => {
if (res.code === 0) {
notification.success({ message: '提示', duration: 3, description: '删除成功' });
getData();
} else {
notification.error({ message: '提示', duration: 3, description: res.msg });
}
});
};
// 提交主站配置
const onFinish = values => {
console.log('Success:', values);
SaveMainServer(values).then(res => {
if (res.code === 0) {
notification.success({
message: '提示',
duration: 3,
description: '保存成功',
});
getData();
} else {
notification.error({
message: '提示',
duration: 3,
description: res.msg,
});
}
});
};
return (
<PageContainer>
<div style={{ width: '100%', height: '100%', overflowY: 'scroll' }}>
<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> */}
<div style={{ marginBottom: '15px' }}>
<SQLServerTable />
</div>
<div style={{ marginBottom: '15px' }}>
<OracleTable />
</div>
<div style={{ marginBottom: '15px' }}>
<MongDBTable />
</div>
<div style={{ marginBottom: '15px' }}>
<MySQLTable />
</div>
<MasterTable />
</Card>
</div>
</PageContainer>
);
};
export default DatabaseConnectConfig;