bug修复

src/module/datasource/component/DatasourceData.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react'
 import styled from 'styled-components'
-import { Tree, Tabs, Table } from 'antd'
+import { Tree, Tabs, Table, Input } from 'antd'
 import { getTableData, getTableSchema } from '../services'
 
 const { DirectoryTree } = Tree
@@ -14,7 +14,7 @@ const DatasourceWrapper = styled.div`
     width: 30%;
     overflow: auto;
     background: #f3f3f3;
-    margin-top: 40px;
+    // margin-top: 40px;
     padding-top: 20px;
   }
   .datasource__table {
@@ -24,7 +24,7 @@ const DatasourceWrapper = styled.div`
     overflow: auto;
   }
 `
-
+const { Search } = Input
 const DatasourceData = props => {
   const { data, datasourceId } = props
 
@@ -40,15 +40,19 @@ const DatasourceData = props => {
   const [schemaData, setScheamData] = useState([])
   // 表结构表格Loading状态
   const [schemaLoading, setSchemaLoading] = useState(false)
+  const [treeData, setTreeData] = useState([])
+  const [baseData, setBaseData] = useState([])
 
-  const treeData = useMemo(() => {
-    return data.map(item => {
+  useMemo(() => {
+    const treeList = data.map(item => {
       return {
         key: item,
         title: item,
         isLeaf: true,
       }
     })
+    setTreeData(treeList)
+    setBaseData(treeList)
   }, [data])
 
   useEffect(() => {
@@ -134,13 +138,32 @@ const DatasourceData = props => {
     setScheamData(dataList)
   }
 
+  const onSearch = val => {
+    const list = [...baseData]
+    const filterData = list.filter(item => item.title.indexOf(val) > -1)
+    setTreeData(filterData)
+  }
+
   const tree = (
-    <DirectoryTree
-      className="datasource__tree"
-      treeData={treeData}
-      defaultSelectedKeys={[treeData[0]?.key]}
-      onSelect={onSelect}
-    />
+    <div className="datasource__tree">
+      <Search
+        style={{
+          marginBottom: 8,
+        }}
+        placeholder="Search"
+        onSearch={onSearch}
+      />
+
+      <DirectoryTree
+        treeData={treeData}
+        style={{
+          background: '#f3f3f3',
+        }}
+        height={600}
+        defaultSelectedKeys={[treeData[0]?.key]}
+        onSelect={onSelect}
+      />
+    </div>
   )
 
   return (