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";
export default () => {
    const [form] = Form.useForm();
    const onFinish = (values) => {
        // Dialog.alert({
        //     content: <pre>{JSON.stringify(values, null, 2)}</pre>,
        // })
        console.log(values)
        if (values.pidArray===undefined){
            values.pid='0'
        }else {
            values.pid=values.pidArray[values.pidArray.length-1];
        }
        addTask(values).then(values=>{
            Dialog.alert({
                content: '添加任务成功' + values.data,
                onConfirm:()=>{}
            })
        })
    }
    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='address' label='任务描述' help='详情地址'>
                    <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='danger'>未开始</Tag></Radio>
                            <Radio value='9'><Tag color='warning'>进行中</Tag></Radio>
                            <Radio value='7'><Tag color='success'>已完成</Tag></Radio>
                            <Radio value='4'><Tag>已关闭</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>
        </>
    )
}