feat:日记心得

src/App.js

@@ -10,6 +10,7 @@ import ToDoTree from "./pages/ToDoTree";
 import {PersonalCenter} from "./pages/PersonalCenter";
 import {MyRootProvider} from "./components/MyRootContext";
 import ToDoTest from "./pages/ToDoTest";
+import {DetailLogTask} from "./pages/DetailLogTask";
 
 function App() {
     return (
@@ -33,6 +34,7 @@ function App() {
                             <Route path='searchTask' element={<DetailSearchContext/>}></Route>
                             <Route path='updateTask' element={<DetailForm/>}></Route>
                             <Route path='selectTask' element={<DetailForm/>}></Route>
+                            <Route path='logTask' element={<DetailLogTask/>}></Route>
                         </Route>
                     </Routes>
                 </div>

src/api/detailLogTaskApi.js

@@ -0,0 +1,10 @@
+// 根据pid获取未完成的任务
+import {requestUtil} from "../utils/requestUtil";
+
+export const addTaskLog = (taskLog) => {
+    return requestUtil.post('/todo-server/task/message/diary',taskLog);
+}
+
+export const listTaskLog = (request) => {
+    return requestUtil.get('/todo-server/V2/search/task_message_diary?search=' + encodeURI(request));
+}

src/components/DataPickItemPopup/constant.js

@@ -86,6 +86,5 @@ export const basicColumns =[
         { label: '57', value: '57' },
         { label: '58', value: '58' },
         { label: '59', value: '59' },
-
     ],
 ]

src/components/DataPickItemPopup/index.js

@@ -72,19 +72,18 @@ export default function DataPickItemPopup(props) {
                                              setVisiblePopup(false)
                                              if (dateShowValue && timeValue) {
                                                  setFieldsValue({
-                                                     [fieldName]: (dateShowValue + ' ' + timeValue.join(":"))
+                                                     [fieldName]: dayjs(dateShowValue + ' ' + timeValue.join(":")).toDate()
                                                  })
+                                             }
+                                             setActiveKey('date')
                                          } else {
                                              setActiveKey(key)
                                          }
-                                         }
                                      }}
-                                     activeKey={activeKey}
+                                     defaultActiveKey={activeKey}
                         >
                             <CapsuleTabs.Tab title={dateShowValue}
-                                             key='date' className="tab-content"
+                                             key='date' className="tab-content">
-                            >
-
                                 <Calendar
                                     selectionMode='single'
                                     defaultValue={dataPick}
@@ -105,10 +104,11 @@ export default function DataPickItemPopup(props) {
                                     columns={basicColumns}
                                     onClose={() => {
                                     }}
+                                    defaultValue={timeValue}
                                     value={timeValue}
                                     onChange={(val, extend) => {
+                                        console.log('onChange',timeValue, val, extend.items)
                                         setTimeValue(val)
-                                        console.log('onChange', val, extend.items)
                                     }}
                                 />
                             </CapsuleTabs.Tab>

src/components/DetailForm/index.js

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react'
+import React, {Fragment, useEffect} from 'react'
 import {
     Form,
     Input,
@@ -20,7 +20,7 @@ export default () => {
     const location = useLocation();
     let [params] = useSearchParams();
     // 设置标题栏
-    const {setTitle} = useOutletContext();
+    const {setTitle,setRightDesc} = useOutletContext();
     const [currentPath, setCurrentPath] = React.useState("");
     const [updateFiledDisabled, setUpdateFiledDisabled] = React.useState(true);
     const [pName, setPName] = React.useState();
@@ -35,20 +35,43 @@ export default () => {
             setTitle("添加任务");
             setCurrentPath("addTask");
             setUpdateFiledDisabled(false);
+            setRightDesc(<Fragment/>)
         } else if (location.pathname.endsWith("updateTask")) {
             setTitle("修改任务");
             setCurrentPath("updateTask");
             initData(params.get('id'));
             setUpdateFiledDisabled(false);
+            setRightDesc(<Fragment/>)
         } else if (location.pathname.endsWith("selectTask")) {
             setTitle("任务详情");
             setCurrentPath("selectTask");
             initData(params.get('id'));
             setUpdateFiledDisabled(true);
+            setRightDesc(<div>
+                <Button type="button" color="danger" onClick={() => {Dialog.show({
+                    content: `进入任务编辑`,
+                    closeOnAction: true,
+                    actions: [
+                        [
+                            {
+                                key: 'cancel',
+                                text: '取消',
+                            },
+                            {
+                                key: 'confirm',
+                                text: '确认',
+                                onClick: () => {
+                                    navigate(`/detail/updateTask?id=${params.get('id')}`)
+                                }
+                            }
+                        ],
+                    ],
+                })}}>编辑</Button>
+            </div>)
         } else {
             // todo 异常处理
         }
-    }, [])
+    }, [location])
 
     function editParentTask(id) {
         if (id === '0') {
@@ -83,7 +106,7 @@ export default () => {
     const onFinish = (values) => {
         if (currentPath === "selectTask") {
             // 进入添加日志页面
-            navigate("/detail/logTask")
+            navigate(`/detail/logTask?id=${params.get('id')}`)
             return;
         }
         console.log("提交：", values)

src/components/DetailNavBar/index.js

@@ -1,22 +1,30 @@
-import React from "react";
+import React, {useEffect} from "react";
-import {Outlet,useNavigate} from "react-router-dom";
+import {Outlet, useLocation, useNavigate} from "react-router-dom";
-import {NavBar} from "antd-mobile";
+import {Button, NavBar} from "antd-mobile";
 
 const DetailNavBar = () => {
 
     const navigate = useNavigate();
-
+    const location = useLocation();
     const handleClick = () => {
         console.log("click", navigate.length);
         navigate(-1)
     }
     const [title, setTitle] = React.useState("");
+    const [rightDesc, setRightDesc] = React.useState();
     const updateTitle = (value) => {
         setTitle(value)
     }
+    const updateRightDesc = (value)=>{
+        setRightDesc(value)
+    }
+    useEffect(()=>{
+
+    },[location])
     return (
         <div className='detail'>
-            <NavBar back='返回' onBack={handleClick}>{title}</NavBar><Outlet context={{"setTitle":updateTitle}}/>
+            <NavBar back='返回' onBack={handleClick} right={rightDesc}>{title}</NavBar>
+            <Outlet context={{"setTitle": updateTitle,"setRightDesc":updateRightDesc}}/>
         </div>
     )
 

src/pages/DetailLogTask/index.css

@@ -0,0 +1,29 @@
+.log-task-detail{
+    display: flex;
+    height: calc(100vh - 45px);
+    /* 确保子元素可以相对于此容器定位 */
+    position: relative;
+    flex-direction: column;
+}
+.log-send{
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    border: solid;
+    border-radius: 12px;
+}
+
+.log-send .send-button{
+    border-radius: 12px;
+    width: 80px;
+    height: 40px;
+}
+.detail-line{
+    border-radius: 6px;
+    border: solid;
+    width: auto;
+    padding: 6px;
+    border-color: var(--adm-color-primary);
+}

src/pages/DetailLogTask/index.js

@@ -0,0 +1,104 @@
+import {Button, Divider, TextArea} from "antd-mobile";
+import {Fragment, useEffect, useMemo, useRef, useState} from "react";
+import "./index.css"
+import {useOutletContext, useSearchParams} from "react-router-dom";
+import {addTaskLog, listTaskLog} from "../../api/detailLogTaskApi";
+import dayjs from "dayjs";
+
+export function DetailLogTask() {
+    // 设置标题栏
+    const {setTitle, setRightDesc} = useOutletContext();
+    useEffect(() => {
+        setTitle("日记/心得")
+        setRightDesc(<Fragment/>);
+    }, [])
+    let [params] = useSearchParams();
+    const textAreaRef = useRef(null);
+    const [taskLogMap, setTaskLogMap] = useState([]);
+    const [taskLogList, setTaskLogList] = useState([]);
+    const [sendValue, setSendValue] = useState([]);
+
+    const taskLogMapMemory = useMemo(() => {
+        return taskLogList.reduce((map, taskLog) => {
+            if (!map.has(dayjs(taskLog.createdDate).format("YYYY-MM-DD"))) {
+                map.set(dayjs(taskLog.createdDate).format("YYYY-MM-DD"), []);
+            }
+            map.get(dayjs(taskLog.createdDate).format("YYYY-MM-DD"))?.push(taskLog);
+            return map;
+        }, new Map());
+    }, [taskLogList])
+    const handleSend = () => {
+        addTaskLog({
+            "description": sendValue,
+            "taskId": params.get('id'),
+        }).then(res => {
+            // 加入当前集合中
+            setTaskLogList([...taskLogList,res]);
+        })
+        setSendValue('')
+        textAreaRef.current.focus();
+    };
+    useEffect(() => {
+        textAreaRef.current.focus();
+        // 获取之前的日志信息，根据日期分组排序，遍历map
+        listTaskLog(`{
+            "sortList":[{"direction":"DESC","property":"createdDate"}]
+        }`).then(res => {
+            console.log({res})
+            if (res.content.length > 0) {
+                setTaskLogList(res.content.reverse());
+                // setTaskLogMap(res.content.reduce((map, taskLog) => {
+                //     if (!map.has(dayjs(taskLog.createdDate).format("YYYY-MM-DD"))) {
+                //         map.set(dayjs(taskLog.createdDate).format("YYYY-MM-DD"), []);
+                //     }
+                //     map.get(dayjs(taskLog.createdDate).format("YYYY-MM-DD"))?.push(taskLog);
+                //     return map;
+                // }, new Map()));
+            }
+        })
+    }, [])
+    return <Fragment>
+        <div className="log-task-detail">
+            <div className="log-detail">
+                {
+                    Array.from(taskLogMapMemory.keys()).map(key => {
+                        return (<Fragment>
+                            {dayjs().isSame(dayjs(key), "date") ?
+                                <div key={key} style={{width: "100%", padding: "0 40px"}}>
+                                    <Divider>今日</Divider>
+                                </div> :
+                                <div key={key} style={{width: "100%", padding: "0 20px"}}>
+                                    <Divider>{key}</Divider>
+                                </div>}
+                            {taskLogMapMemory.get(key).map(taskLog => {
+                                return <div key={taskLog.id} style={{ display: 'flex', width: "80%", padding: "2px 20px"}}>
+                                    <span className="detail-line">{taskLog.description}</span>
+                                </div>
+                            })}</Fragment>)
+                    })
+                }
+            </div>
+
+            <div className="log-send">
+                <TextArea
+                    ref={(node) => {
+                        textAreaRef.current = node;
+                    }}
+                    value={sendValue}
+                    onChange={(val) => setSendValue(val)}
+                    placeholder='输入日记心得，长按日记心得有惊喜'
+                    rows={1}
+                    autoSize={{minRows: 1, maxRows: 5}}
+                    maxLength={100}
+                />
+                <Button
+                    className="send-button"
+                    onClick={handleSend}
+                >发送
+                </Button>
+            </div>
+        </div>
+
+    </Fragment>
+
+}

src/pages/ToDoList/index.js

@@ -145,6 +145,7 @@ const ToDoList = () => {
                                         })
                                         // 关闭当前激活的 SwipeAction
                                         closeActiveSwipeAction();
+                                        localRefresh()
                                     },
                                     // onClick: async () => {
                                     //     const result = await Dialog.confirm({
@@ -174,10 +175,10 @@ const ToDoList = () => {
                                                 updateTaskStateById('6', item.id).then(res => {
                                                     // 关闭当前激活的 SwipeAction
                                                     closeActiveSwipeAction();
+                                                    localRefresh()
                                                 })
                                             },
                                         })
-                                        localRefresh()
                                     },
                                 },
                                 {
@@ -202,10 +203,10 @@ const ToDoList = () => {
                                                 updateTaskStateById('7', item.id).then(res => {
                                                     // 关闭当前激活的 SwipeAction
                                                     closeActiveSwipeAction();
+                                                    localRefresh()
                                                 })
                                             },
                                         })
-                                        localRefresh()
                                     },
                                 },
                             ]}