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, {useContext, 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 {MyRootContext, UPDATE_SEARCH} from "../../components/MyRootContext";

const DetailSearchContext = () => {
    const navigate = useNavigate();
    const [form] = Form.useForm();
    const [visible, setVisible] = React.useState(false);
    const { state, dispatch } = useContext(MyRootContext);
    const search = state.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
        }
        if (search.data && search.data.orSearchModel && search.data.orSearchModel.andList) {
            let searchMap = new Map(
                search.data.orSearchModel.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(','))
            }
            if (searchMap.has("name")) {
                form.setFieldValue("name", searchMap.get("name").value)
            }
        }
        // 结束时间大于todo日，开始时间小于结束日
        search.data?.orSearchModel?.andSearchModel?.andList?.forEach((searchObj) => {
            if (searchObj.name === "expectedEndTime") {
                form.setFieldValue("todoDay", dayjs(searchObj.value).toDate())
            }
        })
        if (search.data && search.data.andList) {
            let orMap = new Map(search.data.andList.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 andList = []
                let searchCondition = []
                let andSearchModel = {}
                let orSearchModel = {"andList": searchCondition, andSearchModel}

                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) {
                    andSearchModel.andList = [{
                        "name": "expectedStartTime",
                        "value": dayjs(todoDay).add(1, "d").set('h', 0).set('m', 0).set('s', 0).set('ms', 0).format(),
                        "operateType": "<"
                    }, {
                        "name": "expectedEndTime",
                        "value": dayjs(todoDay).set('h', 0).set('m', 0).set('s', 0).set('ms', 0).format(),
                        "operateType": ">"
                    }]
                    andSearchModel.orSearchModel = {
                        "andList": [
                            {
                                "name": "expectedStartTime",
                                "value": dayjs(todoDay).add(1, "d").set('h', 0).set('m', 0).set('s', 0).set('ms', 0).format(),
                                "operateType": "<"
                            }, {
                                "name": "expectedStartTime",
                                "value": dayjs(todoDay).set('h', 0).set('m', 0).set('s', 0).set('ms', 0).format(),
                                "operateType": ">"
                            }, {
                                "name": "expectedEndTime",
                                "operateType": "NULL"
                            }
                        ], orSearchModel: {
                            "andList": [
                                {
                                    "name": "expectedEndTime",
                                    "value": dayjs(todoDay).add(1, "d").set('h', 0).set('m', 0).set('s', 0).set('ms', 0).format(),
                                    "operateType": "<"
                                }, {
                                    "name": "expectedEndTime",
                                    "value": dayjs(todoDay).set('h', 0).set('m', 0).set('s', 0).set('ms', 0).format(),
                                    "operateType": ">"
                                }, {
                                    "name": "expectedStartTime",
                                    "operateType": "NULL"
                                }
                            ]
                        }
                    }
                }
                if (allOverdueTasks) {
                    andList.push({"name": "state", "value": "10", "operateType": "="})
                }
                dispatch({type:UPDATE_SEARCH,search:{
                        "pageSize": 12,
                        "pageNumber": 1,
                        "data": {
                            andList,
                            orSearchModel
                        }
                    }})
                navigate("/mobile/listTask")
            }}
            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;