assistant-todo-mobile/src/components/DetailForm/index.js

import React from 'react'
import {
    Form,
    Input,
    Button,
    Dialog,
    TextArea,
    Space,
    Checkbox, Selector, Tag, Radio
} from 'antd-mobile'
import ParentTask from "../ParentTask";
import DatePickerItem from "../DataPickerItem"
import "./index.css"
import {addTask} from "../../utils";
import {useNavigate, useOutletContext} from "react-router-dom";
export default () => {
    // 设置标题栏
    const {setTitle} = useOutletContext();
    setTitle("添加任务")
    // 路由
    const navigate = useNavigate();
    // 获取form引用
    const [form] = Form.useForm();
    const onFinish = (values) => {
        console.log("提交：",values)
        if (values.pidArray===undefined){
            values.pid='0'
        }else {
            values.pid=values.pidArray[values.pidArray.length-1];
        }
        addTask(values).then(values=>{
            Dialog.show({
                content: `添加任务${values.name}成功`,
                closeOnAction:true,
                actions: [
                    [
                        {
                            key: 'back',
                            text: '回到列表',
                            onClick:()=>{
                                navigate("/home/listTask")
                            }
                        },
                        {
                            key: 'create',
                            text: '创建下一条',
                            onClick:()=>{
                                // 清空值
                                form.resetFields();
                                form.setFieldValue("pidArray",values.pidArray);
                            }
                        },
                    ],
                ],
            })
        })
    }
    return (
        <>
            <Form
                form={form}
                layout='horizontal'
                onFinish={onFinish}
                footer={
                    <Button block type='submit' color='primary' size='large'>
                        提交
                    </Button>
                }
            >
                <ParentTask form = {form}/>
                <Form.Item
                    name='name'
                    label='任务名称'
                    rules={[{required: true, message: '任务名称不能为空'}]}
                >
                    <Input onChange={console.log} placeholder='任务名称'/>
                </Form.Item>
                <Form.Item name='description' label='任务描述'>
                    <TextArea
                        placeholder='请输入任务描述'
                        maxLength={100}
                        rows={2}
                        showCount
                    />
                </Form.Item>
                <Form.Item name='state' label='任务状态' required>
                    <Radio.Group>
                        <Space direction='vertical'>
                            <Radio value='8'><Tag color='primary'>未开始</Tag></Radio>
                            <Radio value='9'><Tag color='warning'>进行中</Tag></Radio>
                            <Radio value='7'><Tag color='success'>已完成</Tag></Radio>
                            <Radio value='10'><Tag color='danger'>已逾期</Tag></Radio>
                        </Space>
                    </Radio.Group>
                </Form.Item>
                <Form.Item name='priority' label='任务优先级'>
                    <Radio.Group>
                        <Space direction='vertical'>
                            <Radio value='3'><Tag color='danger'>紧急重要</Tag></Radio>
                            <Radio value='2'><Tag color='warning'>不紧急重要</Tag></Radio>
                            <Radio value='1'><Tag>紧急不重要</Tag></Radio>
                            <Radio value='0'><Tag color='success'>不紧急不重要</Tag></Radio>
                        </Space>
                    </Radio.Group>
                </Form.Item>
                <DatePickerItem fieldName={"expectedStartTime"} labelName={"预计开始时间"}/>
                <DatePickerItem fieldName={"expectedEndTime"} labelName={"预计结束时间"}/>
                <DatePickerItem fieldName={"actualStartTime"} labelName={"实际开始时间"}/>
                <DatePickerItem fieldName={"actualEndTime"} labelName={"实际结束时间"}/>
            </Form>
        </>
    )
}