feat: 实现设备管理员修改预约结束日期

src/pages/shared/MyApproval.jsx

@@ -1,10 +1,11 @@
-import { Button, Form, Input, Table, Tag } from "antd";
+import { Button, DatePicker, Form, Input, message, 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";
+import { selectUserId, selectUserRole } from "../../features/auth/authSlice";
+import dayjs from "dayjs";
 
 export default function MyApproval() {
   const [approvals, setApprovals] = useState([]);
@@ -14,8 +15,11 @@ export default function MyApproval() {
     pageSize: 10,
     total: 0,
   });
+  const [editingRow, setEditingRow] = useState(null);
+  const [tempEndTime, setTempEndTime] = useState(null);
 
   const userId = useSelector(selectUserId);
+  const userRole = useSelector(selectUserRole);
 
   const fetchData = async (pagination, searchParam) => {
     const data = await axiosInstance.get(`/approval/${userId}`, {
@@ -53,6 +57,20 @@ export default function MyApproval() {
     await fetchData(newPagination, values);
   };
 
+  const handleSubmit = async (record) => {
+    try {
+      await axiosInstance.post(`/reservation/endTime/${record.reservationId}`, {
+        endTime: dayjs(tempEndTime).format("YYYY-MM-DD"),
+      });
+      const values = await form.validateFields();
+      await fetchData(pagination, values);
+      setEditingRow(null);
+      message.success("修改成功");
+    } catch (error) {
+      message.error("修改失败");
+    }
+  };
+
   return (
     <div className="p-2 pt-4">
       <Form form={form} layout="inline" onFinish={handleSearch}>
@@ -88,7 +106,57 @@ export default function MyApproval() {
         />
         <Column title="预约设备" key="deviceName" dataIndex="deviceName" />
         <Column title="开始时间" key="startTime" dataIndex="startTime" />
-        <Column title="结束时间" key="endTime" dataIndex="endTime" />
+        <Column
+          title="结束时间"
+          key="endTime"
+          render={(_, record) => {
+            const isEditable =
+              record.decision === 1 && userRole.includes("DEVICE_ADMIN");
+
+            if (editingRow === record.approvalId) {
+              return (
+                <div style={{ display: "flex", gap: 8 }}>
+                  <DatePicker
+                    defaultValue={dayjs(record.endTime)}
+                    onChange={(date) => setTempEndTime(date)}
+                    disabledDate={(current) =>
+                      current &&
+                      current.isBefore(dayjs(record.startTime), "day")
+                    }
+                    size="small"
+                  />
+                  <Button
+                    type="primary"
+                    size="small"
+                    onClick={() => handleSubmit(record)}
+                  >
+                    提交
+                  </Button>
+                  <Button onClick={() => setEditingRow(null)} size="small">
+                    取消
+                  </Button>
+                </div>
+              );
+            }
+
+            return isEditable ? (
+              <span>
+                <span className="pr-6">{record.endTime}</span>
+                <Button
+                  size="small"
+                  onClick={() => {
+                    setEditingRow(record.approvalId);
+                    setTempEndTime(dayjs(record.endTime));
+                  }}
+                >
+                  修改
+                </Button>
+              </span>
+            ) : (
+              <span>{record.endTime}</span>
+            );
+          }}
+        />
         <Column
           title="审批情况"
           key="decision"