资产目录搜索

src/view/Manage/AssetManage/Component/AssetTable.jsx

@@ -133,6 +133,7 @@ const AssetTable = (props) => {
   const [ batchCatalogChange, setBatchCatalogChange ] = useState(false);
   const [ fullScreen, setFullScreen ] = useState(false);
   const [ recursive, setRecursive ] = useState(true);
+  const [ fullSearch, setFullSearch ] = useState(false);
   const [ compact, setCompact ] = useState(false);
 
   const [ modal, contextHolder ] = Modal.useModal();
@@ -175,7 +176,7 @@ const AssetTable = (props) => {
       getFilterElementsGroupThenGetDataAssets();
     }
     //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ keyword, pagination, elementsChanged, assetActionChanged, recursive ])
+  }, [ keyword, pagination, elementsChanged, assetActionChanged, recursive, fullSearch ])
 
   useEffect(() => {
     if (shouldScrollRef.current) {
@@ -311,6 +312,11 @@ const AssetTable = (props) => {
 
     if (reference !== AssetRecycleReference) {
       params.recursive = recursive;
+
+      //全局搜索资产
+      if (fullSearch) {
+        params.dirId = '';
+      }
     }
 
     dispatchLatestHomepage({
@@ -406,6 +412,10 @@ const AssetTable = (props) => {
     setRecursive(!e.target.checked);
   }
 
+  const onFullSearchChange = (e) => {
+    setFullSearch(e.target.checked);
+  }
+
   const exportAsset = () => {
     if ((checkedKeys||[]).length === 0) {
       showMessage('warn', '请先选择资产');
@@ -613,6 +623,9 @@ const AssetTable = (props) => {
           }
         </Space>
         <Space>
+          {
+            (reference!==AssetRecycleReference) && <Checkbox onChange={onFullSearchChange} checked={fullSearch}>全部数据</Checkbox>
+          }
           <InputDebounce 
             placeholder="请输入资产要素值" 
             allowClear 

src/view/Manage/AssetManage/Component/AssetTree.jsx

 import React, { useEffect, useState, useRef } from 'react';
 import { useMount, useUnmount } from 'ahooks';
-import {Card, Spin, Tooltip, Tree, Input, Dropdown, Menu, Modal} from 'antd';
+import {Card, Spin, Tooltip, Tree, Dropdown, Menu, Modal, AutoComplete} from 'antd';
 import { PlusOutlined, ImportOutlined,ExportOutlined,ReloadOutlined, SettingOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
 import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
@@ -10,12 +10,13 @@ import ImportDirectory from './ImportDirectory';
 import UpdateDirectoryModal from './UpdateDirectoryModal';
 import CustomDirectoryModal from './CustomDirectoryModal';
 import { showMessage, getQueryParam } from '../../../../util';
-import { AnchorTimestamp, AnchorId, AssetManageReference, AssetBrowseReference, ResourceBrowseReference, AssetMountReference, AnchorDirId } from '../../../../util/constant';
+import { AnchorTimestamp, AnchorId, AssetManageReference, AssetBrowseReference, ResourceBrowseReference, AssetMountReference } from '../../../../util/constant';
+import { highlightSearchContentByTerms } from '../../../../util';
 
 import './AssetTree.less';
-
 import 'react-contexify/dist/ReactContexify.css';
 
+const { Option } = AutoComplete;
 
 const AssetTree = (props) => {
 
@@ -42,6 +43,7 @@ const AssetTree = (props) => {
   const [ updateDirectoryAction, setUpdateDirectoryAction ] = useState('');
   const [ customDirectoryModalVisible, setCustomDirectoryModalVisible ] = useState(false);
   const [ customDirectoryAction, setCustomDirectoryAction ] = useState('');
+  const [options, setOptions] = useState([]);
 
   const [modal, contextHolder] = Modal.useModal();
   
@@ -153,6 +155,7 @@ const AssetTree = (props) => {
         generateList(newData, _dataList);
         generateGroupIds(newData, _groupIds);
         setDataList(_dataList);
+
         setGroupIds(_groupIds);
 
         treeDataRef.current = newData;
@@ -257,13 +260,15 @@ const AssetTree = (props) => {
     } 
   }
 
-  const generateList = (treeData, list) => {
+  const generateList = (treeData, list, path = null) => {
     for (let i = 0; i < treeData.length; i++) {
       const node = treeData[i];
       const { nodeId, text } = node;
-      list.push({ key: nodeId , title: text });
+
+      const currentPath = path ? `${path}/${text}` : text;
+      list.push({ key: nodeId , title: text, value: currentPath });
       if (node.children) {
-        generateList(node.children, list);
+        generateList(node.children, list, currentPath);
       }
     }
   };
@@ -429,30 +434,30 @@ const AssetTree = (props) => {
     setCustomDirectoryModalVisible(true);
   }
 
-  const onChange = (e) => {
+  // const onChange = (e) => {
 
-    const { value } = e.target;
+  //   const { value } = e.target;
 
-    if (value === '') {
-      setExpandedKeys([]);
-      setAutoExpandParent(false);
-      setKeyword(value);
-      return;
-    }
+  //   if (value === '') {
+  //     setExpandedKeys([]);
+  //     setAutoExpandParent(false);
+  //     setKeyword(value);
+  //     return;
+  //   }
 
-    const expandedKeys = dataList
-      .map(item => {
-        if (item.title.indexOf(value) > -1) {
-          return getParentKey(item.key, treeData);
-        }
-        return null;
-      })
-      .filter((item, i, self) => item && self.indexOf(item) === i);
+  //   const expandedKeys = dataList
+  //     .map(item => {
+  //       if (item.title.indexOf(value) > -1) {
+  //         return getParentKey(item.key, treeData);
+  //       }
+  //       return null;
+  //     })
+  //     .filter((item, i, self) => item && self.indexOf(item) === i);
 
-    setExpandedKeys(expandedKeys);
-    setAutoExpandParent(true);
-    setKeyword(value);
-  }
+  //   setExpandedKeys(expandedKeys);
+  //   setAutoExpandParent(true);
+  //   setKeyword(value);
+  // }
 
   const onTreeSelect = (keys, _) => {
 
@@ -537,6 +542,19 @@ const AssetTree = (props) => {
     });
   }
 
+  const onAutoCompleteSearch = (searchText) => {
+    setKeyword(searchText);
+    setOptions(
+      !searchText ? [] : (dataList||[]).filter(item => item.value.indexOf(searchText)!==-1),
+    );
+  };
+
+  const onAutoCompleteSelect = (value, option) => {
+    const paths = value.split('/');
+    setKeyword(paths[paths.length-1]);
+    treeDirectoryChanged(option.key);
+  };
+
   const exportMenu = (
     <Menu>
       <Menu.Item>
@@ -554,31 +572,17 @@ const AssetTree = (props) => {
 
   const loop = (data, isRootLeaf= true) =>
     data.map(item => {
-      const index = item.text.indexOf(keyword);
-      const beforeStr = item.text.substr(0, index);
-      const afterStr = item.text.substr(index + keyword.length);
-      const title =
-        index > -1 ? (
-          <span 
-            className={isRootLeaf?'title-color': 'text-color'}
-          >
-            {beforeStr}
-            <span className="site-tree-search-value">{keyword}</span>
-            {afterStr}
-            {
-              reference === AssetManageReference && <span>{` (${item.dataAssetAndSubDirCount})`}</span>
-            }
-          </span>
-        ) : (
-          <span
-            className={isRootLeaf?'title-color': 'text-color'}
-          >
-            {item.text}
-            {
-              reference === AssetManageReference && <span>{` (${item.dataAssetAndSubDirCount})`}</span>
-            }
-          </span>
-        );
+      const title = (
+        <span
+          className={isRootLeaf?'title-color': 'text-color'}
+        >
+          {item.text}
+          {
+            reference === AssetManageReference && <span>{` (${item.dataAssetAndSubDirCount})`}</span>
+          }
+        </span>
+      );
+
       if (item.children) {
         return { ...item, ...{title, key: item.nodeId, children: loop(item.children, false)} };
       }
@@ -628,11 +632,26 @@ const AssetTree = (props) => {
       style={{ width: '100%' }} 
     >
       <Spin spinning={loading}>
-        <Input  
+        <AutoComplete
+          allowClear
           value={keyword}
-          style={{ marginBottom: 10 }} 
-          onChange={(e) => { onChange(e) }}
-        />
+          style={{ marginBottom: 10, width: '100%' }}
+          onSelect={onAutoCompleteSelect}
+          onSearch={onAutoCompleteSearch}
+          onClear={() => { setKeyword(''); }}
+        >
+        {
+          (options||[]).map((item, index) => {
+            return (
+              <Option key={item.key} value={item.value}>
+                <div style={{ whiteSpace: 'normal' }}>
+                {highlightSearchContentByTerms(item.value, [keyword])}
+                </div>
+              </Option>
+            );
+          })
+        }
+        </AutoComplete>
         <Tree
           checkable={checkable}
           showLine={true}