59 lines
2.4 KiB
TypeScript
59 lines
2.4 KiB
TypeScript
|
/**
|
||
|
|
* A layout is UI that is shared between multiple routes. On navigation, layouts preserve state, remain interactive, and do not re-render.
|
||
|
|
*/
|
||
|
|
'use client'
|
||
|
|
import React, { useState} from 'react';
|
||
|
|
import {DragDropContext, DropResult} from 'react-beautiful-dnd';
|
||
|
|
import {DroppableTable} from "@/ui/task/drag/DroppableTable";
|
||
|
|
import {DataType, Request} from "@/lib/definitions";
|
||
|
|
import {useEffect} from "react";
|
||
|
|
import {TaskSelectVO} from "@/lib/task/drag/data";
|
||
|
|
import {selectTaskAPI} from "@/lib/task/drag/service";
|
||
|
|
|
||
|
|
export default function Layout({children}: { children: React.ReactNode }) {
|
||
|
|
const [allTaskList, setAllTaskList] = useState<DataType[]>([]);
|
||
|
|
useEffect(() => {
|
||
|
|
addData()
|
||
|
|
},[])
|
||
|
|
|
||
|
|
async function addData() {
|
||
|
|
const requestParam: Request<TaskSelectVO> = {
|
||
|
|
pageSize: 1000,
|
||
|
|
pageNumber: 1,
|
||
|
|
data: {state:'9'}
|
||
|
|
}
|
||
|
|
const res = await selectTaskAPI(requestParam)
|
||
|
|
setAllTaskList(res.data.content)
|
||
|
|
}
|
||
|
|
|
||
|
|
// 处理拖拽结束事件
|
||
|
|
const onDragEnd = (result: DropResult) => {
|
||
|
|
console.log('拖拽结束')
|
||
|
|
const {source, destination} = result;
|
||
|
|
console.log('Source Droppable ID:', source.droppableId);
|
||
|
|
console.log('Destination Droppable ID:', destination?.droppableId);
|
||
|
|
if (!destination || !['table1', 'table2'].includes(destination.droppableId)) return;
|
||
|
|
// 如果拖拽到无效区域，直接返回
|
||
|
|
if (!destination) return;
|
||
|
|
// 如果拖拽到同一个表格的同一个位置，直接返回
|
||
|
|
if (source.droppableId === destination.droppableId && source.index === destination.index) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<DragDropContext onDragEnd={onDragEnd}>
|
||
|
|
<div style={{display: 'flex',flexWrap: 'wrap',boxSizing: 'border-box',width:'100vw'}}>
|
||
|
|
{/* 不紧急不重要 */}
|
||
|
|
<DroppableTable tableCode='1' taskList={allTaskList.filter(task => task.priority == '1')}/>
|
||
|
|
{/* 紧急不重要 */}
|
||
|
|
<DroppableTable tableCode="2" taskList={allTaskList.filter(task => task.priority == '2')}/>
|
||
|
|
{/* 不紧急重要 */}
|
||
|
|
<DroppableTable tableCode='3' taskList={allTaskList.filter(task => task.priority == '3')}/>
|
||
|
|
{/* 紧急重要 */}
|
||
|
|
<DroppableTable tableCode='4' taskList={allTaskList.filter(task => task.priority == '4')}/>
|
||
|
|
</div>
|
||
|
|
</DragDropContext>
|
||
|
|
);
|
||
|
|
}
|