Skip to content

C
CivManage
Commit dc9158f4 authored by Maofei94's avatar Maofei94
Browse files
Options

feat(page/database/dataconfig): 数据库连接配置

parent 124932cc
Hide whitespace changes
Inline Side-by-side
Showing with 1193 additions and 17 deletions
src/pages/database/databaseConfig/DatabaseConfig.jsx
View file @ dc9158f4
import React, { useState } from 'react';
import { Card, Tabs } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import SQLServerTable from './SQLServerTable';
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 = [
......@@ -13,28 +16,34 @@ const dataArr = [
{
title: 'Oracle数据库连接',
key: '1',
component: <SQLServerTable />,
component: <OracleTable />,
},
{
title: 'MongoDB数据库连接',
key: '2',
component: <SQLServerTable />,
component: <MongDBTable />,
},
{
title: 'MySQL数据库连接',
key: '3',
component: <SQLServerTable />,
component: <MySQLTable />,
},
];
const DatabaseConnectConfig = props => {
const [flag, setFlag] = useState(false);
const [active, setActive] = useState('3');
const handleChange = e => {
console.log(e);
setActive(e);
};
return (
<PageContainer>
<Card>
<Tabs defaultValue="0">
<Tabs activeKey={active} onChange={e => handleChange(e)}>
{dataArr.map(item => (
<TabPane tab={item.title} key={item.key}>
{item.component}
{active === item.key && item.component}
</TabPane>
))}
</Tabs>
......
src/pages/database/databaseConfig/mongDB/AddModal.jsx 0 → 100644
View file @ dc9158f4
import React, { useState, useEffect } from 'react';
import { Form, Modal, Input, Select, notification } from 'antd';
import {
addMongoDBConnString,
editMongoDBConnString,
} from '@/services/database/api';
const { Item } = Form;
const { Option } = Select;
const AddModal = props => {
const { callBackSubmit = () => {}, type, formObj, visible } = props;
const [loading, setLoading] = useState(false);
const [showReplicaSet, setShowReplicaSet] = useState(false);
const [form] = Form.useForm();
// 提交
const onSubmit = () => {
form.validateFields().then(validate => {
if (validate) {
setLoading(true);
let obj = form.getFieldsValue();
if (type === 'add') {
addMongoDBConnString({
_version: 9999,
_dc: Date.now(),
...obj,
})
.then(res => {
setLoading(false);
if (res.success) {
form.resetFields();
callBackSubmit();
notification.success({
message: '提示',
duration: 3,
description: res.message || '新增成功',
});
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message || '新增失败',
});
}
})
.catch(err => {
setLoading(false);
console.error(err);
});
} else if (type === 'edit') {
handleEdit();
}
}
});
};
const handleEdit = () => {
let obj = form.getFieldsValue();
editMongoDBConnString({
_version: 9999,
_dc: Date.now(),
...obj,
oldName: formObj.name,
})
.then(res => {
setLoading(false);
if (res.success) {
form.resetFields();
callBackSubmit();
notification.success({
message: '提示',
duration: 3,
description: res.message || '编辑成功',
});
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message || '编辑失败',
});
}
})
.catch(err => setLoading(false));
};
const onFinish = value => {};
const handleSelect = e => {
console.log(e);
e === '复制集' ? setShowReplicaSet(true) : setShowReplicaSet(false);
console.log(form.getFieldsValue());
};
useEffect(() => {
console.log(type);
switch (type) {
case 'add':
form.resetFields();
break;
case 'edit':
formObj.type === '复制集'
? setShowReplicaSet(true)
: setShowReplicaSet(false);
form.setFieldsValue({ ...formObj });
break;
default:
break;
}
return () => {
form.getFieldsValue().type === '复制集'
? setShowReplicaSet(true)
: setShowReplicaSet(false);
};
}, [visible]);
useEffect(() => {
console.log(form.getFieldsValue(), '103');
}, [type === 'edit']);
const layout = {
layout: 'horizontal',
labelCol: {
span: 4,
},
wrapperCol: {
span: 16,
},
};
const selectArr = [
{
key: '0',
title: '单实例',
value: '单实例',
},
{
key: '1',
title: '复制集',
value: '复制集',
},
{
key: '2',
title: '分片群',
value: '分片群',
},
];
return (
<Modal
title={`${type === 'add' ? '添加' : '编辑'}MongDB数据库配置连接`}
bodyStyle={{ width: '100%', minHeight: '100px' }}
style={{ top: '150px' }}
width="700px"
destroyOnClose
maskClosable={false}
cancelText="取消"
okText="确认"
{...props}
onOk={() => onSubmit()}
confirmLoading={loading}
>
{visible && (
<Form form={form} {...layout} onFinish={onFinish}>
<Item
label="实例类型"
name="type"
rules={[{ required: true, message: '请选择实例类型' }]}
>
<Select onChange={e => handleSelect(e)}>
{selectArr &&
selectArr.map(item => (
<Option key={item.key} value={item.value}>
{item.title}
</Option>
))}
</Select>
</Item>
<Item
label="标签"
name="name"
rules={[{ required: true, message: '请输入标签' }]}
>
<Input placeholder="请输入标签" allowClear />
</Item>
<Item
label="IP"
name="ip"
rules={[{ required: true, message: '请输入IP' }]}
>
<Input placeholder="请输入IP" allowClear />
</Item>
<Item
label="端口"
name="port"
rules={[{ required: true, message: '请输入端口号' }]}
>
<Input placeholder="请输入端口号" allowClear />
</Item>
<Item
label="数据库名"
name="dbName"
rules={[{ required: true, message: '请输入数据库名' }]}
>
<Input placeholder="请输入数据库名" allowClear />
</Item>
{showReplicaSet && (
<Item
label="复制集名称"
name="replicaSet"
rules={[{ required: true, message: '请输入复制集名称' }]}
>
<Input placeholder="请输入数据库名" allowClear />
</Item>
)}
{/* <Item
label="用户名"
name="userName"
rules={[{ required: true, message: '请输入用户名' }]}
>
<Input placeholder="请输入用户名" allowClear />
</Item>
<Item
label="密码"
name="password"
rules={[{ required: true, message: '请输入密码' }]}
>
<Input placeholder="请输入密码" allowClear />
</Item> */}
</Form>
)}
</Modal>
);
};
export default AddModal;
src/pages/database/databaseConfig/mongDB/MongDBTable.jsx 0 → 100644
View file @ dc9158f4
import React, { useEffect, useState } from 'react';
import ProTable from '@ant-design/pro-table';
import { Button, Tag, Popconfirm, notification } from 'antd';
import {
getMongoDBConnString,
deleteConnString,
getMongoDBConnectionTest,
} from '@/services/database/api';
import AddModal from './AddModal';
const MongDBTable = props => {
const [flag, setFlag] = useState(1);
const [dataList, setDataList] = useState([]); // table数据
const [visible, setVisible] = useState(false); // 弹窗
const [tableLoading, setTableLoading] = useState(false); // tableLoading
const [type, setType] = useState('add'); // 弹窗类型
const [formObj, setFormObj] = useState({});
useEffect(() => {
setTableLoading(true);
getMongoDBConnString({
_version: 9999,
_dc: Date.now(),
})
.then(res => {
setTableLoading(false);
if (res) {
setDataList(res);
}
})
.catch(err => {
setTableLoading(false);
});
}, [flag]);
// 新增
const handleAdd = (val, item) => {
setType('add');
setVisible(true);
};
// 测试连接
const handleCon = (val, item) => {
setTableLoading(true);
getMongoDBConnectionTest({
name: item.name,
_version: 9999,
_dc: Date.now(),
})
.then(res => {
setTableLoading(false);
if (res.success) {
notification.success({
message: '通知',
description: res.message || '连接成功',
duration: 3,
});
} else {
notification.error({
message: '通知',
description: res.message || '连接失败',
duration: 3,
});
}
})
.catch(err => {
setTableLoading(false);
console.error(err);
});
};
// 删除
const handleDel = (val, item) => {
const { name = '' } = item;
deleteConnString({
name,
_version: 9999,
_dc: Date.now(),
})
.then(res => {
setFlag(flag + 1);
if (res.success) {
notification.success({
message: '提示',
duration: 3,
description: res.message || '删除成功',
});
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message || '删除失败',
});
}
})
.catch(err => console.error(err));
};
// 编辑
const handleEdit = (val, item) => {
setType('edit');
setFormObj(item);
setVisible(true);
};
const onSubmit = prop => {
console.log(prop);
setVisible(false);
setFlag(flag + 1);
};
const columns = [
{
title: '标签',
dataIndex: 'name',
key: 'name',
},
{
title: 'ip',
dataIndex: 'ip',
key: 'ip',
},
{
title: '端口',
dataIndex: 'port',
key: 'port',
},
{
title: '数据库名',
dataIndex: 'dbName',
key: 'dbName',
},
{
title: '类型',
dataIndex: 'type',
key: 'type',
},
{
title: '复制集',
dataIndex: 'replicaSet',
key: 'replicaSet',
},
// {
// title: '用户名',
// dataIndex: 'userName',
// key: 'userName',
// },
// {
// title: '密码',
// dataIndex: 'password',
// key: 'password',
// },
{
title: '操作',
dataIndex: 'options',
key: 'options',
width: 300,
render: (val, item) => [
<Tag color="#2db7f5" onClick={() => handleCon(val, item)}>
测试连接
</Tag>,
<Tag color="gold" onClick={() => handleEdit(val, item)}>
编辑
</Tag>,
<Popconfirm
title={`是否删除连接${item.name}`}
cancelText="取消"
okText="确认"
// placement="right"
onConfirm={() => handleDel(val, item)}
>
<Tag color="#f50">删除</Tag>
</Popconfirm>,
],
},
];
return (
<>
<ProTable
headerTitle="MongDB数据库"
rowKey="key"
search={false}
columns={columns}
bordered
loading={tableLoading}
dataSource={dataList}
options={{ reload: false, fullScreen: false }}
toolBarRender={() => [
<Button
type="primary"
onClick={() => {
handleAdd();
}}
>
添加MongDB数据库连接
</Button>,
]}
/>
<AddModal
visible={visible}
onCancel={() => setVisible(false)}
callBackSubmit={onSubmit}
type={type}
formObj={formObj}
/>
</>
);
};
export default MongDBTable;
src/pages/database/databaseConfig/mysqltable/AddModal.jsx 0 → 100644
View file @ dc9158f4
import React, { useState, useEffect } from 'react';
import { Form, Modal, Input, Select, notification } from 'antd';
import {
addMySQLConnString,
editMySQLConnString,
} from '@/services/database/api';
const { Item } = Form;
const { Option } = Select;
const AddModal = props => {
console.log(props);
const { callBackSubmit = () => {}, type, formObj, visible } = props;
const [loading, setLoading] = useState(false);
const [form] = Form.useForm();
// 提交
const onSubmit = () => {
form.validateFields().then(validate => {
if (validate) {
setLoading(true);
let obj = form.getFieldsValue();
if (type === 'add') {
addMySQLConnString({
_version: 9999,
_dc: Date.now(),
...obj,
})
.then(res => {
setLoading(false);
if (res.success) {
form.resetFields();
callBackSubmit();
notification.success({
message: '提示',
duration: 3,
description: res.message || '新增成功',
});
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message || '新增失败',
});
}
})
.catch(err => {
setLoading(false);
console.error(err);
});
} else if (type === 'edit') {
handleEdit();
}
}
});
};
const handleEdit = () => {
let obj = form.getFieldsValue();
editMySQLConnString({
_version: 9999,
_dc: Date.now(),
...obj,
oldName: formObj.name,
})
.then(res => {
setLoading(false);
if (res.success) {
form.resetFields();
callBackSubmit();
notification.success({
message: '提示',
duration: 3,
description: res.message || '编辑成功',
});
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message || '编辑失败',
});
}
})
.catch(err => setLoading(false));
};
const onFinish = value => {
console.log(value, 'value');
};
useEffect(() => {
console.log(type);
switch (type) {
case 'add':
form.resetFields();
break;
case 'edit':
form.setFieldsValue({ ...formObj });
break;
default:
break;
}
}, [visible]);
const layout = {
layout: 'horizontal',
labelCol: {
span: 4,
},
wrapperCol: {
span: 16,
},
};
return (
<Modal
title={`${type === 'add' ? '添加' : '编辑'}MySQL数据库配置连接`}
bodyStyle={{ width: '100%', minHeight: '100px' }}
style={{ top: '150px' }}
width="700px"
destroyOnClose
maskClosable={false}
cancelText="取消"
okText="确认"
{...props}
onOk={() => onSubmit()}
confirmLoading={loading}
>
{visible && (
<Form form={form} {...layout} onFinish={onFinish}>
<Item
label="标签"
name="name"
rules={[{ required: true, message: '请输入标签' }]}
>
<Input placeholder="请输入标签" allowClear />
</Item>
<Item
label="IP"
name="ip"
rules={[{ required: true, message: '请输入IP' }]}
>
<Input placeholder="请输入IP" allowClear />
</Item>
<Item
label="数据库名"
name="dbName"
rules={[{ required: true, message: '请输入数据库名' }]}
>
<Input placeholder="请输入数据库名" allowClear />
</Item>
<Item
label="用户名"
name="userName"
rules={[{ required: true, message: '请输入用户名' }]}
>
<Input placeholder="请输入用户名" allowClear />
</Item>
<Item
label="密码"
name="password"
rules={[{ required: true, message: '请输入密码' }]}
>
<Input placeholder="请输入密码" allowClear />
</Item>
</Form>
)}
</Modal>
);
};
export default AddModal;
src/pages/database/databaseConfig/mysqltable/MySQLTable.jsx 0 → 100644
View file @ dc9158f4
import React, { useEffect, useState } from 'react';
import ProTable from '@ant-design/pro-table';
import { Button, Tag, Popconfirm, notification } from 'antd';
import {
getMySQLConnString,
getMySQLConnectionTest,
deleteConnString,
} from '@/services/database/api';
import AddModal from './AddModal';
const MySQLTable = props => {
const [flag, setFlag] = useState(1);
const [dataList, setDataList] = useState([]); // table数据
const [visible, setVisible] = useState(false); // 弹窗
const [tableLoading, setTableLoading] = useState(false); // tableLoading
const [type, setType] = useState('add'); // 弹窗类型
const [formObj, setFormObj] = useState({});
useEffect(() => {
setTableLoading(true);
getMySQLConnString({
_version: 9999,
_dc: Date.now(),
})
.then(res => {
setTableLoading(false);
if (res) {
setDataList(res);
}
})
.catch(err => {
setTableLoading(false);
});
}, [flag]);
// 新增
const handleAdd = (val, item) => {
setType('add');
setVisible(true);
};
// 测试连接
const handleCon = (val, item) => {
setTableLoading(true);
getMySQLConnectionTest({
name: item.name,
_version: 9999,
_dc: Date.now(),
})
.then(res => {
setTableLoading(false);
if (res.success) {
notification.success({
message: '通知',
description: res.message || '连接成功',
duration: 3,
});
} else {
notification.error({
message: '通知',
description: res.message || '连接失败',
duration: 3,
});
}
})
.catch(err => {
setTableLoading(false);
console.error(err);
});
};
// 删除
const handleDel = (val, item) => {
const { name = '' } = item;
deleteConnString({
name,
_version: 9999,
_dc: Date.now(),
})
.then(res => {
setFlag(flag + 1);
if (res.success) {
notification.success({
message: '提示',
duration: 3,
description: res.message || '删除成功',
});
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message || '删除失败',
});
}
})
.catch(err => console.error(err));
};
// 编辑
const handleEdit = (val, item) => {
setType('edit');
setFormObj(item);
setVisible(true);
};
const onSubmit = prop => {
console.log(prop);
setVisible(false);
setFlag(flag + 1);
};
const columns = [
{
title: '标签',
dataIndex: 'name',
key: 'name',
},
{
title: 'IP',
dataIndex: 'ip',
key: 'ip',
},
{
title: '数据库名',
dataIndex: 'dbName',
key: 'dbName',
},
{
title: '用户名',
dataIndex: 'userName',
key: 'userName',
},
{
title: '密码',
dataIndex: 'password',
key: 'password',
},
{
title: '操作',
dataIndex: 'options',
key: 'options',
width: 300,
render: (val, item) => [
<Tag color="#2db7f5" onClick={() => handleCon(val, item)}>
测试连接
</Tag>,
<Tag color="gold" onClick={() => handleEdit(val, item)}>
编辑
</Tag>,
<Popconfirm
title={`是否删除连接${item.name}`}
cancelText="取消"
okText="确认"
// placement="right"
onConfirm={() => handleDel(val, item)}
>
<Tag color="#f50">删除</Tag>
</Popconfirm>,
],
},
];
return (
<>
<ProTable
headerTitle="MySQL数据库"
rowKey="key"
search={false}
columns={columns}
bordered
loading={tableLoading}
dataSource={dataList}
options={{ reload: false, fullScreen: false }}
toolBarRender={() => [
<Button
type="primary"
onClick={() => {
handleAdd();
}}
>
添加MySQL连接
</Button>,
]}
/>
<AddModal
visible={visible}
onCancel={() => setVisible(false)}
callBackSubmit={onSubmit}
type={type}
formObj={formObj}
/>
</>
);
};
export default MySQLTable;
src/pages/database/databaseConfig/oracle/AddModal.jsx 0 → 100644
View file @ dc9158f4
import React, { useState, useEffect } from 'react';
import { Form, Modal, Input, Select, notification } from 'antd';
import {
addOracleConnString,
editOracleConnString,
} from '@/services/database/api';
const { Item } = Form;
const { Option } = Select;
const AddModal = props => {
const { callBackSubmit = () => {}, type, formObj, visible } = props;
const [loading, setLoading] = useState(false);
const [form] = Form.useForm();
// 提交
const onSubmit = () => {
form.validateFields().then(validate => {
if (validate) {
setLoading(true);
let obj = form.getFieldsValue();
if (type === 'add') {
addOracleConnString({
_version: 9999,
_dc: Date.now(),
...obj,
})
.then(res => {
setLoading(false);
if (res.success) {
form.resetFields();
callBackSubmit();
notification.success({
message: '提示',
duration: 3,
description: res.message || '新增成功',
});
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message || '新增失败',
});
}
})
.catch(err => {
setLoading(false);
console.error(err);
});
} else if (type === 'edit') {
handleEdit();
}
}
});
};
const handleEdit = () => {
let obj = form.getFieldsValue();
editOracleConnString({
_version: 9999,
_dc: Date.now(),
...obj,
oldName: formObj.name,
})
.then(res => {
setLoading(false);
if (res.success) {
form.resetFields();
callBackSubmit();
notification.success({
message: '提示',
duration: 3,
description: res.message || '编辑成功',
});
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message || '编辑失败',
});
}
})
.catch(err => setLoading(false));
};
const onFinish = value => {
console.log(value, 'value');
};
useEffect(() => {
console.log(type);
switch (type) {
case 'add':
form.resetFields();
break;
case 'edit':
form.setFieldsValue({ ...formObj });
break;
default:
break;
}
}, [visible]);
const layout = {
layout: 'horizontal',
labelCol: {
span: 4,
},
wrapperCol: {
span: 16,
},
};
return (
<Modal
title={`${type === 'add' ? '添加' : '编辑'}Oracle数据库配置连接`}
bodyStyle={{ width: '100%', minHeight: '100px' }}
style={{ top: '150px' }}
width="700px"
destroyOnClose
maskClosable={false}
cancelText="取消"
okText="确认"
{...props}
onOk={() => onSubmit()}
confirmLoading={loading}
>
{visible && (
<Form form={form} {...layout} onFinish={onFinish}>
<Item
label="标签"
name="name"
rules={[{ required: true, message: '请输入标签' }]}
>
{/* <Select>
<Option value={item.value}>{item.title}</Option>
</Select> */}
<Input placeholder="请输入标签" allowClear />
</Item>
<Item
label="网络服务名"
name="dbName"
rules={[{ required: true, message: '请输入网络服务名' }]}
>
<Input placeholder="请输入网络服务名" allowClear />
</Item>
<Item
label="用户名"
name="userName"
rules={[{ required: true, message: '请输入用户名' }]}
>
<Input placeholder="请输入用户名" allowClear />
</Item>
<Item
label="密码"
name="password"
rules={[{ required: true, message: '请输入密码' }]}
>
<Input placeholder="请输入密码" allowClear />
</Item>
</Form>
)}
</Modal>
);
};
export default AddModal;
src/pages/database/databaseConfig/oracle/OracleTable.jsx 0 → 100644
View file @ dc9158f4
import React, { useEffect, useState } from 'react';
import ProTable from '@ant-design/pro-table';
import { Button, Tag, Popconfirm, notification } from 'antd';
import {
getOracleConnString,
getOracleConnectionTest,
deleteConnString,
} from '@/services/database/api';
import AddModal from './AddModal';
const OracleTable = props => {
const [flag, setFlag] = useState(1);
const [dataList, setDataList] = useState([]); // table数据
const [visible, setVisible] = useState(false); // 弹窗
const [tableLoading, setTableLoading] = useState(false); // tableLoading
const [type, setType] = useState('add'); // 弹窗类型
const [formObj, setFormObj] = useState({});
useEffect(() => {
setTableLoading(true);
getOracleConnString({
_version: 9999,
_dc: Date.now(),
})
.then(res => {
setTableLoading(false);
if (res) {
setDataList(res);
}
})
.catch(err => {
setTableLoading(false);
});
}, [flag]);
// 新增
const handleAdd = (val, item) => {
setType('add');
setVisible(true);
};
// 测试连接
const handleCon = (val, item) => {
setTableLoading(true);
getOracleConnectionTest({
name: item.name,
_version: 9999,
_dc: Date.now(),
})
.then(res => {
setTableLoading(false);
if (res.success) {
notification.success({
message: '通知',
description: res.message || '连接成功',
duration: 3,
});
} else {
notification.error({
message: '通知',
description: res.message || '连接失败',
duration: 3,
});
}
})
.catch(err => {
setTableLoading(false);
console.error(err);
});
};
// 删除
const handleDel = (val, item) => {
const { name = '' } = item;
deleteConnString({
name,
_version: 9999,
_dc: Date.now(),
})
.then(res => {
setFlag(flag + 1);
if (res.success) {
notification.success({
message: '提示',
duration: 3,
description: res.message || '删除成功',
});
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message || '删除失败',
});
}
})
.catch(err => console.error(err));
};
// 编辑
const handleEdit = (val, item) => {
setType('edit');
setFormObj(item);
setVisible(true);
};
const onSubmit = prop => {
console.log(prop);
setVisible(false);
setFlag(flag + 1);
};
const columns = [
{
title: '标签',
dataIndex: 'name',
key: 'name',
},
{
title: '网络服务名/(ip:port/实例名)',
dataIndex: 'dbName',
key: 'dbName',
},
{
title: '用户名',
dataIndex: 'userName',
key: 'userName',
},
{
title: '密码',
dataIndex: 'password',
key: 'password',
},
{
title: '操作',
dataIndex: 'options',
key: 'options',
width: 300,
render: (val, item) => [
<Tag color="#2db7f5" onClick={() => handleCon(val, item)}>
测试连接
</Tag>,
<Tag color="gold" onClick={() => handleEdit(val, item)}>
编辑
</Tag>,
<Popconfirm
title={`是否删除连接${item.name}`}
cancelText="取消"
okText="确认"
// placement="right"
onConfirm={() => handleDel(val, item)}
>
<Tag color="#f50">删除</Tag>
</Popconfirm>,
],
},
];
return (
<>
<ProTable
headerTitle="Oracle数据库"
rowKey="key"
search={false}
columns={columns}
bordered
loading={tableLoading}
dataSource={dataList}
options={{ reload: false, fullScreen: false }}
toolBarRender={() => [
<Button
type="primary"
onClick={() => {
handleAdd();
}}
>
添加Oracle连接
</Button>,
]}
/>
<AddModal
visible={visible}
onCancel={() => setVisible(false)}
callBackSubmit={onSubmit}
type={type}
formObj={formObj}
/>
</>
);
};
export default OracleTable;
src/pages/database/databaseConfig/AddSQLServer.jsx → src/pages/database/databaseConfig/sqlServer/AddModal.jsx
View file @ dc9158f4
......@@ -4,7 +4,6 @@ import {
addSQLServerConnString,
editSQLServerConnString,
} from '@/services/database/api';
import { duration } from 'moment';
const { Item } = Form;
const { Option } = Select;
......@@ -88,6 +87,7 @@ const AddModal = props => {
console.log(type);
switch (type) {
case 'add':
form.resetFields();
break;
case 'edit':
form.setFieldsValue({ ...formObj });
......@@ -107,7 +107,7 @@ const AddModal = props => {
};
return (
<Modal
title="添加运维数据库配置连接"
title={`${type === 'add' ? '添加' : '编辑'}SQL数据库配置连接`}
bodyStyle={{ width: '100%', minHeight: '100px' }}
style={{ top: '150px' }}
width="700px"
......
src/pages/database/databaseConfig/SQLServerTable.jsx → src/pages/database/databaseConfig/sqlServer/SQLServerTable.jsx
View file @ dc9158f4
......@@ -6,7 +6,7 @@ import {
deleteConnString,
getSQLServerConnectionTest,
} from '@/services/database/api';
import AddModal from './AddSQLServer';
import AddModal from './AddModal';
const SQLServerTable = props => {
const [flag, setFlag] = useState(1);
const [dataList, setDataList] = useState([]); // table数据
......@@ -49,7 +49,7 @@ const SQLServerTable = props => {
if (res.success) {
notification.success({
message: '通知',
description: res.message || '连接成功',
description: '连接成功',
duration: 3,
});
} else {
......
src/services/database/api.js
View file @ dc9158f4
......@@ -26,25 +26,70 @@ export const updateDateBase = params =>
'/Cityinterface/rest/services/OMS.svc/DatabaseStandard_UpdateDateBase',
params,
);
// SQL数据库连接
export const getSQLServerConnString = params =>
get('/Cityinterface/rest/services/OMS.svc/S_GetSQLServerConnString', params);
/**
* @数据库连接配置
*/
// 删除数据库连接
export const deleteConnString = params =>
get('/Cityinterface/rest/services/OMS.svc/S_DeleteConnString', params);
// SQL数据库连接
export const getSQLServerConnString = params =>
get('/Cityinterface/rest/services/OMS.svc/S_GetSQLServerConnString', params);
// 新增SQLServer数据库连接
export const addSQLServerConnString = params =>
get('/Cityinterface/rest/services/OMS.svc/S_AddSQLServerConnString', params);
// 删除SQLServer数据库连接
export const deleteConnString = params =>
get('/Cityinterface/rest/services/OMS.svc/S_DeleteConnString', params);
// 删除SQL连接
export const editSQLServerConnString = params =>
get('/Cityinterface/rest/services/OMS.svc/S_EditSQLServerConnString', params);
// 测试连接
// SQL数据库测试连接
export const getSQLServerConnectionTest = params =>
get(
'/Cityinterface/rest/services/OMS.svc/S_GetSQLServerConnectionTest',
params,
);
/**
* @Oracle数据库
*/
// Oracle连接记录
export const getOracleConnString = params =>
get('/Cityinterface/rest/services/OMS.svc/S_GetOracleConnString', params);
// 新增Oracle连接
export const addOracleConnString = params =>
get('/Cityinterface/rest/services/OMS.svc/S_AddOracleConnString', params);
// 编辑Oracle连接
export const editOracleConnString = params =>
get('/Cityinterface/rest/services/OMS.svc/S_EditOracleConnString', params);
// 测试连接
export const getOracleConnectionTest = params =>
get('/Cityinterface/rest/services/OMS.svc/S_GetOracleConnectionTest', params);
/**
* @MongoDB连接
*/
// MongoDB连接记录
export const getMongoDBConnString = params =>
get('/Cityinterface/rest/services/OMS.svc/S_GetMongoDBConnString', params);
// 新增连接配置
export const addMongoDBConnString = params =>
get('/Cityinterface/rest/services/OMS.svc/S_AddMongoDBConnString', params);
// 编辑分享
export const editMongoDBConnString = params =>
get('/Cityinterface/rest/services/OMS.svc/S_EditMongoDBConnString', params);
// 测试连接
export const getMongoDBConnectionTest = params =>
get('/Cityinterface/rest/services/OMS.svc/S_MongoDBConnectionTest', params);
/**
* @MySQL连接
*/
// MySQL连接记录
export const getMySQLConnString = params =>
get('/Cityinterface/rest/services/OMS.svc/S_GetMySQLConnString', params);
// 新增配置连接
export const addMySQLConnString = params =>
get('/Cityinterface/rest/services/OMS.svc/S_AddMySQLConnString', params);
// 测试连接
export const getMySQLConnectionTest = params =>
get('/Cityinterface/rest/services/OMS.svc/S_GetMySQLConnectionTest', params);
export const editMySQLConnString = params =>
get('/Cityinterface/rest/services/OMS.svc/S_EditMySQLConnString', params);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment