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/MeetingReservation';

const orange_bg = { background: '#f59a23', color: '#0000ff' };
const green_bg = { background: '#4b7902' };
const align_middle = { display: 'flex', alignItems: 'center' };
const tag_size = { height: '20px', width: '20px' };

const data = {
    week: [
        {
            id: "01",
            week: '周一',
            date: "2022年7月18日",
        },
        {
            id: "02",
            week: '周二',
            date: "2022年7月19日"
        },
        {
            id: "03",
            week: '周三',
            date: "2022年7月20日"
        },
        {
            id: "04",
            week: '周四',
            date: "2022年7月21日"
        },
        {
            id: "05",
            week: '周五',
            date: "2022年7月22日"
        },
        {
            id: "06",
            week: '周六',
            date: "2022年7月23日"
        },
        {
            id: "07",
            week: '周日',
            date: "2022年7月24日"
        },
    ],
    data: [
        {
            "id": "2",
            "name": "集团第一评标室",
            "rs": "10",
            "time": "07:00",
            "01": {
                "id": "123",
                "hymc": "标段1",
                "kssj": "2022-07-18 07:00:00",
                "jssj": "2022-07-18 08:00:00",
                "iskssj": true,
                "hour": 1
            },
            "02": {
                "id": "456",
                "hymc": "评标室汇报会议",
                "kssj": "2022-07-18 07:00:00",
                "jssj": "2022-07-18 10:00:00",
                "iskssj": true,
                "hour": 3
            },
            "03": null,
            "04": null,
            "05": null,
            "06": null,
            "07": null,
        },
        {
            "id": "3",
            "name": "集团第一评标室",
            "rs": "10",
            "time": "08:00",
            "01": null,
            "02": {
                "id": "456",
                "hymc": "评标室汇报会议",
                "kssj": "2022-07-18 07:00:00",
                "jssj": "2022-07-18 10:00:00",
                "iskssj": false,
                "hour": 3
            },
            "03": null,
            "04": null,
            "05": null,
            "06": null,
            "07": null,
        },
        {
            "id": "4",
            "name": "集团第一评标室",
            "rs": "10",
            "time": "09:00",
            "01": null,
            "02": {
                "id": "456",
                "hymc": "评标室汇报会议",
                "kssj": "2022-07-18 07:00:00",
                "jssj": "2022-07-18 10:00:00",
                "iskssj": false,
                "hour": 3
            },
            "03": {
                "id": "789",
                "hymc": "标段2",
                "kssj": "2022-07-18 09:00:00",
                "jssj": "2022-07-18 10:00:00",
                "iskssj": true,
                "hour": 1
            },
            "04": null,
            "05": null,
            "06": null,
            "07": null,
        },
        {
            "id": "5",
            "name": "集团第一评标室",
            "rs": "10",
            "time": "10:00",
            "01": null,
            "02": null,
            "03": null,
            "04": null,
            "05": null,
            "06": null,
            "07": null,
        },
        {
            "id": "6",
            "name": "集团第一评标室",
            "rs": "10",
            "time": "11:00",
            "01": null,
            "02": null,
            "03": null,
            "04": null,
            "05": null,
            "06": null,
            "07": null,
        },
        {
            "id": "7",
            "name": "集团第一评标室",
            "rs": "10",
            "time": "12:00",
            "01": null,
            "02": null,
            "03": null,
            "04": null,
            "05": null,
            "06": null,
            "07": null,
        },
        {
            "id": "8",
            "name": "集团第一评标室",
            "rs": "10",
            "time": "13:00",
            "01": {
                "id": "012",
                "hymc": "评标室汇报会议2",
                "kssj": "2022-07-18 13:00:00",
                "jssj": "2022-07-18 17:00:00",
                "iskssj": true,
                "hour": 4
            },
            "02": null,
            "03": null,
            "04": {
                "id": "213",
                "hymc": "标段3",
                "kssj": "2022-07-18 13:00:00",
                "jssj": "2022-07-18 14:00:00",
                "iskssj": true,
                "hour": 1
            },
            "05": null,
            "06": null,
            "07": {
                "id": "367",
                "hymc": "标段4",
                "kssj": "2022-07-18 13:00:00",
                "jssj": "2022-07-18 15:00:00",
                "iskssj": true,
                "hour": 2
            },
        },
        {
            "id": "9",
            "name": "集团第一评标室",
            "rs": "10",
            "time": "14:00",
            "01": {
                "id": "012",
                "hymc": "评标室汇报会议2",
                "kssj": "2022-07-18 13:00:00",
                "jssj": "2022-07-18 17:00:00",
                "iskssj": false,
                "hour": 4
            },
            "02": null,
            "03": null,
            "04": null,
            "05": null,
            "06": null,
            "07": {
                "id": "367",
                "hymc": "标段4",
                "kssj": "2022-07-18 13:00:00",
                "jssj": "2022-07-18 15:00:00",
                "iskssj": false,
                "hour": 2
            },
        },
        {
            "id": "10",
            "name": "集团第一评标室",
            "rs": "10",
            "time": "15:00",
            "01": {
                "id": "012",
                "hymc": "评标室汇报会议2",
                "kssj": "2022-07-18 13:00:00",
                "jssj": "2022-07-18 17:00:00",
                "iskssj": false,
                "hour": 4
            },
            "02": null,
            "03": null,
            "04": null,
            "05": null,
            "06": null,
            "07": null,
        },
        {
            "id": "11",
            "name": "集团第一评标室",
            "rs": "10",
            "time": "16:00",
            "01": {
                "id": "012",
                "hymc": "评标室汇报会议2",
                "kssj": "2022-07-18 13:00:00",
                "jssj": "2022-07-18 17:00:00",
                "iskssj": false,
                "hour": 4
            },
            "02": null,
            "03": null,
            "04": null,
            "05": null,
            "06": null,
            "07": null,
        },
        {
            "id": "12",
            "name": "集团第一评标室",
            "rs": "10",
            "time": "17:00",
            "01": null,
            "02": null,
            "03": null,
            "04": null,
            "05": null,
            "06": null,
            "07": null,
        },
        {
            "id": "13",
            "name": "集团第一评标室",
            "rs": "10",
            "time": "18:00",
            "01": null,
            "02": null,
            "03": null,
            "04": null,
            "05": null,
            "06": null,
            "07": null,
        },
    ]
}

const dataSource = [
    {
        "id": "1",
        "title": '集团第一评标室',
        "rs": "10",
    },
    {
        "id": "2",
        "title": '集团第二评标室',
        "rs": "18",
    },
    {
        "id": "3",
        "title": '集团第三评标室',
        "rs": "29",
    }
]

const ScreenTable = (props: { tableData: any[], tabColumns: any[], record: any }) => {
    const { tableData, tabColumns, record } = props;
    const actionRef = useRef<ActionType>();
    //表格列
    const [tableColumns, setTableColumns] = useState<ProColumns<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: '60px',
            colSpan: 0,
        },
        {
            title: '预约时间',
            dataIndex: "info_time",
            valueType: 'date',
            hideInTable: true,
        },
    ];
    useEffect(() => {
        for (const ite of tabColumns) {
            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
                    }
                },
                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);
    }, []);
    return (
        <div>
            <Space style={{ margin: '10px 0' }}>
                <Button key="last-week" size='small' type="primary">
                    上一周
                </Button>
                <Button key="after-week" size='small' type="primary">
                    下一周
                </Button>
            </Space>
            <ProTable<any>
                columns={tableColumns}
                actionRef={actionRef}
                bordered
                size='small'
                dataSource={tableData}
                rowKey="id"
                search={false}
                pagination={false}
                options={false}
                dateFormatter="string"
            />
        </div>
    )
}

export default () => {
    //预约弹窗
    const [modalVisible, setModalVisible] = useState<boolean>(false);
    const [expandedRowKeys, setExpandedRowKeys] = useState<readonly ReactText[]>([]);

    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={() => setModalVisible(true)}>
                        预约
                    </Button>
                    <Button key="yuyueconfirm">
                        查看预约详情
                    </Button>
                </Space>
                <Space>
                    <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={dataSource}
                toolBarRender={false}
                metas={{
                    title: {
                        render: (_: any, record: any) => <span onClick={() => setExpandedRowKeys(keys => keys.includes(record.id) ? [] : [record.id])}>{record.title}</span>,
                    },
                    subTitle: {
                        render: (_: any, record: any) => `可容纳人数：${record.rs}人`,
                    },
                    description: {
                        render: (_: any, record: any) => <ScreenTable tableData={data.data} tabColumns={data.week} record={record} />,
                    },
                }}
            />
            {modalVisible && <MeetingReservation modalVisible={modalVisible} onCancel={() => setModalVisible(false)} />}
        </Card >
    );
};