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, {isDayjs} 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.andList.map(searchObj => [searchObj.name, searchObj]));
        if (searchMap.has("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(','))
        }
        // 结束时间大于todo日，开始时间小于结束日
        if (searchMap.has("expectedEndTime")) {
            let value = searchMap.get("expectedEndTime").value;
            form.setFieldValue("todoDay", dayjs(value).toDate())
        }
        if (searchMap.has("name")) {
            form.setFieldValue("name", searchMap.get("name").value)
        }
        let orMap = new Map(search.data.orList.map(searchObj => [searchObj.name, searchObj]));
        if (orMap.has("state") && orMap.get("state").value === "10") {
            form.setFieldValue("allOverdueTasks", 'checked')
        }
    }

    return (
        <Form
            form={form}
            layout='horizontal'
            onFinish={(values) => {
                console.log("Form", values)
                let searchCondition = [];
                let orList = []
                const {pidArray, name, priority, state, todoDay, allOverdueTasks} = 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) {
                    searchCondition.push({
                        "name": "expectedStartTime",
                        "value": dayjs(todoDay).add(1, "d").set('h', 0).set('m', 0).set('s', 0).set('ms', 0).format(),
                        "operateType": "<"
                    })
                    searchCondition.push({
                        "name": "expectedEndTime",
                        "value": dayjs(todoDay).set('h', 0).set('m', 0).set('s', 0).set('ms', 0).format(),
                        "operateType": ">"
                    })
                }
                if (allOverdueTasks) {
                    orList.push({"name": "state", "value": "10", "operateType": "="})
                }
                navigate("/home/listTask", {
                        state: {
                            search: {
                                "pageSize": 12,
                                "pageNumber": 1,
                                "data": {
                                    "andList": searchCondition,
                                    orList
                                }
                            }
                        }
                    }
                )
            }}
            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 key={stateDict.itemCode} value={stateDict.itemCode}>
                                    <Tag key={stateDict.itemCode}
                                         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 key={stateDict.itemCode} value={stateDict.itemCode}>
                                    <Tag key={stateDict.itemCode}
                                         color={stateDict.jsonValue?.color}>{stateDict.itemName}</Tag>
                                </Checkbox>
                            )
                        }
                    </Space>
                </Checkbox.Group>
            </Form.Item>
            <Form.Item noStyle
                       shouldUpdate={(prevValues, curValues) =>{
                           console.log("prevValues,curValues",prevValues,curValues)
                           return prevValues.todoDay !== curValues.todoDay}
                       }
            >
                {({getFieldValue, setFieldsValue}) => (
                    <Form.Item
                        name='todoDay'
                        initialValue={null}
                        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>
            <Form.Item
                name='allOverdueTasks'
                label='所有逾期任务'
                childElementPosition='right'
                initialValue={false}
                valuePropName='checked' // 确保为 Switch 设置正确的 prop
            >
                <Switch/>
            </Form.Item>
        </Form>)
}
export default DetailSearchContext;