268 lines
13 KiB
TypeScript
268 lines
13 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Button, DatePicker, DatePickerProps, Form, Input, message, Modal, Select, Skeleton, Spin } from 'antd';
|
|
import moment from 'moment'
|
|
import { cancelMeeting, getMeetingData, saveAppointmentEdit, saveMeeting } from './service';
|
|
import { isNotEmpty } from '@/utils/CommonUtils';
|
|
import { ExclamationCircleOutlined } from '@ant-design/icons';
|
|
import { dateTimeFormatter, echoDateTimeFormatter } from '@/utils/DateUtils';
|
|
|
|
interface MeetingReservationProps {
|
|
modalVisible: boolean;
|
|
onCancel: () => void;
|
|
onSubmit?: () => void;
|
|
roomList?: any[];//评标室列表 带问号的参数可不传
|
|
status: string;//状态 0-新建 1-编辑 2-查看
|
|
meetId?: string;//预约id
|
|
}
|
|
const layout = {
|
|
labelCol: { span: 7 },
|
|
wrapperCol: { span: 14 },
|
|
};
|
|
export const validateMessages = {
|
|
required: '请填写此项',
|
|
};
|
|
export const range = (start: number, end: number) => {
|
|
const result = [];
|
|
for (let i = start; i < end; i++) {
|
|
result.push(i);
|
|
}
|
|
return result;
|
|
};
|
|
//不可选天
|
|
export function disabledDate(current: any) {
|
|
return current && current < moment().startOf('day');
|
|
}
|
|
//不可选小时
|
|
export const disabledDateTime = () => ({
|
|
disabledHours: () => [...range(0, 7), ...range(19, 24)],
|
|
});
|
|
//不可选小时（额外不可选）
|
|
export const otherDisabledDateTime = (current: any, disabledMap: any, type: string) => {
|
|
let otherHour: any[] = range(0, 24);
|
|
if (current) {
|
|
otherHour = [];
|
|
if (Object.keys(disabledMap).length != 0) {
|
|
const time = moment(current).format("yyyy-MM-DD");
|
|
disabledMap[time] && (otherHour = [...disabledMap[time][type]]);
|
|
}
|
|
}
|
|
return ({
|
|
disabledHours: () => [...range(0, 7), ...range(19, 24), ...otherHour],
|
|
})
|
|
};
|
|
//时间选择框日期格式化
|
|
export const dateFormat: DatePickerProps['format'] = value => value?.startOf('hour').format('YYYY-MM-DD HH:mm:ss');
|
|
/**
|
|
* 评标室预约管理-会议室预约弹窗
|
|
* @param props
|
|
* @returns
|
|
*/
|
|
const MeetingReservation: React.FC<MeetingReservationProps> = (props) => {
|
|
const { modalVisible, onCancel, onSubmit, roomList, status, meetId } = props;
|
|
const [form] = Form.useForm();
|
|
const { Option } = Select;
|
|
const { confirm } = Modal;
|
|
const { TextArea } = Input;
|
|
//loading
|
|
const [loading, setLoading] = useState<boolean>(false);
|
|
//初始化
|
|
const [skeleing, setSkeleing] = useState<boolean>(false);
|
|
//窗口状态 0-新建 1-编辑 2-查看
|
|
const [modalStatus, setModalStatus] = useState<string | undefined>(status);
|
|
//评标室类型 meeting-会议室 eval-评标室
|
|
const [meetType, setMeetType] = useState<string>("meeting");
|
|
//会议室预约是否可修改 true-不可修改 false-可修改
|
|
const [isEditMeet, setIsEditMeet] = useState<boolean>(false);
|
|
//存一份预约数据
|
|
const [meetingData, setMeetingData] = useState<any>();
|
|
|
|
const onFinish = (values: any) => {
|
|
if (values.reserveStartDate < moment().format(dateTimeFormatter)) {
|
|
message.info("开始时间不可早于当前时间");
|
|
return;
|
|
}
|
|
const params = JSON.parse(JSON.stringify(values));//深拷贝
|
|
params.reserveStartDate = moment(params.reserveStartDate).format(dateTimeFormatter);
|
|
params.reserveEndDate = moment(params.reserveEndDate).format(dateTimeFormatter);
|
|
setLoading(true);
|
|
if (meetType == "meeting") {//会议室保存
|
|
saveMeeting(params).then(res => {
|
|
if (res?.code == 200) {
|
|
message.success("保存成功");
|
|
onSubmit && onSubmit();
|
|
}
|
|
}).finally(() => {
|
|
setLoading(false);
|
|
})
|
|
} else {
|
|
saveAppointmentEdit({ ...meetingData, ...params }).then(res => {//评标室保存
|
|
if (res?.code == 200) {
|
|
message.success("保存成功");
|
|
onSubmit && onSubmit();
|
|
}
|
|
}).finally(() => {
|
|
setLoading(false);
|
|
})
|
|
}
|
|
};
|
|
|
|
//获取预约信息
|
|
const getMeetData = () => {
|
|
setSkeleing(true);
|
|
getMeetingData(meetId).then(res => {
|
|
if (res?.code == 200) {
|
|
setSkeleing(false);
|
|
const data = res?.data;
|
|
const isEdit: boolean = data.reserveType == "meeting" ? data.reserveStartDate <= moment().format(dateTimeFormatter) : data.status != 0;
|
|
setIsEditMeet(isEdit);
|
|
setMeetingData(data);
|
|
setMeetType(data.reserveType);//变更窗口类型
|
|
if (data.reserveType == "meeting") {
|
|
data.reserveStartDate = echoDateTimeFormatter(data.reserveStartDate);
|
|
data.reserveEndDate = echoDateTimeFormatter(data.reserveEndDate);
|
|
}
|
|
form.setFieldsValue(data);
|
|
}
|
|
})
|
|
}
|
|
//取消预约
|
|
const cancelMeet = () => {
|
|
confirm({
|
|
title: "请与评标场所使用人员确认后再进行取消，以免影响评标/会议的正常开展！",
|
|
icon: <ExclamationCircleOutlined />,
|
|
centered: true,
|
|
okText: '确认',
|
|
content: '',
|
|
async onOk() {
|
|
await cancelMeeting(meetId).then(res => {
|
|
if (res?.code == 200) {
|
|
message.success("取消预约成功");
|
|
onSubmit && onSubmit();
|
|
}
|
|
})
|
|
},
|
|
onCancel() { },
|
|
});
|
|
}
|
|
|
|
const editMeeting = () => {
|
|
if (meetType == "eval") {//评标室预约修改
|
|
const data = JSON.parse(JSON.stringify(meetingData));//深拷贝
|
|
data.reserveStartDate = echoDateTimeFormatter(data.reserveStartDate);
|
|
data.reserveEndDate = echoDateTimeFormatter(data.reserveEndDate);
|
|
form.setFieldsValue(data);
|
|
}
|
|
setModalStatus("1");
|
|
}
|
|
useEffect(() => {
|
|
if (isNotEmpty(meetId)) {
|
|
getMeetData();
|
|
}
|
|
}, [meetId])
|
|
|
|
return (
|
|
<Modal
|
|
destroyOnClose
|
|
title={skeleing ? null : meetType == "meeting" ? "会议室预约" : "详情"}
|
|
visible={modalVisible}
|
|
onCancel={() => onCancel()}
|
|
centered
|
|
width={600}
|
|
footer={skeleing ? [<Skeleton.Button active />] : [
|
|
<Button key="close" onClick={onCancel}>
|
|
返回
|
|
</Button>,
|
|
<Button key="save" type="primary" onClick={() => form.submit()} hidden={meetType == undefined || modalStatus == "2"}>
|
|
保存
|
|
</Button>,
|
|
<Button key="edit" onClick={() => editMeeting()} hidden={meetType == undefined || modalStatus == "1" || modalStatus == "0" || isEditMeet}>
|
|
修改预约
|
|
</Button>,
|
|
<Button type="primary" key="cancel" hidden={modalStatus == "0"} onClick={() => cancelMeet()}>
|
|
取消预约
|
|
</Button>,
|
|
]}
|
|
>
|
|
<Spin spinning={loading}>
|
|
<Skeleton loading={skeleing} active>
|
|
<Form {...layout} form={form} name="control-hooks" onFinish={onFinish} validateMessages={validateMessages}>
|
|
{meetType == "meeting" ? (
|
|
<>
|
|
<Form.Item name="id" label="会议id" hidden>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item name="areaId" label="评标室" rules={[{ required: !(modalStatus == "2") }]}>
|
|
<Select
|
|
placeholder="选择评标室"
|
|
allowClear
|
|
disabled={modalStatus == "2"}
|
|
>
|
|
{roomList?.map(item => (<Option value={item.id} key={item.id}>{item.areaName}</Option>))}
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item name="meetingName" label="会议名称" rules={[{ required: !(modalStatus == "2") }]}>
|
|
<TextArea placeholder="会议名称" disabled={modalStatus == "2"} autoSize maxLength={50} />
|
|
</Form.Item>
|
|
<Form.Item name="numberInMeeting" label="会议人数" rules={[{ required: !(modalStatus == "2") }]}>
|
|
<Input type="number" placeholder="会议人数" suffix="人" disabled={modalStatus == "2"} maxLength={5} />
|
|
</Form.Item>
|
|
<Form.Item name="reserveStartDate" label="会议开始时间" rules={[{ required: !(modalStatus == "2") }]}>
|
|
<DatePicker showTime={{ defaultValue: moment().hour(7) }} showNow={false} disabledDate={disabledDate} disabledTime={disabledDateTime} showMinute={false} showSecond={false} format={dateFormat} style={{ width: '100%' }} disabled={modalStatus == "2"} />
|
|
</Form.Item>
|
|
<Form.Item name="reserveEndDate" label="会议结束时间" rules={[{ required: !(modalStatus == "2") }]}>
|
|
<DatePicker showTime={{ defaultValue: moment().hour(7) }} showNow={false} disabledDate={disabledDate} disabledTime={disabledDateTime} showMinute={false} showSecond={false} format={dateFormat} style={{ width: '100%' }} disabled={modalStatus == "2"} />
|
|
</Form.Item>
|
|
<Form.Item name="reserveBy" label="预约人" rules={[{ required: !(modalStatus == "2") }]}>
|
|
<Input placeholder="预约人" disabled={modalStatus == "2"} maxLength={50} />
|
|
</Form.Item>
|
|
<Form.Item name="reserveContactNumber" label="预约人联系方式" rules={[{ required: !(modalStatus == "2") }]}>
|
|
<Input placeholder="预约人联系方式" disabled={modalStatus == "2"} maxLength={50} />
|
|
</Form.Item>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Form.Item name="projectName" label="项目名称">
|
|
<TextArea readOnly bordered={false} autoSize />
|
|
</Form.Item>
|
|
<Form.Item name="projectNum" label="项目编号">
|
|
<Input readOnly bordered={false} />
|
|
</Form.Item>
|
|
<Form.Item name="sectionNames" label="标段名称">
|
|
<TextArea readOnly bordered={false} autoSize />
|
|
</Form.Item>
|
|
{modalStatus == "2" ? (
|
|
<>
|
|
<Form.Item name="reserveStartDate" label="预计开始时间">
|
|
<Input readOnly bordered={false} />
|
|
</Form.Item>
|
|
<Form.Item name="reserveEndDate" label="预计结束时间">
|
|
<Input readOnly bordered={false} />
|
|
</Form.Item>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Form.Item name="reserveStartDate" label="预计开始时间" rules={[{ required: true }]}>
|
|
<DatePicker showTime={{ defaultValue: moment().hour(7) }} showNow={false} disabledDate={disabledDate} disabledTime={disabledDateTime} showMinute={false} showSecond={false} format={dateFormat} style={{ width: '100%' }} />
|
|
</Form.Item>
|
|
<Form.Item name="reserveEndDate" label="预计结束时间" rules={[{ required: true }]}>
|
|
<DatePicker showTime={{ defaultValue: moment().hour(7) }} showNow={false} disabledDate={disabledDate} disabledTime={disabledDateTime} showMinute={false} showSecond={false} format={dateFormat} style={{ width: '100%' }} />
|
|
</Form.Item>
|
|
</>
|
|
)}
|
|
<Form.Item name="reserveBy" label="预约人">
|
|
<Input readOnly bordered={false} />
|
|
</Form.Item>
|
|
<Form.Item name="reserveContactNumber" label="预约人联系方式">
|
|
<Input readOnly bordered={false} />
|
|
</Form.Item>
|
|
</>
|
|
)}
|
|
</Form>
|
|
</Skeleton>
|
|
</Spin>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default MeetingReservation;
|