104 lines
2.9 KiB
JavaScript
104 lines
2.9 KiB
JavaScript
import {
|
|
DatePicker,
|
|
Descriptions,
|
|
Form,
|
|
Image,
|
|
message,
|
|
Modal,
|
|
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";
|
|
|
|
export default function DeviceDetailModal({ visiable, device, onclose }) {
|
|
const [unavailableTimes, setUnavailableTims] = useState([]);
|
|
useEffect(() => {
|
|
const fetchUnavailableTimes = async (id) => {
|
|
const data = await axiosInstance.get(`/device/unavailable-times/${id}`);
|
|
setUnavailableTims(data);
|
|
};
|
|
|
|
if (visiable && device?.deviceId) {
|
|
fetchUnavailableTimes(device.deviceId);
|
|
}
|
|
}, [visiable, device?.deviceId]);
|
|
|
|
const { RangePicker } = DatePicker;
|
|
const disabledDate = (current) => {
|
|
if (!current) return false;
|
|
const today = dayjs().startOf("day");
|
|
const currentDay = current.startOf("day");
|
|
if (currentDay.isBefore(today)) {
|
|
return true;
|
|
}
|
|
dayjs.extend(isBetween);
|
|
|
|
return unavailableTimes.some(({ startTime, endTime }) => {
|
|
const start = dayjs(startTime).startOf("day");
|
|
const end = dayjs(endTime).endOf("day");
|
|
return currentDay.isBetween(start, end, null, "[]");
|
|
});
|
|
};
|
|
|
|
const [form] = Form.useForm();
|
|
const userId = useSelector((state) => state.auth.userId);
|
|
|
|
const handleOK = async () => {
|
|
const values = await form.validateFields();
|
|
|
|
const [startTime, endTime] = values.date;
|
|
|
|
const payload = {
|
|
deviceId: device.deviceId,
|
|
userId,
|
|
startTime: startTime.format("YYYY-MM-DD"),
|
|
endTime: endTime.format("YYYY-MM-DD"),
|
|
};
|
|
|
|
await axiosInstance.post("/reservation", payload);
|
|
message.success("预约成功");
|
|
form.resetFields();
|
|
onclose();
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
title="预约设备"
|
|
open={visiable}
|
|
onCancel={() => {
|
|
onclose();
|
|
}}
|
|
onOk={handleOK}
|
|
>
|
|
<Space direction="vertical">
|
|
<Descriptions column={1}>
|
|
<Descriptions.Item label="设备名称">{device?.name}</Descriptions.Item>
|
|
<Descriptions.Item label="使用要求">
|
|
{device?.usageRequirement}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="设备位置">
|
|
{device?.location}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="设备图片">
|
|
<Image src={`${baseURL}/${device?.imagePath}`} />
|
|
</Descriptions.Item>
|
|
</Descriptions>
|
|
|
|
<Form form={form} layout="inline" className="mt-14">
|
|
<Form.Item
|
|
name="date"
|
|
label="预约日期"
|
|
rules={[{ required: true, message: "请选择预约日期" }]}
|
|
>
|
|
<RangePicker disabledDate={disabledDate} />
|
|
</Form.Item>
|
|
</Form>
|
|
</Space>
|
|
</Modal>
|
|
);
|
|
}
|