feat: 复用设备编辑模态框实现设备添加功能

src/pages/deviceAdmin/DeviceDetailModal.jsx

@@ -1,12 +1,24 @@
 import { UploadOutlined } from "@ant-design/icons";
-import { Button, Form, Image, Input, Modal, Select, Upload } from "antd";
+import {
+  Button,
+  Form,
+  Image,
+  Input,
+  message,
+  Modal,
+  Select,
+  Upload,
+} from "antd";
 import TextArea from "antd/es/input/TextArea";
 import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
 import axiosInstance, { baseURL } from "../../api/axios";
 import { deviceStatusOptions } from "../../config/DeviceStatusConfig";
+import { selectUserId } from "../../features/auth/authSlice";
 
 export default function DeviceDetailModal({
   visiable,
+  mode = "create",
   device,
   onclose,
   onSuccess,
@@ -15,8 +27,11 @@ export default function DeviceDetailModal({
   const [imageFile, setImageFile] = useState(null);
   const [initialValues, setInitialValues] = useState({});
   const [fileList, setFileList] = useState();
+  const userId = useSelector(selectUserId);
   useEffect(() => {
-    if (device) {
+    if (visiable) {
+      setFileList([]);
+      if (mode === "edit") {
         const values = {
           name: device.name,
           location: device.location,
@@ -25,47 +40,61 @@ export default function DeviceDetailModal({
         };
         form.setFieldsValue(values);
         setInitialValues(values);
+      } else {
+        const values = {
+          name: undefined,
+          location: undefined,
+          usageRequirement: undefined,
+          status: undefined,
+        };
+        form.setFieldsValue(values);
+        setInitialValues(values);
       }
-  }, [device]);
+    }
+  }, [visiable, mode, device, form]);
 
-  const handleEdit = async () => {
+  const handleOk = async () => {
     const values = await form.validateFields();
-    const updates = {};
+    const data = {};
     Object.keys(initialValues).forEach((key) => {
       if (values[key] !== initialValues[key]) {
-        updates[key] = values[key];
+        data[key] = values[key];
       }
     });
 
-    if (Object.keys(updates).length > 0) {
-      await axiosInstance.put(`/device/${device.deviceId}`, updates);
+    if (Object.keys(data).length > 0) {
+      if (mode === "edit") {
+        await axiosInstance.put(`/device/${device.deviceId}`, data);
+        message.success("编辑成功");
+      } else {
+        device = await axiosInstance.post(`/device/${userId}`, data);
+        console.log(device);
+
+        message.success("添加成功");
+      }
     }
 
     if (imageFile) {
       const formData = new FormData();
       formData.append("image", imageFile);
-      await axiosInstance.post(`device/${device.deviceId}/image`, formData, {
+      await axiosInstance.post(`device/${device.id}/image`, formData, {
         headers: {
           "Content-Type": "multipart/form-data",
         },
       });
     }
     onSuccess();
-    setFileList([]);
-    form.resetFields();
     onclose();
   };
 
   return (
     <Modal
-      title="编辑设备"
+      title={mode === "edit" ? "编辑设备" : "添加设备"}
       open={visiable}
       onCancel={() => {
-        setFileList([]);
-        form.resetFields();
         onclose();
       }}
-      onOk={handleEdit}
+      onOk={handleOk}
       okText="保存"
     >
       <Form form={form} layout="vertical" initialValues={initialValues}>
@@ -99,6 +128,7 @@ export default function DeviceDetailModal({
             }}
             showUploadList={{ showRemoveIcon: true }}
             onChange={({ fileList }) => setFileList(fileList)}
+            maxCount={1}
           >
             <Button icon={<UploadOutlined />}>点击上传</Button>
           </Upload>

src/pages/deviceAdmin/DeviceManage.jsx

@@ -1,4 +1,4 @@
-import { Button, Input, message, Space, Table, Tag } from "antd";
+import { Button, Flex, Input, message, Space, Table, Tag } from "antd";
 import Column from "antd/es/table/Column";
 import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
@@ -10,6 +10,8 @@ import DeviceDetailModal from "./DeviceDetailModal";
 export default function DeviceManage() {
   const [devices, setDevices] = useState([]);
   const [selectedDevice, setSelectedDevice] = useState(null);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [modalMode, setModalMode] = useState(null);
   const [searchName, setSearchName] = useState(null);
   const [pagination, setPagination] = useState({
     current: 1,
@@ -44,6 +46,7 @@ export default function DeviceManage() {
 
   const handleDelete = async (deviceId) => {
     await axiosInstance.delete(`/device/${deviceId}`);
+    message.success("删除成功");
     const newPagination = {
       ...pagination,
       current: 1,
@@ -65,13 +68,26 @@ export default function DeviceManage() {
   // 名称、使用要求、位置、状态
   return (
     <>
+      <Flex justify="space-between">
         <Input.Search
           placeholder="请输入设备名称"
-        enterButton="搜索"
           onSearch={handleSearch}
           style={{ width: "200px" }}
           className="m-4"
         />
+        <Button
+          className="m-4"
+          type="primary"
+          onClick={() => {
+            setModalMode("create");
+            setSelectedDevice(null);
+            setModalOpen(true);
+          }}
+        >
+          添加设备
+        </Button>
+      </Flex>
+
       <Table
         rowKey="deviceId"
         dataSource={devices}
@@ -106,7 +122,14 @@ export default function DeviceManage() {
           render={(_, record) => {
             return (
               <Space>
-                <Button size="small" onClick={() => setSelectedDevice(record)}>
+                <Button
+                  size="small"
+                  onClick={() => {
+                    setSelectedDevice(record);
+                    setModalOpen(true);
+                    setModalMode("edit");
+                  }}
+                >
                   编辑
                 </Button>
                 <Button
@@ -123,11 +146,14 @@ export default function DeviceManage() {
         />
       </Table>
       <DeviceDetailModal
-        visiable={!!selectedDevice}
+        visiable={modalOpen}
         device={selectedDevice}
-        onclose={() => setSelectedDevice(null)}
+        mode={modalMode}
+        onclose={() => {
+          setModalOpen(false);
+          setSelectedDevice(null);
+        }}
         onSuccess={async () => {
-          message.success("编辑成功");
           await fetchData(pagination);
         }}
       />

src/pages/user/Reserve.jsx

@@ -59,7 +59,6 @@ export default function Reserve() {
     <>
       <Input.Search
         placeholder="请输入设备名称"
-        enterButton="搜索"
         onSearch={handleSearch}
         style={{ width: "200px" }}
         className="m-4"