update

src/pages/FileManagement/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Input, Tree, Table, Button, Form, DatePicker, Divider } from 'antd';
-import { PageContainer } from '@ant-design/pro-components';
+import { PageContainer, ProCard } from '@ant-design/pro-components';
 
 const temp = [
   {
@@ -56,6 +56,14 @@ function FileManagement(props) {
     },
   ];
 
+  const columnsPer = [
+    { title: '用户' },
+    { title: '上传' },
+    { title: '查看' },
+    { title: '下载' },
+    { title: '删除' },
+  ];
+
   // 搜索文件夹树
   const onSearchDirectory = (value, nodes = temp) => {
     const expandedKeys = getExpandedKeys(nodes, value);
@@ -68,9 +76,11 @@ function FileManagement(props) {
     if (!value) return [];
     let result = [];
     nodes.forEach((node) => {
+      // 若该节点名称包含搜索值,将key加入result
       if (node.title.includes(value)) {
         result.push(node.key);
       }
+      // 若该节点的子节点包含搜索值,将子节点key和该节点key加入result
       if (node.children) {
         let getChildren = getExpandedKeys(node.children, value);
         if (getChildren.length != 0)
@@ -101,7 +111,7 @@ function FileManagement(props) {
   return (
     <PageContainer>
       <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-        <div style={{ height: '100%', width: '30%' }}>
+        <ProCard style={{ height: '100%', width: '30%' }}>
           <Search onSearch={(value, _) => onSearchDirectory(value)} />
           <DirectoryTree
             expandedKeys={expandedKeys}
@@ -109,8 +119,8 @@ function FileManagement(props) {
             treeData={temp}
             filterTreeNode={filterTreeNode}
           />
-        </div>
-        <div style={{ height: '100%', width: 'calc(70% - 20px)' }}>
+        </ProCard>
+        <ProCard style={{ height: '100%', width: 'calc(70% - 20px)' }}>
           <Form layout="inline" form={form}>
             <Form.Item name="date">
               <RangePicker />
@@ -127,8 +137,16 @@ function FileManagement(props) {
               <Button type="primary">上传</Button>
             </Form.Item>
           </Form>
-          <Table columns={columns} dataSource={tempData} />
-        </div>
+          <div>
+            <Table
+              columns={columns}
+              dataSource={tempData}
+              style={{ overflowY: 'scroll' }}
+            />
+            {/* 查看权限
+            <Table columns={columnsPer} style={{ overflowY: 'scroll' }} /> */}
+          </div>
+        </ProCard>
       </div>
     </PageContainer>
   );