feat: 实现用户我的预约页面

src/config/menuConfig.js

@@ -1,4 +1,4 @@
-import { DesktopOutlined } from "@ant-design/icons";
+import { DesktopOutlined, UnorderedListOutlined } from "@ant-design/icons";
 
 const menuConfig = [
   {
@@ -7,6 +7,12 @@ const menuConfig = [
     icon: DesktopOutlined,
     roles: ["USER"],
   },
+  {
+    path: "/user/my-reservation",
+    label: "我的预约",
+    icon: UnorderedListOutlined,
+    roles: ["USER"],
+  },
 ];
 
 export default menuConfig;

src/layouts/CommonLayout.jsx

@@ -9,37 +9,14 @@ import { Layout, Menu, theme } from "antd";
 import { Content, Header } from "antd/es/layout/layout";
 import Sider from "antd/es/layout/Sider";
 import React, { useState } from "react";
-import { Outlet, useLocation } from "react-router-dom";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import menuConfig from "../config/menuConfig";
 import { useSelector } from "react-redux";
 import { selectUserRole } from "../features/auth/authSlice";
 
-function getItem(label, key, icon, children) {
-  return {
-    key,
-    icon,
-    children,
-    label,
-  };
-}
-
-const items = [
-  getItem("Option 1", "1", <PieChartOutlined />),
-  getItem("Option 2", "2", <DesktopOutlined />),
-  getItem("User", "sub1", <UserOutlined />, [
-    getItem("Tom", "3"),
-    getItem("Bill", "4"),
-    getItem("Alex", "5"),
-  ]),
-  getItem("Team", "sub2", <TeamOutlined />, [
-    getItem("Team 1", "6"),
-    getItem("Team 2", "8"),
-  ]),
-  getItem("Files", "9", <FileOutlined />),
-];
-
 export default function CommonLayout() {
   const location = useLocation();
+  const naviagte = useNavigate();
 
   const [collapsed, setCollapsed] = useState(false);
   const {
@@ -69,6 +46,7 @@ export default function CommonLayout() {
             label: item.label,
             icon: React.createElement(item.icon),
           }))}
+          onClick={({ key }) => naviagte(key)}
         />
       </Sider>
       <Layout>

src/pages/user/MyReservation.jsx

@@ -0,0 +1,96 @@
+import { Table, Tag } from "antd";
+import { useEffect, useState } from "react";
+import axiosInstance from "../../api/axios";
+import { useSelector } from "react-redux";
+import Column from "antd/es/table/Column";
+import dayjs from "dayjs";
+
+export default function MyReservation() {
+  const [reservations, setReservations] = useState([]);
+  const [pagination, setPagination] = useState({
+    current: 1,
+    pageSize: 10,
+    total: 0,
+  });
+
+  const userId = useSelector((state) => state.auth.userId);
+
+  const fetchData = async (pagination) => {
+    const data = await axiosInstance.get(`/reservation/${userId}`, {
+      params: {
+        page: pagination.current,
+        size: pagination.pageSize,
+      },
+    });
+    setReservations(data.records);
+    setPagination({
+      ...pagination,
+      total: data.total,
+    });
+  };
+
+  useEffect(() => {
+    fetchData(pagination);
+  }, []);
+
+  const handlePageChange = (pagination) => {
+    fetchData(pagination);
+  };
+
+  return (
+    <>
+      <Table
+        dataSource={reservations}
+        pagination={pagination}
+        onChange={handlePageChange}
+        rowKey="reservationId"
+      >
+        <Column
+          title="设备名称"
+          key="deviceName"
+          dataIndex="deviceName"
+          render={(_, { deviceName }) => {
+            return deviceName ? (
+              deviceName
+            ) : (
+              <span className="text-red-600">该设备已被删除</span>
+            );
+          }}
+        />
+        <Column
+          title="设备管理员"
+          key="deviceAdminName"
+          dataIndex="deviceAdminName"
+        />
+        <Column
+          title="管理员联系方式"
+          key="deviceAdminContact"
+          dataIndex="deviceAdminContact"
+        />
+        <Column title="开始使用时间" key="startTime" dataIndex="startTime" />
+        <Column title="结束使用时间" key="endTime" dataIndex="endTime" />
+        <Column
+          title="预约状态"
+          key="statusLabel"
+          dataIndex="statusLabel"
+          render={(_, { statusLabel }) => {
+            const color = statusLabel === "通过" ? "green" : "yellow";
+            return (
+              <Tag color={color} key="statusLabel">
+                {statusLabel}
+              </Tag>
+            );
+          }}
+        />
+        <Column
+          title="预约提交时间"
+          key="createdTime"
+          dataIndex="createdTime"
+          render={(_, { createdTime }) => {
+            return dayjs(createdTime).format("YYYY-MM-DD HH:mm");
+          }}
+        />
+      </Table>
+    </>
+  );
+}

src/router/index.jsx

@@ -3,6 +3,7 @@ import Login from "../pages/Login";
 import ProtectedRoute from "./ProtectedRoute";
 import CommonLayout from "../layouts/CommonLayout";
 import Reserve from "../pages/user/Reserve";
+import MyReservation from "../pages/user/MyReservation";
 
 const router = createBrowserRouter([
   {
@@ -25,6 +26,10 @@ const router = createBrowserRouter([
             path: "reserve",
             element: <Reserve />,
           },
+          {
+            path: "my-reservation",
+            element: <MyReservation />,
+          },
         ],
       },
     ],