Browse Source

feat: 添加数据源管理表格

nobody 2 years ago
parent
commit
16ede7ef43

+ 95 - 0
src/module/datasource/component/DatasourceManage.jsx

@@ -0,0 +1,95 @@
+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': 'blue'}}>{text}</span>
+      },
+      {
+        title: '详情',
+        key: 'dataDetails',
+        dataIndex: 'dataDetails',
+      },
+      {
+        title: '创建时间',
+        key: 'createTime',
+        dataIndex: 'createTime',
+      },
+      {
+        title: '更新时间',
+        key: 'updateTime',
+        dataIndex: 'updateTime',
+      },
+      {
+        title: 'Action',
+        key: 'action',
+        render: (_) => (
+          <Space size="middle">
+            <a href="/#" onClick={this.checkData}>查看</a>
+            <a href="/#" onClick={this.editData}>编辑</a>
+            <a href="/#" onClick={this.deleteData}>删除</a>
+          </Space>
+        ),
+      },
+    ];
+    const data = [
+      {
+        key: '1',
+        dataName: 'John Brown',
+        dataType: 32,
+        dataTag: 'New York No. 1 Lake Park',
+        dataDetails: ['nice', 'developer'],
+        createTime: '1660389395',
+        updateTime: '1660389395'
+      },
+      {
+        key: '2',
+        dataName: 'Jim Green',
+        dataType: 42,
+        dataTag: 'London No. 1 Lake Park',
+        dataDetails: ['loser'],
+        createTime: '1660389395',
+        updateTime: '1660389395'
+      },
+      {
+        key: '3',
+        dataName: 'Joe Black',
+        dataType: 32,
+        dataTag: 'Sidney No. 1 Lake Park',
+        dataDetails: ['cool', 'teacher'],
+        createTime: '1660389395',
+        updateTime: '1660389395'
+      },
+    ];
+    return (
+      <Table columns={columns} dataSource={data} />
+    )
+  }
+  checkData = () => {
+    console.log('查看数据源');
+  }
+  editData = () => {
+    console.log('编辑数据源');
+  }
+  deleteData = () => {
+    console.log('删除数据源');
+  }
+}
+
+DatasourceManage.propTypes = {}
+
+export default DatasourceManage

+ 5 - 4
src/module/datasource/page/DatasourceView.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Tabs } from 'antd'
+import DataSourceManage from '../component/DatasourceManage.jsx'
 
 const { TabPane } = Tabs
 
@@ -10,13 +11,13 @@ class DatasourceView extends React.Component {
   render() {
     return (
       <Tabs onChange={this.onChange} type="card">
-        <TabPane tab="Tab 1" key="1">
-          Content of Tab Pane 1
+        <TabPane tab="数据源管理" key="1">
+          <DataSourceManage />
         </TabPane>
-        <TabPane tab="Tab 2" key="2">
+        <TabPane tab="同步配置" key="2">
           Content of Tab Pane 2
         </TabPane>
-        <TabPane tab="Tab 3" key="3">
+        <TabPane tab="日志管理" key="3">
           Content of Tab Pane 3
         </TabPane>
       </Tabs>