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/config/DeviceStatusConfig.js

@@ -0,0 +1,5 @@
+export const deviceStatusOptions = [
+  { label: "可用", value: "AVAILABLE" },
+  { label: "停用", value: "DISABLED" },
+  // { label: "维修中", value: "MAINTENANCE" },
+];

src/config/menuConfig.js

@@ -1,10 +1,10 @@
 import {
   DesktopOutlined,
+  ExperimentOutlined,
   FileDoneOutlined,
   UnorderedListOutlined,
   UserOutlined,
 } from "@ant-design/icons";
-import { lazy } from "react";
 
 const menuConfig = [
   {
@@ -19,17 +19,30 @@ const menuConfig = [
     icon: UnorderedListOutlined,
     roles: ["USER"],
   },
+
   {
-    path: "/user/userdetail",
-    label: "个人信息",
-    icon: UserOutlined,
-    roles: ["USER"],
-  },
-  {
-    path: "/leader/approval",
+    path: "/approval",
     label: "预约审批",
     icon: FileDoneOutlined,
-    roles: ["LEADER"],
+    roles: ["LEADER", "DEVICE_ADMIN"],
+  },
+  {
+    path: "/my-approval",
+    label: "审批记录",
+    icon: UnorderedListOutlined,
+    roles: ["LEADER", "DEVICE_ADMIN"],
+  },
+  {
+    path: "/device-manage",
+    label: "设备管理",
+    icon: ExperimentOutlined,
+    roles: ["DEVICE_ADMIN"],
+  },
+  {
+    path: "/userdetail",
+    label: "个人信息",
+    icon: UserOutlined,
+    roles: ["USER", "LEADER", "DEVICE_ADMIN", "ADMIN"],
   },
 ];
 

src/config/roleRouteConfig.js

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

src/pages/deviceAdmin/DeviceDetailModal.jsx

@@ -0,0 +1,109 @@
+import { UploadOutlined } from "@ant-design/icons";
+import { Button, Form, Image, Input, Modal, Select, Upload } from "antd";
+import TextArea from "antd/es/input/TextArea";
+import { useEffect, useState } from "react";
+import axiosInstance, { baseURL } from "../../api/axios";
+import { deviceStatusOptions } from "../../config/DeviceStatusConfig";
+
+export default function DeviceDetailModal({
+  visiable,
+  device,
+  onclose,
+  onSuccess,
+}) {
+  const [form] = Form.useForm();
+  const [imageFile, setImageFile] = useState(null);
+  const [initialValues, setInitialValues] = useState({});
+  const [fileList, setFileList] = useState();
+  useEffect(() => {
+    if (device) {
+      const values = {
+        name: device.name,
+        location: device.location,
+        usageRequirement: device.usageRequirement,
+        status: device.status,
+      };
+      form.setFieldsValue(values);
+      setInitialValues(values);
+    }
+  }, [device]);
+
+  const handleEdit = async () => {
+    const values = await form.validateFields();
+    const updates = {};
+    Object.keys(initialValues).forEach((key) => {
+      if (values[key] !== initialValues[key]) {
+        updates[key] = values[key];
+      }
+    });
+
+    if (Object.keys(updates).length > 0) {
+      await axiosInstance.put(`/device/${device.deviceId}`, updates);
+    }
+
+    if (imageFile) {
+      const formData = new FormData();
+      formData.append("image", imageFile);
+      await axiosInstance.post(`device/${device.deviceId}/image`, formData, {
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+      });
+    }
+    onSuccess();
+    setFileList([]);
+    form.resetFields();
+    onclose();
+  };
+
+  return (
+    <Modal
+      title="编辑设备"
+      open={visiable}
+      onCancel={() => {
+        setFileList([]);
+        form.resetFields();
+        onclose();
+      }}
+      onOk={handleEdit}
+      okText="保存"
+    >
+      <Form form={form} layout="vertical" initialValues={initialValues}>
+        <Form.Item name="name" label="设备名称" rules={[{ required: true }]}>
+          <Input />
+        </Form.Item>
+        <Form.Item name="location" label="位置">
+          <Input />
+        </Form.Item>
+        <Form.Item name="usageRequirement" label="使用要求">
+          <TextArea />
+        </Form.Item>
+        <Form.Item
+          name="status"
+          label="设备状态"
+          rules={[{ required: true, message: "请选择设备状态" }]}
+        >
+          <Select options={deviceStatusOptions} placeholder="请选择设备状态" />
+        </Form.Item>
+
+        <Form.Item label="设备图片">
+          {device?.imagePath && (
+            <Image src={`${baseURL}/${device.imagePath}`} className="mt-2" />
+          )}
+          <br />
+          <Upload
+            fileList={fileList}
+            beforeUpload={(file) => {
+              setImageFile(file);
+              return false; // 阻止自动上传
+            }}
+            showUploadList={{ showRemoveIcon: true }}
+            onChange={({ fileList }) => setFileList(fileList)}
+          >
+            <Button icon={<UploadOutlined />}>点击上传</Button>
+          </Upload>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}

src/pages/deviceAdmin/DeviceManage.jsx

@@ -0,0 +1,136 @@
+import { Button, Input, message, Space, Table, Tag } 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 { deviceStatusOptions } from "../../config/DeviceStatusConfig";
+import { selectUserId } from "../../features/auth/authSlice";
+import DeviceDetailModal from "./DeviceDetailModal";
+
+export default function DeviceManage() {
+  const [devices, setDevices] = useState([]);
+  const [selectedDevice, setSelectedDevice] = useState(null);
+  const [searchName, setSearchName] = useState(null);
+  const [pagination, setPagination] = useState({
+    current: 1,
+    pageSize: 10,
+    total: 0,
+  });
+
+  const userId = useSelector(selectUserId);
+  const fetchData = async (pagination, name = searchName) => {
+    const data = await axiosInstance.get(`/device/${userId}`, {
+      params: {
+        page: pagination.current,
+        size: pagination.pageSize,
+        name,
+      },
+    });
+
+    setDevices(data.records);
+    setPagination({
+      ...pagination,
+      total: data.total,
+    });
+  };
+
+  useEffect(() => {
+    fetchData(pagination);
+  }, []);
+
+  const handlePageChange = async (pagination) => {
+    await fetchData(pagination);
+  };
+
+  const handleDelete = async (deviceId) => {
+    await axiosInstance.delete(`/device/${deviceId}`);
+    const newPagination = {
+      ...pagination,
+      current: 1,
+    };
+    setPagination(newPagination);
+    await fetchData(newPagination);
+  };
+
+  const handleSearch = async (value) => {
+    setSearchName(value);
+    const newPagination = {
+      ...pagination,
+      current: 1,
+    };
+    setPagination(newPagination);
+    await fetchData(newPagination, value);
+  };
+
+  // 名称、使用要求、位置、状态
+  return (
+    <>
+      <Input.Search
+        placeholder="请输入设备名称"
+        enterButton="搜索"
+        onSearch={handleSearch}
+        style={{ width: "200px" }}
+        className="m-4"
+      />
+      <Table
+        rowKey="deviceId"
+        dataSource={devices}
+        onChange={handlePageChange}
+        pagination={pagination}
+      >
+        <Column title="名称" key="name" dataIndex="name" />
+        <Column
+          title="使用要求"
+          key="usageRequirement"
+          dataIndex="usageRequirement"
+          ellipsis={true}
+        />
+        <Column title="位置" key="location" dataIndex="location" />
+        <Column
+          title="状态"
+          key="status"
+          render={(_, { status }) => {
+            const color = status === "AVAILABLE" ? "green" : "grey";
+            const option = deviceStatusOptions.find(
+              (item) => item.value === status
+            );
+            return (
+              <Tag color={color} key="status">
+                {option ? option.label : status}
+              </Tag>
+            );
+          }}
+        />
+        <Column
+          title="操作"
+          render={(_, record) => {
+            return (
+              <Space>
+                <Button size="small" onClick={() => setSelectedDevice(record)}>
+                  编辑
+                </Button>
+                <Button
+                  color="red"
+                  variant="solid"
+                  size="small"
+                  onClick={() => handleDelete(record.deviceId)}
+                >
+                  删除
+                </Button>
+              </Space>
+            );
+          }}
+        />
+      </Table>
+      <DeviceDetailModal
+        visiable={!!selectedDevice}
+        device={selectedDevice}
+        onclose={() => setSelectedDevice(null)}
+        onSuccess={async () => {
+          message.success("编辑成功");
+          await fetchData(pagination);
+        }}
+      />
+    </>
+  );
+}

src/pages/shared/Approval.jsx

@@ -2,11 +2,11 @@ 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 { selectUserId } from "../../features/auth/authSlice";
 import axiosInstance from "../../api/axios";
-import { current } from "@reduxjs/toolkit";
+import { selectUserId } from "../../features/auth/authSlice";
+import { selectUserRole } from "../../features/auth/authSlice";
 
-export default function LeaderApproval() {
+export default function Approval() {
   const [reservations, setReservations] = useState([]);
   const [pagination, setPagination] = useState({
     current: 1,
@@ -15,9 +15,14 @@ export default function LeaderApproval() {
   });
 
   const userId = useSelector(selectUserId);
+  const roles = useSelector(selectUserRole);
+  let showNeedAssist = false;
+  if (roles.some((r) => r === "DEVICE_ADMIN")) {
+    showNeedAssist = true;
+  }
 
   const fetchData = async (pagination) => {
-    const data = await axiosInstance.get(`/reservation/leader/${userId}`, {
+    const data = await axiosInstance.get(`/reservation/approval/${userId}`, {
       params: {
         page: pagination.current,
         size: pagination.pageSize,
@@ -35,15 +40,16 @@ export default function LeaderApproval() {
     fetchData(pagination);
   }, []);
 
-  const handlePageChange = (pagination) => {
-    fetchData(pagination);
+  const handlePageChange = async (pagination) => {
+    await fetchData(pagination);
   };
 
-  const handleApproval = (reservationId, isApprove) => {
-    axiosInstance.post("/approval/leader", {
-      leaderId: userId,
+  const handleApproval = async (reservationId, isApprove, needAssist) => {
+    await axiosInstance.post("/approval", {
+      userId,
       reservationId,
       isApprove,
+      needAssist,
     });
 
     message.success("审核成功");
@@ -52,7 +58,7 @@ export default function LeaderApproval() {
       current: 1,
     };
     setPagination(newPagination);
-    fetchData(newPagination);
+    await fetchData(newPagination);
   };
 
   // "预约人、所属团队、联系方式、预约设备、预约时间： 设备详情、"
@@ -82,15 +88,31 @@ export default function LeaderApproval() {
               <Button
                 type="primary"
                 size="small"
-                onClick={() => handleApproval(record.reservationId, true)}
+                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)}
+                onClick={() =>
+                  handleApproval(record.reservationId, false, false)
+                }
               >
                 拒绝
               </Button>

src/pages/shared/MyApproval.jsx

@@ -0,0 +1,128 @@
+import { Button, Form, Input, Table, Tag } from "antd";
+import { useForm } from "antd/es/form/Form";
+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 MyApproval() {
+  const [approvals, setApprovals] = useState([]);
+  const [form] = useForm();
+  const [pagination, setPagination] = useState({
+    current: 1,
+    pageSize: 10,
+    total: 0,
+  });
+
+  const userId = useSelector(selectUserId);
+
+  const fetchData = async (pagination, searchParam) => {
+    const data = await axiosInstance.get(`/approval/${userId}`, {
+      params: {
+        page: pagination.current,
+        size: pagination.pageSize,
+        applicantName: searchParam?.applicantName,
+        deviceName: searchParam?.deviceName,
+      },
+    });
+
+    setApprovals(data.records);
+    setPagination({
+      ...pagination,
+      total: data.total,
+    });
+  };
+
+  useEffect(() => {
+    fetchData(pagination);
+  }, []);
+
+  const handlePageChange = async (pagination) => {
+    const values = await form.validateFields();
+    fetchData(pagination, values);
+  };
+
+  const handleSearch = async () => {
+    const values = await form.validateFields();
+    const newPagination = {
+      ...pagination,
+      current: 1,
+    };
+    setPagination(newPagination);
+    await fetchData(newPagination, values);
+  };
+
+  return (
+    <div className="p-2 pt-4">
+      <Form form={form} layout="inline" onFinish={handleSearch}>
+        <Form.Item name="applicantName">
+          <Input placeholder="请输入预约人姓名" allowClear />
+        </Form.Item>
+        <Form.Item name="deviceName">
+          <Input placeholder="请输入设备名称" allowClear />
+        </Form.Item>
+        <Form.Item>
+          <Button type="primary" htmlType="submit">
+            搜索
+          </Button>
+        </Form.Item>
+      </Form>
+      <Table
+        dataSource={approvals}
+        pagination={pagination}
+        onChange={handlePageChange}
+        className="mt-4"
+        rowKey="approvalId"
+      >
+        <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="decision"
+          render={(_, { decision, status }) => {
+            if (decision === 1) {
+              if (status === "APPROVED_ASSIST") {
+                return (
+                  <Tag color="blue" key="decision">
+                    通过，需要协助
+                  </Tag>
+                );
+              } else {
+                return (
+                  <Tag color="green" key="decision">
+                    通过
+                  </Tag>
+                );
+              }
+            }
+            if (decision === 0) {
+              return (
+                <Tag color="red" key="decision">
+                  拒绝
+                </Tag>
+              );
+            }
+            return (
+              <Tag color="grey" key="decision">
+                ERROR
+              </Tag>
+            );
+          }}
+        />
+      </Table>
+    </div>
+  );
+}

src/pages/shared/UserDetail.jsx

@@ -6,7 +6,7 @@ import axiosInstance from "../../api/axios";
 import { selectUserId } from "../../features/auth/authSlice";
 
 export default function UserDetail() {
-  const [form] = useForm();
+  const [form] = Form.useForm();
   const [showPassword, setShowPassword] = useState(false);
   const [user, setUser] = useState({
     username: "",

src/pages/user/DeviceDetailModal.jsx

@@ -8,11 +8,10 @@ import {
   Space,
 } from "antd";
 import dayjs from "dayjs";
-import axiosInstance, { baseURL } from "../../api/axios";
-import { useEffect, useState } from "react";
 import isBetween from "dayjs/plugin/isBetween";
-import { store } from "../../store";
-import { useSelector, useStore } from "react-redux";
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import axiosInstance, { baseURL } from "../../api/axios";
 
 export default function DeviceDetailModal({ visiable, device, onclose }) {
   const [unavailableTimes, setUnavailableTims] = useState([]);

src/pages/user/MyReservation.jsx

@@ -74,11 +74,29 @@ export default function MyReservation() {
           title="预约状态"
           key="statusLabel"
           dataIndex="statusLabel"
-          render={(_, { statusLabel }) => {
-            const color = statusLabel === "通过" ? "green" : "yellow";
+          render={(_, record) => {
+            if (record.statusLabel === "通过") {
+              return (
+                <Tag color="green" key="statusLabel">
+                  通过
+                </Tag>
+              );
+            } else if (record.statusLabel === "不通过") {
+              return (
+                <Tag color="red" key="statusLabel">
+                  不通过
+                </Tag>
+              );
+            } else if (record.statusLabel === "通过，需要协助实验") {
+              return (
+                <Tag color="blue" key="statusLabel">
+                  通过，需要协助实验
+                </Tag>
+              );
+            }
             return (
-              <Tag color={color} key="statusLabel">
-                {statusLabel}
+              <Tag color="yellow" key="statusLabel">
+                {record.statusLabel}
               </Tag>
             );
           }}

src/pages/user/Reserve.jsx

@@ -46,7 +46,7 @@ export default function Reserve() {
   const [selectedDevice, setSelectedDevice] = useState(null);
 
   const handleSearch = (value) => {
-    setName(name);
+    setName(value);
     const newPagination = {
       ...pagination,
       current: 1,
@@ -95,7 +95,6 @@ export default function Reserve() {
           key="action"
           render={(_, record) => (
             <Space size="middle">
-              <a>查看日历</a>
               <a onClick={() => setSelectedDevice(record)}>预约</a>
             </Space>
           )}

src/router/index.jsx

@@ -1,11 +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 Login from "../pages/Login";
+import Approval from "../pages/shared/Approval";
+import MyApproval from "../pages/shared/MyApproval";
+import UserDetail from "../pages/shared/UserDetail";
 import MyReservation from "../pages/user/MyReservation";
-import UserDetail from "../pages/user/UserDetail";
-import LeaderApproval from "../pages/leader/Approval";
+import Reserve from "../pages/user/Reserve";
+import ProtectedRoute from "./ProtectedRoute";
+import DeviceManage from "../pages/deviceAdmin/DeviceManage";
 
 const router = createBrowserRouter([
   {
@@ -32,22 +34,35 @@ const router = createBrowserRouter([
             path: "my-reservation",
             element: <MyReservation />,
           },
+        ],
+      },
+      {
+        element: <ProtectedRoute allowedRoles={["LEADER", "DEVICE_ADMIN"]} />,
+        children: [
           {
-            path: "userdetail",
-            element: <UserDetail />,
+            path: "approval",
+            element: <Approval />,
+          },
+          {
+            path: "my-approval",
+            element: <MyApproval />,
           },
         ],
       },
       {
-        path: "leader",
-        element: <ProtectedRoute allowedRoles={["LEADER"]} />,
+        path: "device-manage",
+        element: <ProtectedRoute allowedRoles={["DEVICE_ADMIN"]} />,
         children: [
           {
-            path: "approval",
-            element: <LeaderApproval />,
+            path: "",
+            element: <DeviceManage />,
           },
         ],
       },
+      {
+        path: "userdetail",
+        element: <UserDetail />,
+      },
     ],
   },
 ]);