feat: 添加数据源接口对接

src/module/datasource/component/DatasourceAdd.jsx

@@ -9,32 +9,50 @@ import {
 } from '@ant-design/pro-components'
 import { Button, Col, message, Form } from 'antd'
 import { useState } from 'react'
+import {testDataSourceConnection, createDataSource} from '../services'
 
-const DATA_TYPE_MYSQL = 'MySQL'
-const KERBS_VALID_TRUE = true
-
-const waitTime = (time = 100) => {
-  return new Promise(resolve => {
-    setTimeout(() => {
-      resolve(true)
-    }, time)
-  })
-}
+const DATA_TYPE_MYSQL = 'mysql'
+const KERBS_VALID_FALSE = false
 
 export default function DatasourceAdd() {
+  // 数据源类型
   const [dataType, setDataType] = useState(DATA_TYPE_MYSQL)
-  const [kerbsValid, setKerbsValid] = useState(KERBS_VALID_TRUE)
+  // 是否开启kerbsValid验证
+  const [kerbsValid, setKerbsValid] = useState(KERBS_VALID_FALSE)
+  // Loading状态
   const [loading, setLoading] = useState(false)
+  // Form表单
   const [form] = Form.useForm()
   // 测试连接
-  const testConnect = () => {
-    setLoading(true)
-    console.log(form.getFieldValue('username'))
-    setTimeout(() => {
-      message.success('连接成功')
-      setLoading(false)
-    }, 3000)
+  const testConnect = async () => {
+    const filds = ['datasource_name','datasource','database_name','jdbc_username','jdbc_password','jdbc_url','comments']
+    try {
+      await form.validateFields(filds)
+      setLoading(true)
+      const testData = form.getFieldsValue(filds)
+      const { data } = await testDataSourceConnection(testData)
+      if (data.data) {
+        message.success('连接成功')
+      } else {
+        message.error('连接失败')
+      }
+    } catch (error) {
+      message.error('表单验证错误，请检查表单信息是否完整')
+    }
+    setLoading(false)
   }
+  // 完成添加
+  const finishAdd = async () => {
+    const filds = ['datasource_name','datasource','database_name','jdbc_username','jdbc_password','jdbc_url','comments']
+    const { data } = await createDataSource(form.getFieldsValue(filds))
+    if (data.code === 200) {
+      message.success('添加成功')
+    } else {
+      message.error('添加失败，请检查数据')
+    }
+    return true
+  }
+  // 测试连接按钮
   const testConnectBtn = (
     <Button onClick={testConnect} loading={loading}>
       测试连接
@@ -46,15 +64,11 @@ export default function DatasourceAdd() {
       trigger={
         <Button type="primary">添加数据源</Button>
       }
-      onFinish={async (values: any) => {
-        await waitTime(2000);
-        message.success('提交成功');
-        return true;
-      }}
+      onFinish={finishAdd}
       initialValues={{
-        dataType: DATA_TYPE_MYSQL,
-        connectBtn: 'connectTest',
-        kerbsValid: KERBS_VALID_TRUE,
+        datasource: DATA_TYPE_MYSQL,
+        kerbsValid: KERBS_VALID_FALSE,
+        comments: ''
       }}
       title="添加数据源"
       modalProps={{
@@ -62,7 +76,7 @@ export default function DatasourceAdd() {
         width: '60%',
         afterClose: () => {
           setDataType(DATA_TYPE_MYSQL)
-          setKerbsValid(KERBS_VALID_TRUE)
+          setKerbsValid(KERBS_VALID_FALSE)
           form.resetFields()
         },
         okText: '确认添加',
@@ -76,12 +90,12 @@ export default function DatasourceAdd() {
       }}>
       <ProFormSelect
         label="选择数据源"
-        name="dataType"
+        name="datasource"
         fieldProps={{
           onChange: val => setDataType(val),
         }}
         valueEnum={{
-          MySQL: 'My SQL',
+          mysql: 'My SQL',
           hive: 'hive',
         }}
         rules={[
@@ -94,7 +108,7 @@ export default function DatasourceAdd() {
       <Col span={12} />
       <ProFormText
         label="数据源名称"
-        name="dataName"
+        name="datasource_name"
         rules={[
           {
             required: true,
@@ -119,7 +133,7 @@ export default function DatasourceAdd() {
       />
       <ProFormText
         label="数据库地址"
-        name="sqlAddress"
+        name="jdbc_url"
         rules={[
           {
             required: true,
@@ -129,7 +143,7 @@ export default function DatasourceAdd() {
       />
       <ProFormText
         label="数据库名称"
-        name="sqlName"
+        name="database_name"
         rules={[
           {
             required: true,
@@ -139,7 +153,7 @@ export default function DatasourceAdd() {
       />
       <ProFormText
         label="用户名"
-        name="username"
+        name="jdbc_username"
         rules={[
           {
             required: true,
@@ -149,7 +163,7 @@ export default function DatasourceAdd() {
       />
       <ProFormText.Password
         label="密码"
-        name="password"
+        name="jdbc_password"
         rules={[
           {
             required: true,
@@ -159,7 +173,7 @@ export default function DatasourceAdd() {
       />
       <ProFormTextArea
         label="详情"
-        name="dataDetails"
+        name="comments"
         fieldProps={{ autoSize: true }}
       />
       {dataType === 'hive' ? (

src/module/datasource/component/DatasourceManage.jsx

@@ -38,7 +38,6 @@ export default function DatasourceManage() {
     fetchDataSourceList()
   }, []);
 
-
   // 格式化事件
   const formatTime = time => {
     const date = new Date(Number(time) * 1000)
@@ -121,36 +120,6 @@ export default function DatasourceManage() {
       ),
     },
   ]
-  // 表格数据
-  const data = [
-    {
-      key: '1',
-      datasource_name: '奶粉渠道销售库',
-      datasource: 'MYSQL',
-      dataTag: '开发',
-      comments: '七台河信息5',
-      create_time: '1660391639458',
-      update_time: '1660391639458',
-    },
-    {
-      key: '2',
-      datasource_name: '奶粉渠道销售库',
-      datasource: 'HIVE',
-      dataTag: '测试',
-      comments: '七台河信息4',
-      create_time: '1660391639458',
-      update_time: '1660391639458',
-    },
-    {
-      key: '3',
-      datasource_name: '奶粉渠道销售库',
-      datasource: 'MYSQL',
-      dataTag: '线上',
-      comments: '七台河信息3',
-      create_time: '1660391639458',
-      update_time: '1660391639458',
-    },
-  ]
   // 查看数据源弹窗取消
   const handledataModalCancel = () => {
     setDataModalVisible(false)

src/module/datasource/services/index.js

@@ -3,4 +3,16 @@ import request from '../../../utils/request'
 export const getDataSourceList  = params => request({
   url: `/jpt/datasource/`,
   method: 'get',
+})
+
+export const testDataSourceConnection = params => request({
+  url: '/jpt/datasource/test',
+  method: 'post',
+  data: {...params}
+})
+
+export const createDataSource  = params => request({
+  url: `/jpt/datasource/`,
+  method: 'post',
+  data: {...params}
 })