feat: 完善数据源列表添加和删除逻辑

src/module/datasource/component/DatasourceAdd.jsx

@@ -14,7 +14,7 @@ import {testDataSourceConnection, createDataSource} from '../services'
 const DATA_TYPE_MYSQL = 'mysql'
 const KERBS_VALID_FALSE = false
 
-export default function DatasourceAdd() {
+export default function DatasourceAdd({updateDataSource}) {
   // 数据源类型
   const [dataType, setDataType] = useState(DATA_TYPE_MYSQL)
   // 是否开启kerbsValid验证
@@ -47,6 +47,7 @@ export default function DatasourceAdd() {
     const { data } = await createDataSource(form.getFieldsValue(filds))
     if (data.code === 200) {
       message.success('添加成功')
+      updateDataSource()
     } else {
       message.error('添加失败，请检查数据')
     }

src/module/datasource/component/DatasourceManage.jsx

@@ -1,10 +1,12 @@
-import React, { useState, useEffect } from 'react'
-import { Space, Table, Modal } from 'antd'
+import React, { useState, useEffect, useImperativeHandle } from 'react'
+import { Space, Table, Modal, message } from 'antd'
 import DatasourceData from '../component/DatasourceData'
-import {getDataSourceList} from '../services'
+import {getDataSourceList, delDataSource} from '../services'
+import { ExclamationCircleOutlined } from '@ant-design/icons'
 
+const { confirm } = Modal
 
-export default function DatasourceManage() {
+export default function DatasourceManage({onRef}) {
   // 查看数据源弹窗是否可可视
   const [dataModalVisible, setDataModalVisible] = useState(false)
 
@@ -14,27 +16,59 @@ export default function DatasourceManage() {
   // 表格Loading状态
   const [dataLoading, setDataLoading] = useState(false)
 
-  // 获取数据源列表数据
-  useEffect(() => {
-    const fetchDataSourceList = async () => {
-      setDataLoading(true)
-      const { data } = await getDataSourceList()
-      if (data.code === 200) {
-        const list = data.data.items.map(item => {
-          return {
-            key: item.id,
-            datasource_name: item.datasource_name,
-            datasource: item.datasource,
-            dataTag: '开发',
-            comments: item.comments,
-            create_time: item.create_time,
-            update_time: item.update_time,
-          }
-        })
-        setDataSourceList(list)
-      }
-      setDataLoading(false)
+  // 获取列表数据
+  const fetchDataSourceList = async () => {
+    setDataLoading(true)
+    const { data } = await getDataSourceList()
+    if (data.code === 200) {
+      const list = data.data.items.map(item => {
+        return {
+          key: item.id,
+          datasource_name: item.datasource_name,
+          datasource: item.datasource,
+          dataTag: '开发',
+          comments: item.comments,
+          create_time: item.create_time,
+          update_time: item.update_time,
+        }
+      })
+      setDataSourceList(list)
+    }
+    setDataLoading(false)
+  }
+
+  // 暴露更新列表方法
+  useImperativeHandle(onRef, () => {
+    return {
+      updateSourceList: fetchDataSourceList
     }
+  })
+
+  // 删除确认
+  const DeleteConfirm = (key) => {
+    confirm({
+      title: '是否要删除该数据源?',
+      icon: <ExclamationCircleOutlined />,
+      okText: '确认删除',
+      okType: 'danger',
+      cancelText: '取消',
+      onOk: async () => {
+        const { data } = await delDataSource(key)
+        if (data.code === 200) {
+          message.success('删除成功')
+          fetchDataSourceList()
+        } else {
+          message.success('删除失败')
+        }
+      },
+      onCancel() {
+        message.info('取消删除')
+      }
+    })
+  }
+
+  // componentDidMount
+  useEffect(() => {
     fetchDataSourceList()
   }, []);
 
@@ -63,10 +97,6 @@ export default function DatasourceManage() {
   const editData = () => {
     console.log('编辑数据源')
   }
-  // 删除数据
-  const deleteData = () => {
-    console.log('删除数据源')
-  }
   // 表格项
   const columns = [
     {
@@ -105,7 +135,7 @@ export default function DatasourceManage() {
     {
       title: '操作',
       key: 'operation',
-      render: _ => (
+      render: (_, record) => (
         <Space size="middle">
           <a href="/#" onClick={checkData} style={{ color: '#1881DA' }}>
             查看
@@ -113,7 +143,9 @@ export default function DatasourceManage() {
           <a href="/#" onClick={editData} style={{ color: '#1881DA' }}>
             编辑
           </a>
-          <a href="/#" onClick={deleteData} style={{ color: '#1881DA' }}>
+          <a href="/#" onClick={() => {
+            DeleteConfirm(record.key)
+          }} style={{ color: '#1881DA' }}>
             删除
           </a>
         </Space>

src/module/datasource/page/DatasourceView.jsx

@@ -2,15 +2,20 @@ import { Tabs } from 'antd'
 import DataSourceManage from '../component/DatasourceManage.jsx'
 import DatasourceAdd from '../component/DatasourceAdd'
 
+import React from 'react'
 const { TabPane } = Tabs
 
 export default function DatasourceView() {
+  const sourceRef = React.createRef()
+  const updateDataSource = () => {
+    sourceRef.current.updateSourceList()
+  }
   return (
     <>
       {/* Tab栏及内容 */}
-      <Tabs type="card" tabBarExtraContent={<DatasourceAdd/>}>
+      <Tabs type="card" tabBarExtraContent={<DatasourceAdd updateDataSource={updateDataSource}/>}>
         <TabPane tab="数据源管理" key="1">
-          <DataSourceManage />
+          <DataSourceManage onRef={sourceRef} />
         </TabPane>
         <TabPane tab="同步配置" key="2">
           Content of Tab Pane 2

src/module/datasource/services/index.js

@@ -1,16 +1,26 @@
 import request from '../../../utils/request'
 
+// 获取数据源列表
 export const getDataSourceList  = params => request({
   url: `/jpt/datasource/`,
   method: 'get',
+  params
 })
 
+// 删除指定数据源
+export const delDataSource  = id => request({
+  url: `/jpt/datasource/`+id,
+  method: 'delete',
+})
+
+// 测试数据源连接
 export const testDataSourceConnection = params => request({
   url: '/jpt/datasource/test',
   method: 'post',
   data: {...params}
 })
 
+// 创建数据源
 export const createDataSource  = params => request({
   url: `/jpt/datasource/`,
   method: 'post',