Kaynağa Gözat

feat: 更新数据源管理表格样式和展示数据

nobody 2 yıl önce
ebeveyn
işleme
3ac94a49c5

+ 37 - 25
src/module/datasource/component/DatasourceManage.jsx

@@ -17,7 +17,7 @@ class DatasourceManage extends React.Component {
         title: '标签',
         dataIndex: 'dataTag',
         key: 'dataTag',
-        render: (text) => <span style={{'color': 'blue'}}>{text}</span>
+        render: (text) => <span style={{'color': '#1881DA'}}>{text}</span>
       },
       {
         title: '详情',
@@ -28,20 +28,22 @@ class DatasourceManage extends React.Component {
         title: '创建时间',
         key: 'createTime',
         dataIndex: 'createTime',
+        render: (time) => this.formatTime(time)
       },
       {
         title: '更新时间',
         key: 'updateTime',
         dataIndex: 'updateTime',
+        render: (time) => this.formatTime(time)
       },
       {
-        title: 'Action',
-        key: 'action',
+        title: '操作',
+        key: 'operation',
         render: (_) => (
           <Space size="middle">
-            <a href="/#" onClick={this.checkData}>查看</a>
-            <a href="/#" onClick={this.editData}>编辑</a>
-            <a href="/#" onClick={this.deleteData}>删除</a>
+            <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>
         ),
       },
@@ -49,36 +51,46 @@ class DatasourceManage extends React.Component {
     const data = [
       {
         key: '1',
-        dataName: 'John Brown',
-        dataType: 32,
-        dataTag: 'New York No. 1 Lake Park',
-        dataDetails: ['nice', 'developer'],
-        createTime: '1660389395',
-        updateTime: '1660389395'
+        dataName: '奶粉渠道销售库',
+        dataType: 'MYSQL',
+        dataTag: '开发',
+        dataDetails: '七台河信息5',
+        createTime: '1660391639458',
+        updateTime: '1660391639458'
       },
       {
         key: '2',
-        dataName: 'Jim Green',
-        dataType: 42,
-        dataTag: 'London No. 1 Lake Park',
-        dataDetails: ['loser'],
-        createTime: '1660389395',
-        updateTime: '1660389395'
+        dataName: '奶粉渠道销售库',
+        dataType: 'HIVE',
+        dataTag: '测试',
+        dataDetails: '七台河信息4',
+        createTime: '1660391639458',
+        updateTime: '1660391639458'
       },
       {
         key: '3',
-        dataName: 'Joe Black',
-        dataType: 32,
-        dataTag: 'Sidney No. 1 Lake Park',
-        dataDetails: ['cool', 'teacher'],
-        createTime: '1660389395',
-        updateTime: '1660389395'
+        dataName: '奶粉渠道销售库',
+        dataType: 'MYSQL',
+        dataTag: '线上',
+        dataDetails: '七台河信息3',
+        createTime: '1660391639458',
+        updateTime: '1660391639458'
       },
     ];
     return (
-      <Table columns={columns} dataSource={data} />
+      <Table columns={columns} dataSource={data} bordered/>
     )
   }
+  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;
+    const DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
+    const hh = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
+    const mm = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
+    const ss = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
+    return YY + "-" + MM + "-" + DD + " " + hh + ":" + mm + ":" + ss;
+  }
   checkData = () => {
     console.log('查看数据源');
   }