文档管理接口

src/pages/FileManagement/components/model.jsx

@@ -0,0 +1,28 @@
+import { Input, Modal } from 'antd';
+import { useRef, useState } from 'react';
+
+const AddFileModal = ({ id, visible, handleOk, handleCancel }) => {
+  const [value, setValue] = useState('新建文件夹');
+
+  const onChange = () => {
+    console.log(value);
+    handleOk?.({ id, dir_name: value });
+  };
+  return (
+    <Modal
+      title="新建文件夹"
+      open={visible}
+      onOk={onChange}
+      onCancel={handleCancel}
+    >
+      <div>
+        文件名：
+        <Input
+          defaultValue={'新建文件夹'}
+          onChange={(e) => setValue(e.target.value)}
+        />
+      </div>
+    </Modal>
+  );
+};
+export default AddFileModal;

src/pages/FileManagement/index.js

@@ -1,27 +1,31 @@
-import React, { useState } from 'react';
-import { Input, Tree, Table, Button, Form, DatePicker, Divider } from 'antd';
+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 { useRequest, useModel, useRef } from '@umijs/max';
+import { queryDirCreate, queryDirList, queryFileList } from '../../services/file';
+import { FolderOpenOutlined, PlusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import AddFileModal from './components/model';
 
 const temp = [
   {
-    key: 1,
-    title: '文件夹1',
+    id: 999,
+    dir_name: '受控文件',
     children: [
-      { key: '1-1', title: '文件夹1' },
-      {
-        key: '1-2',
-        title: '文件夹2',
-        children: [{ key: '1-2-1', title: '文件夹1' }],
-      },
+      // { id: '1-1', dir_name: '文件夹1' },
+      // {
+      //   id: '1-2',
+      //   dir_name: '文件夹2',
+      //   children: [{ id: '1-2-1', dir_name: '文件夹1' }],
+      // },
     ],
   },
   {
-    key: 2,
-    title: '文件夹2',
+    id: 998,
+    dir_name: '部门文件',
     children: [
-      { key: '2-1', title: '文件夹1' },
-      { key: '2-2', title: '文件夹2' },
-      { key: '2-3', title: '文件夹3' },
+      // { id: '2-1', dir_name: '文件夹1' },
+      // { id: '2-2', dir_name: '文件夹2' },
+      // { id: '2-3', dir_name: '文件夹3' },
     ],
   },
 ];
@@ -36,14 +40,43 @@ const { RangePicker } = DatePicker;
 
 function FileManagement(props) {
   const [form] = Form.useForm();
+  const {user} = useModel('userInfo')
+  const [treeData, setTreeData] = useState(temp)
+  const [visible, setVisible] = useState(false);
+  const [id, setId] = useState()
+
+  const {  } = useRequest((data) => queryDirList(data), {
+    onSuccess: (data) => {
+      console.log(data) 
+      const result = [...temp];
+      result[0].children = data.limit_list;
+      result[1] = data.list[0];
+      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 [expandedKeys, setExpandedKeys] = useState([]);
   const [searchValue, setSearchValue] = useState('');
 
   const columns = [
-    { title: '文档名称', dataIndex: 'name' },
-    { title: '上传人员', dataIndex: 'upload_user' },
-    { title: '上传时间', dataIndex: 'upload_time' },
+    { title: '文档名称', dataIndex: 'file_name' },
+    { title: '上传人员', dataIndex: 'user_name' },
+    { title: '上传时间', dataIndex: 'create_time' },
     {
       title: '操作',
       render: (_, record) => (
@@ -51,6 +84,7 @@ function FileManagement(props) {
           <a>下载</a>
           <Divider type="vertical" />
           <a>删除</a>
+          <a onClick={()=>{}}>申请权限</a>
         </>
       ),
     },
@@ -98,6 +132,11 @@ function FileManagement(props) {
       });
   };
 
+  const handlerSelect = (SelectKeys, e) => {
+    run({dir_id: SelectKeys[0]})
+    console.log(SelectKeys, e)
+  }
+
   return (
     <PageContainer>
       <div style={{ display: 'flex', justifyContent: 'space-between' }}>
@@ -106,8 +145,13 @@ function FileManagement(props) {
           <DirectoryTree
             expandedKeys={expandedKeys}
             onExpand={onExpand}
-            treeData={temp}
+            treeData={treeData}
+            onSelect={handlerSelect}
+            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>}}
           />
         </div>
         <div style={{ height: '100%', width: 'calc(70% - 20px)' }}>
@@ -127,9 +171,10 @@ function FileManagement(props) {
               <Button type="primary">上传</Button>
             </Form.Item>
           </Form>
-          <Table columns={columns} dataSource={tempData} />
+          <Table columns={columns} dataSource={data?.list} loading={loading} />
         </div>
       </div>
+      <AddFileModal id={id} visible={visible} handleOk={(value) => { RunCreate({...value, user_name:user?.CName}) }} handleCancel={ ()=>setVisible(false)} />
     </PageContainer>
   );
 }

src/services/file.js

@@ -0,0 +1,20 @@
+import { request } from 'umi';
+
+export const queryDirList = async (data) => {
+  return await request('/api/archive/v1/dir/list', {
+    method: 'POST',
+    data,
+  });
+};
+export const queryFileList = async (data) => {
+  return await request('/api/archive/v1/file/list', {
+    method: 'POST',
+    data,
+  });
+};
+export const queryDirCreate = async (data) => {
+  return await request('/api/archive/v1/dir/create', {
+    method: 'POST',
+    data,
+  });
+};