feat: 实现团队负责人查看待审批预约页面

src/config/menuConfig.js

@@ -1,8 +1,10 @@
 import {
   DesktopOutlined,
+  FileDoneOutlined,
   UnorderedListOutlined,
   UserOutlined,
 } from "@ant-design/icons";
+import { lazy } from "react";
 
 const menuConfig = [
   {
@@ -23,6 +25,12 @@ const menuConfig = [
     icon: UserOutlined,
     roles: ["USER"],
   },
+  {
+    path: "/leader/approval",
+    label: "预约审批",
+    icon: FileDoneOutlined,
+    roles: ["LEADER"],
+  },
 ];
 
 export default menuConfig;

src/config/roleRouteConfig.js

@@ -0,0 +1,8 @@
+const roleRoute = {
+  USER: "/user/reserve",
+  ADMIN: "/admin/user-manage",
+  LEADER: "/leader/approval",
+  DEVICE_ADMIN: "/device-admin/approval",
+};
+
+export default roleRoute;

src/pages/Login.jsx

@@ -3,6 +3,7 @@ import { Button, Flex, Form, Input, message } from "antd";
 import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { login } from "../features/auth/authThunk";
+import roleRoute from "../config/roleRouteConfig";
 
 export default function Login() {
   const dispatch = useDispatch();
@@ -10,8 +11,13 @@ export default function Login() {
 
   const onFinish = async (values) => {
     const res = await dispatch(login(values)).unwrap();
-    message.success("登录成功");
+    const path = res.roles.map((r) => roleRoute[r]).find(Boolean);
-    navigate("/user/reserve");
+    if (path) {
+      message.success("登录成功");
+      navigate(path);
+    } else {
+      message.error("系统错误");
+    }
   };
 
   return (

src/pages/leader/Approval.jsx

@@ -0,0 +1,92 @@
+import { Button, Space, Table } from "antd";
+import Column from "antd/es/table/Column";
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { selectUserId } from "../../features/auth/authSlice";
+import axiosInstance from "../../api/axios";
+
+export default function LeaderApproval() {
+  const [reservations, setReservations] = useState([]);
+  const [pagination, setPagination] = useState({
+    current: 1,
+    pageSize: 10,
+    total: 0,
+  });
+
+  const userId = useSelector(selectUserId);
+
+  const fetchData = async (pagination) => {
+    const data = await axiosInstance.get(`/reservation/leader/${userId}`, {
+      params: {
+        page: pagination.current,
+        size: pagination.pageSize,
+      },
+    });
+    console.log(data);
+
+    setReservations(data.records);
+    setPagination({
+      ...pagination,
+      total: data.total,
+    });
+  };
+
+  useEffect(() => {
+    fetchData(pagination);
+  }, []);
+
+  const handlePageChange = (pagination) => {
+    fetchData(pagination);
+  };
+
+  const handleApproval = (reservationId, isApprove) => {
+    console.log(reservationId);
+    console.log(isApprove);
+  };
+
+  // "预约人、所属团队、联系方式、预约设备、预约时间： 设备详情、"
+  return (
+    <Table
+      dataSource={reservations}
+      pagination={pagination}
+      rowKey="reservationId"
+      onChange={handlePageChange}
+    >
+      <Column title="预约人" key="applicantName" dataIndex="applicantName" />
+      <Column title="所属团队" key="applicantTeam" dataIndex="applicantTeam" />
+      <Column
+        title="联系方式"
+        key="applicantContact"
+        dataIndex="applicantContact"
+      />
+      <Column title="预约设备" key="deviceName" dataIndex="deviceName" />
+      <Column title="开始时间" key="startTime" dataIndex="startTime" />
+      <Column title="结束时间" key="endTime" dataIndex="endTime" />
+      <Column
+        title="操作"
+        key="action"
+        render={(_, record) => {
+          return (
+            <Space>
+              <Button
+                type="primary"
+                size="small"
+                onClick={() => handleApproval(record.reservationId, true)}
+              >
+                批准
+              </Button>
+              <Button
+                color="danger"
+                variant="solid"
+                size="small"
+                onClick={() => handleApproval(record.reservationId, false)}
+              >
+                拒绝
+              </Button>
+            </Space>
+          );
+        }}
+      />
+    </Table>
+  );
+}

src/pages/user/DeviceDetailModal.jsx

@@ -58,7 +58,6 @@ export default function DeviceDetailModal({ visiable, device, onclose }) {
       startTime: startTime.format("YYYY-MM-DD"),
       endTime: endTime.format("YYYY-MM-DD"),
     };
-    console.log(payload);
 
     await axiosInstance.post("/reservation", payload);
     message.success("预约成功");

src/router/index.jsx

@@ -5,6 +5,7 @@ import CommonLayout from "../layouts/CommonLayout";
 import Reserve from "../pages/user/Reserve";
 import MyReservation from "../pages/user/MyReservation";
 import UserDetail from "../pages/user/UserDetail";
+import LeaderApproval from "../pages/leader/Approval";
 
 const router = createBrowserRouter([
   {
@@ -37,6 +38,16 @@ const router = createBrowserRouter([
           },
         ],
       },
+      {
+        path: "leader",
+        element: <ProtectedRoute allowedRoles={["LEADER"]} />,
+        children: [
+          {
+            path: "approval",
+            element: <LeaderApproval />,
+          },
+        ],
+      },
     ],
   },
 ]);