表结构、内容

package.json

@@ -14,6 +14,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^5.3.5",
     "web-vitals": "^2.1.4",
     "yarn": "^1.22.19"
   },

src/module/datasource/component/DatasourceAdd.jsx

@@ -5,23 +5,23 @@ import {
   ProFormRadio,
   ProFormTextArea,
   ProFormUploadButton,
-  ProForm
-} from '@ant-design/pro-components';
-import { Button, Col, message, Form } from 'antd';
+  ProForm,
+} from '@ant-design/pro-components'
+import { Button, Col, message, Form } from 'antd'
 import { useState } from 'react'
 
 const DATA_TYPE_MYSQL = 'MySQL'
 const KERBS_VALID_TRUE = true
 
-const waitTime = (time: number = 100) => {
-  return new Promise((resolve) => {
+const waitTime = (time = 100) => {
+  return new Promise(resolve => {
     setTimeout(() => {
-      resolve(true);
-    }, time);
-  });
-};
+      resolve(true)
+    }, time)
+  })
+}
 
-export default function DatasourceAdd()  {
+export default function DatasourceAdd() {
   const [dataType, setDataType] = useState(DATA_TYPE_MYSQL)
   const [kerbsValid, setKerbsValid] = useState(KERBS_VALID_TRUE)
   const [loading, setLoading] = useState(false)
@@ -29,28 +29,30 @@ export default function DatasourceAdd()  {
   // 测试连接
   const testConnect = () => {
     setLoading(true)
-    console.log(form.getFieldValue('username'));
-    setTimeout(()=>{
+    console.log(form.getFieldValue('username'))
+    setTimeout(() => {
       message.success('连接成功')
       setLoading(false)
     }, 3000)
   }
-  const testConnectBtn = <Button onClick={testConnect} loading={loading}>测试连接</Button>
+  const testConnectBtn = (
+    <Button onClick={testConnect} loading={loading}>
+      测试连接
+    </Button>
+  )
   return (
     <ModalForm
       form={form}
-      trigger={
-        <Button type="primary">添加数据源</Button>
-      }
-      onFinish={async (values: any) => {
-        await waitTime(2000);
-        message.success('提交成功');
-        return true;
+      trigger={<Button type="primary">添加数据源</Button>}
+      onFinish={async values => {
+        await waitTime(2000)
+        message.success('提交成功')
+        return true
       }}
       initialValues={{
         dataType: DATA_TYPE_MYSQL,
         connectBtn: 'connectTest',
-        kerbsValid: KERBS_VALID_TRUE
+        kerbsValid: KERBS_VALID_TRUE,
       }}
       title="添加数据源"
       modalProps={{
@@ -61,25 +63,24 @@ export default function DatasourceAdd()  {
           setKerbsValid(KERBS_VALID_TRUE)
           form.resetFields()
         },
-        okText: '确认添加'
+        okText: '确认添加',
       }}
-      layout='horizontal'
+      layout="horizontal"
       grid={true}
-      labelCol={{span: 7}}
+      labelCol={{ span: 7 }}
       colProps={{ span: 12 }}
       rowProps={{
         gutter: [45, 0],
-      }}
-    >
+      }}>
       <ProFormSelect
         label="选择数据源"
         name="dataType"
         fieldProps={{
-          onChange: (val) => setDataType(val)
+          onChange: val => setDataType(val),
         }}
         valueEnum={{
-          'MySQL': 'My SQL',
-          'hive': 'hive',
+          MySQL: 'My SQL',
+          hive: 'hive',
         }}
         rules={[
           {
@@ -88,7 +89,7 @@ export default function DatasourceAdd()  {
           },
         ]}
       />
-      <Col span={12}/>
+      <Col span={12} />
       <ProFormText
         label="数据源名称"
         name="dataName"
@@ -103,9 +104,9 @@ export default function DatasourceAdd()  {
         label="数据源标签"
         name="dataTag"
         valueEnum={{
-          'online': '线上',
-          'test': '测试',
-          'develop': '开发'
+          online: '线上',
+          test: '测试',
+          develop: '开发',
         }}
         rules={[
           {
@@ -154,40 +155,65 @@ export default function DatasourceAdd()  {
           },
         ]}
       />
-      <ProFormTextArea label="详情" name="dataDetails" fieldProps={{autoSize: true}}/> 
-      {dataType === 'hive' ? <ProFormRadio.Group
-        label="kerbs验证"
-        name="kerbsValid"
-        fieldProps={{
-          onChange: (e) => setKerbsValid(e.target.value)
-        }}
-        options={[
-          {
-            label: '是',
-            value: true,
-          },
-          {
-            label: '否',
-            value: false,
-          },
-        ]}
-      /> : <></>}
+      <ProFormTextArea
+        label="详情"
+        name="dataDetails"
+        fieldProps={{ autoSize: true }}
+      />
+      {dataType === 'hive' ? (
+        <ProFormRadio.Group
+          label="kerbs验证"
+          name="kerbsValid"
+          fieldProps={{
+            onChange: e => setKerbsValid(e.target.value),
+          }}
+          options={[
+            {
+              label: '是',
+              value: true,
+            },
+            {
+              label: '否',
+              value: false,
+            },
+          ]}
+        />
+      ) : (
+        <></>
+      )}
 
-      <Col span={12} style={{'paddingLeft':'22.5px','paddingRight': '22.5px'}}>
-        <ProForm.Item label="测试连接" name='success'>
+      <Col span={12} style={{ paddingLeft: '22.5px', paddingRight: '22.5px' }}>
+        <ProForm.Item label="测试连接" name="success">
           {testConnectBtn}
         </ProForm.Item>
       </Col>
-      
 
-      {
-        dataType === 'hive' && kerbsValid ? <>
-        <ProFormUploadButton label="keytab" name="keytab" action="upload.do" title='上传keyTabPath' max={1}/>
-        <Col span={12}/>
-        <ProFormUploadButton label="krd5config" name="krd5config" action="upload.do" title='上传kard5config' max={1}/>
-        <Col span={12}/>
-        <ProFormText label="Principal" name='principal' placeholder='ylaiuser@EMR-56L6ZNTS'></ProFormText></> : <></>}
-      
+      {dataType === 'hive' && kerbsValid ? (
+        <>
+          <ProFormUploadButton
+            label="keytab"
+            name="keytab"
+            action="upload.do"
+            title="上传keyTabPath"
+            max={1}
+          />
+          <Col span={12} />
+          <ProFormUploadButton
+            label="krd5config"
+            name="krd5config"
+            action="upload.do"
+            title="上传kard5config"
+            max={1}
+          />
+          <Col span={12} />
+          <ProFormText
+            label="Principal"
+            name="principal"
+            placeholder="ylaiuser@EMR-56L6ZNTS"></ProFormText>
+        </>
+      ) : (
+        <></>
+      )}
     </ModalForm>
-  );
-};
+  )
+}

src/module/datasource/component/DatasourceData.jsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { Tree, Tabs } from 'antd'
+const { DirectoryTree } = Tree
+const { TabPane } = Tabs
+
+const DatasourceWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  height: 700px;
+  .datasource__tree {
+    width: 30%;
+    overflow: scroll;
+    background: #f3f3f3;
+    margin-top: 40px;
+    padding-top: 20px;
+  }
+  .datasource__table {
+    flex: 1;
+    height: 100%;
+    margin-left: 15px;
+    overflow: scroll;
+  }
+`
+
+const treeData = [
+  {
+    title: 'node1',
+    key: '1',
+    isLeaf: true,
+  },
+  {
+    title: 'node2',
+    key: '2',
+    isLeaf: true,
+  },
+  {
+    title: 'node3',
+    key: '3',
+    isLeaf: true,
+  },
+  {
+    title: 'node4',
+    key: '4',
+    isLeaf: true,
+  },
+]
+
+const DatasourceData = () => {
+  const onSelect = selectedKeys => {
+    console.log('selected', selectedKeys)
+  }
+
+  const onChange = key => {
+    console.log('key', key)
+  }
+
+  const tree = (
+    <DirectoryTree
+      className="datasource__tree"
+      treeData={treeData}
+      onSelect={onSelect}
+    />
+  )
+
+  return (
+    <DatasourceWrapper>
+      {tree}
+      <Tabs onChange={onChange} className="datasource__table" size={'small'}>
+        <TabPane tab="预览表内容" key="1">
+          Content of Tab Pane 1
+        </TabPane>
+        <TabPane tab="预览表结构" key="2">
+          Content of Tab Pane 2
+        </TabPane>
+      </Tabs>
+    </DatasourceWrapper>
+  )
+}
+
+export default DatasourceData

src/module/datasource/component/DatasourceManage.jsx

@@ -1,25 +1,33 @@
-import React from "react";
-import { Space, Table } from 'antd'
+import React, { useState } from 'react'
+import { Space, Table, Modal } from 'antd'
+import DatasourceData from '../component/DatasourceData'
 
 export default function 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;
-    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;
+  const [dataModalVisible, setDataModalVisible] = useState(false)
+  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
+    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
   }
   const checkData = () => {
-    console.log('查看数据源');
+    setDataModalVisible(true)
+    console.log('查看数据源')
   }
   const editData = () => {
-    console.log('编辑数据源');
+    console.log('编辑数据源')
   }
   const deleteData = () => {
-    console.log('删除数据源');
+    console.log('删除数据源')
   }
   const columns = [
     {
@@ -36,7 +44,7 @@ export default function DatasourceManage() {
       title: '标签',
       dataIndex: 'dataTag',
       key: 'dataTag',
-      render: (text) => <span style={{'color': '#1881DA'}}>{text}</span>
+      render: text => <span style={{ color: '#1881DA' }}>{text}</span>,
     },
     {
       title: '详情',
@@ -47,26 +55,32 @@ export default function DatasourceManage() {
       title: '创建时间',
       key: 'createTime',
       dataIndex: 'createTime',
-      render: (time) => formatTime(time)
+      render: time => formatTime(time),
     },
     {
       title: '更新时间',
       key: 'updateTime',
       dataIndex: 'updateTime',
-      render: (time) => formatTime(time)
+      render: time => formatTime(time),
     },
     {
       title: '操作',
       key: 'operation',
-      render: (_) => (
+      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>
+          <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',
@@ -75,7 +89,7 @@ export default function DatasourceManage() {
       dataTag: '开发',
       dataDetails: '七台河信息5',
       createTime: '1660391639458',
-      updateTime: '1660391639458'
+      updateTime: '1660391639458',
     },
     {
       key: '2',
@@ -84,7 +98,7 @@ export default function DatasourceManage() {
       dataTag: '测试',
       dataDetails: '七台河信息4',
       createTime: '1660391639458',
-      updateTime: '1660391639458'
+      updateTime: '1660391639458',
     },
     {
       key: '3',
@@ -93,8 +107,28 @@ export default function DatasourceManage() {
       dataTag: '线上',
       dataDetails: '七台河信息3',
       createTime: '1660391639458',
-      updateTime: '1660391639458'
+      updateTime: '1660391639458',
     },
-  ];
-  return (<Table columns={columns} dataSource={data} bordered/>)
+  ]
+
+  const handledataModalCancel = () => {
+    setDataModalVisible(false)
+  }
+
+  const dataModal = (
+    <Modal
+      title="数据表预览"
+      visible={dataModalVisible}
+      onCancel={handledataModalCancel}
+      footer={null}
+      width={800}
+      bodyStyle={{ paddingTop: 0 }}>
+      <DatasourceData />
+    </Modal>
+  )
+  return (
+    <>
+      <Table columns={columns} dataSource={data} bordered /> {dataModal}
+    </>
+  )
 }