权限展示 权限申请

src/pages/FileManagement/index.js

@@ -1,5 +1,16 @@
 import React, { useState } from 'react';
-import { Input, Tree, Table, Button, Form, DatePicker, Divider } from 'antd';
+import {
+  Input,
+  Tree,
+  Table,
+  Button,
+  Form,
+  DatePicker,
+  Divider,
+  Modal,
+  Checkbox,
+} from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
 import { PageContainer, ProCard } from '@ant-design/pro-components';
 
 const temp = [
@@ -27,7 +38,8 @@ const temp = [
 ];
 
 const tempData = [
-  { name: '文件', upload_user: '管理员', upload_time: '2023-04-08 11:00:00' },
+  { name: '文件1', upload_user: '管理员', upload_time: '2023-04-08 11:00:00' },
+  { name: '文件2', upload_user: '管理员', upload_time: '2023-04-10 11:00:00' },
 ];
 
 const { DirectoryTree } = Tree;
@@ -39,6 +51,7 @@ function FileManagement(props) {
 
   const [expandedKeys, setExpandedKeys] = useState([]);
   const [searchValue, setSearchValue] = useState('');
+  const [permissionOpen, setPerOpen] = useState(false);
 
   const columns = [
     { title: '文档名称', dataIndex: 'name' },
@@ -58,8 +71,9 @@ function FileManagement(props) {
 
   const columnsPer = [
     { title: '用户' },
+    { title: '查看列表' },
+    { title: '只读' },
     { title: '上传' },
-    { title: '查看' },
     { title: '下载' },
     { title: '删除' },
   ];
@@ -97,6 +111,7 @@ function FileManagement(props) {
   const filterTreeNode = (node) =>
     searchValue.length > 0 ? node.title.includes(searchValue) : false;
 
+  // 搜索文件
   const onSearch = () => {
     form
       .validateFields()
@@ -108,6 +123,11 @@ function FileManagement(props) {
       });
   };
 
+  // 权限申请弹窗
+  const onClickPer = () => {
+    setPerOpen(true);
+  };
+
   return (
     <PageContainer>
       <div style={{ display: 'flex', justifyContent: 'space-between' }}>
@@ -136,20 +156,53 @@ function FileManagement(props) {
             <Form.Item>
               <Button type="primary">上传</Button>
             </Form.Item>
+            <Form.Item>
+              <Button type="primary" onClick={onClickPer}>
+                申请权限
+              </Button>
+            </Form.Item>
           </Form>
           <div>
             <Table
               columns={columns}
               dataSource={tempData}
-              style={{ overflowY: 'scroll' }}
+              style={{ overflowY: 'auto' }}
+              pagination={false}
             />
-            {/* 查看权限
-            <Table columns={columnsPer} style={{ overflowY: 'scroll' }} /> */}
+            <Button type="primary">
+              <PlusOutlined />
+              新增权限
+            </Button>
+            <Table columns={columnsPer} style={{ overflowY: 'auto' }} />
           </div>
         </ProCard>
       </div>
+      <PerModal />
     </PageContainer>
   );
+
+  function PerModal(props) {
+    const modalColumns = [
+      { title: '文档名称', dataIndex: 'name' },
+      { title: '下载', render: () => <Checkbox /> },
+      { title: '删除', render: () => <Checkbox /> },
+      { title: '授权', render: () => <Checkbox /> },
+    ];
+    return (
+      <Modal
+        title="权限申请"
+        open={permissionOpen}
+        onCancel={() => setPerOpen(false)}
+        destroyOnClose
+      >
+        <Table
+          columns={modalColumns}
+          dataSource={tempData}
+          pagination={false}
+        />
+      </Modal>
+    );
+  }
 }
 
 export default FileManagement;