training_data/apps/web/src/components/models/daily/dailyMsgDisplay/DailyMsgDisplayLayout.tsx

import { Button, DatePicker, Form, Modal, TimePicker, TreeSelect } from "antd";
import TextArea from "antd/es/input/TextArea";
import dayjs from "dayjs";
import { useState } from "react";
export default function DailyMsgDisplayLayout() {
    const [form] = Form.useForm()
    const [open, setOpen] = useState(true)
    const treeData = [
        {
            title: 'Node1',
            value: '0-0',
            children: [
                {
                    title: 'Child Node1',
                    value: '0-0-1',
                },
                {
                    title: 'Child Node2',
                    value: '0-0-2',
                },
            ],
        },
        {
            title: 'Node2',
            value: '0-1',
        },
    ];
    const handleSave = () => {
        //console.log(form.getFieldsValue())
        const { trainDate, trainTime, trainType, trainContent } = form.getFieldsValue()
        const trainDateStr = dayjs(trainDate).format('YYYY-MM-DD')
        const trainTimeBegin = dayjs(trainTime[0]).format('HH:mm')
        const trainTimeEnd = dayjs(trainTime[1]).format('HH:mm')
    }
    return (
        <>  
            <Button onClick={() => { setOpen(true) }}>创建计划</Button>
            <Modal
                open={open}
                onCancel={() => { setOpen(false) }}
                footer={null}
                centered={true}
            >
                <div className="p-6">
                    <Form
                        form={form}
                    >
                        <Form.Item name="trainDate" label="选择日期">
                            <DatePicker picker="date" style={{ width: '100%' }} showNow={true} />
                        </Form.Item>
                        <Form.Item name="trainTime" label="选择时间">
                            <TimePicker.RangePicker format="HH:mm" style={{ width: '100%' }} />
                        </Form.Item>
                        <Form.Item name="trainType" label="选择学科">
                            <TreeSelect
                                style={{ width: '100%' }}
                                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                                treeData={treeData}
                                placeholder="请选择学科或课程"
                                treeDefaultExpandAll={false}
                            //onChange={onChange}
                            />
                        </Form.Item>
                        <Form.Item name="trainContent" label="填写内容">
                            <TextArea rows={4} />
                        </Form.Item>
                        <Button type="primary" onClick={handleSave} style={{ width: '100%' }}>创建计划</Button>
                    </Form>
                </div>
            </Modal>
        </>
    )
}