feat: 重构成函数式

src/module/datasource/component/DatasourceAddDialog.jsx

@@ -0,0 +1,7 @@
+const DatasourceAddDialog = () => {
+  return (123)
+}
+
+DatasourceAddDialog.propTypes = {}
+
+export default DatasourceAddDialog

src/module/datasource/component/DatasourceManage.jsx

@@ -1,87 +1,8 @@
 import React from "react";
 import { Space, Table } from 'antd'
-class DatasourceManage extends React.Component {
-  render() {
-    const columns = [
-      {
-        title: '数据源名称',
-        dataIndex: 'dataName',
-        key: 'dataName',
-      },
-      {
-        title: '数据源类型',
-        dataIndex: 'dataType',
-        key: 'dataType',
-      },
-      {
-        title: '标签',
-        dataIndex: 'dataTag',
-        key: 'dataTag',
-        render: (text) => <span style={{'color': '#1881DA'}}>{text}</span>
-      },
-      {
-        title: '详情',
-        key: 'dataDetails',
-        dataIndex: 'dataDetails',
-      },
-      {
-        title: '创建时间',
-        key: 'createTime',
-        dataIndex: 'createTime',
-        render: (time) => this.formatTime(time)
-      },
-      {
-        title: '更新时间',
-        key: 'updateTime',
-        dataIndex: 'updateTime',
-        render: (time) => this.formatTime(time)
-      },
-      {
-        title: '操作',
-        key: 'operation',
-        render: (_) => (
-          <Space size="middle">
-            <a href="/#" onClick={this.checkData} style={{'color': '#1881DA'}}>查看</a>
-            <a href="/#" onClick={this.editData} style={{'color': '#1881DA'}}>编辑</a>
-            <a href="/#" onClick={this.deleteData} style={{'color': '#1881DA'}}>删除</a>
-          </Space>
-        ),
-      },
-    ];
-    const data = [
-      {
-        key: '1',
-        dataName: '奶粉渠道销售库',
-        dataType: 'MYSQL',
-        dataTag: '开发',
-        dataDetails: '七台河信息5',
-        createTime: '1660391639458',
-        updateTime: '1660391639458'
-      },
-      {
-        key: '2',
-        dataName: '奶粉渠道销售库',
-        dataType: 'HIVE',
-        dataTag: '测试',
-        dataDetails: '七台河信息4',
-        createTime: '1660391639458',
-        updateTime: '1660391639458'
-      },
-      {
-        key: '3',
-        dataName: '奶粉渠道销售库',
-        dataType: 'MYSQL',
-        dataTag: '线上',
-        dataDetails: '七台河信息3',
-        createTime: '1660391639458',
-        updateTime: '1660391639458'
-      },
-    ];
-    return (
-      <Table columns={columns} dataSource={data} bordered/>
-    )
-  }
-  formatTime = (time) => {
+
+const DatasourceManage = () => {
+  const formatTime = (time) => {
     const date = new Date(Number(time));
     const YY = date.getFullYear();
     const MM = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
@@ -91,15 +12,91 @@ class DatasourceManage extends React.Component {
     const ss = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
     return YY + "-" + MM + "-" + DD + " " + hh + ":" + mm + ":" + ss;
   }
-  checkData = () => {
+  const checkData = () => {
     console.log('查看数据源');
   }
-  editData = () => {
+  const editData = () => {
     console.log('编辑数据源');
   }
-  deleteData = () => {
+  const deleteData = () => {
     console.log('删除数据源');
   }
+  const columns = [
+    {
+      title: '数据源名称',
+      dataIndex: 'dataName',
+      key: 'dataName',
+    },
+    {
+      title: '数据源类型',
+      dataIndex: 'dataType',
+      key: 'dataType',
+    },
+    {
+      title: '标签',
+      dataIndex: 'dataTag',
+      key: 'dataTag',
+      render: (text) => <span style={{'color': '#1881DA'}}>{text}</span>
+    },
+    {
+      title: '详情',
+      key: 'dataDetails',
+      dataIndex: 'dataDetails',
+    },
+    {
+      title: '创建时间',
+      key: 'createTime',
+      dataIndex: 'createTime',
+      render: (time) => formatTime(time)
+    },
+    {
+      title: '更新时间',
+      key: 'updateTime',
+      dataIndex: 'updateTime',
+      render: (time) => formatTime(time)
+    },
+    {
+      title: '操作',
+      key: 'operation',
+      render: (_) => (
+        <Space size="middle">
+          <a href="/#" onClick={checkData} style={{'color': '#1881DA'}}>查看</a>
+          <a href="/#" onClick={editData} style={{'color': '#1881DA'}}>编辑</a>
+          <a href="/#" onClick={deleteData} style={{'color': '#1881DA'}}>删除</a>
+        </Space>
+      ),
+    },
+  ];
+  const data = [
+    {
+      key: '1',
+      dataName: '奶粉渠道销售库',
+      dataType: 'MYSQL',
+      dataTag: '开发',
+      dataDetails: '七台河信息5',
+      createTime: '1660391639458',
+      updateTime: '1660391639458'
+    },
+    {
+      key: '2',
+      dataName: '奶粉渠道销售库',
+      dataType: 'HIVE',
+      dataTag: '测试',
+      dataDetails: '七台河信息4',
+      createTime: '1660391639458',
+      updateTime: '1660391639458'
+    },
+    {
+      key: '3',
+      dataName: '奶粉渠道销售库',
+      dataType: 'MYSQL',
+      dataTag: '线上',
+      dataDetails: '七台河信息3',
+      createTime: '1660391639458',
+      updateTime: '1660391639458'
+    },
+  ];
+  return (<Table columns={columns} dataSource={data} bordered/>)
 }
 
 DatasourceManage.propTypes = {}

src/module/datasource/page/DatasourceView.jsx

@@ -1,30 +1,33 @@
-import React from 'react'
-import { Tabs } from 'antd'
+import { Tabs, Button } from 'antd'
 import DataSourceManage from '../component/DatasourceManage.jsx'
 
 const { TabPane } = Tabs
 
-class DatasourceView extends React.Component {
-  onChange = key => {
+const DatasourceView = () => {
+  const onChange = key => {
     console.log(key)
   }
-  render() {
-    return (
-      <Tabs onChange={this.onChange} type="card">
-        <TabPane tab="数据源管理" key="1">
-          <DataSourceManage />
-        </TabPane>
-        <TabPane tab="同步配置" key="2">
-          Content of Tab Pane 2
-        </TabPane>
-        <TabPane tab="日志管理" key="3">
-          Content of Tab Pane 3
-        </TabPane>
-      </Tabs>
-    )
+
+  const addData = () => {
+    console.log('添加数据源');
   }
-}
 
+  const addDataBtn = <Button type="primary" onClick={addData}>添加数据源</Button>
+
+  return (
+    <Tabs onChange={onChange} type="card" tabBarExtraContent={addDataBtn}>
+      <TabPane tab="数据源管理" key="1">
+        <DataSourceManage />
+      </TabPane>
+      <TabPane tab="同步配置" key="2">
+        Content of Tab Pane 2
+      </TabPane>
+      <TabPane tab="日志管理" key="3">
+        Content of Tab Pane 3
+      </TabPane>
+    </Tabs>
+  )
+}
 DatasourceView.propTypes = {}
 
 export default DatasourceView