fe_service_ebtp_frontend/src/pages/AppointmentManage/index.tsx

import ProList from '@ant-design/pro-list';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, Card, Space, Tag } from 'antd';
import React, { ReactText, useEffect, useState } from 'react';
import { useRef } from 'react';
import MeetingReservation from '@/components/ElecBidEvaluation/MeetingReservation';
import { getRecordData, getSiteList } from './service';
import { isEmpty } from '@/utils/CommonUtils';

const orange_bg = { background: '#f59a23', color: '#0000ff', cursor: 'pointer', width: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
const green_bg = { background: '#4b7902' };
const align_middle = { display: 'flex', alignItems: 'center' };
const tag_size = { height: '20px', width: '20px' };

const ScreenTable = (props: { record: any, onCellClick: (id: any) => void, refresh: number }) => {
    const { record, onCellClick, refresh } = props;
    const actionRef = useRef<ActionType>();
    //表格列
    const [tableColumns, setTableColumns] = useState<ProColumns<any>[]>([]);
    //表格数据
    const [tableData, setTableData] = useState<any[]>([]);
    //星期偏移量
    const offset = useRef<number>(0);

    //表格列拼接
    const columnsSplice = (weeksData: any[]) => {
        const columns: ProColumns<any>[] = [
            {
                title: '评标室名称',
                dataIndex: 'name',
                align: 'center',
                render: (_, record, index) => {
                    return {
                        children: _,
                        props: {
                            rowSpan: index % 24 == 0 ? 24 : 0,
                        }
                    }
                }
            },
            {
                title: '可容纳人数（人）',
                dataIndex: 'rs',
                align: 'center',
                render: (_, record, index) => {
                    return {
                        children: _,
                        props: {
                            rowSpan: index % 24 == 0 ? 24 : 0,
                        }
                    }
                }
            },
            {
                title: '场次',
                align: 'center',
                colSpan: 2,
                render: (_, record, index) => {
                    return {
                        children: "07:00 ~ 18:00",
                        props: {
                            rowSpan: index % 24 == 0 ? 24 : 0,
                        }
                    }
                }
            },
            {
                dataIndex: "time",
                align: 'right',
                width: '100px',
                colSpan: 0,
            },
            {
                title: '预约时间',
                dataIndex: "info_time",
                valueType: 'date',
                hideInTable: true,
            },
        ];
        for (const ite of weeksData) {
            columns.push({
                title: <span>{ite.week}<br />{ite.date}</span>,
                dataIndex: ite.id,
                align: 'center',
                ellipsis: true,
                onCell: (record) => {
                    return {
                        style: record[ite.id]?.iskssj ? orange_bg : green_bg,
                        onClick: record[ite.id]?.iskssj ? () => onCellClick(record[ite.id]?.id) : void 0,
                    }
                },
                render: (_: any, record: any) => {
                    return {
                        children: record[ite.id]?.hymc,
                        props: {
                            rowSpan: record[ite.id]?.iskssj ? record[ite.id]?.hour : record[ite.id]?.hour ? 0 : 1,
                        }
                    }
                }
            })
        }
        setTableColumns(columns);
    }

    const getTableData = () => {
        getRecordData({ areaId: record?.id, offset: offset.current }).then(res => {
            if (res?.code == 200) {
                const data = res?.data;
                columnsSplice(data.week);
                setTableData(data.data);
            }
        })
    }
    const weekChange = (param: string) => {
        if (param == "1") {
            offset.current += 1;
        } else if (param == "0") {
            offset.current -= 1;
        }
        getTableData();
    }
    useEffect(() => {
        //获取预约记录
        getTableData();
    }, [refresh]);
    return (
        <div>
            {tableData.length > 0 && (
                <Space style={{ margin: '10px 0' }}>
                    <Button key="last-week" size='small' type="primary" onClick={() => weekChange("0")}>
                        上一周
                    </Button>
                    <Button key="after-week" size='small' type="primary" onClick={() => weekChange("1")}>
                        下一周
                    </Button>
                </Space>
            )}
            <ProTable<any>
                columns={tableColumns}
                actionRef={actionRef}
                bordered
                size='small'
                dataSource={tableData}
                rowKey="time"
                search={false}
                pagination={false}
                options={false}
                dateFormatter="string"
            />
        </div>
    )
}

export default () => {
    //预约弹窗
    const [modalVisible, setModalVisible] = useState<boolean>(false);
    //评标场所列表数据
    const [siteListData, setSiteListData] = useState<any[]>([]);
    //评标场所列表展开
    const [expandedRowKeys, setExpandedRowKeys] = useState<readonly ReactText[]>([]);
    //预约状态
    const [meetStatus, setMeetStatus] = useState<string>("2");
    //预约id
    const [meetId, setMeetId] = useState<string>("");
    //刷新参数
    const [refresh, setRefresh] = useState<number>(0);

    //获取评标场所
    const getSiteListData = (key: any) => {
        getSiteList().then(res => {
            if (res?.code == 200) {
                const data = res?.data;
                setSiteListData(data);
                if (key == "0" && data?.length > 0) {
                    setExpandedRowKeys([data[0].id]);
                }
            }
        })
    }
    //新建预约
    const createMeet = () => {
        setMeetStatus("0");
        setMeetId("");
        setModalVisible(true);
    }
    //查看预约
    const viewMeet = (id: any) => {
        setMeetStatus("2");
        setMeetId(id);
        setModalVisible(true);
    }
    //查看预约详情跳转
    const viewMeetContent = () => {
        window.open("/ElecEvalReserve");
    }

    useEffect(() => {
        getSiteListData("0");
    }, [])

    return (
        <Card title="评标室预约情况" bodyStyle={{ padding: '16px 0px 24px', height: window.innerHeight - 120, overflowY: 'auto' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0 24px 16px' }}>
                <Space>
                    <Button key="yuyue" type="primary" onClick={() => createMeet()}>
                        预约
                    </Button>
                    <Button key="yuyueconfirm" onClick={() => viewMeetContent()}>
                        查看预约详情
                    </Button>
                </Space>
                <Space size="middle">
                    <div style={align_middle}><Tag color="#f59a23" style={tag_size}></Tag>已预约</div>
                    <div style={align_middle}><Tag color="#4b7902" style={tag_size}></Tag>未预约</div>
                </Space>
            </div>
            <ProList<any>
                rowKey="id"
                expandable={{
                    expandedRowKeys, onExpandedRowsChange: setExpandedRowKeys,
                }}
                dataSource={siteListData}
                toolBarRender={false}
                metas={{
                    title: {
                        render: (_: any, record: any) => <span onClick={() => setExpandedRowKeys(keys => keys.includes(record.id) ? [] : [record.id])}>{record.areaName}</span>,
                    },
                    subTitle: {
                        render: (_: any, record: any) => `可容纳人数：${isEmpty(record.areaNumber) ? '' : record.areaNumber}人`,
                    },
                    description: {
                        render: (_: any, record: any) => <ScreenTable record={record} onCellClick={viewMeet} refresh={refresh} />,
                    },
                }}
            />
            {modalVisible && <MeetingReservation modalVisible={modalVisible} onCancel={() => { setModalVisible(false); getSiteListData("1") }} roomList={siteListData} status={meetStatus} meetId={meetId} onSubmit={() => { setModalVisible(false); setRefresh(refresh => refresh + 1) }} />}
        </Card >
    );
};