编辑数据源

dlink-admin/pom.xml

@@ -82,6 +82,7 @@
             <groupId>com.dlink</groupId>
             <artifactId>dlink-common</artifactId>
         </dependency>
+
         <dependency>
             <groupId>com.dlink</groupId>
             <artifactId>dlink-metadata-base</artifactId>
@@ -89,7 +90,7 @@
         <dependency>
             <groupId>com.dlink</groupId>
             <artifactId>dlink-metadata-mysql</artifactId>
-            <scope>provided</scope>
+            <!--<scope>provided</scope>-->
         </dependency>
     </dependencies>
     <build>

dlink-admin/src/main/java/com/dlink/controller/DataBaseController.java

@@ -77,4 +77,11 @@ public class DataBaseController {
         return Result.succeed(database,"获取成功");
     }
 
+    /**
+     * 全部心跳监测
+     */
+    @PostMapping("/testConnect")
+    public Result testConnect(@RequestBody DataBase database) {
+        return Result.succeed(databaseService.checkHeartBeat(database),"获取成功");
+    }
 }
\ No newline at end of file

dlink-web/src/pages/DataBase/components/DBForm.tsx

@@ -6,7 +6,8 @@ import {connect} from "umi";
 import {StateType} from "@/pages/FlinkSqlStudio/model";
 import {getDBImage} from "@/pages/DataBase/DB";
 import MysqlForm from "@/pages/DataBase/components/MySqlForm";
-import {handleAddOrUpdate} from "@/components/Common/crud";
+import {handleAddOrUpdate, handleOption, postAll} from "@/components/Common/crud";
+import {createOrModifyDatabase, testDatabaseConnect} from "@/pages/DataBase/service";
 
 export type UpdateFormProps = {
   onCancel: (flag?: boolean, formVals?: Partial<DataBaseItem>) => void;
@@ -40,18 +41,13 @@ const DBForm: React.FC<UpdateFormProps> = (props) => {
   } = props;
 
   const [dbType, setDbType] = useState<string>();
-  const [createModalVisible, handleModalVisible] = useState<boolean>(false);
 
   const chooseOne = (item:DataBaseItem)=>{
     setDbType(item.type);
-    handleModalVisible(true);
-    // handleChooseDBModalVisible();
-
   };
 
   const onSubmit = async (value:any)=>{
-    console.log(value);
-    const success = await handleAddOrUpdate('/api/database', value);
+    const success = await createOrModifyDatabase(value);
     if (success) {
       handleChooseDBModalVisible();
       setDbType(undefined);
@@ -59,17 +55,25 @@ const DBForm: React.FC<UpdateFormProps> = (props) => {
     }
   };
 
+  const onTest = async (value:any)=>{
+    await testDatabaseConnect(value);
+  };
+
   return (
     <Modal
       width={800}
       bodyStyle={{padding: '32px 40px 48px'}}
-      title={'创建数据源'}
+      title={values.id?'编辑数据源':'创建数据源'}
       visible={modalVisible}
-      onCancel={() => handleChooseDBModalVisible()}
+      onCancel={() => {
+        setDbType(undefined);
+        handleChooseDBModalVisible();
+      }}
       maskClosable = {false}
+      destroyOnClose = {true}
       footer={null}
     >{
-      !dbType&&(<List
+      (!dbType&&!values.id)&&(<List
         grid={{
           gutter: 16,
           xs: 1,
@@ -96,11 +100,14 @@ const DBForm: React.FC<UpdateFormProps> = (props) => {
     }
       <MysqlForm
         onCancel={() => setDbType(undefined)}
-        modalVisible={dbType=='MySql'}
-        values={{}}
+        modalVisible={dbType=='MySql'||values.type=='MySql'}
+        values={values}
         onSubmit={(value) => {
           onSubmit(value);
         }}
+        onTest={(value) => {
+          onTest(value);
+        }}
       />
     </Modal>
   );

dlink-web/src/pages/DataBase/components/MySqlForm.tsx

@@ -9,6 +9,7 @@ import {DataBaseItem} from "@/pages/DataBase/data";
 export type MysqlFormProps = {
   onCancel: (flag?: boolean, formVals?: Partial<DataBaseItem>) => void;
   onSubmit: (values: Partial<DataBaseItem>) => void;
+  onTest: (values: Partial<DataBaseItem>) => void;
   modalVisible: boolean;
   values: Partial<DataBaseItem>;
 };
@@ -37,6 +38,7 @@ const MysqlForm: React.FC<MysqlFormProps> = (props) => {
   const [form] = Form.useForm();
   const {
     onSubmit: handleUpdate,
+    onTest: handleTest,
     onCancel: handleModalVisible,
     modalVisible,
     values,
@@ -48,6 +50,12 @@ const MysqlForm: React.FC<MysqlFormProps> = (props) => {
     handleUpdate({...formVals, ...fieldsValue});
   };
 
+  const testForm = async () => {
+    const fieldsValue = await form.validateFields();
+    setFormVals({...formVals, ...fieldsValue});
+    handleTest({...formVals, ...fieldsValue});
+  };
+
   const onReset = () => {
     form.resetFields();
   };
@@ -146,10 +154,10 @@ const MysqlForm: React.FC<MysqlFormProps> = (props) => {
                   <Button htmlType="button" onClick={onReset}>
                     重置
                   </Button>
-                  <Button htmlType="button">
+                  <Button type="primary" htmlType="button" onClick={testForm}>
                     测试
                   </Button>
-                  <Button type="primary" htmlType="button" onClick={() => submitForm()}>
+                  <Button type="primary" htmlType="button" onClick={submitForm}>
                     保存
                   </Button>
                 </Space>

dlink-web/src/pages/DataBase/index.less

+
+.cardImage{
+  height: 120px;
+}

dlink-web/src/pages/DataBase/service.ts

+import request from "umi-request";
+import {handleAddOrUpdate, handleOption, postAll} from "@/components/Common/crud";
+import {DataBaseItem} from "@/pages/DataBase/data";
+import {message} from "antd";
+
+export async function createOrModifyDatabase(databse: DataBaseItem) {
+  return handleAddOrUpdate('/api/database', databse);
+}
+
+export async function testDatabaseConnect(databse: DataBaseItem) {
+  const hide = message.loading('正在测试连接');
+  try {
+    const {datas} = await postAll('/api/database/testConnect',databse);
+    hide();
+    datas?message.success("数据源连接测试成功！"):message.error("数据源连接测试失败，请检查连接配置。");
+  } catch (error) {
+    hide();
+    message.error('请求失败，请重试');
+  }
+}