assistant-todo-mobile/src/pages/ToDoList/index.js

import {Card, Dialog, Image, InfiniteScroll, List, PullToRefresh, SwipeAction} from 'antd-mobile'
import React, {Fragment, useEffect, useRef, useState} from 'react'
import {
    DragDropContext,
    Draggable,
    Droppable,
    // DropResult,
} from 'react-beautiful-dnd'
import {deleteTaskById, getTaskList, updateTaskStateById} from "../../utils";
import "./index.css"
import {useLocation, useNavigate, useOutletContext} from "react-router-dom";
import dayjs from "dayjs";
import {DATE_TIME_FORMAT} from "../../utils/timeFormatUtil";
import {getDictionary} from "../../utils/dictUtil";

const reorder = (
    list,
    startIndex,
    endIndex
) => {
    const result = Array.from(list)
    const [removed] = result.splice(startIndex, 1)
    result.splice(endIndex, 0, removed)

    return result
}

const ToDoList = () => {
    const [taskList, setTaskList] = useState([])
    const [hasMore, setHasMore] = useState(true)
    const [pageNumber, setPageNumber] = useState(1)
    const [priorityMap, setPriorityMap] = useState([]);
    const [stateMap, setStateMap] = useState([])
    const navigate = useNavigate();
    let loading = true;
    const location = useLocation();
    const {search: outletSearch} = useOutletContext()
    const search = location.state ? location.state.search : outletSearch;
    console.log("ToDoList.search", location, outletSearch)

    async function loadMore() {
        if (loading) {
            return
        }
        loading = true;
        console.log("loadMore", loading)
        getTaskList({...search, "pageNumber": pageNumber + 1}).then(result => {
            setTaskList(val => [...val, ...result.content])
            setHasMore(result.page.number < result.page.totalPages)
        })
        setPageNumber(pageNumber + 1)
        loading = false;
    }

    useEffect(() => {
        getDictionary("2").then(res => {
            setStateMap(res)
        })
        getDictionary("1").then(res => {
            setPriorityMap(res)
        })
        getTaskList({...search, "pageNumber": pageNumber}).then(result => {
            setTaskList(result.content)
            setHasMore(result.page.number < result.page.totalPages)
            loading=false;
        })

    }, [])
    const onDragEnd = (result) => {
        if (!result.destination) return
        const newList = reorder(taskList, result.source.index, result.destination.index)
        setTaskList([...newList])
    }
    const ref = useRef(null)
    const refSwip = useRef(null)
    return (
        <Fragment>
            {/* 下拉刷新 */}
            <PullToRefresh
                onRefresh={() => {
                    console.log("refresh")
                    getTaskList({...search, "pageNumber": 1}).then(result => {
                        setTaskList(result.content)
                        setPageNumber(1)
                        setHasMore(result.page.number < result.page.totalPages)
                    })
                }}
            >
                <List>
                    {taskList.map((item, index) => (
                        <SwipeAction
                            ref={refSwip}
                            closeOnAction={false}
                            closeOnTouchOutside={false}
                            rightActions={[
                                {
                                    key: 'delete',
                                    text: '删除',
                                    color: 'danger',
                                    onClick: async () => {
                                        Dialog.confirm({
                                            content: '确定要删除吗？',
                                            onConfirm: () => {
                                                deleteTaskById(item.id).then(() => {
                                                    refSwip.current?.close()
                                                })
                                            },
                                            onClose: () => {
                                                console.log(refSwip)
                                                refSwip.current?.close()
                                            }
                                        })
                                    },
                                },
                                {
                                    key: 'close',
                                    text: '关闭',
                                    color: 'warning',
                                    onClick: async () => {
                                        await Dialog.confirm({
                                            content: '确定要关闭吗？',
                                            onConfirm: () => {
                                                updateTaskStateById('6', item.id)
                                            },
                                        })
                                        refSwip.current?.close()
                                    },
                                },
                                {
                                    key: 'update',
                                    text: '修改',
                                    color: 'primary',
                                    onClick: () => {
                                        refSwip.current?.close()
                                        // 跳转
                                        navigate(`/detail/updateTask?id=${item.id}`)
                                    },
                                },
                                {
                                    key: 'complete',
                                    text: '完成',
                                    color: 'success',
                                    onClick: async () => {
                                        await Dialog.confirm({
                                            content: '确定要完成吗？',
                                            onConfirm: () => {
                                                updateTaskStateById('7', item.id)
                                            },
                                        })
                                        refSwip.current?.close()
                                    },
                                },
                            ]}
                        >
                            <List.Item
                                key={item.id}
                                // prefix={
                                //     <Image
                                //         src={item.avatar}
                                //         style={{ borderRadius: 20 }}
                                //         fit='cover'
                                //         width={40}
                                //         height={40}
                                //     />
                                // }
                                // title={<span style={{color: "red"}}>{item.name}</span>}
                                // children={item.description}
                                // description={item.state}
                                onClick={
                                    () => {
                                        console.log("click/detail")
                                        navigate(`/detail/selectTask?id=${item.id}`)
                                    }
                                }
                                title={
                                    <div style={{
                                        display: "flex",
                                        justifyContent: "space-between",
                                        alignItems: "center",
                                        flexDirection: "row",
                                        flexWrap: "nowrap",
                                        fontSize: "large",
                                        color: "black"
                                    }}>
                                        {(priorityMap.get(item.priority)?.jsonValue?.color) ?
                                            (<span
                                                style={{color: priorityMap.get(item.priority)?.jsonValue?.color}}>{item.name}</span>) : (
                                                <span>{item.name}</span>)}

                                        {item.expectedEndTime && (stateMap.get(item.state)?.jsonValue?.color ?
                                            (<span style={{color: stateMap.get(item.state)?.jsonValue?.color}}>
                                                 结束时间:{dayjs(item.expectedEndTime).format(DATE_TIME_FORMAT)}</span>) :
                                            (<span>结束时间:{dayjs(item.expectedEndTime).format(DATE_TIME_FORMAT)}</span>))
                                        }
                                    </div>}
                                description={item.description}
                            >
                                {/*<Card style={{width: "100%"}} title={*/}
                                {/*    <div style={{*/}
                                {/*        display: "flex",*/}
                                {/*        justifyContent: "space-between",*/}
                                {/*        alignItems: "center",*/}
                                {/*        flexDirection: "row",*/}
                                {/*        flexWrap: "nowrap"*/}
                                {/*    }}>*/}
                                {/*        <span>{item.name}</span>*/}
                                {/*        {item.expectedEndTime && <span>*/}
                                {/*        结束时间:{item.expectedEndTime}</span>}*/}

                                {/*    </div>}*/}
                                {/*>*/}
                                {/*    {item.description}*/}
                                {/*</Card>*/}
                            </List.Item>
                        </SwipeAction>
                    ))}
                </List>
                {/*无限滚动*/}
                <InfiniteScroll loadMore={loadMore} hasMore={hasMore}/>
            </PullToRefresh>
        </Fragment>
    )
}
export default ToDoList;