feat: 测试连接功能逻辑

src/module/datasource/component/DatasourceAdd.jsx

@@ -4,12 +4,13 @@ import {
   ProFormText,
   ProFormRadio,
   ProFormTextArea,
-  ProFormUploadButton
+  ProFormUploadButton,
+  ProForm
 } from '@ant-design/pro-components';
-import { Button, Col, message } from 'antd';
+import { Button, Col, message, Form } from 'antd';
 import { useState } from 'react'
 
-const DATA_TYPE_MYSQL = 'MYSQL'
+const DATA_TYPE_MYSQL = 'MySQL'
 const KERBS_VALID_TRUE = true
 
 const waitTime = (time: number = 100) => {
@@ -23,14 +24,28 @@ const waitTime = (time: number = 100) => {
 const DatasourceAdd = () => {
   const [dataType, setDataType] = useState(DATA_TYPE_MYSQL)
   const [kerbsValid, setKerbsValid] = useState(KERBS_VALID_TRUE)
+  const [loading, setLoading] = useState(false)
+  const [form] = Form.useForm()
+  // 测试连接
+  const testConnect = () => {
+    setLoading(true)
+    console.log(form.getFieldValue('username'));
+    setTimeout(()=>{
+      message.success('连接成功')
+      setLoading(false)
+    }, 3000)
+  }
+  const testConnectBtn = <Button onClick={testConnect} loading={loading}>测试连接</Button>
   return (
     <ModalForm
+      form={form}
       trigger={
         <Button type="primary">添加数据源</Button>
       }
       onFinish={async (values: any) => {
         await waitTime(2000);
         message.success('提交成功');
+        return true;
       }}
       initialValues={{
         dataType: DATA_TYPE_MYSQL,
@@ -40,7 +55,13 @@ const DatasourceAdd = () => {
       title="添加数据源"
       modalProps={{
         destroyOnClose: true,
-        width: '60%'
+        width: '60%',
+        afterClose: () => {
+          setDataType(DATA_TYPE_MYSQL)
+          setKerbsValid(KERBS_VALID_TRUE)
+          form.resetFields()
+        },
+        okText: '确认添加'
       }}
       layout='horizontal'
       grid={true}
@@ -57,7 +78,7 @@ const DatasourceAdd = () => {
           onChange: (val) => setDataType(val)
         }}
         valueEnum={{
-          'MYSQL': 'My SQL',
+          'MySQL': 'My SQL',
           'hive': 'hive',
         }}
         rules={[
@@ -84,6 +105,7 @@ const DatasourceAdd = () => {
         valueEnum={{
           'online': '线上',
           'test': '测试',
+          'develop': '开发'
         }}
         rules={[
           {
@@ -150,23 +172,19 @@ const DatasourceAdd = () => {
           },
         ]}
       /> : <></>}
+
+      <Col span={12} style={{'paddingLeft':'22.5px','paddingRight': '22.5px'}}>
+        <ProForm.Item label="测试连接" name='success'>
+          {testConnectBtn}
+        </ProForm.Item>
+      </Col>
       
-      <ProFormRadio.Group
-        label="测试连接"
-        name="connectBtn"
-        radioType="button"
-        options={[
-          {
-            label: '测试连接',
-            value: 'connectTest',
-          },
-        ]}
-      />
+
       {
         dataType === 'hive' && kerbsValid ? <>
-        <ProFormUploadButton label="keytab" name="keytab" action="upload.do"/>
+        <ProFormUploadButton label="keytab" name="keytab" action="upload.do" title='上传keyTabPath' max={1}/>
         <Col span={12}/>
-        <ProFormUploadButton label="krd5config" name="krd5config" action="upload.do"/>
+        <ProFormUploadButton label="krd5config" name="krd5config" action="upload.do" title='上传kard5config' max={1}/>
         <Col span={12}/>
         <ProFormText label="Principal" name='principal' placeholder='ylaiuser@EMR-56L6ZNTS'></ProFormText></> : <></>}