新增权限弹窗 权限编辑

src/pages/FileManagement/index.js

@@ -9,6 +9,7 @@ import {
   Divider,
   Modal,
   Checkbox,
+  TreeSelect,
 } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import { PageContainer, ProCard } from '@ant-design/pro-components';
@@ -42,6 +43,11 @@ const tempData = [
   { name: '文件2', upload_user: '管理员', upload_time: '2023-04-10 11:00:00' },
 ];
 
+const tempPer = [
+  { name: '管理员', list: 1, read: 1, download: 1, delete: 1, permission: 1 },
+  { name: '徐俊杰', list: 1, read: 1, download: 0, delete: 0, permission: 0 },
+];
+
 const { DirectoryTree } = Tree;
 const { Search } = Input;
 const { RangePicker } = DatePicker;
@@ -52,6 +58,8 @@ function FileManagement(props) {
   const [expandedKeys, setExpandedKeys] = useState([]);
   const [searchValue, setSearchValue] = useState('');
   const [permissionOpen, setPerOpen] = useState(false);
+  const [addOpen, setAddOpen] = useState(false);
+  const [editPer, setEditPer] = useState(false);
 
   const columns = [
     { title: '文档名称', dataIndex: 'name' },
@@ -70,12 +78,32 @@ function FileManagement(props) {
   ];
 
   const columnsPer = [
-    { title: '用户' },
-    { title: '查看列表' },
-    { title: '只读' },
-    { title: '上传' },
-    { title: '下载' },
-    { title: '删除' },
+    { title: '用户', dataIndex: 'name' },
+    {
+      title: '查看列表',
+      dataIndex: 'list',
+      render: (value, _) => <Checkbox checked={value} disabled />,
+    },
+    {
+      title: '只读',
+      dataIndex: 'read',
+      render: (value, _) => <Checkbox checked={value} disabled />,
+    },
+    {
+      title: '下载',
+      dataIndex: 'download',
+      render: (value, _) => <Checkbox checked={value} disabled={!editPer} />,
+    },
+    {
+      title: '删除',
+      dataIndex: 'delete',
+      render: (value, _) => <Checkbox checked={value} disabled={!editPer} />,
+    },
+    {
+      title: '授权',
+      dataIndex: 'permission',
+      render: (value, _) => <Checkbox checked={value} disabled={!editPer} />,
+    },
   ];
 
   // 搜索文件夹树
@@ -123,11 +151,6 @@ function FileManagement(props) {
       });
   };
 
-  // 权限申请弹窗
-  const onClickPer = () => {
-    setPerOpen(true);
-  };
-
   return (
     <PageContainer>
       <div style={{ display: 'flex', justifyContent: 'space-between' }}>
@@ -157,7 +180,7 @@ function FileManagement(props) {
               <Button type="primary">上传</Button>
             </Form.Item>
             <Form.Item>
-              <Button type="primary" onClick={onClickPer}>
+              <Button type="primary" onClick={() => setPerOpen(true)}>
                 申请权限
               </Button>
             </Form.Item>
@@ -169,15 +192,38 @@ function FileManagement(props) {
               style={{ overflowY: 'auto' }}
               pagination={false}
             />
-            <Button type="primary">
+            <Button type="primary" onClick={() => setAddOpen(true)}>
               <PlusOutlined />
               新增权限
             </Button>
-            <Table columns={columnsPer} style={{ overflowY: 'auto' }} />
+            {!editPer && (
+              <Button
+                type="primary"
+                onClick={() => setEditPer(true)}
+                style={{ marginLeft: 20 }}
+              >
+                编辑权限
+              </Button>
+            )}
+            {editPer && (
+              <Button
+                type="primary"
+                onClick={() => setEditPer(false)}
+                style={{ marginLeft: 20 }}
+              >
+                确定
+              </Button>
+            )}
+            <Table
+              columns={columnsPer}
+              dataSource={tempPer}
+              style={{ overflowY: 'auto' }}
+            />
           </div>
         </ProCard>
       </div>
       <PerModal />
+      <AddModal />
     </PageContainer>
   );
 
@@ -194,6 +240,7 @@ function FileManagement(props) {
         open={permissionOpen}
         onCancel={() => setPerOpen(false)}
         destroyOnClose
+        width={800}
       >
         <Table
           columns={modalColumns}
@@ -203,6 +250,52 @@ function FileManagement(props) {
       </Modal>
     );
   }
+
+  function AddModal(props) {
+    const perList = [
+      { label: '查看列表', value: 'a', disabled: true },
+      { label: '只读', value: 'b', disabled: true },
+      { label: '下载', value: 'c' },
+      { label: '删除', value: 'd' },
+      { label: '授权', value: 'e' },
+    ];
+
+    const rowSelection = {
+      onChange: (selectedRowKeys, selectedRows) => {
+        console.log(
+          `selectedRowKeys: ${selectedRowKeys}`,
+          'selectedRows: ',
+          selectedRows,
+        );
+      },
+    };
+
+    return (
+      <Modal
+        title="新增权限"
+        open={addOpen}
+        onCancel={() => setAddOpen(false)}
+        width={800}
+      >
+        <Table
+          title={() => '文档列表'}
+          columns={columns.slice(0, -1)}
+          dataSource={tempData}
+          pagination={false}
+          rowSelection={rowSelection}
+          destroyOnClose
+        />
+        <div style={{ margin: '20px 0px' }}>
+          <span style={{ marginRight: 20 }}>选择用户:</span>
+          <TreeSelect multiple={true} style={{ width: 200 }}></TreeSelect>
+        </div>
+        <div>
+          <span style={{ marginRight: 20 }}>选择权限:</span>
+          <Checkbox.Group options={perList} defaultValue={['a', 'b']} />
+        </div>
+      </Modal>
+    );
+  }
 }
 
 export default FileManagement;