feat:日志修改
This commit is contained in:
1708-huayu
parent
967da82d9d
commit
db19c5e12c
|
|
@ -1,8 +1,3 @@
|
|||
.reverseScrollList {
|
||||
display: flex;
|
||||
flex-direction: column; /* 垂直反转 */
|
||||
/*overflow-y: auto;*/
|
||||
}
|
||||
/* 容器样式 */
|
||||
.container {
|
||||
display: flex;
|
||||
|
|
@ -55,7 +50,7 @@
|
|||
display: inline-block;
|
||||
padding: 4rpx 20rpx;
|
||||
border: solid;
|
||||
border-radius: 20rpx;
|
||||
border-radius: 0.5rem;
|
||||
border-color: #1677FF;
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, {useEffect, useState} from 'react';
|
||||
import {Avatar, Input, List, message} from 'antd';
|
||||
import React, {useEffect, useRef, useState} from 'react';
|
||||
import {Avatar, Dropdown, Input, List, MenuProps, message} from 'antd';
|
||||
import VirtualList from 'rc-virtual-list';
|
||||
import {Button, Drawer} from 'antd';
|
||||
import {ListDiary, SelectDiary} from "@/components/type/Diary";
|
||||
|
|
@ -7,6 +7,8 @@ import TextArea from "antd/es/input/TextArea";
|
|||
import style from "@/components/DiaryOption.module.css"
|
||||
import dayjs from "dayjs";
|
||||
import {addTaskLogAPI} from "@/components/service/Diary";
|
||||
import {ListBodyRef} from "antd/es/transfer/ListBody";
|
||||
import {ListRef} from "rc-virtual-list/lib/List";
|
||||
|
||||
const CONTAINER_HEIGHT = 400;
|
||||
const PAGE_SIZE = 20;
|
||||
|
|
@ -29,12 +31,19 @@ const DiaryOption = (props: SelectDiary) => {
|
|||
const [diaryList, setDiaryList] = useState<ListDiary[]>([]);
|
||||
const [diaryReduceList, setDiaryReduceList] = useState<ListDiary[]>([])
|
||||
const [page, setPage] = useState(1);
|
||||
const noMore = {id: '0', keyId: 'o0',createdDate:new Date(), description: '没有更多了',taskId:props.taskId, enableFlag: 'day-separate'};
|
||||
const noMore = {
|
||||
id: '0',
|
||||
keyId: 'o0',
|
||||
createdDate: new Date(),
|
||||
description: '没有更多了',
|
||||
taskId: props.taskId,
|
||||
enableFlag: 'day-separate'
|
||||
};
|
||||
const [noMoreFlag, setNoMoreFlag] = useState(false)
|
||||
const [sendValue,setSendValue] = useState<string>();
|
||||
const [sendValueFlag,setSendValueFlag] =useState(false);
|
||||
const handleSend = ()=>{
|
||||
if(sendValueFlag){
|
||||
const [sendValue, setSendValue] = useState<string>();
|
||||
const [sendValueFlag, setSendValueFlag] = useState(false);
|
||||
const handleSend = () => {
|
||||
if (sendValueFlag) {
|
||||
return
|
||||
}
|
||||
setSendValueFlag(true);
|
||||
|
|
@ -72,21 +81,31 @@ const DiaryOption = (props: SelectDiary) => {
|
|||
setDiaryList(diaryList.concat(results));
|
||||
setPage(page + 1);
|
||||
showMessage && message.success(`${results.length} more items loaded!`);
|
||||
if (!showMessage) {
|
||||
if (listRef && listRef.current && typeof listRef.current.scrollTo == 'function') {
|
||||
listRef.current.scrollTo({top: 9999999 });
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
appendData(false);
|
||||
// 视口高度
|
||||
window.innerHeight
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
console.log("处理日志集合",diaryList)
|
||||
console.log("处理日志集合", diaryList)
|
||||
const returnResult: ListDiary[] = []
|
||||
diaryList.filter(taskLog => {
|
||||
if (currentIndex === 0) { return true }
|
||||
else if (currentIndex === 1 && taskLog.enableFlag === "1") { return true }
|
||||
else if (currentIndex === 2 && taskLog.enableFlag === "0") { return true }
|
||||
else return false;
|
||||
if (currentIndex === 0) {
|
||||
return true
|
||||
} else if (currentIndex === 1 && taskLog.enableFlag === "1") {
|
||||
return true
|
||||
} else if (currentIndex === 2 && taskLog.enableFlag === "0") {
|
||||
return true
|
||||
} else return false;
|
||||
}).reduce((map, taskLog) => {
|
||||
if (!map.has(dayjs(taskLog.createdDate).format("YYYY-MM-DD"))) {
|
||||
map.set(dayjs(taskLog.createdDate).format("YYYY-MM-DD"), []);
|
||||
|
|
@ -103,9 +122,10 @@ const DiaryOption = (props: SelectDiary) => {
|
|||
createdDate: new Date()
|
||||
})
|
||||
})
|
||||
setDiaryReduceList(returnResult);
|
||||
}, [diaryList]);
|
||||
setDiaryReduceList(returnResult.reverse());
|
||||
}, [diaryList, currentIndex]);
|
||||
|
||||
const listRef = useRef<ListRef>(null);
|
||||
const onScroll = (e: React.UIEvent<HTMLElement, UIEvent>) => {
|
||||
// Refer to: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#problems_and_solutions
|
||||
if (
|
||||
|
|
@ -120,6 +140,37 @@ const DiaryOption = (props: SelectDiary) => {
|
|||
|
||||
// 点击操作 start
|
||||
const [clickTaskDiary, setClickTaskDiary] = useState<ListDiary>()
|
||||
const onClickTAskDiary = (item: ListDiary, operate: string) => {
|
||||
if (clickTaskDiary == item && operate == 'L') {
|
||||
setClickTaskDiary(undefined)
|
||||
} else {
|
||||
setClickTaskDiary(item)
|
||||
}
|
||||
}
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
label: '复制',
|
||||
key: '1',
|
||||
onClick: () => {
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '失效',
|
||||
key: '2',
|
||||
},
|
||||
{
|
||||
label: '创建计划',
|
||||
key: '3',
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
key: '4',
|
||||
},
|
||||
{
|
||||
label: '取消',
|
||||
key: '5',
|
||||
},
|
||||
];
|
||||
// 点击操作 end
|
||||
|
||||
return (
|
||||
|
|
@ -128,7 +179,10 @@ const DiaryOption = (props: SelectDiary) => {
|
|||
日志心得
|
||||
</Button>
|
||||
<Drawer
|
||||
style={{boxSizing:"border-box"}}
|
||||
style={{boxSizing: "border-box"}}
|
||||
styles={{
|
||||
body: {padding: "0 24px"}
|
||||
}}
|
||||
mask={false}
|
||||
title={props.taskName}
|
||||
closable={{'aria-label': 'Close Button'}}
|
||||
|
|
@ -187,7 +241,8 @@ const DiaryOption = (props: SelectDiary) => {
|
|||
</div>
|
||||
}
|
||||
>
|
||||
<div className="displayFlexRow">
|
||||
<div className="displayFlexRow"
|
||||
style={{position: "sticky", top: "0", background: "white", zIndex: "100"}}>
|
||||
<Button style={{flexGrow: 1}} onClick={() => setCurrentIndex(0)}
|
||||
type={currentIndex == 0 ? "primary" : "default"}>全部</Button>
|
||||
<Button style={{flexGrow: 1}} onClick={() => setCurrentIndex(1)}
|
||||
|
|
@ -195,15 +250,15 @@ const DiaryOption = (props: SelectDiary) => {
|
|||
<Button style={{flexGrow: 1}} onClick={() => setCurrentIndex(2)}
|
||||
type={currentIndex == 2 ? "primary" : "default"}>失效</Button>
|
||||
</div>
|
||||
<div>
|
||||
<List>
|
||||
<List style={{height: "auto"}}>
|
||||
<VirtualList
|
||||
data={diaryReduceList}
|
||||
height={CONTAINER_HEIGHT}
|
||||
itemHeight={47}
|
||||
// height={CONTAINER_HEIGHT}
|
||||
// itemHeight={47}
|
||||
itemKey="email"
|
||||
onScroll={onScroll}
|
||||
className={style.reverseScrollList}
|
||||
style={{height: "auto"}}
|
||||
ref={listRef}
|
||||
>
|
||||
{item => (
|
||||
item.enableFlag === 'day-separate' ?
|
||||
|
|
@ -213,19 +268,24 @@ const DiaryOption = (props: SelectDiary) => {
|
|||
</div>
|
||||
</div>
|
||||
: <div className={style.logTaskContent} key={item.id}>
|
||||
<Dropdown menu={{items}} trigger={['contextMenu']}>
|
||||
<div
|
||||
className={`${style.detailLine} ${item.id === clickTaskDiary?.id ? style.detailLineClick : ''}`}
|
||||
onClick={() => setClickTaskDiary(item)}>
|
||||
onClick={() => onClickTAskDiary(item, "L")}
|
||||
onContextMenu={() => onClickTAskDiary(item, "R")}>
|
||||
<text
|
||||
style={{textDecoration: item.enableFlag === '0' && currentIndex === 0 ? 'line-through' : ''}}>
|
||||
style={{
|
||||
textDecoration: item.enableFlag === '0' && currentIndex === 0 ? 'line-through' : '',
|
||||
whiteSpace: 'pre-line'
|
||||
}}>
|
||||
{item.description}
|
||||
</text>
|
||||
</div>
|
||||
</Dropdown>
|
||||
</div>
|
||||
)}
|
||||
</VirtualList>
|
||||
</List>
|
||||
</div>
|
||||
</Drawer>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue