equip-reserve-frontend/src/pages/shared/MyApproval.tsx

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 { useCallback, useEffect, useState } from "react";
import { useSelector } from "react-redux";
import axiosInstance from "../../api/axios";
import { selectUserId, selectUserRole } from "../../features/auth/authSlice";
import dayjs from "dayjs";
import { PageResult, Pagination } from "types/common";

interface ApprovalVO {
  reservationId: string;
  approvalId: string;
  applicantName: string;
  applicantTeam: string;
  applicantContact: string;
  deviceName: string;
  startTime: Date;
  endTime: Date;
  decision: number;
  status: string;
}

export default function MyApproval() {
  const [approvals, setApprovals] = useState([]);
  const [form] = useForm();
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 0,
  });
  const [editingRow, setEditingRow] = useState(null);
  const [tempEndTime, setTempEndTime] = useState(null);

  const userId = useSelector(selectUserId);
  const userRole = useSelector(selectUserRole);

  const fetchData = useCallback(
    async (
      pagination: Pagination,
      searchParam?: { applicantName: string; deviceName: string }
    ) => {
      const data = await axiosInstance.get<unknown, PageResult<ApprovalVO>>(
        `/approval/${userId}`,
        {
          params: {
            page: pagination.current,
            size: pagination.pageSize,
            applicantName: searchParam?.applicantName,
            deviceName: searchParam?.deviceName,
          },
        }
      );

      setApprovals(data.records);
      setPagination({
        ...pagination,
        total: data.total,
      });
    },
    [userId]
  );

  useEffect(() => {
    fetchData(pagination);
  }, [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);
  };

  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 {
      message.error("修改失败");
    }
  };

  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"
          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"
          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>
  );
}