feat:flex,左右对齐
This commit is contained in:
1708-huayu
parent
ee2685e78e
commit
854fe821d4
|
|
@ -1,3 +1,6 @@
|
|||
.adm-list-default{
|
||||
width:100%;
|
||||
}
|
||||
.adm-card-header-title{
|
||||
width:100%;
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
|
|
|
|||
Loading…
Reference in New Issue