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

import React, {useEffect} from 'react'
import {
    Form,
    Input,
    Button,
    Dialog,
    TextArea,
    Space, Tag, Radio
} from 'antd-mobile'
import ParentTask from "../ParentTask";
import DatePickerItem from "../DataPickerItem"
import "./index.css"
import {addTask, getPTask, getTaskById, updateTask} from "../../utils";
import {useLocation, useNavigate, useOutletContext, useSearchParams} from "react-router-dom";
import dayjs from "dayjs";

export default () => {
    // 进入此页面的操作：添加，修改，详情（按钮为添加任务日志）
    const location = useLocation();
    let [params] = useSearchParams();
    // 设置标题栏
    const {setTitle} = useOutletContext();
    const [currentPath, setCurrentPath] = React.useState("");
    const [updateFiledDisabled, setUpdateFiledDisabled] = React.useState(true);
    const [pName, setPName] = React.useState();
    const [pidArray, setPidArray] = React.useState([]);
    // 路由
    const navigate = useNavigate();
    // 获取form引用
    const [form] = Form.useForm();
    useEffect(() => {


        if (location.pathname.endsWith("addTask")) {
            setTitle("添加任务");
            setCurrentPath("addTask");
            setUpdateFiledDisabled(false);
        } else if (location.pathname.endsWith("updateTask")) {
            setTitle("修改任务");
            setCurrentPath("updateTask");
            initData(params.get('id'));
            setUpdateFiledDisabled(false);
        } else if (location.pathname.endsWith("selectTask")) {
            setTitle("任务详情");
            setCurrentPath("selectTask");
            initData(params.get('id'));
            setUpdateFiledDisabled(true);
        } else {
            // todo 异常处理
        }

    }, [])

    function editParentTask(id) {
        if (id === '0') {
            return;
        }
        // 获取父任务信息
        getPTask(id).then(res => {
            let parentMessageVOList = res[0].parentMessageVOList;
            console.log({res, parentMessageVOList});
            setPName(parentMessageVOList[parentMessageVOList.length - 1].name);
            setPidArray(parentMessageVOList.map(parent => parent.id))
        })
    }

    const initData = (id) => {
        if (id) {
            getTaskById(id).then((res) => {
                let contentElement = res.content[0];
                if (contentElement) {
                    console.log(contentElement.expectedStartTime, contentElement.expectedEndTime,
                        dayjs(contentElement.expectedStartTime).format(), dayjs(contentElement.expectedStartTime).toDate())
                    contentElement.expectedStartTime && (contentElement.expectedStartTime = dayjs(contentElement.expectedStartTime).toDate())
                    contentElement.expectedEndTime && (contentElement.expectedEndTime = dayjs(contentElement.expectedEndTime).toDate())
                    contentElement.actualStartTime && (contentElement.actualStartTime = dayjs(contentElement.actualStartTime).toDate())
                    contentElement.actualEndTime && (contentElement.actualEndTime = dayjs(contentElement.actualEndTime).toDate())
                    form.setFieldsValue(contentElement)
                    editParentTask(contentElement.pid)
                }
            })
        }
    }
    const onFinish = (values) => {
        if (currentPath === "selectTask") {
            // 进入添加日志页面
            navigate("/detail/logTask")
            return;
        }
        console.log("提交：", values)
        if (values.pidArray?.length > 0) {
            values.pid = values.pidArray[values.pidArray.length - 1];
        } else if (!values.pid) {
            values.pid = '0'
        }
        if (currentPath === "addTask") {
            addTask(values).then(values => {
                Dialog.show({
                    content: `添加任务${values}成功`,
                    closeOnAction: true,
                    actions: [
                        [
                            {
                                key: 'back',
                                text: '回到列表',
                                onClick: () => {
                                    navigate("/home/listTask")
                                }
                            },
                            {
                                key: 'create',
                                text: '创建下一条',
                                onClick: () => {
                                    // 清空值
                                    form.resetFields();
                                    form.setFieldValue("pidArray", values.pidArray);
                                }
                            },
                        ],
                    ],
                })
            })
            return;
        }
        if (currentPath === "updateTask") {
            updateTask(values).then(values => {
                Dialog.show({
                    content: `修改任务${values}成功`,
                    closeOnAction: true,
                    actions: [
                        [
                            {
                                key: 'back',
                                text: '回到列表',
                                onClick: () => {
                                    navigate("/home/listTask")
                                }
                            }
                        ],
                    ],
                })
            })
        }
    }
    return (
        <>
            <Form
                form={form}
                layout='horizontal'
                onFinish={onFinish}
                footer={
                    <Button block type='submit' color='primary' size='large'>
                        {currentPath === "selectTask" ? "日记/心得" : "提交"}
                    </Button>
                }
            >
                <Form.Item
                    key='id'
                    name='id'
                    hidden={true}
                >
                </Form.Item>
                <Form.Item
                    key='pid'
                    name='pid'
                    hidden={true}
                >
                </Form.Item>
                <Form.Item
                    key='code'
                    name='code'
                    hidden={true}
                ></Form.Item>
                <ParentTask pName={pName} pidArray={pidArray} disabled={updateFiledDisabled} form={form}/>
                <Form.Item
                    name='name'
                    label='任务名称'
                    rules={[{required: true, message: '任务名称不能为空'}]}
                    disabled={updateFiledDisabled}
                >
                    <Input onChange={console.log} placeholder='任务名称'/>
                </Form.Item>
                <Form.Item name='description' label='任务描述' disabled={updateFiledDisabled}>
                    <TextArea
                        placeholder='请输入任务描述'
                        maxLength={100}
                        rows={2}
                        showCount
                    />
                </Form.Item>
                <Form.Item name='state' initialValue='8' label='任务状态' rules={[{required: true, message: '任务状态不能为空'}]} disabled={updateFiledDisabled}>
                    <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='任务优先级' initialValue='2' rules={[{required: true, message: '任务优先级不能为空'}]} disabled={updateFiledDisabled}>
                    <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 disabled={updateFiledDisabled} fieldName={"expectedStartTime"}
                                labelName={"预计开始时间"}/>
                <DatePickerItem disabled={updateFiledDisabled} fieldName={"expectedEndTime"}
                                labelName={"预计结束时间"}/>
                <DatePickerItem disabled={updateFiledDisabled} fieldName={"actualStartTime"}
                                labelName={"实际开始时间"}/>
                <DatePickerItem disabled={updateFiledDisabled} fieldName={"actualEndTime"} labelName={"实际结束时间"}/>
            </Form>
        </>
    )
}