diff --git a/src/pages/database-config/DatabaseConfigForm.tsx b/src/pages/database-config/DatabaseConfigForm.tsx index 71bfc73..6923e87 100644 --- a/src/pages/database-config/DatabaseConfigForm.tsx +++ b/src/pages/database-config/DatabaseConfigForm.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { Form, Input, Radio, Select, Button, message, Row, Col, Space, Tooltip, Card, Typography, Divider } from 'antd'; import { LinkOutlined, ArrowLeftOutlined, QuestionCircleOutlined, SaveOutlined, HistoryOutlined } from '@ant-design/icons'; import { ADD, EDIT, POST } from '@/services/crud'; @@ -7,8 +7,8 @@ import { history } from 'umi'; const { Option } = Select; const { Title, Text } = Typography; -const DATABASE_CONFIG_URL = '/api/database-configs'; -const TEST_CONNECTION_URL = '/api/test-connection'; +const DATABASE_CONFIG_URL = '/ncnb/dataSources'; +const TEST_CONNECTION_URL = '/ncnb/test-connection'; interface DatabaseConfigFormProps { initialValues?: any; @@ -59,6 +59,59 @@ const DatabaseConfigForm: React.FC = ({ initialValues, // 实际实现中，这里应该打开一个显示连接历史的模态框或抽屉 }; + const dbTypeMap: { [key: string]: string } = { + mysql: 'MySQL', + postgresql: 'PostgreSQL', + oracle: 'Oracle', + sqlserver: 'SQLServer', + // Add more mappings as needed + }; + + const parseUrl = (url: string) => { + try { + // General JDBC URL pattern + const regex = /jdbc:([^:]+):\/\/([^:/]+)(?::(\d+))?(?:\/([^?]+))?/; + const match = url.match(regex); + + if (match) { + const [, dbType, host, port, databaseName] = match; + return { + type: dbTypeMap[dbType.toLowerCase()] || dbType, + host, + port: port || getDefaultPort(dbType), + databaseName: databaseName || '', + }; + } + return null; + } catch (error) { + console.error('Invalid URL:', error); + return null; + } + }; + + const getDefaultPort = (dbType: string) => { + const defaultPorts: { [key: string]: string } = { + mysql: '3306', + postgresql: '5432', + oracle: '1521', + sqlserver: '1433', + // Add more default ports for other database types as needed + }; + return defaultPorts[dbType.toLowerCase()] || ''; + }; + + useEffect(() => { + if (connectionType === 'url') { + const url = form.getFieldValue('url'); + if (url) { + const parsedData = parseUrl(url); + if (parsedData) { + form.setFieldsValue(parsedData); + } + } + } + }, [connectionType, form]); + return ( @@ -103,7 +156,7 @@ const DatabaseConfigForm: React.FC = ({ initialValues, - + setConnectionType(e.target.value)}> 主机 URL @@ -117,7 +170,15 @@ const DatabaseConfigForm: React.FC = ({ initialValues, rules={[{ required: true, message: '请输入数据库URL' }]} extra="例如：jdbc:mysql://localhost:3306/mydatabase" > - + { + const parsedData = parseUrl(e.target.value); + if (parsedData) { + form.setFieldsValue(parsedData); + } + }} + /> ) : ( <> @@ -133,7 +194,7 @@ const DatabaseConfigForm: React.FC = ({ initialValues, - + diff --git a/src/pages/database-config/index.tsx b/src/pages/database-config/index.tsx index 5de3146..7dd41e9 100644 --- a/src/pages/database-config/index.tsx +++ b/src/pages/database-config/index.tsx @@ -1,15 +1,15 @@ import React, { useRef, useState } from 'react'; import { ProTable } from '@ant-design/pro-components'; -import { Button, message, Drawer, Tooltip, Badge, Space, Typography, Card } from 'antd'; +import { Button, message, Drawer, Tooltip, Badge, Space, Typography, Card, Modal } from 'antd'; import { PlusOutlined, EditOutlined, DeleteOutlined, SyncOutlined, QuestionCircleOutlined, BarChartOutlined, ArrowLeftOutlined } from '@ant-design/icons'; import { PageContainer } from '@ant-design/pro-layout'; -import { PAGE, DEL } from '@/services/crud'; +import { PAGE, DEL, POST } from '@/services/crud'; import DatabaseConfigForm from './DatabaseConfigForm'; import { history } from 'umi'; const { Text, Link } = Typography; -const DATABASE_CONFIG_URL = '/api/database-configs'; +const DATABASE_CONFIG_URL = '/ncnb/dataSources'; interface DatabaseConfigItem { id: string; @@ -18,7 +18,7 @@ interface DatabaseConfigItem { host: string; port: number; username: string; - database: string; + databaseName: string; status: 'online' | 'offline' | 'error'; createTime: string; updateTime: string; @@ -30,21 +30,51 @@ const DatabaseConfigPage: React.FC = () => { const [editingRecord, setEditingRecord] = useState(null); const [selectedRowKeys, setSelectedRowKeys] = useState([]); - const handleDelete = async (id: string) => { - const res = await DEL(`${DATABASE_CONFIG_URL}/${id}`); - if (res.code === 200) { - message.success('删除成功'); - actionRef.current?.reload(); - } else { - message.error('删除失败'); - } + const handleDelete = (id: string) => { + Modal.confirm({ + title: '确认删除', + content: '您确定要删除这个数据库连接吗？此操作不可逆。', + okText: '确认', + cancelText: '取消', + onOk: async () => { + try { + const res = await DEL(`${DATABASE_CONFIG_URL}/${id}`); + if (res.code === 200) { + message.success('删除成功'); + actionRef.current?.reload(); + } else { + message.error('删除失败'); + } + } catch (error) { + console.error('删除出错:', error); + message.error('删除出错，请稍后重试'); + } + }, + }); }; const handleBatchDelete = async () => { - // 实现批量删除逻辑 - message.success(`已删除 ${selectedRowKeys.length} 条记录`); - setSelectedRowKeys([]); - actionRef.current?.reload(); + Modal.confirm({ + title: '确认删除', + content: `您确定要删除选中的 ${selectedRowKeys.length} 条记录吗？`, + onOk: async () => { + try { + const res = await DEL(`${DATABASE_CONFIG_URL}/multiple_delete`, { + keys: selectedRowKeys + }); + if (res.code === 200) { + message.success(`成功删除 ${selectedRowKeys.length} 条记录`); + setSelectedRowKeys([]); + actionRef.current?.reload(); + } else { + message.error('批量删除失败'); + } + } catch (error) { + console.error('批量删除出错:', error); + message.error('批量删除出错，请稍后重试'); + } + }, + }); }; const handleSyncStatus = async (id: string) => { @@ -59,42 +89,52 @@ const DatabaseConfigPage: React.FC = () => { dataIndex: 'name', key: 'name', render: (text: string) => {text}, + search: true, }, { title: '数据库类型', dataIndex: 'type', key: 'type', - filters: [ - { text: 'MySQL', value: 'MySQL' }, - { text: 'PostgreSQL', value: 'PostgreSQL' }, - { text: 'Oracle', value: 'Oracle' }, - { text: 'SQL Server', value: 'SQLServer' }, - ], + valueType: 'select', + valueEnum: { + MySQL: { text: 'MySQL' }, + PostgreSQL: { text: 'PostgreSQL' }, + Oracle: { text: 'Oracle' }, + SQLServer: { text: 'SQL Server' }, + }, + filters: true, + filterMultiple: false, + search: true, }, { title: '主机', dataIndex: 'host', key: 'host', + search: true, }, { title: '端口', dataIndex: 'port', key: 'port', + search: true, }, { title: '用户名', dataIndex: 'username', key: 'username', + search: true, }, { title: '数据库', - dataIndex: 'database', - key: 'database', + dataIndex: 'databaseName', // Change this from 'database' to 'databaseName' + key: 'databaseName', // Also update the key + search: true, }, { title: '状态', dataIndex: 'status', key: 'status', + valueType: 'select', valueEnum: { online: { text: '在线', status: 'Success' }, offline: { text: '离线', status: 'Default' }, @@ -106,10 +146,12 @@ const DatabaseConfigPage: React.FC = () => { text={record.status === 'online' ? '在线' : record.status === 'offline' ? '离线' : '错误'} /> ), + search: true, }, { title: '操作', key: 'action', + search: false, render: (_, record: DatabaseConfigItem) => (