src/pages/FileManagement/index.js

@@ -1,9 +1,31 @@
 import React, { useReducer, useState } from 'react';
-import { Input, Tree, Table, Button, Form, DatePicker, Divider, Select, Space, message } from 'antd';
-import { PageContainer } from '@ant-design/pro-components';
+import {
+  Input,
+  Tree,
+  Table,
+  Button,
+  Form,
+  DatePicker,
+  Divider,
+  Modal,
+  Checkbox,
+  TreeSelect,
+  Select,
+  Space,
+  message,
+} from 'antd';
+import { PageContainer, ProCard } from '@ant-design/pro-components';
 import { useRequest, useModel, useRef } from '@umijs/max';
-import { queryDirCreate, queryDirList, queryFileList } from '../../services/file';
-import { FolderOpenOutlined, PlusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import {
+  queryDirCreate,
+  queryDirList,
+  queryFileList,
+} from '../../services/file';
+import {
+  FolderOpenOutlined,
+  PlusCircleOutlined,
+  PlusOutlined,
+} from '@ant-design/icons';
 import AddFileModal from './components/model';
 
 const temp = [
@@ -31,7 +53,13 @@ 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 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;
@@ -40,38 +68,43 @@ const { RangePicker } = DatePicker;
 
 function FileManagement(props) {
   const [form] = Form.useForm();
-  const {user} = useModel('userInfo')
-  const [treeData, setTreeData] = useState(temp)
+  const { user } = useModel('userInfo');
+  const [treeData, setTreeData] = useState(temp);
   const [visible, setVisible] = useState(false);
-  const [id, setId] = useState()
+  const [id, setId] = useState();
 
-  const {  } = useRequest((data) => queryDirList(data), {
+  const {} = useRequest((data) => queryDirList(data), {
     onSuccess: (data) => {
-      console.log(data) 
+      console.log(data);
       const result = [...temp];
       result[0].children = data.limit_list;
       result[1] = data.list[0];
-      setTreeData(result)
-      console.log(result)
-    }
-  })
+      setTreeData(result);
+      console.log(result);
+    },
+  });
   const { data, loading, run } = useRequest((data) => queryFileList(data), {
     manual: true,
-  })
-  
-  const { loading:createLoading, run:RunCreate } = useRequest((data) => queryDirCreate(data), {
-    manual: true,
-    onSuccess: () => {
-      message.success('创建成功')
-    },
-    onError: () => {
-      message.success('创建失败')
-    },
-  })
+  });
 
+  const { loading: createLoading, run: RunCreate } = useRequest(
+    (data) => queryDirCreate(data),
+    {
+      manual: true,
+      onSuccess: () => {
+        message.success('创建成功');
+      },
+      onError: () => {
+        message.success('创建失败');
+      },
+    },
+  );
 
   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: 'file_name' },
@@ -84,14 +117,43 @@ function FileManagement(props) {
           <a>下载</a>
           <Divider type="vertical" />
           <a>删除</a>
-          <a onClick={()=>{}}>申请权限</a>
+          <a onClick={() => {}}>申请权限</a>
         </>
       ),
     },
   ];
 
+  const columnsPer = [
+    { 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} />,
+    },
+  ];
+
   // 搜索文件夹树
-  const onSearchDirectory = (value, nodes = temp) => {
+  const onSearchDirectory = (value, nodes = treeData) => {
     const expandedKeys = getExpandedKeys(nodes, value);
     setExpandedKeys(expandedKeys);
     setSearchValue(value);
@@ -102,13 +164,15 @@ function FileManagement(props) {
     if (!value) return [];
     let result = [];
     nodes.forEach((node) => {
-      if (node.title.includes(value)) {
-        result.push(node.key);
+      // 若该节点名称包含搜索值,将key加入result
+      if (node.dir_name.includes(value)) {
+        result.push(node.id);
       }
+      // 若该节点的子节点包含搜索值,将子节点key和该节点key加入result
       if (node.children) {
         let getChildren = getExpandedKeys(node.children, value);
         if (getChildren.length != 0)
-          result = [...result, node.key, ...getChildren];
+          result = [...result, node.id, ...getChildren];
       }
     });
     return result;
@@ -119,8 +183,9 @@ function FileManagement(props) {
   };
 
   const filterTreeNode = (node) =>
-    searchValue.length > 0 ? node.title.includes(searchValue) : false;
+    searchValue.length > 0 ? node.dir_name.includes(searchValue) : false;
 
+  // 搜索文件
   const onSearch = () => {
     form
       .validateFields()
@@ -133,28 +198,41 @@ function FileManagement(props) {
   };
 
   const handlerSelect = (SelectKeys, e) => {
-    run({dir_id: SelectKeys[0]})
-    console.log(SelectKeys, e)
-  }
+    run({ dir_id: SelectKeys[0] });
+  };
 
   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}
             onExpand={onExpand}
             treeData={treeData}
             onSelect={handlerSelect}
-            fieldNames={{key:'id', title:'dir_name', children:'children'}}
+            fieldNames={{ key: 'id', title: 'dir_name', children: 'children' }}
             filterTreeNode={filterTreeNode}
             titleRender={(item) => {
-              return item.dir_name == '部门文件' ? <Space><span>{item.dir_name}</span><Button shape="circle" icon={<PlusOutlined />} onClick={() => {setId(item.id) ; setVisible(true)}}/></Space>
-      : <span>{ item.dir_name}</span>}}
+              return item.dir_name == '部门文件' ? (
+                <Space>
+                  <span>{item.dir_name}</span>
+                  <Button
+                    shape="circle"
+                    icon={<PlusOutlined />}
+                    onClick={() => {
+                      setId(item.id);
+                      setVisible(true);
+                    }}
+                  />
+                </Space>
+              ) : (
+                <span>{item.dir_name}</span>
+              );
+            }}
           />
-        </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 />
@@ -170,13 +248,135 @@ function FileManagement(props) {
             <Form.Item>
               <Button type="primary">上传</Button>
             </Form.Item>
+            <Form.Item>
+              <Button type="primary" onClick={() => setPerOpen(true)}>
+                申请权限
+              </Button>
+            </Form.Item>
           </Form>
-          <Table columns={columns} dataSource={data?.list} loading={loading} />
-        </div>
+          <div>
+            <Table
+              columns={columns}
+              dataSource={data?.list}
+              loading={loading}
+              style={{ overflowY: 'auto' }}
+              pagination={false}
+            />
+            {/* 
+            <Button type="primary" onClick={() => setAddOpen(true)}>
+              <PlusOutlined />
+              新增权限
+            </Button>
+            {!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>
-      <AddFileModal id={id} visible={visible} handleOk={(value) => { RunCreate({...value, user_name:user?.CName}) }} handleCancel={ ()=>setVisible(false)} />
+      <PerModal />
+      <AddModal />
+
+      <AddFileModal
+        id={id}
+        visible={visible}
+        handleOk={(value) => {
+          RunCreate({ ...value, user_name: user?.CName });
+        }}
+        handleCancel={() => setVisible(false)}
+      />
     </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
+        width={800}
+      >
+        <Table
+          columns={modalColumns}
+          dataSource={tempData}
+          pagination={false}
+        />
+      </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;