feat:搜索栏

2025-01-08 19:28:29 +08:00 · 2025-01-08 19:28:29 +08:00 · 8f20efb98e
parent f39917ffbb
commit 8f20efb98e
6 changed files with 151 additions and 64 deletions
--- a/src/components/DetailForm/index.js
+++ b/src/components/DetailForm/index.js
@ -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>
--- a/src/components/DetailSearchBar/index.js
+++ b/src/components/DetailSearchBar/index.js
@ -1,9 +1,10 @@
 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
@ -13,10 +14,12 @@ const DetailSearchBar = (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>
@ -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"){
+                    } 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={() => {
+            <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([]);
            }}>
--- a/src/pages/DetailSearchContext/index.js
+++ b/src/pages/DetailSearchContext/index.js
@ -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
+                                    "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;
--- a/src/pages/Home/index.js
+++ b/src/pages/Home/index.js
@ -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": ">"
                }
            ],
@ -40,12 +40,24 @@ const Home = () => {
    };
    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>
    )
--- a/src/pages/ToDoList/index.js
+++ b/src/pages/ToDoList/index.js
@ -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();
--- a/src/utils/requestUtil.js
+++ b/src/utils/requestUtil.js
@ -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'}
 });
 // 添加响应拦截器