src/pages/FileManagement/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Input, Tree, Table, Button, Form, DatePicker, Divider } from 'antd';
 import { PageContainer } from '@ant-design/pro-components';
 
@@ -15,18 +15,31 @@ const temp = [
       },
     ],
   },
-  { key: 2, title: '文件夹2', children: [{ key: '2-1', title: '文件夹1' }] },
+  {
+    key: 2,
+    title: '文件夹2',
+    children: [
+      { key: '2-1', title: '文件夹1' },
+      { key: '2-2', title: '文件夹2' },
+      { key: '2-3', title: '文件夹3' },
+    ],
+  },
 ];
 
 const tempData = [
   { name: '文件', upload_user: '管理员', upload_time: '2023-04-08 11:00:00' },
 ];
 
+const { DirectoryTree } = Tree;
+const { Search } = Input;
 const { RangePicker } = DatePicker;
 
 function FileManagement(props) {
   const [form] = Form.useForm();
 
+  const [expandedKeys, setExpandedKeys] = useState([]);
+  const [searchValue, setSearchValue] = useState('');
+
   const columns = [
     { title: '文档名称', dataIndex: 'name' },
     { title: '上传人员', dataIndex: 'upload_user' },
@@ -43,6 +56,37 @@ function FileManagement(props) {
     },
   ];
 
+  // 搜索文件夹树
+  const onSearchDirectory = (value, nodes = temp) => {
+    const expandedKeys = getExpandedKeys(nodes, value);
+    setExpandedKeys(expandedKeys);
+    setSearchValue(value);
+  };
+
+  // 根据搜索值(value)获取key列表
+  const getExpandedKeys = (nodes, value) => {
+    if (!value) return [];
+    let result = [];
+    nodes.forEach((node) => {
+      if (node.title.includes(value)) {
+        result.push(node.key);
+      }
+      if (node.children) {
+        let getChildren = getExpandedKeys(node.children, value);
+        if (getChildren.length != 0)
+          result = [...result, node.key, ...getChildren];
+      }
+    });
+    return result;
+  };
+
+  const onExpand = (expandedKeys) => {
+    setExpandedKeys(expandedKeys);
+  };
+
+  const filterTreeNode = (node) =>
+    searchValue.length > 0 ? node.title.includes(searchValue) : false;
+
   const onSearch = () => {
     form
       .validateFields()
@@ -58,8 +102,13 @@ function FileManagement(props) {
     <PageContainer>
       <div style={{ display: 'flex', justifyContent: 'space-between' }}>
         <div style={{ height: '100%', width: '30%' }}>
-          <Input />
-          <Tree treeData={temp} />
+          <Search onSearch={(value, _) => onSearchDirectory(value)} />
+          <DirectoryTree
+            expandedKeys={expandedKeys}
+            onExpand={onExpand}
+            treeData={temp}
+            filterTreeNode={filterTreeNode}
+          />
         </div>
         <div style={{ height: '100%', width: 'calc(70% - 20px)' }}>
           <Form layout="inline" form={form}>