training_data/apps/web/src/components/models/trainPlan/TrainPlanCreateForm.tsx

import { Button, DatePicker, Form, Modal, Select, TimePicker, TreeSelect } from "antd";
import TextArea from "antd/es/input/TextArea";
import dayjs from "dayjs";
import { useState, useEffect, useMemo } from "react";
import { useDaily } from "./TrainPlanContext";
import DepartmentChildrenSelect from "../department/department-children-select";
import TrainContentTreeSelect from "../trainContent/train-content-tree-select";
export default function TrainPlanCreateForm() {
    const [form] = Form.useForm()
    const [open, setOpen] = useState(true)
    
    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="trainTime" label="选择单位">
                            <DepartmentChildrenSelect></DepartmentChildrenSelect>
                        </Form.Item>
                        <Form.Item name="trainType" label="选择学科">
                            <TrainContentTreeSelect></TrainContentTreeSelect>
                        </Form.Item>
                        <Form.Item name="trainContent" label="填写内容">
                            <TextArea rows={4} />
                        </Form.Item>
                        <Button type="primary" onClick={handleSave} style={{ width: '100%' }}>创建计划</Button>
                    </Form>
                </div>
            </Modal>
        </>
    )
}