From 69a1bd0de3f51c0fee9538e5c83244fd225c337f Mon Sep 17 00:00:00 2001 From: 1708-huayu <57060237+1708-huayu@users.noreply.github.com> Date: Sun, 26 Jan 2025 15:18:18 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E6=97=A5=E5=8E=86=E6=BB=91=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 33 ++++ package.json | 1 + src/api/detailLogTaskApi.js | 15 ++ src/components/DetailForm/index.js | 14 +- src/pages/DetailLogTask/index.css | 21 ++- src/pages/DetailLogTask/index.js | 233 +++++++++++++++++-------- src/pages/DetailSearchContext/index.js | 2 +- src/pages/ToDoList/index.js | 5 +- src/pages/ToDoTest/index.css | 59 +++++++ 9 files changed, 302 insertions(+), 81 deletions(-) create mode 100644 src/pages/ToDoTest/index.css diff --git a/package-lock.json b/package-lock.json index 6473283..d04b834 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "node-gyp": "^9.3.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-infinite-scroll-component": "^6.1.0", "react-router-dom": "^6.6.2", "react-scripts": "5.0.1", "react-virtualized": "^9.22.3", @@ -14160,6 +14161,17 @@ "resolved": "https://registry.npmmirror.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz", "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" }, + "node_modules/react-infinite-scroll-component": { + "version": "6.1.0", + "resolved": "https://registry.npmmirror.com/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz", + "integrity": "sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==", + "dependencies": { + "throttle-debounce": "^2.1.0" + }, + "peerDependencies": { + "react": ">=16.0.0" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmmirror.com/react-is/-/react-is-17.0.2.tgz", @@ -15757,6 +15769,14 @@ "resolved": "https://registry.npmmirror.com/throat/-/throat-6.0.2.tgz", "integrity": "sha512-WKexMoJj3vEuK0yFEapj8y64V0A6xcuPuK9Gt1d0R+dzCSJc0lHqQytAbSB4cDAK0dWh4T0E2ETkoLE2WZ41OQ==" }, + "node_modules/throttle-debounce": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz", + "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==", + "engines": { + "node": ">=8" + } + }, "node_modules/thunky": { "version": "1.1.0", "resolved": "https://registry.npmmirror.com/thunky/-/thunky-1.1.0.tgz", @@ -27773,6 +27793,14 @@ "resolved": "https://registry.npmmirror.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz", "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" }, + "react-infinite-scroll-component": { + "version": "6.1.0", + "resolved": "https://registry.npmmirror.com/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz", + "integrity": "sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==", + "requires": { + "throttle-debounce": "^2.1.0" + } + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmmirror.com/react-is/-/react-is-17.0.2.tgz", @@ -29019,6 +29047,11 @@ "resolved": "https://registry.npmmirror.com/throat/-/throat-6.0.2.tgz", "integrity": "sha512-WKexMoJj3vEuK0yFEapj8y64V0A6xcuPuK9Gt1d0R+dzCSJc0lHqQytAbSB4cDAK0dWh4T0E2ETkoLE2WZ41OQ==" }, + "throttle-debounce": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz", + "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==" + }, "thunky": { "version": "1.1.0", "resolved": "https://registry.npmmirror.com/thunky/-/thunky-1.1.0.tgz", diff --git a/package.json b/package.json index e8ac67c..5084a61 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "node-gyp": "^9.3.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-infinite-scroll-component": "^6.1.0", "react-router-dom": "^6.6.2", "react-scripts": "5.0.1", "react-virtualized": "^9.22.3", diff --git a/src/api/detailLogTaskApi.js b/src/api/detailLogTaskApi.js index 5e500f1..ea51b13 100644 --- a/src/api/detailLogTaskApi.js +++ b/src/api/detailLogTaskApi.js @@ -7,4 +7,19 @@ export const addTaskLog = (taskLog) => { export const listTaskLog = (request) => { return requestUtil.get('/todo-server/V2/search/task_message_diary?search=' + encodeURI(request)); +} + +export const updateTaskLogEnableById = (enableFlag, id) => { + let request = { + "updateColumnList": [{"name": "enableFlag", "value": enableFlag, "operateType": "="}], + "conditionColumnList": [{"name": "id", "value": id, "operateType": "="}] + } + return requestUtil.put('/todo-server/search/task_message_diary', request); +} +export const deleteTaskLogById = (id) => { + let request = { + "updateColumnList": [{"name": "deleteFlag", "value": "1", "operateType": "="}], + "conditionColumnList": [{"name": "id", "value": id, "operateType": "="}] + } + return requestUtil.put('/todo-server/search/task_message_diary', request); } \ No newline at end of file diff --git a/src/components/DetailForm/index.js b/src/components/DetailForm/index.js index 2265a71..a49b68b 100644 --- a/src/components/DetailForm/index.js +++ b/src/components/DetailForm/index.js @@ -23,7 +23,7 @@ const DetailForm = () => { const {setTitle, setRightDesc} = useOutletContext(); const [currentPath, setCurrentPath] = React.useState(""); const [updateFiledDisabled, setUpdateFiledDisabled] = React.useState(true); - const [pName, setPName] = React.useState(); + const [pName, setPName] = React.useState(""); const [pidArray, setPidArray] = React.useState([]); const [stateList, setStateList] = React.useState([]); const [priorityList, setPriorityList] = React.useState([]); @@ -47,6 +47,18 @@ const DetailForm = () => { setCurrentPath("addTask"); setUpdateFiledDisabled(false); setRightDesc() + // 日志创建任务会传来pidArray和pName + if (params.get('pidArray') && params.get('pName') && params.get('description')) { + setPName(params.get('pName')); + setPidArray(params.get('pidArray').split(',')) + form.setFieldValue("pidArray", params.get('pidArray').split(',')) + form.setFieldValue("description", params.get('description')) + if (params.get('description').length>5){ + form.setFieldValue("name", params.get('description').substring(0,5)) + }else { + form.setFieldValue("description", params.get('description')) + } + } } else if (location.pathname.endsWith("updateTask")) { setTitle("修改任务"); setCurrentPath("updateTask"); diff --git a/src/pages/DetailLogTask/index.css b/src/pages/DetailLogTask/index.css index a710e3e..5b011f5 100644 --- a/src/pages/DetailLogTask/index.css +++ b/src/pages/DetailLogTask/index.css @@ -1,11 +1,21 @@ -.log-task-detail{ - display: flex; +.log-task-detail { height: calc(100vh - 45px); /* 确保子元素可以相对于此容器定位 */ position: relative; + display: flex; flex-direction: column; } -.log-send{ + +.log-detail { + /*position: absolute;*/ + overflow-y: auto; + width: 100%; + display: flex; + max-height: calc(100vh - 140px); + flex-direction: column-reverse; +} + +.log-send { position: absolute; bottom: 0; width: 100%; @@ -15,12 +25,13 @@ border-radius: 12px; } -.log-send .send-button{ +.log-send .send-button { border-radius: 12px; width: 80px; height: 40px; } -.detail-line{ + +.detail-line { border-radius: 6px; border: solid; width: auto; diff --git a/src/pages/DetailLogTask/index.js b/src/pages/DetailLogTask/index.js index 5d2870e..5e7a552 100644 --- a/src/pages/DetailLogTask/index.js +++ b/src/pages/DetailLogTask/index.js @@ -1,10 +1,12 @@ import {ActionSheet, Button, Dialog, Divider, Tabs, TextArea, Toast} from "antd-mobile"; -import {Fragment, useEffect, useMemo, useRef, useState} from "react"; +import React, {Fragment, useEffect, useMemo, useRef, useState} from "react"; import "./index.css" -import {useOutletContext, useSearchParams} from "react-router-dom"; -import {addTaskLog, listTaskLog} from "../../api/detailLogTaskApi"; +import {useNavigate, useOutletContext, useSearchParams} from "react-router-dom"; +import {addTaskLog, deleteTaskLogById, listTaskLog, updateTaskLogEnableById} from "../../api/detailLogTaskApi"; import dayjs from "dayjs"; import {copyTextToClipboard} from "../../utils/copyToClipBoard"; +import {getPTask} from "../../utils"; +import InfiniteScroll from "react-infinite-scroll-component"; export function DetailLogTask() { // 设置标题栏 @@ -14,114 +16,150 @@ export function DetailLogTask() { setRightDesc(); }, []) let [params] = useSearchParams(); + // 路由 + const navigate = useNavigate(); // 发送展示日记 const [currentShow, setCurrentShow] = useState('need'); const textAreaRef = useRef(null); + const [taskLogList, setTaskLogList] = useState([]); const [sendValue, setSendValue] = useState(''); + const [hasMore, setHasMore] = useState(true); + const [pageTime, setPageTime] = useState(new Date()); + + // 记录上一次的滚动高度 + const previousScrollHeight = useRef(0); + // 点击操作面板 const [actionSheetVisible, setActionSheetVisible] = useState(false) const [currentTask, setCurrentTask] = useState({}); - const [actions,setActions] = useState([ - { text: '复制', key: 'copy' }, - { text: '有效', key: 'need' }, - { text: '创建任务', key: 'addTask'}, - { - text: '删除', - key: 'delete', - onClick: async () => { - const result = await Dialog.confirm({ content: '确定要删除吗？' }) - if (result) { - Toast.show('执行了删除操作') - } - }, - }, + const [actions, setActions] = useState([ + {text: '复制', key: 'copy'}, + {text: '有效', key: 'need'}, + {text: '创建任务', key: 'addTask'}, + {text: '删除', key: 'delete'}, ]); 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,currentShow]) + return taskLogList + .filter(taskLog => { + if (currentShow === 'all') { + return true + } else if (currentShow === 'need' && taskLog.enableFlag === '1') { + return true + } else return currentShow === 'noNeed' && taskLog.enableFlag === '0'; + }) + .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, currentShow]) const handleSend = () => { addTaskLog({ "description": sendValue, "taskId": params.get('id'), + "enableFlag": '1' }).then(res => { // 加入当前集合中 - setTaskLogList([...taskLogList,res]); + setTaskLogList([...taskLogList, res]); }) setSendValue('') textAreaRef.current.focus(); }; - useEffect(() => { - textAreaRef.current.focus(); + + async function fetchMessages() { // 获取之前的日志信息，根据日期分组排序，遍历map - listTaskLog(`{ - "sortList":[{"direction":"DESC","property":"createdDate"}], + const res = await listTaskLog(JSON.stringify({ + "pageSize": 20, + "sortList": [{"direction": "DESC", "property": "createdDate"}], "data": { - "andList":[{ - "name":"taskId", - "operateType":"=", - "value":"${params.get('id')}" + "andList": [{ + "name": "taskId", + "operateType": "=", + "value": params.get('id') + }, { + "name": "createdDate", + "operateType": "<", + "value": pageTime }] } - }`).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())); - } - }) + })) + console.log({res}) + if (res.content.length > 0) { + setPageTime(res.content[res.content.length - 1].createdDate) + setTaskLogList([...taskLogList, ...res.content]); + } else if (res.page.totalElements === 0) { + setHasMore(false); + } + } + + useEffect(() => { + setPageTime(new Date()) + textAreaRef.current.focus(); + fetchMessages() }, []) - function NoNeed(){ + + function NoNeed() { return 失效 } + return
-
- setCurrentShow(key)}> - - - /> - - { - Array.from(taskLogMapMemory.keys()).map(key => { - return ( - {dayjs().isSame(dayjs(key), "date") ? -
- 今日 -
: -
- {key} -
} - {taskLogMapMemory.get(key).map(taskLog => { - return
- { - actions[1]={ text: '失效', key: 'noneed' } + setCurrentShow(key)}> + + + /> + +
+ 加载中...} + style={{display: 'flex', flexDirection: 'column-reverse'}} + scrollableTarget="scrollableDiv" + endMessage={ + 没有更久远的信息了 + } + > + { + Array.from(taskLogMapMemory.keys()).map(key => { + return ( + {taskLogMapMemory.get(key).map(taskLog => { + return
+ { + if (taskLog.enableFlag === '0') { + actions[1] = {text: '有效', key: 'need'} + } else { + actions[1] = {text: '失效', key: 'noNeed'} + } // setActions([...actions]) setCurrentTask(taskLog) setActionSheetVisible(true) }}> {taskLog.description} -
- })}) - }) - } +
+ })} + {dayjs().isSame(dayjs(key), "date") ? +
+ 今日 +
: +
+ {key} +
} + ) + }) + } +
-