From 7ddeb50e3f7423833ca7c5d74952bf6301c44d6c Mon Sep 17 00:00:00 2001 From: 1708-huayu <57060237+1708-huayu@users.noreply.github.com> Date: Tue, 21 Jan 2025 19:24:55 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E6=97=A5=E8=AE=B0=E5=BF=83=E5=BE=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 2 + src/api/detailLogTaskApi.js | 10 ++ src/components/DataPickItemPopup/constant.js | 1 - src/components/DataPickItemPopup/index.js | 16 +-- src/components/DetailForm/index.js | 31 +++++- src/components/DetailNavBar/index.js | 26 +++-- src/pages/DetailLogTask/index.css | 29 ++++++ src/pages/DetailLogTask/index.js | 104 +++++++++++++++++++ src/pages/ToDoList/index.js | 5 +- 9 files changed, 200 insertions(+), 24 deletions(-) create mode 100644 src/api/detailLogTaskApi.js create mode 100644 src/pages/DetailLogTask/index.css create mode 100644 src/pages/DetailLogTask/index.js diff --git a/src/App.js b/src/App.js index e890095..c9be0cd 100644 --- a/src/App.js +++ b/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() { }> }> }> + }> diff --git a/src/api/detailLogTaskApi.js b/src/api/detailLogTaskApi.js new file mode 100644 index 0000000..5e500f1 --- /dev/null +++ b/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)); +} \ No newline at end of file diff --git a/src/components/DataPickItemPopup/constant.js b/src/components/DataPickItemPopup/constant.js index c7caf67..f4289ce 100644 --- a/src/components/DataPickItemPopup/constant.js +++ b/src/components/DataPickItemPopup/constant.js @@ -86,6 +86,5 @@ export const basicColumns =[ { label: '57', value: '57' }, { label: '58', value: '58' }, { label: '59', value: '59' }, - ], ] \ No newline at end of file diff --git a/src/components/DataPickItemPopup/index.js b/src/components/DataPickItemPopup/index.js index 44fda8a..915b62a 100644 --- a/src/components/DataPickItemPopup/index.js +++ b/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() }) - } else { - setActiveKey(key) } + setActiveKey('date') + } else { + setActiveKey(key) } }} - activeKey={activeKey} + defaultActiveKey={activeKey} > - + key='date' className="tab-content"> { }} + defaultValue={timeValue} value={timeValue} onChange={(val, extend) => { + console.log('onChange',timeValue, val, extend.items) setTimeValue(val) - console.log('onChange', val, extend.items) }} /> diff --git a/src/components/DetailForm/index.js b/src/components/DetailForm/index.js index 3503f9f..d480b7d 100644 --- a/src/components/DetailForm/index.js +++ b/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() } else if (location.pathname.endsWith("updateTask")) { setTitle("修改任务"); setCurrentPath("updateTask"); initData(params.get('id')); setUpdateFiledDisabled(false); + setRightDesc() } else if (location.pathname.endsWith("selectTask")) { setTitle("任务详情"); setCurrentPath("selectTask"); initData(params.get('id')); setUpdateFiledDisabled(true); + setRightDesc(
+ +
) } 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) diff --git a/src/components/DetailNavBar/index.js b/src/components/DetailNavBar/index.js index 0ed7c7b..1ae0e8a 100644 --- a/src/components/DetailNavBar/index.js +++ b/src/components/DetailNavBar/index.js @@ -1,22 +1,30 @@ -import React from "react"; -import {Outlet,useNavigate} from "react-router-dom"; -import {NavBar} from "antd-mobile"; +import React, {useEffect} from "react"; +import {Outlet, useLocation, useNavigate} from "react-router-dom"; +import {Button, NavBar} from "antd-mobile"; const DetailNavBar = () => { const navigate = useNavigate(); - - const handleClick =()=> { - console.log("click",navigate.length); + const location = useLocation(); + const handleClick = () => { + console.log("click", navigate.length); navigate(-1) } - const [title,setTitle] = React.useState(""); - const updateTitle=(value)=>{ + const [title, setTitle] = React.useState(""); + const [rightDesc, setRightDesc] = React.useState(); + const updateTitle = (value) => { setTitle(value) } + const updateRightDesc = (value)=>{ + setRightDesc(value) + } + useEffect(()=>{ + + },[location]) return (
- {title} + {title} +
) diff --git a/src/pages/DetailLogTask/index.css b/src/pages/DetailLogTask/index.css new file mode 100644 index 0000000..a710e3e --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/src/pages/DetailLogTask/index.js b/src/pages/DetailLogTask/index.js new file mode 100644 index 0000000..f2f077d --- /dev/null +++ b/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(); + }, []) + 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 +
+
+ { + Array.from(taskLogMapMemory.keys()).map(key => { + return ( + {dayjs().isSame(dayjs(key), "date") ? +
+ 今日 +
: +
+ {key} +
} + {taskLogMapMemory.get(key).map(taskLog => { + return
+ {taskLog.description} +
+ })}) + }) + } +
+ +
+