feat: 实现设备管理页面

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,5 +1,6 @@
 import {
   DesktopOutlined,
+  ExperimentOutlined,
   FileDoneOutlined,
   UnorderedListOutlined,
   UserOutlined,
@@ -31,6 +32,12 @@ const menuConfig = [
     icon: UnorderedListOutlined,
     roles: ["LEADER", "DEVICE_ADMIN"],
   },
+  {
+    path: "/device-manage",
+    label: "设备管理",
+    icon: ExperimentOutlined,
+    roles: ["DEVICE_ADMIN"],
+  },
   {
     path: "/userdetail",
     label: "个人信息",

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/MyApproval.jsx

@@ -45,13 +45,12 @@ export default function MyApproval() {
 
   const handleSearch = async () => {
     const values = await form.validateFields();
-    fetchData(
-      {
-        current: 1,
-        pageSize: pagination.pageSize,
-      },
-      values
-    );
+    const newPagination = {
+      ...pagination,
+      current: 1,
+    };
+    setPagination(newPagination);
+    await fetchData(newPagination, values);
   };
 
   return (

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/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,

src/router/index.jsx

@@ -1,15 +1,13 @@
 import { createBrowserRouter, Navigate } from "react-router-dom";
 import CommonLayout from "../layouts/CommonLayout";
-import DeviceAdminApproval from "../pages/deviceAdmin/Approval";
-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/shared/UserDetail";
-import ProtectedRoute from "./ProtectedRoute";
 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 Reserve from "../pages/user/Reserve";
+import ProtectedRoute from "./ProtectedRoute";
+import DeviceManage from "../pages/deviceAdmin/DeviceManage";
 
 const router = createBrowserRouter([
   {
@@ -51,7 +49,16 @@ const router = createBrowserRouter([
           },
         ],
       },
-
+      {
+        path: "device-manage",
+        element: <ProtectedRoute allowedRoles={["DEVICE_ADMIN"]} />,
+        children: [
+          {
+            path: "",
+            element: <DeviceManage />,
+          },
+        ],
+      },
       {
         path: "userdetail",
         element: <UserDetail />,