add(erd-onloine): 数据库配置页面和表单的数据源URL解析和UI调整

www-zerocode-net-cn · Sep 7, 2024 · deec416 · deec416
1 parent e27de0d
commit deec416
Show file tree

Hide file tree

Showing 2 changed files with 133 additions and 30 deletions.
diff --git 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<DatabaseConfigFormProps> = ({ 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 (
     <Card>
       <Space direction="vertical" size="large" style={{ width: '100%' }}>
@@ -103,7 +156,7 @@ const DatabaseConfigForm: React.FC<DatabaseConfigFormProps> = ({ initialValues,
             </Col>
           </Row>
 
-          <Form.Item name="connectionType" label="连接方式">
+          <Form.Item name="connectionType" label="连接方式" initialValue="host">
             <Radio.Group onChange={(e) => setConnectionType(e.target.value)}>
               <Radio value="host">主机</Radio>
               <Radio value="url">URL</Radio>
@@ -117,7 +170,15 @@ const DatabaseConfigForm: React.FC<DatabaseConfigFormProps> = ({ initialValues,
               rules={[{ required: true, message: '请输入数据库URL' }]}
               extra="例如：jdbc:mysql://localhost:3306/mydatabase"
             >
-              <Input placeholder="jdbc:mysql://localhost:3306/mydatabase" />
+              <Input 
+                placeholder="jdbc:mysql://localhost:3306/mydatabase" 
+                onChange={(e) => {
+                  const parsedData = parseUrl(e.target.value);
+                  if (parsedData) {
+                    form.setFieldsValue(parsedData);
+                  }
+                }}
+              />
             </Form.Item>
           ) : (
             <>
@@ -133,7 +194,7 @@ const DatabaseConfigForm: React.FC<DatabaseConfigFormProps> = ({ initialValues,
                   </Form.Item>
                 </Col>
               </Row>
-              <Form.Item name="database" label="数据库名称" rules={[{ required: true, message: '请输入数据库名称' }]}>
+              <Form.Item name="databaseName" label="数据库名称" rules={[{ required: true, message: '请输入数据库名称' }]}>
                 <Input placeholder="例如：mydatabase" />
               </Form.Item>
             </>

diff --git 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<DatabaseConfigItem | null>(null);
   const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
 
-  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) => <Link>{text}</Link>,
+      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) => (
         <Space size="middle">
           <Tooltip title="编辑">