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

import {Tag,} from "antd-mobile";
import React, {Fragment, useEffect, useState} from "react";
import {useLocation, useNavigate} from 'react-router-dom';
import {AddOutline, CloseOutline, SearchOutline} from "antd-mobile-icons";
import "./index.css"
import {getDictionary} from "../../utils/dictUtil";
import dayjs from "dayjs";

const DetailSearchBar = (props) => {
    // 从搜索设置中传来的search
    // const location = useLocation();
    // const searchUpdate = location.state?.search;
    // 父子传值从搜索框传来的search
    const {search, updateSearch, pName} = props;
    console.log("DetailSearchBar.search", search)
    const [tags, setTags] = useState([]);
    const showCloseOutline = search && search.data &&
        (search.data.andList?.length > 0 || search.data.orList?.length > 0)
    useEffect(() => {
        if (search && search.data) {
            Promise.all([
                ...search.data.andList.map(async (searchObj) => {
                    console.log("DetailSearchContext.search", searchObj)
                    if (searchObj.name === "pid") {
                        return <Tag>{pName}</Tag>
                    } else if (searchObj.name === "state") {
                        const dictionary = await getDictionary("2");
                        const items = searchObj.value.split(',');
                        const itemPromises = items.map((item) => {
                            const dict = dictionary.get(item);
                            return dict ? <Tag key={dict.id} color={dict.jsonValue?.color}>{dict.itemName}</Tag> : null;
                        });
                        return Promise.all(itemPromises);
                    } else if (searchObj.name === "priority") {
                        const dictionary = await getDictionary("1");
                        const items = searchObj.value.split(',');
                        const itemPromises = items.map((item) => {
                            const dict = dictionary.get(item);
                            return dict ? <Tag key={dict.id} color={dict.jsonValue?.color}>{dict.itemName}</Tag> : null;
                        });
                        return Promise.all(itemPromises);
                    } else if (searchObj.name === "expectedEndTime") {
                        console.log("searchObj.value" + searchObj.value, dayjs(searchObj.value).format("YYYY-MM-DD"))
                        return <Tag>{dayjs(searchObj.value).format("YYYY-MM-DD")}</Tag>;
                    } else if (searchObj.name === "name") {
                        return <Tag>{searchObj.value}</Tag>;
                    }
                }),
                ...search.data.orList.map(async (searchObj) => {
                    console.log("DetailSearchContext.search", searchObj)
                    if (searchObj.name === "state" && searchObj.value === "10") {
                        const dictionary = await getDictionary("2");
                        const dict = dictionary.get(searchObj.value);
                        return dict ?
                            <Fragment><AddOutline/>
                                <Tag key={dict.id} color={dict.jsonValue?.color}>
                                    {dict.itemName}
                                </Tag>
                            </Fragment> : null;
                    }
                })]
            ).then((results) => {
                // Flatten the results and filter out null values
                const flattenedResults = results.flat().filter(Boolean);
                console.log("flattenedResults", flattenedResults);
                setTags(flattenedResults);
            });
        }
    }, []);

    const navigate = useNavigate();
    return (
        <div className="detailSearchBar">
            <div className={"onSearchItem " + (showCloseOutline ? "onSearchItemWidth" : "onSearchItemOnlyWidth")} onClick={() => {
                navigate("/detail/searchTask", {state: {"search": search}});
            }}>
                <SearchOutline/>
                {/*根据search处理搜素框展示内容*/}
                {tags}
            </div>
            {showCloseOutline && <div className="CloseOutline-CloseOutline" onClick={() => {
                updateSearch({
                    "pageSize": 20,
                    "pageNumber": 1,
                    "data": {
                        "andList": [],
                        "orList": []
                    }
                });
                setTags([]);
            }}>
                <CloseOutline style={{float: "right"}}/>
            </div>
            }


            {/*<SearchBar placeholder='请输入内容' onFocus={() => {*/}
            {/*    navigate("/detail/searchTask")*/}
            {/*}}*/}

            {/*>*/}
            {/*    */}
            {/*</SearchBar>*/}
        </div>
    )
}
export default DetailSearchBar;