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

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

const DetailSearchBar = (props) => {
    // 从搜索设置中传来的search
    // const location = useLocation();
    // const searchUpdate = location.state?.search;
    // 父子传值从搜索框传来的search
    const {search,updateSearch,pName} = props;
    console.log("DetailSearchBar.search", search.data)
    const [tags, setTags] = useState([]);
    useEffect(() => {
        if (search && search.data) {
            Promise.all(
                search.data.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 === "todoDay"){
                        return <Tag >{searchObj.value}</Tag>;
                    }
                })
            ).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 " + (search ? "onSearchItemWidth" : "onSearchItemOnlyWidth")} onClick={() => {
                navigate("/detail/searchTask", {state: {"search":search}});
            }}>
                <SearchOutline/>
                {/*根据search处理搜素框展示内容*/}
                {tags}
            </div>
            {search && <div className="CloseOutline-CloseOutline" onClick={() => {
                updateSearch(null);
                setTags([]);
            }}>
                <CloseOutline style={{float: "right"}}/>
            </div>
            }


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

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