feat:flex,左右对齐
This commit is contained in:
1708-huayu
parent
ee2685e78e
commit
854fe821d4
|
|
@ -1,3 +1,6 @@
|
||||||
.adm-list-default{
|
.adm-list-default{
|
||||||
width:100%;
|
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 React, {Fragment, useEffect, useRef, useState} from 'react'
|
||||||
import {
|
import {
|
||||||
DragDropContext,
|
DragDropContext,
|
||||||
|
|
@ -25,19 +25,18 @@ const ToDoList = () => {
|
||||||
const [taskList, setTaskList] = useState([])
|
const [taskList, setTaskList] = useState([])
|
||||||
const [hasMore, setHasMore] = useState(true)
|
const [hasMore, setHasMore] = useState(true)
|
||||||
const [pageNumber, setPageNumber] = useState(1)
|
const [pageNumber, setPageNumber] = useState(1)
|
||||||
|
|
||||||
async function loadMore() {
|
async function loadMore() {
|
||||||
getTaskList(pageNumber).then(result => {
|
getTaskList(pageNumber+1).then(result => {
|
||||||
console.log("getTaskList()", result)
|
|
||||||
setTaskList(val => [...val, ...result.data.data.content])
|
setTaskList(val => [...val, ...result.data.data.content])
|
||||||
setHasMore(result.data.data.content.length > 0)
|
setHasMore(result.data.data.content.length > 0)
|
||||||
setPageNumber(pageNumber+1)
|
|
||||||
})
|
})
|
||||||
|
setPageNumber(pageNumber + 1)
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getTaskList(pageNumber).then(result => {
|
getTaskList(pageNumber).then(result => {
|
||||||
console.log("getTaskList()", result)
|
|
||||||
setTaskList(result.data.data.content)
|
setTaskList(result.data.data.content)
|
||||||
setPageNumber(pageNumber+1)
|
|
||||||
})
|
})
|
||||||
}, [])
|
}, [])
|
||||||
const onDragEnd = (result) => {
|
const onDragEnd = (result) => {
|
||||||
|
|
@ -53,113 +52,145 @@ const ToDoList = () => {
|
||||||
getTaskList(1).then(result => {
|
getTaskList(1).then(result => {
|
||||||
console.log("getTaskList()", result)
|
console.log("getTaskList()", result)
|
||||||
setTaskList(result.data.data.content)
|
setTaskList(result.data.data.content)
|
||||||
setPageNumber(pageNumber+1)
|
setPageNumber(1)
|
||||||
setHasMore(true)
|
setHasMore(true)
|
||||||
})
|
})
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<List
|
<List
|
||||||
// header='任务清单'
|
// header='任务清单'
|
||||||
>
|
>
|
||||||
<DragDropContext onDragEnd={onDragEnd}>
|
<DragDropContext onDragEnd={onDragEnd}>
|
||||||
<Droppable droppableId='droppable'>
|
<Droppable droppableId='droppable'>
|
||||||
{droppableProvided => (
|
{droppableProvided => (
|
||||||
<div ref={droppableProvided.innerRef}>
|
<div ref={droppableProvided.innerRef}>
|
||||||
{taskList.map((item, index) => (
|
{taskList.map((item, index) => (
|
||||||
<Draggable key={item.id} draggableId={item.id} index={index}>
|
<Draggable key={item.id} draggableId={item.id} index={index}>
|
||||||
{(provided, snapshot) => (
|
{(provided, snapshot) => (
|
||||||
<div
|
<div
|
||||||
ref={provided.innerRef}
|
ref={provided.innerRef}
|
||||||
{...provided.draggableProps}
|
{...provided.draggableProps}
|
||||||
{...provided.dragHandleProps}
|
{...provided.dragHandleProps}
|
||||||
style={{
|
style={{
|
||||||
...provided.draggableProps.style,
|
...provided.draggableProps.style,
|
||||||
opacity: snapshot.isDragging ? 0.8 : 1,
|
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.Item
|
<SwipeAction
|
||||||
key={item.id}
|
ref={ref}
|
||||||
// prefix={
|
closeOnAction={false}
|
||||||
// <Image
|
closeOnTouchOutside={false}
|
||||||
// src={item.avatar}
|
rightActions={[
|
||||||
// style={{ borderRadius: 20 }}
|
{
|
||||||
// fit='cover'
|
key: 'delete',
|
||||||
// width={40}
|
text: '删除',
|
||||||
// height={40}
|
color: 'danger',
|
||||||
// />
|
onClick: async () => {
|
||||||
// }
|
await Dialog.confirm({
|
||||||
title={<span style={{color: "red"}}>{item.name}</span>}
|
content: '确定要关闭吗？',
|
||||||
children={item.description}
|
})
|
||||||
description={item.state}
|
ref.current?.close()
|
||||||
onClick={
|
},
|
||||||
() => {
|
},
|
||||||
console.log("dianji")
|
{
|
||||||
}
|
key: 'close',
|
||||||
}
|
text: '关闭',
|
||||||
/>
|
color: 'warning',
|
||||||
</SwipeAction>
|
onClick: async () => {
|
||||||
</div>
|
await Dialog.confirm({
|
||||||
)}
|
content: '确定要关闭吗？',
|
||||||
</Draggable>
|
})
|
||||||
))}
|
ref.current?.close()
|
||||||
{droppableProvided.placeholder}
|
},
|
||||||
</div>
|
},
|
||||||
)}
|
{
|
||||||
</Droppable>
|
key: 'update',
|
||||||
</DragDropContext>
|
text: '修改',
|
||||||
</List>
|
color: 'primary',
|
||||||
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
|
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>
|
</PullToRefresh>
|
||||||
</Fragment>
|
</Fragment>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue