119 lines
4.8 KiB
JavaScript
119 lines
4.8 KiB
JavaScript
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();
|
|
}, [search]);
|
|
|
|
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; |