fe_service_ebtp_frontend/src/components/ElecBidEvaluation/BidEvalAppointment.tsx

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

interface BidEvalAppointmentProps {
    modalVisible: boolean;
    onCancel: () => void;
    onSubmit: (value: any) => void;
    values: any;
}

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, values } = props;
    const actionRef = useRef<ActionType>();
    const [form] = Form.useForm();
    //当前选择行areaId
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    //当前选择行数据
    const [selectedRecord, setSelectedRecord] = useState<any>();
    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 (value.reserveStartDate < moment().format(dateTimeFormatter)) {
                message.info("开始时间不可早于当前时间");
                return;
            }
            value["areaId"] = selectedRecord.id;
            value["placeId"] = selectedRecord.placeId;
            value["evalLocation"] = selectedRecord.areaName;
            onSubmit(value);
        })
    }

    useEffect(() => {
        if (values) {
            if (values?.areaId) {
                setSelectedRowKeys([values.areaId])
                setSelectedRecord({
                    ...values,
                    id: values.areaId,
                })
            }
            form.setFieldsValue({
                ...values,
            })
        }
        return () => {
            setSelectedRowKeys([]);
            setSelectedRecord(void 0);
        }
    }, [values])

    return (
        <Modal
            destroyOnClose
            title="选择评标室"
            visible={modalVisible}
            maskClosable={false}
            onCancel={() => onCancel()}
            onOk={() => onOk()}
            okText="确认"
            width={"70%"}
            style={{ maxHeight: modalHeight }}
            bodyStyle={{ maxHeight: modalHeight - 107, overflowY: 'auto', }}
            className="confirm table-no-alert"
            centered
        >
            <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}
            >
                {selectedRowKeys.length > 0 && (
                    <Row>
                        <Col span={12}>
                            <Form.Item
                                label="预计评标开始时间"
                                name="reserveStartDate"
                                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="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>
        </Modal>
    );
};

export default BidEvalAppointment;