116 lines
3.1 KiB
JavaScript
116 lines
3.1 KiB
JavaScript
import { Table, Tag } from "antd";
|
||
import { useEffect, useState } from "react";
|
||
import axiosInstance from "../../api/axios";
|
||
import { useSelector } from "react-redux";
|
||
import Column from "antd/es/table/Column";
|
||
import dayjs from "dayjs";
|
||
import { selectUserId } from "../../features/auth/authSlice";
|
||
|
||
export default function MyReservation() {
|
||
const [reservations, setReservations] = useState([]);
|
||
const [pagination, setPagination] = useState({
|
||
current: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
});
|
||
|
||
const userId = useSelector(selectUserId);
|
||
|
||
const fetchData = async (pagination) => {
|
||
const data = await axiosInstance.get(`/reservation/${userId}`, {
|
||
params: {
|
||
page: pagination.current,
|
||
size: pagination.pageSize,
|
||
},
|
||
});
|
||
setReservations(data.records);
|
||
setPagination({
|
||
...pagination,
|
||
total: data.total,
|
||
});
|
||
};
|
||
|
||
useEffect(() => {
|
||
fetchData(pagination);
|
||
}, []);
|
||
|
||
const handlePageChange = (pagination) => {
|
||
fetchData(pagination);
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<Table
|
||
dataSource={reservations}
|
||
pagination={pagination}
|
||
onChange={handlePageChange}
|
||
rowKey="reservationId"
|
||
>
|
||
<Column
|
||
title="设备名称"
|
||
key="deviceName"
|
||
dataIndex="deviceName"
|
||
render={(_, { deviceName }) => {
|
||
return deviceName ? (
|
||
deviceName
|
||
) : (
|
||
<span className="text-red-600">该设备已被删除</span>
|
||
);
|
||
}}
|
||
/>
|
||
<Column
|
||
title="设备管理员"
|
||
key="deviceAdminName"
|
||
dataIndex="deviceAdminName"
|
||
/>
|
||
<Column
|
||
title="管理员联系方式"
|
||
key="deviceAdminContact"
|
||
dataIndex="deviceAdminContact"
|
||
/>
|
||
<Column title="开始使用时间" key="startTime" dataIndex="startTime" />
|
||
<Column title="结束使用时间" key="endTime" dataIndex="endTime" />
|
||
<Column
|
||
title="预约状态"
|
||
key="statusLabel"
|
||
dataIndex="statusLabel"
|
||
render={(_, record) => {
|
||
if (record.statusLabel === "通过") {
|
||
return (
|
||
<Tag color="green" key="statusLabel">
|
||
通过
|
||
</Tag>
|
||
);
|
||
} else if (record.statusLabel === "不通过") {
|
||
return (
|
||
<Tag color="red" key="statusLabel">
|
||
不通过
|
||
</Tag>
|
||
);
|
||
} else if (record.statusLabel === "通过，需要协助实验") {
|
||
return (
|
||
<Tag color="blue" key="statusLabel">
|
||
通过，需要协助实验
|
||
</Tag>
|
||
);
|
||
}
|
||
return (
|
||
<Tag color="yellow" key="statusLabel">
|
||
{record.statusLabel}
|
||
</Tag>
|
||
);
|
||
}}
|
||
/>
|
||
<Column
|
||
title="预约提交时间"
|
||
key="createdTime"
|
||
dataIndex="createdTime"
|
||
render={(_, { createdTime }) => {
|
||
return dayjs(createdTime).format("YYYY-MM-DD HH:mm");
|
||
}}
|
||
/>
|
||
</Table>
|
||
</>
|
||
);
|
||
}
|