目录树添加搜索功能

dlink-web/src/components/Studio/StudioTree/index.less

@@ -15,3 +15,8 @@
 .tree_div{
   padding-right: 10px;
 }
+
+.site-tree-search-value {
+  //color: #00EE76;
+  color: #1678ff;
+}

dlink-web/src/components/Studio/StudioTree/index.tsx

 import React, {useEffect, useState,Key} from "react";
 import {connect} from "umi";
 import  {DownOutlined, SwitcherOutlined, FolderAddOutlined} from "@ant-design/icons";
-import {Tree, Menu, Empty, Button, message, Modal,Tooltip,Row,Col} from 'antd';
+import {Tree, Menu, Empty, Button, message, Modal,Tooltip,Row,Col,Input} from 'antd';
 import {getCatalogueTreeData} from "@/pages/FlinkSqlStudio/service";
 import {convertToTreeData, getTreeNodeByKey, TreeDataNode} from "@/components/Studio/StudioTree/Function";
 import style from "./index.less";
@@ -16,7 +16,6 @@ import {getIcon} from "@/components/Studio/icon";
 import {showEnv} from "@/components/Studio/StudioEvent/DDL";
 import UploadModal from "@/components/Studio/StudioTree/components/UploadModal";
 
-
 type StudioTreeProps = {
   rightClickMenu:StateType['rightClickMenu'];
   dispatch:any;
@@ -33,10 +32,41 @@ type RightClickMenu = {
   categoryName: string
 };
 
+//将树形节点改为一维数组
+const generateList = (data: any, list: any[]) => {
+  for (let i = 0; i < data.length; i++) {
+    const node = data[i];
+    const { name, id, parentId,level} = node;
+    list.push({ name, id, key: id, title: name, parentId,level });
+    if (node.children) {
+      generateList(node.children, list);
+    }
+  }
+  return list
+}
+
+// tree树 匹配方法
+const getParentKey = (key: number | string, tree: any): any => {
+  let parentKey
+  for (let i = 0; i < tree.length; i++) {
+    const node = tree[i];
+    if (node.children) {
+      if (node.children.some((item: any) => item.id === key)) {
+        parentKey = node.id;
+      } else if (getParentKey(key, node.children)) {
+        parentKey = getParentKey(key, node.children);
+      }
+    }
+  }
+  // console.log(key, parentKey, tree,)
+  return parentKey;
+}
+
 const StudioTree: React.FC<StudioTreeProps> = (props) => {
   const {rightClickMenu,dispatch,tabs,refs,toolHeight} = props;
   const [treeData, setTreeData] = useState<TreeDataNode[]>();
   const [expandedKeys, setExpandedKeys] = useState<Key[]>();
+  const [defaultExpandedKeys, setDefaultExpandedKeys] = useState<any[]>([]);
   const [rightClickNodeTreeItem,setRightClickNodeTreeItem] = useState<RightClickMenu>();
   const [updateCatalogueModalVisible, handleUpdateCatalogueModalVisible] = useState<boolean>(false);
   const [updateTaskModalVisible, handleUpdateTaskModalVisible] = useState<boolean>(false);
@@ -46,31 +76,62 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
   const [rightClickNode, setRightClickNode] = useState<TreeDataNode>();
   const [available, setAvailable] = useState<boolean>(true);
   const [isUploadModalVisible, setIsUploadModalVisible] = useState(false);
-  const [dataList, setDataList] = useState<any[]>([]);
   const [uploadNodeId, setUploadNodeId] = useState(0);
   const sref: any = React.createRef<Scrollbars>();
   const { DirectoryTree } = Tree;
+  const {Search} = Input;
+  const [searchValue, setSearchValue] = useState('')
+  const [autoExpandParent, setAutoExpandParent] = useState(true);
 
   const getTreeData = async () => {
     const result = await getCatalogueTreeData();
     let data = result.datas;
     let list = data;
-    let expandList = new Array();
+    let expendList: any[] = [];
     for(let i=0;i<list.length;i++){
-      if(list[i].parentId == 0|| list[i].parentId == 37){
-        expandList.push(list[i].id)
-      }
       list[i].title=list[i].name;
       list[i].key=list[i].id;
       if(list[i].isLeaf){
         list[i].icon = getIcon(list[i].type);
       }
     }
+    list?.map((v: any) => {
+      expendList.push(v.id);
+      if (v.children) {
+        v?.children?.map((item: any) => {
+          expendList.push(item.id);
+        })
+      }
+    })
     data = convertToTreeData(list, 0);
     setTreeData(data);
-    setDataList(expandList);
+    //默认展开所有
+    setExpandedKeys(expendList|| []);
+    setDefaultExpandedKeys(expendList || []);
   };
 
+  const onChange = (e: any) => {
+    let { value } = e.target
+    if (!value) {
+      setExpandedKeys(defaultExpandedKeys);
+      setSearchValue(value)
+      return
+    }
+    value = String(value).trim()
+    const expandList: any[] = generateList(treeData, [])
+    let expandedKeys: any = expandList.map((item: any) => {
+        if (item && item.name.indexOf(value) > -1) {
+         let key = getParentKey(item.key, treeData);
+          return key;
+        }
+        return null;
+      })
+      .filter((item: any, i: number, self: any) => item && self.indexOf(item) === i)
+    setExpandedKeys(expandedKeys)
+    setSearchValue(value)
+    setAutoExpandParent(true)
+  }
+
   const openByKey = async (key:any)=>{
     const result = await getCatalogueTreeData();
     let data = result.datas;
@@ -322,7 +383,7 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
     setRightClickNode(node);
     setRightClickNodeTreeItem({
       pageX: e.pageX-20,
-      pageY: position.y+sref.current.getScrollTop()+scrollTop-115-position.height,
+      pageY: position.y+sref.current.getScrollTop()+scrollTop-125-position.height,
       id: node.id,
       categoryName: node.name
     });
@@ -332,6 +393,7 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
     });
   };
 
+  //选中节点时触发
   const onSelect = (selectedKeys:Key[], e:any) => {
     if(e.node&&e.node.isLeaf) {
       dispatch({
@@ -346,10 +408,39 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
     setExpandedKeys([]);
   };
 
+  // 树节点展开/收缩
   const onExpand=(expandedKeys:Key[])=>{
     setExpandedKeys(expandedKeys);
+    setAutoExpandParent(false)
   };
 
+  const loop = data =>
+    data?.map(item => {
+      const index = item.title.indexOf(searchValue);
+      const beforeStr = item.title.substr(0, index);
+      const afterStr = item.title.substr(index + searchValue.length);
+      item.icon = getIcon(item.type);
+      const title =
+        index > -1 ? (
+          <span>
+            {beforeStr}
+            <span className={style['site-tree-search-value']}>{searchValue}</span>
+            {afterStr}
+            </span>
+        ) : (
+          <span>{item.title}</span>
+        );
+      if (item.children) {
+        return {icon:item.isLeaf?item.icon:'', title, key: item.key, children: loop(item.children) };
+      }
+
+      return {
+        icon:item.isLeaf?item.icon:'',
+        title,
+        key: item.key,
+      };
+    });
+
   return (
     <div className={style.tree_div} >
       <Row>
@@ -371,7 +462,7 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
         </Col>
       </Row>
       <Scrollbars  style={{height:(toolHeight-32)}} ref={sref}>
-      {/*<Search style={{marginBottom: 8}} placeholder="Search" onChange={onChange}/>*/}
+      <Search style={{marginBottom: 8}} placeholder="Search" onChange={onChange} allowClear={true}/>
         <DirectoryTree
           multiple
           onRightClick={({event, node}: any) => {
@@ -379,8 +470,10 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
           }}
           onSelect={onSelect}
           switcherIcon={<DownOutlined/>}
-          treeData={treeData}
-          onExpand ={onExpand }
+          treeData={loop(treeData)}
+          onExpand ={onExpand}
+          autoExpandParent={autoExpandParent}
+          defaultExpandAll
           expandedKeys={expandedKeys}
         />
       {getNodeTreeRightClickMenu()}
@@ -428,7 +521,7 @@ const StudioTree: React.FC<StudioTreeProps> = (props) => {
       </Scrollbars>
       <UploadModal visible={isUploadModalVisible} action={`/api/catalogue/upload/${uploadNodeId}`} handleOk={()=>{
         setIsUploadModalVisible(false);
-        setExpandedKeys(dataList);
+        setExpandedKeys(defaultExpandedKeys);
         getTreeData();
       }} onCancel={()=>{setIsUploadModalVisible(false)}} buttonTitle="上传zip包并创建工程" />
     </div>