导入数据表弹窗

src/module/datasource/page/DatasourceView.jsx

@@ -1,4 +1,4 @@
-import { Tabs, Button, Space, Select, Modal } from 'antd'
+import { Tabs, Button, Space, Select, Modal, Input } from 'antd'
 import DataSourceManage from '../component/DatasourceManage.jsx'
 import DatasourceAdd from '../component/DatasourceAdd'
 import DatasourceSyncView from '../component/DatasourceSyncView'
@@ -27,6 +27,29 @@ export default function DatasourceView() {
   const [currentSyncPageSize, setCurrentSyncPageSize] = useState(10)
   const [currentLogPage, setCurrentLogPage] = useState(1)
   const [currentLogPageSize, setCurrentLogPageSize] = useState(10)
+  // 导入数据表
+  const [importData, setImportData] = useState(false)
+  const importTable = async () => {}
+  const importModal = (
+    <Modal
+      title="导入数据表"
+      visible="importData"
+      onOk={importTable}
+      okText="确认导入"
+      onCancel={() => {
+        setImportData(false)
+      }}>
+      <Space style={{ padding: '10px 10px 10px ' }}>
+        <span>数据库名称：</span>
+        <Input></Input>
+      </Space>
+      <br />
+      <Space style={{ padding: '10px 10px 10px ' }}>
+        <span>数据表名称：</span>
+        <Input></Input>
+      </Space>
+    </Modal>
+  )
   // 数据隔离
   const [currentDataType, setCurrentDataType] = useState('ailab')
 
@@ -85,7 +108,13 @@ export default function DatasourceView() {
               </Button>
             )}
             {currentDataType === 'datalake' && (
-              <Button type="primary">导入数据表</Button>
+              <Button
+                type="primary"
+                onclick={() => {
+                  setImportData(true)
+                }}>
+                导入数据表
+              </Button>
             )}
           </Space>
         )
@@ -133,6 +162,7 @@ export default function DatasourceView() {
           />
         </TabPane>
       </Tabs>
+      {importModal}
     </Datasource>
   )
 }