huayu-web
/
assistant-todo-mobile
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:搜索栏

This commit is contained in:
1708-huayu 2025-01-08 19:28:29 +08:00
parent f39917ffbb
commit 8f20efb98e
6 changed files with 151 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/DetailForm/index.js
View File

@ -14,13 +14,14 @@ import "./index.css"
import {addTask} from "../../utils";
import {useNavigate, useOutletContext} from "react-router-dom";
export default () => {
// 设置标题栏
const {setTitle} = useOutletContext();
setTitle("添加任务")
// 路由
const navigate = useNavigate();
// 获取form引用
const [form] = Form.useForm();
const onFinish = (values) => {
// Dialog.alert({
// content: <pre>{JSON.stringify(values, null, 2)}</pre>,
// })
console.log("提交：",values)
if (values.pidArray===undefined){
values.pid='0'
@ -28,9 +29,29 @@ export default () => {
values.pid=values.pidArray[values.pidArray.length-1];
}
addTask(values).then(values=>{
Dialog.alert({
content: '添加任务成功' + values.data,
onConfirm:()=>{}
Dialog.show({
content: `添加任务${values.name}成功`,
closeOnAction:true,
actions: [
[
{
key: 'back',
text: '回到列表',
onClick:()=>{
navigate("/home/listTask")
}
},
{
key: 'create',
text: '创建下一条',
onClick:()=>{
// 清空值
form.resetFields();
form.setFieldValue("pidArray",values.pidArray);
}
},
],
],
})
})
}
@ -65,11 +86,10 @@ export default () => {
<Form.Item name='state' label='任务状态' required>
<Radio.Group>
<Space direction='vertical'>
<Radio value='8'><Tag color='danger'>未开始</Tag></Radio>
<Radio value='8'><Tag color='primary'>未开始</Tag></Radio>
<Radio value='9'><Tag color='warning'>进行中</Tag></Radio>
<Radio value='7'><Tag color='success'>已完成</Tag></Radio>
<Radio value='10'><Tag color='success'>未完成</Tag></Radio>
<Radio value='6'><Tag>已关闭</Tag></Radio>
<Radio value='10'><Tag color='danger'>已逾期</Tag></Radio>
</Space>
</Radio.Group>
</Form.Item>

49
src/components/DetailSearchBar/index.js
View File

@ -1,26 +1,29 @@
import {Tag,} from "antd-mobile";
import React, {useEffect, useState} from "react";
import React, {Fragment, useEffect, useState} from "react";
import {useLocation, useNavigate} from 'react-router-dom';
import {CloseOutline, SearchOutline} from "antd-mobile-icons";
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;
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) => {
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") {
} else if (searchObj.name === "state") {
const dictionary = await getDictionary("2");
const items = searchObj.value.split(',');
const itemPromises = items.map((item) => {
@ -28,7 +31,7 @@ const DetailSearchBar = (props) => {
return dict ? <Tag key={dict.id} color={dict.jsonValue?.color}>{dict.itemName}</Tag> : null;
});
return Promise.all(itemPromises);
}else if (searchObj.name === "priority"){
} else if (searchObj.name === "priority") {
const dictionary = await getDictionary("1");
const items = searchObj.value.split(',');
const itemPromises = items.map((item) => {
@ -36,10 +39,26 @@ const DetailSearchBar = (props) => {
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>;
} 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);
@ -52,17 +71,21 @@ const DetailSearchBar = (props) => {
const navigate = useNavigate();
return (
<div className="detailSearchBar">
<div className={"onSearchItem " + (search ? "onSearchItemWidth" : "onSearchItemOnlyWidth")} onClick={() => {
navigate("/detail/searchTask", {state: {"search":search}});
<div className={"onSearchItem " + (showCloseOutline ? "onSearchItemWidth" : "onSearchItemOnlyWidth")} onClick={() => {
navigate("/detail/searchTask", {state: {"search": search}});
}}>
<SearchOutline/>
{/*根据search处理搜素框展示内容*/}
{tags}
</div>
{search && <div className="CloseOutline-CloseOutline" onClick={() => {
{showCloseOutline && <div className="CloseOutline-CloseOutline" onClick={() => {
updateSearch({
"pageSize": 20,
"pageNumber": 1,
"data": {
"andList": [],
"orList": []
}
});
setTags([]);
}}>

84
src/pages/DetailSearchContext/index.js
View File

@ -1,7 +1,7 @@
import {Button, Checkbox, DatePicker, Form, Input, Space, Switch, Tag} from "antd-mobile";
import ParentTask from "../../components/ParentTask";
import React, {useEffect} from "react";
import dayjs from "dayjs";
import dayjs, {isDayjs} from "dayjs";
import {CloseCircleFill} from "antd-mobile-icons";
import {useLocation, useNavigate, useOutletContext} from "react-router-dom";
import {getDictionary} from "../../utils/dictUtil";
@ -33,7 +33,7 @@ const DetailSearchContext = () => {
if (!search) {
return
}
let searchMap = new Map(search.data.map(searchObj => [searchObj.name, searchObj]));
let searchMap = new Map(search.data.andList.map(searchObj => [searchObj.name, searchObj]));
if (searchMap.has("pid")) {
let task = await getTaskById(searchMap.get("pid"));
// form.setFieldValue(task.name);
@ -44,8 +44,17 @@ const DetailSearchContext = () => {
if (searchMap.has("priority")) {
form.setFieldValue("priority", searchMap.get("priority").value.split(','))
}
if (searchMap.has("todoDay")) {
form.setFieldValue("todoDay", searchMap.get("todoDay").value)
// 结束时间大于todo日，开始时间小于结束日
if (searchMap.has("expectedEndTime")) {
let value = searchMap.get("expectedEndTime").value;
form.setFieldValue("todoDay", dayjs(value).toDate())
}
if (searchMap.has("name")) {
form.setFieldValue("name", searchMap.get("name").value)
}
let orMap = new Map(search.data.orList.map(searchObj => [searchObj.name, searchObj]));
if (orMap.has("state") && orMap.get("state").value === "10") {
form.setFieldValue("allOverdueTasks", 'checked')
}
}
@ -54,9 +63,10 @@ const DetailSearchContext = () => {
form={form}
layout='horizontal'
onFinish={(values) => {
console.log(values)
console.log("Form", values)
let searchCondition = [];
const {pidArray, name, priority, state, todoDay} = values;
let orList = []
const {pidArray, name, priority, state, todoDay, allOverdueTasks} = values;
if (pidArray && pidArray.length !== 0) {
searchCondition.push({"name": "name", "value": pidArray[pidArray.length - 1], "operateType": "="})
}
@ -69,16 +79,33 @@ const DetailSearchContext = () => {
if (state && state.length !== 0) {
searchCondition.push({"name": "state", "value": state.join(","), "operateType": "IN"})
}
if (todoDay !== undefined) {
searchCondition.push({"name": "todoDay", "value": todoDay, "operateType": "IN"})
if (todoDay) {
searchCondition.push({
"name": "expectedStartTime",
"value": dayjs(todoDay).add(1, "d").set('h', 0).set('m', 0).set('s', 0).set('ms', 0).format(),
"operateType": "<"
})
searchCondition.push({
"name": "expectedEndTime",
"value": dayjs(todoDay).set('h', 0).set('m', 0).set('s', 0).set('ms', 0).format(),
"operateType": ">"
})
}
navigate("/home/listTask", {state: {search:{
if (allOverdueTasks) {
orList.push({"name": "state", "value": "10", "operateType": "="})
}
navigate("/home/listTask", {
state: {
search: {
"pageSize": 12,
"pageNumber": 1,
"data":{
"andList":searchCondition
"data": {
"andList": searchCondition,
orList
}
}
}
}
}}}
)
}}
footer={
@ -100,8 +127,9 @@ const DetailSearchContext = () => {
<Space direction='vertical'>
{
stateList.map(stateDict =>
<Checkbox value={stateDict.itemCode}>
<Tag color={stateDict.jsonValue?.color}>{stateDict.itemName}</Tag>
<Checkbox key={stateDict.itemCode} value={stateDict.itemCode}>
<Tag key={stateDict.itemCode}
color={stateDict.jsonValue?.color}>{stateDict.itemName}</Tag>
</Checkbox>
)
}
@ -113,8 +141,9 @@ const DetailSearchContext = () => {
<Space direction='vertical'>
{
priorityList.map(stateDict =>
<Checkbox value={stateDict.itemCode}>
<Tag color={stateDict.jsonValue?.color}>{stateDict.itemName}</Tag>
<Checkbox key={stateDict.itemCode} value={stateDict.itemCode}>
<Tag key={stateDict.itemCode}
color={stateDict.jsonValue?.color}>{stateDict.itemName}</Tag>
</Checkbox>
)
}
@ -122,13 +151,15 @@ const DetailSearchContext = () => {
</Checkbox.Group>
</Form.Item>
<Form.Item noStyle
shouldUpdate={(prevValues, curValues) =>
prevValues.todoDay !== curValues.todoDay
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='期望开始时间和期望结束时间包含当日时间段'
@ -163,14 +194,15 @@ const DetailSearchContext = () => {
</Form.Item>
)}
</Form.Item>
{/*后期嵌套or*/}
{/*<Form.Item*/}
{/* name='allOverdueTasks'*/}
{/* label='所有逾期任务'*/}
{/* childElementPosition='right'*/}
{/*>*/}
{/* <Switch/>*/}
{/*</Form.Item>*/}
<Form.Item
name='allOverdueTasks'
label='所有逾期任务'
childElementPosition='right'
initialValue={false}
valuePropName='checked' // 确保为 Switch 设置正确的 prop
>
<Switch/>
</Form.Item>
</Form>)
}
export default DetailSearchContext;

24
src/pages/Home/index.js
View File

@ -1,4 +1,4 @@
import React from 'react'
import React, {Fragment} from 'react'
import Bottom from './../Bottom/index'
import './index.css'
import {Outlet, useLocation} from 'react-router-dom'
@ -12,21 +12,21 @@ const Home = () => {
console.log("Home", location);
const searchUrl = location?.state?.search;
const [pName, setName] = React.useState("");
const [search, setSearch] = React.useState({
const [search, setSearch] = React.useState(searchUrl ? searchUrl : {
"pageSize": 20,
"pageNumber": 1,
"data": searchUrl ? searchUrl : {
"data": {
"andList": [
{"name": "state", "value": "8,9", "operateType": "IN"}
,
{
"name": "expectedStartTime",
"value": dayjs().add(1, "d").set('h', 0).set('m', 0).set('s', 0).set('ms', 0),
"value": dayjs().add(1, "d").set('h', 0).set('m', 0).set('s', 0).set('ms', 0).format(),
"operateType": "<"
},
{
"name": "expectedEndTime",
"value": dayjs().set('h', 0).set('m', 0).set('s', 0).set('ms', 0),
"value": dayjs().set('h', 0).set('m', 0).set('s', 0).set('ms', 0).format(),
"operateType": ">"
}
],
@ -36,16 +36,28 @@ const Home = () => {
}
})
const updateSearch = (values) => {
setSearch( values);
setSearch(values);
};
return (
<div className='body'>
{
location.pathname.endsWith("/calTask") ? (
<Fragment>
<div style={{marginBottom: "49px", width: "100%"}}>
<Outlet context={{"search": search}}/>
</div>
</Fragment>
) : (<Fragment>
<DetailSearchBar search={search}
updateSearch={updateSearch}
pName={pName}/>
<div style={{marginTop: "40px", marginBottom: "49px", width: "100%"}}>
<Outlet context={{"search": search}}/>
</div>
</Fragment>
)
}
<Bottom/>
</div>
)

2
src/pages/ToDoList/index.js
View File

@ -26,7 +26,7 @@ const reorder = (
const ToDoList = () => {
const [taskList, setTaskList] = useState([])
const [hasMore, setHasMore] = useState(false)
const [hasMore, setHasMore] = useState(true)
const [pageNumber, setPageNumber] = useState(1)
let loading = false;
const location = useLocation();

2
src/utils/requestUtil.js
View File

@ -2,7 +2,7 @@ import axios from "axios";
export const requestUtil = axios.create({
baseURL: 'http://www.huaruyu.com/',
timeout: 1000,
timeout: 10000,
headers: {'Authorization': 'Bearer eyJraWQiOiJjZDE5YjcxYy05ZDkwLTQyY2EtOGM5NC02YmMyNWY4YTdmNjgiLCJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpc3MiOiJzaGl4aWFvaHVhIiwic3ViIjoie1wiaWRcIjpcIjM2OTg0Nzc3MTAxODAzNTIwXCIsXCJuaWNrbmFtZVwiOlwi5biI5pmT5Y2OXCIsXCJ1c2VybmFtZVwiOlwic2hpeGlhb2h1YVwifSJ9.3Wu8VMAuk59WP_EIRGX6hVp1ShuvYiAwFmvE6CGe5zA_9AzvUVMyRGWWcEQQzuU3BlZ14cV8-9b_g9_tZepQE_mSlDn0yJ92jB3ATxFPsAdcC5m2o7UY6spUs3zrlJ7v99Gtd6YzzUZvk0JTPjJCIpSi5-_PtIcOmZEkjgLwa2fnOj8eh9U3B2YdQ6p8J8r1ZeNfSMlzFuIyVcLFR-ftDz3Gr6wbs3fPgh03GqevL-HKyTCku2Fb9oYWis4UYDYQFfEVYVLzocsS3DpKyeq8BGxRRqQkSXsodDaO2piib-60Zp5WOg6hQb0n9utH-fQDVU5hIhUYkAbKkGDmTrnyqg'}
});
// 添加响应拦截器