接口定义是这样的{
"code": 0,
"info": {
"total": 3,
"size": 10,
"pages": 1,
"records": [
{
"id": 4,
"name": "user_growth_fanta",
"host": "10.123.4.12",
"port": 3314,
"username": "lt_user_growth_fanta_test_rw",
"password": "cqlw****",
"database_name": "user_growth_fanta",
"charset": "utf8mb4",
"timeout": 100,
"is_enabled": true,
"remark": "测试更新备注",
"created_user_id": 0,
"created_user_name": "",
"updated_user_id": 10278634,
"updated_user_name": "Fred Wang",
"created_at": "2025-08-15T17:24:16+08:00",
"updated_at": "2025-09-02T20:34:00+08:00"
},
{
"id": 6,
"name": "user_growth_cola_1",
"host": "10.123.4.94",
"port": 3306,
"username": "lt_ug_cola_test_rw",
"password": "cakjrhbqieury",
"database_name": "user_growth_cola_1",
"charset": "utf8mb4",
"timeout": 100,
"is_enabled": true,
"remark": "这个是一个测试链接",
"created_user_id": 0,
"created_user_name": "",
"updated_user_id": 0,
"updated_user_name": "",
"created_at": "2025-08-15T17:33:30+08:00",
"updated_at": "2025-08-15T17:33:30+08:00"
},
{
"id": 7,
"name": "奖池",
"host": "10.123.4.94",
"port": 3306,
"username": "lt_ug_pepsi_test_rw",
"password": "caeirugqeirJBHUG",
"database_name": "",
"charset": "utf8mb4",
"timeout": 100,
"is_enabled": true,
"remark": "奖池",
"created_user_id": 10278634,
"created_user_name": "Fred Wang",
"updated_user_id": 0,
"updated_user_name": "",
"created_at": "2025-09-03T11:19:14+08:00",
"updated_at": "2025-09-04T19:48:24+08:00"
}
]
},
"msg": "success"
} 改下代码，import { DeleteOutlined, EditOutlined, EyeOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import {
Button,
Form,
Input,
Modal,
Spin,
Tooltip,
Typography,
message,
} from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { request } from '@umijs/max';
import { useRef, useState } from 'react';
const { Title } = Typography;
// 模拟接口数据类型
type DbRecord = {
id: number;
name: string;
creator: string;
createTime: string;
host?: string;
port?: string;
username?: string;
password?: string;
};
const DbconnectionPage = () => {
const actionRef = useRef<ActionType>();
const [isModalOpen, setIsModalOpen] = useState(false);
const [editRecord, setEditRecord] = useState<DbRecord | undefined>();
const [loading, setLoading] = useState(false);
const [paramModalOpen, setParamModalOpen] = useState(false);
const [currentRecord, setCurrentRecord] = useState<DbRecord | undefined>();
const [form] = Form.useForm();
// 模拟查询接口，并使用 zhuligongjuqingqiucanshu 作为参数
const queryDbList = async (params: {
id?: number;
database_name?: string;
created_user_name?: string;
currentPage?: number;
pageSize?: number;
}) => {
console.log('请求参数:', params); // 打印请求参数
return request<{
data: {
list: DbRecord[];
total: number;
};
success: boolean;
}>('https://growth-qa-test.sheincorp.cn/api/v1/connections/list', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
data: {
id: params.id || 0,
database_name: params.database_name || '',
created_user_name: params.created_user_name || '',
currentPage: params.currentPage || 1,
pageSize: params.pageSize || 10,
},
});
};
// 模拟测试连接接口
const testDbConnection = async (values: any) => {
return new Promise<{ success: boolean; msg: string }>((resolve) => {
setTimeout(() => {
if (values.host && values.port && values.username && values.password) {
resolve({ success: true, msg: '连接成功' });
} else {
resolve({ success: false, msg: '连接失败，请检查参数' });
}
}, 800);
});
};
// 模拟保存数据库配置
const saveDbRecord = async (values: any) => {
return new Promise<{ code: number; msg: string }>((resolve) => {
setTimeout(() => {
resolve({ code: 0, msg: '保存成功' });
}, 800);
});
};
// 模拟删除数据库
const deleteDbRecord = async (id: number) => {
return new Promise<{ code: number; msg: string }>((resolve) => {
setTimeout(() => {
resolve({ code: 0, msg: '删除成功' });
}, 600);
});
};
// 点击测试连接
const handleTestConnection = async () => {
try {
const values = await form.validateFields();
const res = await testDbConnection(values);
if (res.success) {
message.success(res.msg);
} else {
message.error(res.msg);
}
} catch (err) {
message.error('请填写完整信息');
}
};
// 点击保存
const handleSave = async () => {
try {
const values = await form.validateFields();
const res = await saveDbRecord(values);
if (+res.code === 0) {
message.success('保存成功');
setIsModalOpen(false);
setEditRecord(undefined);
actionRef.current?.reload();
}
} catch (err) {
message.error('保存失败，请检查表单');
}
};
// 点击数据库名称打开参数弹窗
const showParamModal = (record: DbRecord) => {
setCurrentRecord(record);
form.setFieldsValue(record);
setParamModalOpen(true);
};
// 点击编辑
const handleEdit = (record: DbRecord) => {
setEditRecord(record);
form.setFieldsValue(record);
setIsModalOpen(true);
};
// 点击删除
const handleDelete = async (record: DbRecord) => {
const res = await deleteDbRecord(record.id);
if (+res.code === 0) {
message.success('删除成功');
actionRef.current?.reload();
}
};
// 表格列配置
const columns: ProColumns<DbRecord>[] = [
{
title: '数据库序号',
dataIndex: 'id',
search: false,
},
{
title: '数据库名称',
dataIndex: 'name',
render: (_, record) => (
<a onClick={() => showParamModal(record)}>{record.name}</a>
),
},
{
title: '创建人',
dataIndex: 'creator',
},
{
title: '创建时间',
dataIndex: 'createTime',
valueType: 'dateTime',
},
{
title: '操作',
valueType: 'option',
render: (_, record) => [
<Tooltip title="查看" key="view">
<Button
icon={<EyeOutlined />}
onClick={() => showParamModal(record)}
/>
</Tooltip>,
<Tooltip title="编辑" key="edit">
<Button icon={<EditOutlined />} onClick={() => handleEdit(record)} />
</Tooltip>,
<Tooltip title="删除" key="delete">
<Button
icon={<DeleteOutlined />}
danger
onClick={() => handleDelete(record)}
/>
</Tooltip>,
],
},
];
return (
<>
<ProTable<DbRecord>
columns={columns}
actionRef={actionRef}
cardBordered
headerTitle="数据库管理"
request={async (params) => {
const result = await queryDbList(params);
return {
data: result.data,
total: result.total,
success: result.success,
};
}}
rowKey="id"
pagination={{
defaultPageSize: 10,
showSizeChanger: true,
}}
toolBarRender={() => [
<Button
key="add"
icon={<PlusOutlined />}
onClick={() => {
setIsModalOpen(true);
form.resetFields();
setEditRecord(undefined);
}}
type="primary"
>
新增数据库
</Button>,
]}
/>
{/* 新增/编辑数据库弹窗 */}
<Modal
title={editRecord ? '编辑数据库连接' : '新增数据库连接'}
open={isModalOpen}
onCancel={() => {
setIsModalOpen(false);
setEditRecord(undefined);
}}
footer={[
<Button key="test" onClick={handleTestConnection}>
测试连接
</Button>,
<Button key="cancel" onClick={() => setIsModalOpen(false)}>
取消
</Button>,
<Button key="submit" type="primary" onClick={handleSave}>
保存
</Button>,
]}
>
<Spin spinning={loading}>
<Form form={form} layout="vertical">
<Form.Item
label="数据库名称"
name="name"
rules={[
{ required: true, message: '请输入数据库名称' },
{ max: 32, message: '名称不能超过32个字符' },
]}
>
<Input placeholder="请输入数据库名称" />
</Form.Item>
<Form.Item
label="Host"
name="host"
rules={[{ required: true, message: '请输入 Host' }]}
>
<Input placeholder="例如：127.0.0.1" />
</Form.Item>
<Form.Item
label="Port"
name="port"
rules={[{ required: true, message: '请输入 Port' }]}
>
<Input placeholder="例如：3306" />
</Form.Item>
<Form.Item
label="用户名"
name="username"
rules={[{ required: true, message: '请输入用户名' }]}
>
<Input placeholder="请输入用户名" />
</Form.Item>
<Form.Item
label="密码"
name="password"
rules={[{ required: true, message: '请输入密码' }]}
>
<Input.Password placeholder="请输入密码" />
</Form.Item>
</Form>
</Spin>
</Modal>
{/* 数据库参数弹窗（用于查看详情） */}
<Modal
title="数据库参数配置"
open={paramModalOpen}
onOk={() => setParamModalOpen(false)}
onCancel={() => setParamModalOpen(false)}
okText="关闭"
>
<Form form={form} layout="vertical" disabled>
<Form.Item label="Host" name="host">
<Input />
</Form.Item>
<Form.Item label="Port" name="port">
<Input />
</Form.Item>
<Form.Item label="用户名" name="username">
<Input />
</Form.Item>
<Form.Item label="密码" name="password">
<Input.Password />
</Form.Item>
</Form>
</Modal>
</>
);
};
export default DbconnectionPage;
列表只需要取id，created_user_name，database_name，updated_at
最新发布
本文介绍如何使用Ant中的fileset来精确地删除指定目录及其内容，包括空文件夹，并避免不必要的删除，提高清理效率。
扫一扫
1058
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
