feat: 拆分审核预约公共组件、用户信息公共页面

src/api/axios.js

@@ -39,6 +39,7 @@ axiosInstance.interceptors.response.use(
       if (status === 403) {
         message.error("请登录后重试");
         store.dispatch(logout());
+        window.location.href = "/login";
       }
     }
   }

src/components/ApprovalTable.jsx

@@ -0,0 +1,119 @@
+import { Button, message, Space, Table } from "antd";
+import Column from "antd/es/table/Column";
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import axiosInstance from "../api/axios";
+import { selectUserId } from "../features/auth/authSlice";
+
+export default function ApprovalTable({ showNeedAssist }) {
+  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/approval/${userId}`, {
+      params: {
+        page: pagination.current,
+        size: pagination.pageSize,
+      },
+    });
+
+    setReservations(data.records);
+    setPagination({
+      ...pagination,
+      total: data.total,
+    });
+  };
+
+  useEffect(() => {
+    fetchData(pagination);
+  }, []);
+
+  const handlePageChange = (pagination) => {
+    fetchData(pagination);
+  };
+
+  const handleApproval = (reservationId, isApprove, needAssist) => {
+    axiosInstance.post("/approval", {
+      userId,
+      reservationId,
+      isApprove,
+      needAssist,
+    });
+
+    message.success("审核成功");
+    const newPagination = {
+      ...pagination,
+      current: 1,
+    };
+    setPagination(newPagination);
+    fetchData(newPagination);
+  };
+
+  // "预约人、所属团队、联系方式、预约设备、预约时间： 设备详情、"
+  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, false)
+                }
+              >
+                批准
+              </Button>
+              {showNeedAssist && (
+                <Button
+                  color="green"
+                  variant="solid"
+                  size="small"
+                  onClick={() =>
+                    handleApproval(record.reservationId, true, true)
+                  }
+                >
+                  批准(需要协助)
+                </Button>
+              )}
+              <Button
+                color="danger"
+                variant="solid"
+                size="small"
+                onClick={() =>
+                  handleApproval(record.reservationId, false, false)
+                }
+              >
+                拒绝
+              </Button>
+            </Space>
+          );
+        }}
+      />
+    </Table>
+  );
+}

src/config/menuConfig.js

@@ -18,12 +18,7 @@ const menuConfig = [
     icon: UnorderedListOutlined,
     roles: ["USER"],
   },
-  {
+
-    path: "/user/userdetail",
-    label: "个人信息",
-    icon: UserOutlined,
-    roles: ["USER"],
-  },
   {
     path: "/leader/approval",
     label: "预约审批",
@@ -36,6 +31,18 @@ const menuConfig = [
     icon: UnorderedListOutlined,
     roles: ["LEADER"],
   },
+  {
+    path: "/device-admin/approval",
+    label: "预约审批",
+    icon: FileDoneOutlined,
+    roles: ["DEVICE_ADMIN"],
+  },
+  {
+    path: "/userdetail",
+    label: "个人信息",
+    icon: UserOutlined,
+    roles: ["USER", "DEVICE_ADMIN"],
+  },
 ];
 
 export default menuConfig;

src/pages/UserDetail.jsx

@@ -2,8 +2,8 @@ import { Button, Col, Form, Input, message, Row } from "antd";
 import { useForm } from "antd/es/form/Form";
 import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import axiosInstance from "../../api/axios";
+import axiosInstance from "../api/axios";
-import { selectUserId } from "../../features/auth/authSlice";
+import { selectUserId } from "../features/auth/authSlice";
 
 export default function UserDetail() {
   const [form] = useForm();

src/pages/deviceAdmin/Approval.jsx

@@ -0,0 +1,5 @@
+import ApprovalTable from "../../components/ApprovalTable";
+
+export default function DeviceAdminApproval() {
+  return <ApprovalTable showNeedAssist={true} />;
+}

src/pages/leader/Approval.jsx

@@ -1,102 +1,5 @@
-import { Button, message, Space, Table } from "antd";
+import ApprovalTable from "../../components/ApprovalTable";
-import Column from "antd/es/table/Column";
-import { useEffect, useState } from "react";
-import { useSelector } from "react-redux";
-import axiosInstance from "../../api/axios";
-import { selectUserId } from "../../features/auth/authSlice";
 
 export default function LeaderApproval() {
-  const [reservations, setReservations] = useState([]);
+  return <ApprovalTable showNeedAssist={false} />;
-  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,
-      },
-    });
-
-    setReservations(data.records);
-    setPagination({
-      ...pagination,
-      total: data.total,
-    });
-  };
-
-  useEffect(() => {
-    fetchData(pagination);
-  }, []);
-
-  const handlePageChange = (pagination) => {
-    fetchData(pagination);
-  };
-
-  const handleApproval = (reservationId, isApprove) => {
-    axiosInstance.post("/approval/leader", {
-      leaderId: userId,
-      reservationId,
-      isApprove,
-    });
-
-    message.success("审核成功");
-    const newPagination = {
-      ...pagination,
-      current: 1,
-    };
-    setPagination(newPagination);
-    fetchData(newPagination);
-  };
-
-  // "预约人、所属团队、联系方式、预约设备、预约时间： 设备详情、"
-  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/router/index.jsx

@@ -1,12 +1,13 @@
 import { createBrowserRouter, Navigate } from "react-router-dom";
-import Login from "../pages/Login";
-import ProtectedRoute from "./ProtectedRoute";
 import CommonLayout from "../layouts/CommonLayout";
-import Reserve from "../pages/user/Reserve";
+import DeviceAdminApproval from "../pages/deviceAdmin/Approval";
-import MyReservation from "../pages/user/MyReservation";
-import UserDetail from "../pages/user/UserDetail";
 import LeaderApproval from "../pages/leader/Approval";
 import LeaderMyApproval from "../pages/leader/MyApproval";
+import Login from "../pages/Login";
+import MyReservation from "../pages/user/MyReservation";
+import Reserve from "../pages/user/Reserve";
+import UserDetail from "../pages/UserDetail";
+import ProtectedRoute from "./ProtectedRoute";
 
 const router = createBrowserRouter([
   {
@@ -33,10 +34,6 @@ const router = createBrowserRouter([
             path: "my-reservation",
             element: <MyReservation />,
           },
-          {
-            path: "userdetail",
-            element: <UserDetail />,
-          },
         ],
       },
       {
@@ -53,6 +50,21 @@ const router = createBrowserRouter([
           },
         ],
       },
+      {
+        path: "device-admin",
+        element: <ProtectedRoute allowedRoles={["DEVICE_ADMIN"]} />,
+        children: [
+          {
+            path: "approval",
+            element: <DeviceAdminApproval />,
+          },
+        ],
+      },
+
+      {
+        path: "userdetail",
+        element: <UserDetail />,
+      },
     ],
   },
 ]);