src/pages/FileManagement/index.js

@@ -1,8 +1,88 @@
 import React from 'react';
-import { TreeSelect } from 'antd';
+import { Input, Tree, Table, Button, Form, DatePicker, Divider } from 'antd';
+import { PageContainer } from '@ant-design/pro-components';
+
+const temp = [
+  {
+    key: 1,
+    title: '文件夹1',
+    children: [
+      { key: '1-1', title: '文件夹1' },
+      {
+        key: '1-2',
+        title: '文件夹2',
+        children: [{ key: '1-2-1', title: '文件夹1' }],
+      },
+    ],
+  },
+  { key: 2, title: '文件夹2', children: [{ key: '2-1', title: '文件夹1' }] },
+];
+
+const tempData = [
+  { name: '文件', upload_user: '管理员', upload_time: '2023-04-08 11:00:00' },
+];
+
+const { RangePicker } = DatePicker;
 
 function FileManagement(props) {
-  return <div>文档</div>;
+  const [form] = Form.useForm();
+
+  const columns = [
+    { title: '文档名称', dataIndex: 'name' },
+    { title: '上传人员', dataIndex: 'upload_user' },
+    { title: '上传时间', dataIndex: 'upload_time' },
+    {
+      title: '操作',
+      render: (_, record) => (
+        <>
+          <a>下载</a>
+          <Divider type="vertical" />
+          <a>删除</a>
+        </>
+      ),
+    },
+  ];
+
+  const onSearch = () => {
+    form
+      .validateFields()
+      .then((values) => {
+        console.log(values);
+      })
+      .catch((err) => {
+        return;
+      });
+  };
+
+  return (
+    <PageContainer>
+      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <div style={{ height: '100%', width: '30%' }}>
+          <Input />
+          <Tree treeData={temp} />
+        </div>
+        <div style={{ height: '100%', width: 'calc(70% - 20px)' }}>
+          <Form layout="inline" form={form}>
+            <Form.Item name="date">
+              <RangePicker />
+            </Form.Item>
+            <Form.Item name="name">
+              <Input />
+            </Form.Item>
+            <Form.Item>
+              <Button type="primary" onClick={onSearch}>
+                查询
+              </Button>
+            </Form.Item>
+            <Form.Item>
+              <Button type="primary">上传</Button>
+            </Form.Item>
+          </Form>
+          <Table columns={columns} dataSource={tempData} />
+        </div>
+      </div>
+    </PageContainer>
+  );
 }
 
 export default FileManagement;