assistant-todo-mobile/src/pages/DetailSearchContext/index.js

import {Button, Checkbox, DatePicker, Form, Input, Space, Switch, Tag} from "antd-mobile";
import ParentTask from "../../components/ParentTask";
import React, {useEffect} from "react";
import dayjs from "dayjs";
import {CloseCircleFill} from "antd-mobile-icons";
import {useLocation, useNavigate, useOutletContext} from "react-router-dom";
import {getDictionary} from "../../utils/dictUtil";
import {getTaskById} from "../../utils";

const DetailSearchContext = () => {
    const navigate = useNavigate();
    const [form] = Form.useForm();
    const [visible, setVisible] = React.useState(false);
    const location = useLocation();
    console.log("DetailSearchContext", location);
    const {search} = location?.state || undefined;
    console.log("DetailSearchContext.search", search)
    const [stateList, setStateList] = React.useState([]);
    const [priorityList, setPriorityList] = React.useState([]);
    // 使用Outlet,传值修改标题
    const {setTitle} = useOutletContext();
    useEffect(() => {
        // 使用Outlet,传值修改标题
        setTitle("搜索查询")
        initDate()
    }, [])

    async function initDate() {
        let stateDictionary = await getDictionary("2");
        let priorityDictionary = await getDictionary("1");
        setStateList(Array.from(stateDictionary.values()));
        setPriorityList(Array.from(priorityDictionary.values()));
        if (!search) {
            return
        }
        let searchMap = new Map(search.data.map(searchObj => [searchObj.name, searchObj]));
        if (searchMap.has("pid")) {
            let task = await getTaskById(searchMap.get("pid"));
            // form.setFieldValue(task.name);
        }
        if (searchMap.has("state")) {
            form.setFieldValue("state", searchMap.get("state").value.split(','))
        }
        if (searchMap.has("priority")) {
            form.setFieldValue("priority", searchMap.get("priority").value.split(','))
        }
        if (searchMap.has("todoDay")) {
            form.setFieldValue("todoDay", searchMap.get("todoDay").value)
        }
    }

    return (
        <Form
            form={form}
            layout='horizontal'
            onFinish={(values) => {
                console.log(values)
                let searchCondition = [];
                const {pidArray, name, priority, state, todoDay} = values;
                if (pidArray && pidArray.length !== 0) {
                    searchCondition.push({"name": "name", "value": pidArray[pidArray.length - 1], "operateType": "="})
                }
                if (name && name !== "") {
                    searchCondition.push({"name": "name", "value": name, "operateType": "LIKE"})
                }
                if (priority && priority.length !== 0) {
                    searchCondition.push({"name": "priority", "value": priority.join(","), "operateType": "IN"})
                }
                if (state && state.length !== 0) {
                    searchCondition.push({"name": "state", "value": state.join(","), "operateType": "IN"})
                }
                if (todoDay !== undefined) {
                    searchCondition.push({"name": "todoDay", "value": todoDay, "operateType": "IN"})
                }
                navigate("/home/listTask", {state: {search: JSON.stringify(searchCondition)}})
            }}
            footer={
                <Button block type='submit' color='primary' size='large'>
                    搜索
                </Button>
            }
        >
            <ParentTask form={form}/>
            <Form.Item
                name='name'
                label='任务信息'
            >
                <Input onChange={console.log} placeholder='任务信息'/>
            </Form.Item>

            <Form.Item name='state' label='任务状态'>
                <Checkbox.Group>
                    <Space direction='vertical'>
                        {
                            stateList.map(stateDict =>
                                <Checkbox value={stateDict.itemCode}>
                                    <Tag color={stateDict.jsonValue?.color}>{stateDict.itemName}</Tag>
                                </Checkbox>
                            )
                        }
                    </Space>
                </Checkbox.Group>
            </Form.Item>
            <Form.Item name='priority' label='任务优先级'>
                <Checkbox.Group>
                    <Space direction='vertical'>
                        {
                            priorityList.map(stateDict =>
                                <Checkbox value={stateDict.itemCode}>
                                    <Tag color={stateDict.jsonValue?.color}>{stateDict.itemName}</Tag>
                                </Checkbox>
                            )
                        }
                    </Space>
                </Checkbox.Group>
            </Form.Item>
            <Form.Item noStyle
                       shouldUpdate={(prevValues, curValues) =>
                           prevValues.todoDay !== curValues.todoDay
                       }
            >
                {({getFieldValue, setFieldsValue}) => (
                    <Form.Item
                        name='todoDay'
                        trigger='onConfirm'
                        label='TODO日'
                        help='期望开始时间和期望结束时间包含当日时间段'
                        arrow={
                            getFieldValue('todoDay') ? (
                                <CloseCircleFill
                                    style={{
                                        color: 'var(--adm-color-light)',
                                        fontSize: 14,
                                    }}
                                    onClick={e => {
                                        e.stopPropagation()
                                        setFieldsValue({todoDay: null})
                                    }}
                                />) : true

                        }
                        onClick={() => {
                            setVisible(true)
                        }}
                    >
                        <DatePicker
                            visible={visible}
                            onClose={() => {
                                setVisible(false)
                            }}
                        >
                            {value =>
                                value ? dayjs(value).format('YYYY-MM-DD') : '请选择日期'
                            }
                        </DatePicker>
                    </Form.Item>
                )}
            </Form.Item>
            {/*后期嵌套or*/}
            {/*<Form.Item*/}
            {/*    name='allOverdueTasks'*/}
            {/*    label='所有逾期任务'*/}
            {/*    childElementPosition='right'*/}
            {/*>*/}
            {/*    <Switch/>*/}
            {/*</Form.Item>*/}
        </Form>)
}
export default DetailSearchContext;