模型目录搜索

src/view/Manage/Model/Component/ModelTree.jsx

 import React, { useState, useEffect } from "react";
-import { Tooltip, Tree, Modal, Spin, Dropdown, Menu, Button } from "antd";
+import { Tooltip, Tree, Modal, Spin, Dropdown, Menu, Button, AutoComplete } from "antd";
 import { PlusOutlined, SyncOutlined, ImportOutlined, UnorderedListOutlined, ReloadOutlined } from '@ant-design/icons';
 import classnames from 'classnames';
 import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
 
 import UpdateTreeItemModal from './UpdateTreeItemModal';
 import { dispatch } from '../../../../model'; 
-import { showMessage, getQueryParam } from '../../../../util';
+import { showMessage, getQueryParam, highlightSearchContentByTerms } from '../../../../util';
 import { AnchorId, AnchorTimestamp } from '../../../../util/constant';
 
 import './ModelTree.less';
 import 'react-contexify/dist/ReactContexify.css';
 
+const { Option } = AutoComplete;
+
 const viewModes = [
   {
     key: 'dir',
@@ -46,6 +48,10 @@ const ModelTree = (props) => {
   const [ domains, setDomains ] = useState([]);
   const [ domainSelectedKey, setDomainSelectedKey ] = useState('');
   const [ currentRightClickDir, setCurrentRightClickDir ] = useState({});
+  
+  const [ searchKeyword, setSearchKeyword ] = useState('');
+  const [ dataList, setDataList ] = useState([]);
+  const [options, setOptions] = useState([]);
 
   const [modal, contextHolder] = Modal.useModal();
 
@@ -164,10 +170,11 @@ const ModelTree = (props) => {
         setTreeData(data.subCatalogs||[]);
         setRootId(data.id||'');
 
-        if (defaultItem) {
-          const _dataList = [];
-          generateList(data.subCatalogs||[], _dataList);
+        const _dataList = [];
+        generateList(data.subCatalogs||[], _dataList);
+        setDataList(_dataList);
 
+        if (defaultItem) {
           const expandedKeys = _dataList
             .map(item => {
               if (item.key.indexOf(defaultSelectedId) > -1) {
@@ -220,13 +227,15 @@ const ModelTree = (props) => {
     });
   }
 
-  const generateList = (treeData, list) => {
+  const generateList = (treeData, list, path = null) => {
     for (let i = 0; i < treeData.length; i++) {
       const node = treeData[i];
       const { id, name } = node;
-      list.push({ key: id , title: name });
+
+      const currentPath = path ? `${path}/${name}` : name;
+      list.push({ key: id , title: currentPath, value: currentPath });
       if (node.children) {
-        generateList(node.children, list);
+        generateList(node.children, list, currentPath);
       }
     }
   };
@@ -256,6 +265,7 @@ const ModelTree = (props) => {
     if (viewSelectedKey &&  viewSelectedKey===key ) return;
 
     setViewSelectedKey(key);
+    setSearchKeyword('');
     onViewChange && onViewChange(key);
 
     if (key === 'dir') {
@@ -375,6 +385,67 @@ const ModelTree = (props) => {
     setVisible(false);
   }
 
+  const treeDirectoryChanged = (did) => {
+    let defaultItem = null;
+
+    function recursion(subCatalogs) {
+
+      if ((subCatalogs||[]).length===0) return;
+
+      (subCatalogs||[]).forEach(catalog=> {
+        catalog.key = catalog.id||'';
+        catalog.title = catalog.name||'';
+        catalog.children = catalog.subCatalogs||[];
+
+        if (catalog.id === did) {
+          defaultItem = catalog;
+        }
+
+        recursion(catalog.subCatalogs);
+      })
+    } 
+
+    recursion(treeData||[]);
+
+    if (defaultItem) {
+      const expandedKeys = dataList
+        .map(item => {
+          if (item.key.indexOf(did) > -1) {
+            return getParentKey(item.key, treeData||[]);
+          }
+          return null;
+        })
+        .filter((item, i, self) => item && self.indexOf(item) === i);
+
+      setExpandedKeys(expandedKeys);
+      setAutoExpandParent(true);
+
+      setItem(defaultItem);
+      onSelect && onSelect(defaultItem.key||'');
+    
+    } else if (refrence === '') {
+      
+      const currentItem = (treeData||[]).length>0?treeData[0]: null;
+
+      setItem(currentItem);
+      onSelect && onSelect(currentItem?(currentItem.key||''):'');
+      
+    }
+  }
+
+  const onAutoCompleteSearch = (searchText) => {
+    setSearchKeyword(searchText);
+    setOptions(
+      !searchText ? [] : (dataList||[]).filter(item => item.title.indexOf(searchText)!==-1),
+    );
+  };
+
+  const onAutoCompleteSelect = (value, option) => {
+    const paths = value.split('/');
+    setSearchKeyword(paths[paths.length-1]);
+    treeDirectoryChanged(option.key);
+  };
+
   const displayMenu = (e) => {
     show(e, {
       position: {
@@ -475,6 +546,28 @@ const ModelTree = (props) => {
     }
       <div className='p-3'>
         <Spin spinning={loading} >
+          {
+            (viewSelectedKey==='dir') && <AutoComplete
+              allowClear
+              value={searchKeyword}
+              style={{ marginBottom: 10, width: '100%' }}
+              onSelect={onAutoCompleteSelect}
+              onSearch={onAutoCompleteSearch}
+              onClear={() => { setSearchKeyword(''); }}
+            >
+            {
+              (options||[]).map((item, index) => {
+                return (
+                  <Option key={item.key} value={item.value}>
+                    <div style={{ whiteSpace: 'normal' }}>
+                    {highlightSearchContentByTerms(item.title, [searchKeyword])}
+                    </div>
+                  </Option>
+                );
+              })
+            }
+            </AutoComplete>
+          }
           <Tree 
             onExpand={onExpand}
             expandedKeys={expandedKeys}

src/view/Manage/Model/Component/ModelTree.less

 @import '../../../../variables.less';
 .model-tree {
   .yy-tree-list {
-    height: calc(100vh - @header-height - @breadcrumb-height - 25px - 57px - @pm-3) !important;
+    height: calc(100vh - @header-height - @breadcrumb-height - 25px - 57px - @pm-3 - 40px) !important;
     overflow: auto !important;
   }
 }