fe_service_ebtp_frontend/src/components/ElecBidEvaluation/BidEvalAppointment.tsx

import React, { useEffect, useRef, useState } from 'react';
import { Col, DatePicker, Descriptions, Form, Input, message, Modal, Row, Spin } from 'antd';
import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
import { getBidEvalRoom, handleTakeEffectReserve, saveAppointmentEdit } from './service';
import { dateFormat, disabledDate, disabledDateTime, validateMessages } from './MeetingReservation';
import moment from 'moment';
import { dateTimeFormatter } from '@/utils/DateUtils';
import { getProId } from '@/utils/session';

interface BidEvalAppointmentProps {
    modalVisible: boolean;
    onCancel: () => void;
    onSubmit: (value: any) => void;
    reload: () => void;
    values: any;
    type: string; //0-选择评标室 1-修改预约 2-重评预约评标室
}

export const proviceEnum = {
    "0011": "北京",
    "0012": "天津",
    "0013": "河北",
    "0014": "山西",
    "0015": "内蒙古",
    "0021": "辽宁",
    "0022": "吉林",
    "0023": "黑龙江",
    "0031": "上海",
    "0032": "江苏",
    "0033": "浙江",
    "0034": "安徽",
    "0035": "福建",
    "0036": "江西",
    "0037": "山东",
    "0041": "河南",
    "0042": "湖北",
    "0043": "湖南",
    "0044": "广东",
    "0045": "广西",
    "0046": "海南",
    "0050": "重庆",
    "0051": "四川",
    "0052": "贵州",
    "0053": "云南",
    "0054": "西藏",
    "0061": "陕西",
    "0062": "甘肃",
    "0063": "青海",
    "0064": "宁夏",
    "0065": "新疆",
    "001000": "集团"
}

const modalHeight = window.innerHeight * 96 / 100;

const BidEvalAppointment: React.FC<BidEvalAppointmentProps> = (props) => {
    const { modalVisible, onCancel, onSubmit, reload, values, type } = props;
    const actionRef = useRef<ActionType>();
    const [form] = Form.useForm();
    //项目id
    const proId = getProId();
    //当前选择行areaId
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    //当前选择行数据
    const [selectedRecord, setSelectedRecord] = useState<any>();
    //loading
    const [loading, setLoading] = useState<boolean>(false);
    const columns: ProColumns<any>[] = [
        {
            valueType: 'index',
            width: 48,
        },
        {
            title: '评标室名称',
            dataIndex: 'areaName',
            ellipsis: true,
        },
        {
            title: '服务省分',
            dataIndex: 'provinceDictId',
            ellipsis: true,
            valueEnum: proviceEnum,
            hideInSearch: true,
        },
        {
            title: '详细地址',
            dataIndex: 'areaAddress',
            ellipsis: true,
            hideInSearch: true,
        },
        {
            title: '可容纳人数',
            dataIndex: 'areaNumber',
            ellipsis: true,
            hideInSearch: true,
        },
        {
            title: '联系人',
            dataIndex: 'contactName',
            ellipsis: true,
            hideInSearch: true,
        }, {
            title: '联系电话',
            dataIndex: 'contactTel',
            ellipsis: true,
            hideInSearch: true,
        },
    ];

    const onOk = () => {
        if (selectedRowKeys.length == 0) {
            message.info("请选择评标室");
            return;
        }
        form.validateFields().then(value => {
            if (moment(value.reserveStartDate).format(dateTimeFormatter) < moment().format(dateTimeFormatter)) {
                message.info("开始时间需晚于当前时间");
                return;
            }
            if (moment(value.reserveEndDate).format(dateTimeFormatter) <= moment(value.reserveStartDate).format(dateTimeFormatter)) {
                message.info("结束时间需晚于开始时间");
                return;
            }
            if (type == "0") {//选择评标室
                value["areaId"] = selectedRecord.id;
                value["placeId"] = selectedRecord.placeId;
                value["areaAddress"] = selectedRecord.areaAddress;
                value["areaName"] = selectedRecord.areaName;
                value["contactName"] = selectedRecord.contactName;
                value["contactTel"] = selectedRecord.contactTel;
                value["areaNumber"] = selectedRecord.areaNumber;
                onSubmit(value);
            } else if (type == "1") {//修改预约
                const params = {
                    ...values,
                    areaId: selectedRecord.id,
                    placeId: selectedRecord.placeId,
                    reserveStartDate: moment(value.reserveStartDate).format(dateTimeFormatter),
                    reserveEndDate: moment(value.reserveEndDate).format(dateTimeFormatter),
                    reserveBy: value.reserveBy,
                    reserveContactNumber: value.reserveContactNumber,
                }
                setLoading(true);
                saveAppointmentEdit(params).then(res => {
                    if (res?.code == 200) {
                        message.success("预约成功");
                        onCancel();
                        reload();
                    }
                }).finally(() => {
                    setLoading(false);
                })
            } else {//重评保存预约
                const params = {
                    areaId: selectedRecord.id,
                    placeId: selectedRecord.placeId,
                    reserveStartDate: moment(value.reserveStartDate).format(dateTimeFormatter),
                    reserveEndDate: moment(value.reserveEndDate).format(dateTimeFormatter),
                    reserveBy: value.reserveBy,
                    reserveContactNumber: value.reserveContactNumber,
                }
                setLoading(true);
                handleTakeEffectReserve(values?.id, params).then(res => {
                    if (res?.code == 200) {
                        message.success("操作成功");
                        onCancel();
                        reload();
                    }
                }).finally(() => {
                    setLoading(false);
                })
            }
        })
    }

    useEffect(() => {
        setSelectedRowKeys([]);
        setSelectedRecord(null);
    }, [values])

    return (
        <Modal
            destroyOnClose
            title={type == "0" ? "选择评标室" : "修改预约"}
            visible={modalVisible}
            maskClosable={false}
            onCancel={() => onCancel()}
            onOk={() => onOk()}
            okText={type == "0" ? "确认" : "保存"}
            width={"70%"}
            style={{ maxHeight: modalHeight }}
            bodyStyle={{ maxHeight: modalHeight - 107, overflowY: 'auto', }}
            className="confirm table-no-alert"
            centered
        >
            <Spin spinning={loading}>
                {values?.areaId && (
                    <>
                        <h3 className='first-title'>{type == "0" ? "已选择评标室" : "已预约评标室"}</h3>
                        <Descriptions size="middle">
                            <Descriptions.Item label="评标室名称">{values?.areaName}</Descriptions.Item>
                            {values?.contactName && <Descriptions.Item label="联系人">{values?.contactName}</Descriptions.Item>}
                            {values?.contactTel && <Descriptions.Item label="联系电话">{values?.contactTel}</Descriptions.Item>}
                            <Descriptions.Item label="可容纳人数">{values?.areaNumber ? values?.areaNumber : values?.numberInMeeting}</Descriptions.Item>
                            <Descriptions.Item label="预计评标开始时间">{moment(values?.reserveStartDate).format(dateTimeFormatter)}</Descriptions.Item>
                            <Descriptions.Item label="预计评标结束时间">{moment(values?.reserveEndDate).format(dateTimeFormatter)}</Descriptions.Item>
                        </Descriptions>
                        <h3 className='first-title'>选择评标室</h3>
                    </>
                )}
                <ProTable<any>
                    columns={columns}
                    actionRef={actionRef}
                    bordered={false}
                    request={async (params: any) => {
                        return await getBidEvalRoom(params).then(res => {
                            if (res?.code == 200) {
                                return {
                                    data: res?.data.records,
                                    success: res?.success,
                                    total: res?.data.total,
                                }
                            } else {
                                return {
                                    data: [],
                                    success: false,
                                    total: 0,
                                }
                            }
                        })
                    }}
                    rowKey="id"
                    search={{
                        labelWidth: 'auto',
                    }}
                    options={false}
                    pagination={{
                        size: "small",
                        defaultPageSize: 10,
                        showSizeChanger: true,
                    }}
                    rowSelection={{
                        type: "radio",
                        selectedRowKeys,
                        onChange: (selectedRowKeys, selectedRows) => {
                            setSelectedRowKeys(selectedRowKeys);
                            setSelectedRecord(selectedRows[0]);
                        },
                    }}
                    dateFormatter="string"
                    toolBarRender={false}
                />
                <Form
                    name="basic"
                    form={form}
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    preserve={false}
                    validateMessages={validateMessages}
                >
                    <Form.Item
                        label="是否预约评标室"
                        name="reserveStatus"
                        initialValue={"1"}
                        hidden
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="项目id"
                        name="projectId"
                        initialValue={proId}
                        hidden
                    >
                        <Input />
                    </Form.Item>
                    {selectedRowKeys.length > 0 && (
                        <Row>
                            <Col span={12}>
                                <Form.Item
                                    label="预计评标开始时间"
                                    name="reserveStartDate"
                                    rules={[{ required: true, message: '请选择' }]}
                                    extra={<span style={{ color: "#b30000" }}>预约时间范围 7:00 ~ 18:00</span>}
                                >
                                    <DatePicker showTime={{ defaultValue: moment().hour(7) }} showNow={false} disabledDate={disabledDate} disabledTime={disabledDateTime} showMinute={false} showSecond={false} format={dateFormat} style={{ width: '100%' }} />
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item
                                    label="预计评标结束时间"
                                    name="reserveEndDate"
                                    rules={[{ required: true, message: '请选择' }]}
                                >
                                    <DatePicker showTime={{ defaultValue: moment().hour(7) }} showNow={false} disabledDate={disabledDate} disabledTime={disabledDateTime} showMinute={false} showSecond={false} format={dateFormat} style={{ width: '100%' }} />
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item
                                    label="预约人"
                                    name="reserveBy"
                                    rules={[{ required: true }]}
                                >
                                    <Input maxLength={20} placeholder="预约人姓名" />
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item
                                    label="预约人联系方式"
                                    name="reserveContactNumber"
                                    rules={[{ required: true }]}
                                >
                                    <Input type="number" maxLength={20} placeholder="预约人手机号" />
                                </Form.Item>
                            </Col>
                        </Row>
                    )}
                </Form>
            </Spin>
        </Modal>
    );
};

export default BidEvalAppointment;