feat: 实现普通用户设备列表查询页面

src/api/axios.js

@@ -1,5 +1,6 @@
 import { message } from "antd";
-import axios, { Axios } from "axios";
+import axios from "axios";
+import { logout } from "../features/auth/authSlice";
 
 const axiosInstance = axios.create({
   baseURL: "http://127.0.0.1:8080",
@@ -17,7 +18,8 @@ axiosInstance.interceptors.request.use(
   (error) => Promise.reject(error)
 );
 
-axiosInstance.interceptors.response.use((response) => {
+axiosInstance.interceptors.response.use(
+  (response) => {
     const { code, message: msg, data } = response.data;
 
     if (code === 0) {
@@ -26,6 +28,18 @@ axiosInstance.interceptors.response.use((response) => {
       message.error(msg);
       return Promise.reject(new Error(msg));
     }
-});
+  },
+  async (error) => {
+    if (error.response) {
+      const status = error.response.status;
+
+      const { store } = await import("../store");
+      if (status === 403) {
+        message.error("请登录后重试");
+        store.dispatch(logout());
+      }
+    }
+  }
+);
 
 export default axiosInstance;

src/pages/user/Reserve.jsx

@@ -1,3 +1,110 @@
+import { Input, Space, Table, Tag } from "antd";
+import Column from "antd/es/table/Column";
+import { useEffect, useState } from "react";
+import axiosInstance from "../../api/axios";
+
+const statusColorMap = {
+  空闲: "green",
+  使用中: "red",
+  有预约: "yellow",
+  维修中: "gray",
+};
+
 export default function Reserve() {
-  return <h1>Reserve</h1>;
+  const [name, setName] = useState(null);
+  const [pagination, setPagination] = useState({
+    current: 1,
+    pageSize: 10,
+    total: 0,
+  });
+  const [devices, setDevices] = useState([]);
+
+  const fetchData = async (pagination, searchName = name) => {
+    const data = await axiosInstance.get("/device", {
+      params: {
+        page: pagination.current,
+        size: pagination.pageSize,
+        name: searchName,
+      },
+    });
+
+    setDevices(data.records);
+    setPagination({
+      ...pagination,
+      total: data.total,
+    });
+  };
+  useEffect(() => {
+    fetchData(pagination);
+  }, []);
+
+  const handlePageChange = (pagination) => {
+    fetchData(pagination);
+  };
+
+  const [selectedDevice, setSelectedDevice] = useState(null);
+
+  const handleSearch = (value) => {
+    setName(name);
+    const newPagination = {
+      ...pagination,
+      current: 1,
+    };
+    setPagination(newPagination);
+    fetchData(newPagination, value);
+  };
+
+  return (
+    <>
+      <Input.Search
+        placeholder="请输入设备名称"
+        enterButton="搜索"
+        onSearch={handleSearch}
+        style={{ width: "200px" }}
+        className="m-4"
+      />
+      <Table
+        dataSource={devices}
+        pagination={pagination}
+        onChange={handlePageChange}
+        rowKey="deviceId"
+      >
+        <Column title="设备名称" key="name" dataIndex="name" />
+        <Column
+          title="使用要求"
+          key="usageRequirement"
+          dataIndex="usageRequirement"
+          ellipsis="true"
+        />
+        <Column title="位置" key="location" dataIndex="location" />
+        <Column
+          title="状态"
+          key="state"
+          dataIndex="state"
+          render={(_, { state }) => (
+            <>
+              <Tag color={statusColorMap[state]} key="state">
+                {state}
+              </Tag>
+            </>
+          )}
+        />
+        <Column
+          title="操作"
+          key="action"
+          render={(_, record) => (
+            <Space size="middle">
+              <a>查看日历</a>
+              <a onClick={() => setSelectedDevice(record)}>预约</a>
+            </Space>
+          )}
+        />
+      </Table>
+      {/* <ReservationModal
+        visiable={!!selectedDevice}
+        device={selectedDevice}
+        onclose={() => setSelectedDevice(null)}
+      /> */}
+    </>
+  );
 }