huayu-web
/
assistant-todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:四象限拖拽

This commit is contained in:
1708-huayu 2025-07-10 19:03:22 +08:00
parent 5da031aebc
commit 4b32486a5f
9 changed files with 123 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
src/app/task/drag/layout.tsx
View File

@ -7,26 +7,35 @@ import {DragDropContext, DropResult} from 'react-beautiful-dnd';
import {DroppableTable} from "@/ui/task/drag/DroppableTable";
import {DataType, Request} from "@/lib/definitions";
import {TaskSelectVO} from "@/lib/task/drag/data";
import {selectTaskAPI} from "@/lib/task/drag/service";
import {moveItem, selectTaskAPI} from "@/lib/task/drag/service";
import LocalContext from "@/ui/LocalContent";
import {useSearchParams} from "next/dist/client/components/navigation";
export default function Layout({children}: { children: React.ReactNode }) {
const [allTaskList, setAllTaskList] = useState<DataType[]>([]);
// 3
const [importUrgent, setImportUrgent] = useState<DataType[]>([]);
// 2
const [notImportUrgent, setNotImportUrgent] = useState<DataType[]>([]);
// 1
const [importNotUrgent, setImportNotUrgent] = useState<DataType[]>([]);
// 0
const [notImportNotUrgent, setNotImportNotUrgent] = useState<DataType[]>([]);
const data = useContext(LocalContext);
console.log('data',data);
let pid = useSearchParams().get('pid');
useEffect(() => {
addData()
selectData()
}, [data])
function addData() {
function selectData() {
const requestParam: Request<TaskSelectVO> = {
pageSize: 1000,
pageNumber: 1,
data: {state: data.taskState,pid:pid}
data: {state: data.taskState,pid:pid,treeList:true,treeOrList:false,treeFilter:true},
sortList:[{property:"sort_no",direction:"ASC"}]
}
if (data.expectedStartTime.length>0){
const parse = JSON.parse(data.expectedStartTime);
@ -35,34 +44,88 @@ export default function Layout({children}: { children: React.ReactNode }) {
}
selectTaskAPI(requestParam).then(res=>{
setAllTaskList(res.data.content)
setImportUrgent(res.data.content.filter(task => task.priority == '3'))
setNotImportUrgent(res.data.content.filter(task => task.priority == '2'))
setImportNotUrgent(res.data.content.filter(task => task.priority == '1'))
setNotImportNotUrgent(res.data.content.filter(task => task.priority == '0'))
})
}
const filterByIndex = (list:DataType[],filterIndex:number)=>{
return list.filter((item,index)=>index!=filterIndex)
}
const addItemByIndex = (list:DataType[],addIndex:number,item:DataType)=>{
console.log("list.splice(addIndex,0,item)",list,addIndex,item)
list.splice(addIndex,0,item)
return list;
}
// 处理拖拽结束事件
const onDragEnd = (result: DropResult) => {
console.log('拖拽结束')
const onDragEnd = async (result: DropResult) => {
console.log('拖拽结束',{result})
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;
if (destination==source) return;
let sourceList =allTaskList.filter(task => task.priority == source.droppableId)
let currentId = sourceList[source.index].id;
let destinationList=allTaskList.filter(task => task.priority == destination.droppableId);
let preId;
let nextId;
if(destination.droppableId==source.droppableId){
// 从后往前
if (source.index>destination.index){
if (destination.index!=0){
preId=destinationList[destination.index-1].id
}
nextId=destinationList[destination.index].id
}else {
preId=destinationList[destination.index].id
if (destination.index!=destinationList.length-1){
nextId=destinationList[destination.index+1].id
}
}
}else {
if (destination.index!=0){
preId=destinationList[destination.index-1].id
}
if (destination.index!=destinationList.length){
nextId=destinationList[destination.index].id
}
// 移除
if (source.droppableId=="3"){setImportUrgent(filterByIndex(importUrgent,source.index))}
if (source.droppableId=="2"){setNotImportUrgent(filterByIndex(notImportUrgent,source.index))}
if (source.droppableId=="1"){setImportNotUrgent(filterByIndex(importNotUrgent,source.index))}
if (source.droppableId=="0"){setNotImportNotUrgent(filterByIndex(notImportNotUrgent,source.index))}
// 加入
if (destination.droppableId=="3"){setImportUrgent(addItemByIndex(importUrgent,destination.index,sourceList[source.index]))}
if (destination.droppableId=="2"){setNotImportUrgent(addItemByIndex(notImportUrgent,destination.index,sourceList[source.index]))}
if (destination.droppableId=="1"){setImportNotUrgent(addItemByIndex(importNotUrgent,destination.index,sourceList[source.index]))}
if (destination.droppableId=="0"){setNotImportNotUrgent(addItemByIndex(notImportNotUrgent,destination.index,sourceList[source.index]))}
}
try{
await moveItem({priority:destination.droppableId,currentId,preId,nextId})
selectData()
}catch (e){
console.log(e)
}
};
return (<div style={{display: 'flex', flexWrap: 'wrap', boxSizing: 'border-box', width: '100vw'}}>
<DragDropContext onDragEnd={onDragEnd}>
{/* 紧急重要 */}
<DroppableTable tableCode='3' taskList={allTaskList.filter(task => task.priority == '3')}/>
<DroppableTable refreshDate={selectData} tableCode='3' taskList={importUrgent}/>
{/* 不紧急重要 */}
<DroppableTable tableCode='2' taskList={allTaskList.filter(task => task.priority == '2')}/>
<DroppableTable refreshDate={selectData} tableCode='2' taskList={notImportUrgent}/>
{/* 紧急不重要 */}
<DroppableTable tableCode="1" taskList={allTaskList.filter(task => task.priority == '1')}/>
<DroppableTable refreshDate={selectData} tableCode="1" taskList={importNotUrgent}/>
{/* 不紧急不重要 */}
<DroppableTable tableCode='0' taskList={allTaskList.filter(task => task.priority == '0')}/>
<DroppableTable refreshDate={selectData} tableCode='0' taskList={notImportNotUrgent}/>
</DragDropContext></div>
);
}

2
src/app/task/layout.tsx
View File

@ -6,7 +6,7 @@ import dayjs from "dayjs";
import {ConfigProvider} from "antd";
export default function Layout({children}: { children: React.ReactNode }) {
const [taskState, setTaskState] = React.useState<string>('8,9')
const [taskState, setTaskState] = React.useState<string>('8,9,10')
let expectStartTimeList = [];
expectStartTimeList.push({'name': "expectedStartTime", 'value': dayjs().subtract(7, 'day'), 'operateType': ">="});
expectStartTimeList.push({'name': "expectedStartTime", 'value': dayjs().add(7, 'day'), 'operateType': "<"})

1
src/lib/definitions.ts
View File

@ -5,6 +5,7 @@ export type Request<T>={
data:T,
pageSize:number,
pageNumber:number,
sortList?:{direction:string,property:string}[]
}
type Status={
success:boolean;

3
src/lib/task/drag/data.tsx
View File

@ -2,6 +2,9 @@ export type TaskSelectVO = {
pid?:string|undefined|null;
name?: string;
state?: string;
treeList?:boolean;
treeOrList?:boolean;
treeFilter?:boolean;
priority?: string;
allOverdueTasks?:boolean;
expectedStartTimeStart?:string;

10
src/lib/task/drag/service.tsx
View File

@ -12,4 +12,14 @@ export async function selectTaskAPI(requestParam: Request<TaskSelectVO>):
process.env.NEXT_PUBLIC_TODO_REQUEST_URL + '/V2/task/select', requestParam);
// 从响应中提取数据并返回
return response.data;
}
export async function moveItem(requestParam:{}):
Promise<ResponseVO<boolean|undefined>> {
noStore();
// 使用 Axios 发送 PUT 请求获取数据
const response: AxiosResponse<ResponseVO<boolean|undefined>> = await httpReq.post(
process.env.NEXT_PUBLIC_TODO_REQUEST_URL + '/task/moveItem', requestParam);
// 从响应中提取数据并返回
return response.data;
}

2
src/ui/task/TitleOperation.tsx
View File

@ -124,7 +124,7 @@ export const TitleOperation: React.FC<TitleOperationProps> = ({
{
/*日历需要状态*/
!usePathname().startsWith("/task/project") && <Fragment>
<Button>搜索</Button>
<Button type={"primary"} onClick={()=>{refreshData()}}>搜索</Button>
</Fragment>
}
</Space>

7
src/ui/task/drag/DroppableTable.tsx
View File

@ -12,7 +12,8 @@ import RightOption from "@/ui/task/RightOption";
interface DroppableTableProps {
tableCode: string,
taskList: DataType[]
taskList: DataType[],
refreshDate?: () => void,
}
export const DroppableTable = React.memo((props: DroppableTableProps) => {
@ -79,7 +80,9 @@ export const DroppableTable = React.memo((props: DroppableTableProps) => {
{props.taskList.map((record, index) => {
return <Draggable key={record.id} draggableId={record.id} index={index}>
{(provided, snapshot) => (
<RightOption itemId={record.id} itemName={record.name} pid={record.pid} pPid={record.pPid} children={<div
<RightOption refreshDate={props.refreshDate} itemId={record.id}
itemName={record.name} pid={record.pid}
pPid={record.pPid} children={<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}

23
src/ui/task/project/DetailModelForm.tsx
View File

@ -222,6 +222,11 @@ export const DetailModelForm: React.FC<DetailModelFormProps> = (props) => {
onChange={(value:string, option)=>{
setTaskType(value)
}}
rules={[
{required:true,
message:"请输入计划类型"
}
]}
/>
<ProFormText
required={true}
@ -254,6 +259,14 @@ export const DetailModelForm: React.FC<DetailModelFormProps> = (props) => {
tooltip="最长为 10 位"
placeholder="请输入任务名称"
disabled ={editFormDisable}
rules={[
{required:true,
message:"请输入计划名称"
},{
max:10,
message:"名称长度不易超过10个字"
}
]}
/>
</ProForm.Group>
<ProFormTextArea
@ -278,6 +291,11 @@ export const DetailModelForm: React.FC<DetailModelFormProps> = (props) => {
label="任务优先级"
initialValue='3'
disabled ={editFormDisable}
rules={[
{required:true,
message:"请选择计划优先级"
}
]}
/>
<ProFormSelect
width="sm"
@ -291,6 +309,11 @@ export const DetailModelForm: React.FC<DetailModelFormProps> = (props) => {
label="任务状态"
initialValue='8'
disabled ={editFormDisable}
rules={[
{required:true,
message:"请选择计划状态"
}
]}
/>
</ProForm.Group>

2
src/utils/axiosReq.ts
View File

@ -8,7 +8,7 @@ export const httpReq = axios.create({
validateStatus: function (status) {
return status >= 200 && status < 300; // default
},
timeout: 2000,
timeout: 10000,
timeoutErrorMessage: "网络连接超时",
withCredentials: false,
})