From 854fe821d404f4db8222f7e1fcddc9eb96320b20 Mon Sep 17 00:00:00 2001
From: 1708-huayu <57060237+1708-huayu@users.noreply.github.com>
Date: Sun, 29 Dec 2024 21:14:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:flex,=E5=B7=A6=E5=8F=B3=E5=AF=B9=E9=BD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ToDoList/index.css |   3 +
 src/pages/ToDoList/index.js  | 247 ++++++++++++++++++++---------------
 2 files changed, 142 insertions(+), 108 deletions(-)

diff --git a/src/pages/ToDoList/index.css b/src/pages/ToDoList/index.css
index 3bf8b82..edc6222 100644
--- a/src/pages/ToDoList/index.css
+++ b/src/pages/ToDoList/index.css
@@ -1,3 +1,6 @@
 .adm-list-default{
     width:100%;
+}
+.adm-card-header-title{
+    width:100%;
 }
\ No newline at end of file
diff --git a/src/pages/ToDoList/index.js b/src/pages/ToDoList/index.js
index 5d51ab7..cd0b2e7 100644
--- a/src/pages/ToDoList/index.js
+++ b/src/pages/ToDoList/index.js
@@ -1,4 +1,4 @@
-import {Dialog, Image, InfiniteScroll, List, PullToRefresh, SwipeAction} from 'antd-mobile'
+import {Card, Dialog, Image, InfiniteScroll, List, PullToRefresh, SwipeAction} from 'antd-mobile'
 import React, {Fragment, useEffect, useRef, useState} from 'react'
 import {
     DragDropContext,
@@ -25,19 +25,18 @@ const ToDoList = () => {
     const [taskList, setTaskList] = useState([])
     const [hasMore, setHasMore] = useState(true)
     const [pageNumber, setPageNumber] = useState(1)
+
     async function loadMore() {
-        getTaskList(pageNumber).then(result => {
-            console.log("getTaskList()", result)
+        getTaskList(pageNumber+1).then(result => {
             setTaskList(val => [...val, ...result.data.data.content])
             setHasMore(result.data.data.content.length > 0)
-            setPageNumber(pageNumber+1)
         })
+        setPageNumber(pageNumber + 1)
     }
+
     useEffect(() => {
         getTaskList(pageNumber).then(result => {
-            console.log("getTaskList()", result)
             setTaskList(result.data.data.content)
-            setPageNumber(pageNumber+1)
         })
     }, [])
     const onDragEnd = (result) => {
@@ -53,113 +52,145 @@ const ToDoList = () => {
                     getTaskList(1).then(result => {
                         console.log("getTaskList()", result)
                         setTaskList(result.data.data.content)
-                        setPageNumber(pageNumber+1)
+                        setPageNumber(1)
                         setHasMore(true)
                     })
                 }}
             >
-            <List
-                // header='任务清单'
-            >
-                <DragDropContext onDragEnd={onDragEnd}>
-                    <Droppable droppableId='droppable'>
-                        {droppableProvided => (
-                            <div ref={droppableProvided.innerRef}>
-                                {taskList.map((item, index) => (
-                                    <Draggable key={item.id} draggableId={item.id} index={index}>
-                                        {(provided, snapshot) => (
-                                            <div
-                                                ref={provided.innerRef}
-                                                {...provided.draggableProps}
-                                                {...provided.dragHandleProps}
-                                                style={{
-                                                    ...provided.draggableProps.style,
-                                                    opacity: snapshot.isDragging ? 0.8 : 1,
-                                                }}
-                                            >
-                                                <SwipeAction
-                                                    ref={ref}
-                                                    closeOnAction={false}
-                                                    closeOnTouchOutside={false}
-                                                    rightActions={[
-                                                        {
-                                                            key: 'delete',
-                                                            text: '删除',
-                                                            color: 'danger',
-                                                            onClick: async () => {
-                                                                await Dialog.confirm({
-                                                                    content: '确定要关闭吗？',
-                                                                })
-                                                                ref.current?.close()
-                                                            },
-                                                        },
-                                                        {
-                                                            key: 'close',
-                                                            text: '关闭',
-                                                            color: 'warning',
-                                                            onClick: async () => {
-                                                                await Dialog.confirm({
-                                                                    content: '确定要关闭吗？',
-                                                                })
-                                                                ref.current?.close()
-                                                            },
-                                                        },
-                                                        {
-                                                            key: 'update',
-                                                            text: '修改',
-                                                            color: 'primary',
-                                                            onClick: async () => {
-                                                                await Dialog.confirm({
-                                                                    content: '确定要修改吗？',
-                                                                })
-                                                                ref.current?.close()
-                                                            },
-                                                        },
-                                                        {
-                                                            key: 'complete',
-                                                            text: '完成',
-                                                            color: 'success',
-                                                            onClick: async () => {
-                                                                await Dialog.confirm({
-                                                                    content: '确定要完成吗？',
-                                                                })
-                                                                ref.current?.close()
-                                                            },
-                                                        },
-                                                    ]}
+                <List
+                    // header='任务清单'
+                >
+                    <DragDropContext onDragEnd={onDragEnd}>
+                        <Droppable droppableId='droppable'>
+                            {droppableProvided => (
+                                <div ref={droppableProvided.innerRef}>
+                                    {taskList.map((item, index) => (
+                                        <Draggable key={item.id} draggableId={item.id} index={index}>
+                                            {(provided, snapshot) => (
+                                                <div
+                                                    ref={provided.innerRef}
+                                                    {...provided.draggableProps}
+                                                    {...provided.dragHandleProps}
+                                                    style={{
+                                                        ...provided.draggableProps.style,
+                                                        opacity: snapshot.isDragging ? 0.8 : 1,
+                                                    }}
                                                 >
-                                                    <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("dianji")
-                                                            }
-                                                        }
-                                                    />
-                                                </SwipeAction>
-                                            </div>
-                                        )}
-                                    </Draggable>
-                                ))}
-                                {droppableProvided.placeholder}
-                            </div>
-                        )}
-                    </Droppable>
-                </DragDropContext>
-            </List>
-            <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
+                                                    <SwipeAction
+                                                        ref={ref}
+                                                        closeOnAction={false}
+                                                        closeOnTouchOutside={false}
+                                                        rightActions={[
+                                                            {
+                                                                key: 'delete',
+                                                                text: '删除',
+                                                                color: 'danger',
+                                                                onClick: async () => {
+                                                                    await Dialog.confirm({
+                                                                        content: '确定要关闭吗？',
+                                                                    })
+                                                                    ref.current?.close()
+                                                                },
+                                                            },
+                                                            {
+                                                                key: 'close',
+                                                                text: '关闭',
+                                                                color: 'warning',
+                                                                onClick: async () => {
+                                                                    await Dialog.confirm({
+                                                                        content: '确定要关闭吗？',
+                                                                    })
+                                                                    ref.current?.close()
+                                                                },
+                                                            },
+                                                            {
+                                                                key: 'update',
+                                                                text: '修改',
+                                                                color: 'primary',
+                                                                onClick: async () => {
+                                                                    await Dialog.confirm({
+                                                                        content: '确定要修改吗？',
+                                                                    })
+                                                                    ref.current?.close()
+                                                                },
+                                                            },
+                                                            {
+                                                                key: 'complete',
+                                                                text: '完成',
+                                                                color: 'success',
+                                                                onClick: async () => {
+                                                                    await Dialog.confirm({
+                                                                        content: '确定要完成吗？',
+                                                                    })
+                                                                    ref.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("dianji")
+                                                            //     }
+                                                            // }
+                                                            title={
+                                                                <div style={{
+                                                                    display: "flex",
+                                                                    justifyContent: "space-between",
+                                                                    alignItems: "center",
+                                                                    flexDirection: "row",
+                                                                    flexWrap: "nowrap",
+                                                                    fontSize: "large",
+                                                                    color: "black"
+                                                                }}>
+                                                                    <span>{item.name}</span>
+                                                                    {item.expectedEndTime && <span>
+                                                                    结束时间:{item.expectedEndTime}</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>
+                                                </div>
+                                            )}
+                                        </Draggable>
+                                    ))}
+                                    {droppableProvided.placeholder}
+                                </div>
+                            )}
+                        </Droppable>
+                    </DragDropContext>
+                </List>
+                <InfiniteScroll loadMore={loadMore} hasMore={hasMore}/>
             </PullToRefresh>
         </Fragment>
     )