99 lines
3.9 KiB
TypeScript
99 lines
3.9 KiB
TypeScript
|
'use client'
|
||
|
|
import React, {useEffect} from "react";
|
||
|
|
import {Calendar, dayjsLocalizer, Event, View} from 'react-big-calendar'
|
||
|
|
// https://day.js.org/docs/zh-CN/get-set/get-set
|
||
|
|
import dayjs from 'dayjs'
|
||
|
|
import 'react-big-calendar/lib/css/react-big-calendar.css'
|
||
|
|
import {getTaskTreeResult} from "@/lib/task/project/data";
|
||
|
|
import {useSearchParams} from "next/dist/client/components/navigation";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* https://github.com/jquense/react-big-calendar?tab=readme-ov-file
|
||
|
|
* @constructor
|
||
|
|
*/
|
||
|
|
const localizer = dayjsLocalizer(dayjs)
|
||
|
|
const CalShow: React.FC = () => {
|
||
|
|
dayjs.locale('zh-cn')
|
||
|
|
const [view, setView] = React.useState<View>('month');
|
||
|
|
const [date, setDate] = React.useState<Date>(new Date());
|
||
|
|
// 展示在页面的任务,默认获取当前月的信息。
|
||
|
|
const [events,setEvents] = React.useState<Event[]>([]);
|
||
|
|
const handleViewChange = (newView:View) => {
|
||
|
|
setView(newView);
|
||
|
|
};
|
||
|
|
var pid = useSearchParams().get('pid');
|
||
|
|
useEffect(() => {
|
||
|
|
const searchListE=[]
|
||
|
|
if (pid!=null) {
|
||
|
|
searchListE.push({name:"pid",value:pid,operateType:"="},{name:'TREE',value:"false",operateType: "TREE"});
|
||
|
|
}
|
||
|
|
if (view==='month'){
|
||
|
|
searchListE.push({name:'expectedStartTime',value:dayjs(date).startOf('month'),operateType:">="})
|
||
|
|
searchListE.push({name:'expectedStartTime',value:dayjs(date).endOf('month'),operateType:"<="})
|
||
|
|
}else {
|
||
|
|
searchListE.push({name:'expectedStartTime',value:dayjs(date).startOf('week'),operateType:">="})
|
||
|
|
searchListE.push({name:'expectedStartTime',value:dayjs(date).endOf('week'),operateType:"<="})
|
||
|
|
}
|
||
|
|
searchListE.push({name:'expectedEndTime',value:dayjs(date).endOf('month'),operateType:"NOT NULL"})
|
||
|
|
let request = JSON.stringify({
|
||
|
|
pageSize:9999,
|
||
|
|
pageNumber:1,
|
||
|
|
data: searchListE
|
||
|
|
})
|
||
|
|
const response = getTaskTreeResult(request)
|
||
|
|
response.then(responseD=>{
|
||
|
|
if(responseD.status.success){
|
||
|
|
setEvents(responseD.data.content.map(taskState=>{
|
||
|
|
return {
|
||
|
|
start:dayjs(taskState.expectedStartTime).toDate(),
|
||
|
|
end:dayjs(taskState.expectedEndTime).toDate(),
|
||
|
|
title:taskState.name
|
||
|
|
}
|
||
|
|
}))
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const handleNavigate = (newDate:Date) => {
|
||
|
|
console.log('handleNavigate',newDate)
|
||
|
|
setDate(newDate);
|
||
|
|
const searchList=[]
|
||
|
|
if (pid!=null) {
|
||
|
|
searchList.push({name:"pid",value:pid,operateType:"="},{name:'TREE',value:"false",operateType: "TREE"});
|
||
|
|
}
|
||
|
|
searchList.push({name:'expectedStartTime',value:dayjs(newDate).startOf('month'),operateType:">="})
|
||
|
|
searchList.push({name:'expectedStartTime',value:dayjs(newDate).endOf('month'),operateType:"<="})
|
||
|
|
searchList.push({name:'expectedEndTime',value:dayjs(newDate).endOf('month'),operateType:"NOT NULL"})
|
||
|
|
let request = JSON.stringify({
|
||
|
|
pageSize:9999,
|
||
|
|
pageNumber:1,
|
||
|
|
data: searchList
|
||
|
|
})
|
||
|
|
const response = getTaskTreeResult(request)
|
||
|
|
response.then(responseD=>{
|
||
|
|
if(responseD.status.success){
|
||
|
|
setEvents(responseD.data.content.map(taskState=>{
|
||
|
|
return {
|
||
|
|
start:dayjs(taskState.expectedStartTime).toDate(),
|
||
|
|
end:dayjs(taskState.expectedEndTime).toDate(),
|
||
|
|
title:taskState.name
|
||
|
|
}
|
||
|
|
}))
|
||
|
|
}
|
||
|
|
})
|
||
|
|
};
|
||
|
|
|
||
|
|
return <div className="App" style={{ height: '90vh' }}>
|
||
|
|
<Calendar
|
||
|
|
localizer={localizer}
|
||
|
|
events={events}
|
||
|
|
view={view}
|
||
|
|
onView={handleViewChange}
|
||
|
|
// onRangeChange={rangeChange}
|
||
|
|
date={date}
|
||
|
|
onNavigate={handleNavigate}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
export default CalShow;
|