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(() => {
        initSearch();
    }, []);

    const initSearch = async () => {
        if (search && search.data) {
            const stateDictionary = await getDictionary("2");
            const priorityDictionary = await getDictionary("1");
            // 处理主要条件
            const tagList = [];
            console.log("search.data.orSearchModel",search.data.orSearchModel)
            search.data.orSearchModel?.andList?.forEach((searchObj) => {
                if (searchObj.name === "pid") {
                    tagList.push(<Tag key={pName}>{pName}</Tag>)
                } else if (searchObj.name === "state") {
                    const items = searchObj.value.split(',');
                    items.forEach((item) => {
                        const dict = stateDictionary.get(item);
                        if (dict) {
                            tagList.push(<Tag key={dict.id} color={dict.jsonValue?.color}>{dict.itemName}</Tag>)
                        }
                    });
                } else if (searchObj.name === "priority") {
                    const items = searchObj.value.split(',');
                    items.forEach((item) => {
                        const dict = priorityDictionary.get(item);
                        if (dict) {
                            tagList.push(<Tag key={dict.id} color={dict.jsonValue?.color}>{dict.itemName}</Tag>);
                        }
                    });
                } else if (searchObj.name === "name") {
                    tagList.push(<Tag key={searchObj.value}>{searchObj.value}</Tag>);
                }
            })
            // 处理日期
            search.data.orSearchModel?.andSearchModel?.andList?.forEach((searchObj) => {
                if (searchObj.name === "expectedEndTime") {
                    tagList.push(
                        <Tag
                            key={dayjs(searchObj.value).format("YYYY-MM-DD")}>
                            {dayjs(searchObj.value).format("YYYY-MM-DD")}
                        </Tag>
                    )
                }
            })
            // 处理逾期
            search.data.andList?.forEach((searchObj) => {
                console.log("DetailSearchContext.search", searchObj)
                if (searchObj.name === "state" && searchObj.value === "10") {
                    const dict = stateDictionary.get(searchObj.value);
                    if (dict && tagList.length > 0) {
                        tagList.push(<AddOutline/>)
                    }  if (dict) {
                        tagList.push(<Tag key={dict.id} color={dict.jsonValue?.color}>
                            {dict.itemName}
                        </Tag>);
                    }
                }
            })
            setTags(tagList);
        }
    }

    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;