import {
DeleteOutlined,
EditOutlined,
EyeOutlined,
PlusOutlined,
} from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { request, useModel } from '@umijs/max';
import {
Button,
Form,
Input,
Modal,
Spin,
Tooltip,
Typography,
message,
} from 'antd';
import { useRef, useState } from 'react';
import {
ApmLogLevel,
ApmLogSendType,
apmLog,
ma
rkEnd,
ma
rkStart,
} from 'sheinq'; // 埋点相关
type DbRecord = {
id: number;
database_name: string;
created_user_name: string;
updated_at: string;
rema
rk?: string;
};
type DbDetail = {
id: number;
name: string;
host: string;
port: number;
username: string;
password: string;
database_name: string;
rema
rk?: 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();
const { initialState = {} } = useModel('@@initialState');
const { currentUser = {} } = initialState;
const { employeeId: rawEmpId, enName } = currentUser;
// 服务端只接受number，这里转换 employeeId 为 number
const employeeId =
rawEmpId && !isNaN(Number(rawEmpId)) ? Number.parseInt(rawEmpId, 10) : 123;
const { Title } = Typography;
// 接口路径常量
const BASE_URL = 'https://growth-qa-test.sheincorp.cn/api/v1/connections';
// === 统一请求参数构建 ===
const buildPayload = (values: any, isEdit: boolean) => {
const base = {
name: values.name,
host: values.host,
port: parseInt(values.port, 10),
username: values.username,
password: values.password,
databaseName: values.database_name,
charset: 'utf8mb4',
isEnabled: true,
rema
rk: values.rema
rk,
timeout: isEdit ? 0 : 100, // 更新操作无需timeout
};
return isEdit
? {
...base,
updated_user_id: employeeId,
updated_user_name: enName ?? 'kovin wu',
}
: {
...base,
created_user_id: employeeId,
created_user_name: enName ?? 'kovin wu',
};
};
// 查询
数据库列表
const queryDbList = async (params: {
id?: number;
database_name?: string;
created_user_name?: string;
current?: number;
pageSize?: number;
}) => {
// 埋点：列表查询
apmLog(
ApmLogLevel.Info,
'查询
数据库列表',
JSON.stringify(params),
ApmLogSendType.NoApmYesLog,
{ pageNum: params.current },
);
try {
const result = await request<{
code: number;
info: { total: number; records: any[] };
msg: string;
}>(`${BASE_URL}/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.current || 1,
pageSize: params.pageSize || 10,
},
});
if (result.code === 0) {
// 转换数据结构
const list = result.info.records.map((item) => ({
id: item.id,
database_name: item.database_name,
created_user_name: item.created_user_name,
updated_at: item.updated_at,
}));
return { data: list, total: result.info.total, success: true };
} else {
message.error(result.msg || '请求失败');
apmLog(
ApmLogLevel.Error,
'
数据库列表请求失败',
JSON.stringify(result),
ApmLogSendType.NoApmYesLog,
);
return { data: [], total: 0, success: false };
}
} catch (error: any) {
message.error('请求异常');
apmLog(
ApmLogLevel.Error,
'
数据库列表请求异常',
error.message,
ApmLogSendType.NoApmYesLog,
);
return { data: [], total: 0, success: false };
}
};
// 测试
数据库连接
const testDbConnection = async (values: any, isEdit?: boolean) => {
apmLog(
ApmLogLevel.Info,
'测试
数据库连接',
JSON.stringify(values),
ApmLogSendType.NoApmYesLog,
{ type: isEdit ? 'edit' : 'add' },
);
try {
const res = await request(`${BASE_URL}/test`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
data: {
name: values.database_name,
host: values.host,
port: parseInt(values.port, 10),
username: values.username,
password: values.password,
databaseName: values.database_name,
charset: 'utf8mb4',
timeout: 100,
isEnabled: true,
},
});
if (res.code === 0) {
message.success('连接成功');
return { success: true };
} else {
message.error(res.msg || '连接失败');
return { success: false };
}
} catch (error: any) {
message.error(error.message || '连接异常');
return { success: false };
} finally {
apmLog(
ApmLogLevel.Info,
'
数据库连接测试完成',
JSON.stringify(values),
ApmLogSendType.NoApmYesLog,
);
}
};
// === 保存，把编辑和新增整合===
const handleSave = async () => {
ma
rkEnd('db-conn-modal');
try {
const values = await form.validateFields();
const isEdit = !!editRecord;
const payload = buildPayload(values, isEdit);
const url = isEdit
? `${BASE_URL}/update/${editRecord?.id}`
: `${BASE_URL}/new`;
// 埋点：保存前
apmLog(
ApmLogLevel.Info,
isEdit ? '编辑
数据库提交' : '新增
数据库提交',
JSON.stringify(payload),
ApmLogSendType.NoApmYesLog,
{ dbId: editRecord?.id },
);
const res = await request(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
data: payload,
});
if (+res.code === 0) {
message.success(isEdit ? '更新成功' : '保存成功');
setIsModalOpen(false);
setEditRecord(undefined);
form.resetFields();
actionRef.current?.reload();
// 埋点：保存成功
apmLog(
ApmLogLevel.Info,
isEdit ? '编辑
数据库成功' : '新增
数据库成功',
JSON.stringify(payload),
ApmLogSendType.NoApmYesLog,
{ dbId: editRecord?.id },
);
} else {
message.error(res.msg || '保存失败');
// 埋点：保存失败
apmLog(
ApmLogLevel.Warn,
'
数据库保存失败',
JSON.stringify(res),
ApmLogSendType.NoApmYesLog,
);
}
} catch (err) {
message.error('保存失败，请检查表单');
// 埋点：保存异常
apmLog(
ApmLogLevel.Error,
'
数据库保存异常',
'表单校验失败',
ApmLogSendType.NoApmYesLog,
);
}
};
// 查看
数据库详情
const showParamModal = async (record: DbRecord) => {
ma
rkStart('db-detail-modal');
try {
setLoading(true);
apmLog(
ApmLogLevel.Info,
'点击查看
数据库详情',
JSON.stringify(record),
ApmLogSendType.NoApmYesLog,
{ dbId: record.id },
);
const res = await request<{ code: number; info: DbDetail; msg: string }>(
`${BASE_URL}/${record.id}`,
{ method: 'GET' },
);
if (res.code === 0) {
form.setFieldsValue(res.info);
setCurrentRecord(record);
setParamModalOpen(true);
} else {
message.error(res.msg || '获取详情失败');
}
} catch (error: any) {
message.error(error.message || '请求详情失败');
} finally {
setLoading(false);
ma
rkEnd('db-detail-modal');
}
};
// === 抽象详情获取逻辑 ===
const fetchDbDetail = async (id: number, actionType: 'view' | 'edit') => {
try {
const res = await request<{ code: number; info: DbDetail; msg: string }>(
`${BASE_URL}/${id}`,
{ method: 'GET' },
);
if (res.code === 0) {
form.setFieldsValue(res.info);
return true;
}
throw new Error(res.msg);
} catch (error: any) {
message.error(`获取${actionType === 'edit' ? '编辑数据' : '详情'}失败`);
apmLog(
ApmLogLevel.Error,
`
数据库${actionType === 'edit' ? '编辑' : '详情'}接口异常`,
error.message,
ApmLogSendType.NoApmYesLog,
{ dbId: id },
);
return false;
}
};
// 编辑
数据库
const handleEdit = async (record: DbRecord) => {
ma
rkStart('db-conn-modal');
setLoading(true);
apmLog(
ApmLogLevel.Info,
'点击编辑
数据库',
JSON.stringify(record),
ApmLogSendType.NoApmYesLog,
{ dbId: record.id },
);
if (await fetchDbDetail(record.id, 'edit')) {
setEditRecord(record);
setIsModalOpen(true);
}
setLoading(false);
};
// 删除
数据库
const handleDelete = async (record: DbRecord) => {
Modal.confirm({
title: '确认删除?',
content: `确定要删除
数据库连接 "${record.database_name}" 吗？`,
onOk: async () => {
ma
rkStart('db-conn-delete');
apmLog(
ApmLogLevel.Warn,
'点击删除
数据库',
JSON.stringify(record),
ApmLogSendType.NoApmYesLog,
{ dbId: record.id },
);
try {
const res = await request(`${BASE_URL}/delete/${record.id}`, {
method: 'POST',
});
if (+res.code === 0) {
message.success('删除成功');
actionRef.current?.reload();
} else {
throw new Error(res.msg);
}
} catch (error: any) {
message.error(error.message || '删除失败');
} finally {
ma
rkEnd('db-conn-delete');
}
},
});
};
// 测试连接
const handleTestConnection = async () => {
try {
const values = await form.validateFields();
await testDbConnection(values, !!editRecord);
} catch {
message.error('请填写完整信息');
}
};
// 表格列配置
const columns: ProColumns<DbRecord>[] = [
{ title: 'ID', dataIndex: 'id', search: false },
{ title: '
数据库名称', dataIndex: 'database_name' },
{ title: '概述', dataIndex: 'rema
rk', ellipsis: true, tip: 'rema
rk' },
{ title: '创建人', dataIndex: 'created_user_name' },
{ title: '创建时间', dataIndex: 'updated_at', 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={queryDbList}
rowKey="id"
pagination={{ defaultPageSize: 10, showSizeChanger: true }}
toolBarRender={() => [
<Button
key="add"
icon={<PlusOutlined />}
type="primary"
onClick={() => {
ma
rkStart('db-conn-modal');
setIsModalOpen(true);
form.resetFields();
setEditRecord(undefined);
}}
>
新增
数据库
</Button>,
]}
/>
{/* 新增/编辑弹窗 */}
<Modal
title={editRecord ? '编辑
数据库连接' : '新增
数据库连接'}
open={isModalOpen}
onCancel={() => {
setIsModalOpen(false);
ma
rkEnd('db-conn-modal');
}}
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 }]}
>
<Input />
</Form.Item>
<Form.Item
label="DB名称"
name="database_name"
rules={[{ required: true, max: 32 }]}
>
<Input />
</Form.Item>
<Form.Item label="Host" name="host" rules={[{ required: true }]}>
<Input placeholder="127.0.0.1" />
</Form.Item>
<Form.Item label="Port" name="port" rules={[{ required: true }]}>
<Input placeholder="3306" />
</Form.Item>
<Form.Item
label="用户名"
name="username"
rules={[{ required: true }]}
>
<Input />
</Form.Item>
<Form.Item
label="密码"
name="password"
rules={[{ required: true }]}
>
<Input.Password />
</Form.Item>
<Form.Item label="概述" name="rema
rk">
<Input.TextArea rows={3} />
</Form.Item>
</Form>
</Spin>
</Modal>
{/* 详情弹窗 */}
<Modal
title="
数据库参数配置"
open={paramModalOpen}
// 修复点：添加 onCancel 处理
onCancel={() => {
setParamModalOpen(false);
ma
rkEnd('db-detail-modal');
}}
footer={[
<Button
key="close"
onClick={() => {
setParamModalOpen(false);
ma
rkEnd('db-detail-modal');
}}
>
关闭
</Button>,
]}
>
<Spin spinning={loading}>
<Form form={form} layout="vertical" disabled>
<Form.Item label="
数据库名称" name="name">
<Input />
</Form.Item>
<Form.Item label="DB名称" name="database_name">
<Input />
</Form.Item>
<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.Item label="概述" name="rema
rk">
<Input.TextArea rows={3} />
</Form.Item>
</Form>
</Spin>
</Modal>
</>
);
};
export default DbconnectionPage;
我的colunm里面的rema
rk 没有显示数据，是空的
本文探讨了在数据库中进行频繁update和delete操作后如何利用rebuildindex减少空间碎片，提高查询效率。同时，介绍了删除大量数据后进行REORG释放空间的方法。此外，讨论了altertable操作对表结构的影响及如何通过move重新分配表空间来优化存储布局。最后，强调了运行STATS收集统计数据的重要性，以及分区技术在处理大型表时的作用。
扫一扫
2022
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
