feat:设置查询范围

src/ui/task/calendar/CalShow.tsx

@@ -25,7 +25,7 @@ const localizer = dayjsLocalizer(dayjs)
 const DragAndDropCalendar = withDragAndDrop(Calendar)
 const CalShow: React.FC = () => {
     dayjs.locale('zh-cn')
-    const [view, setView] = useState<View>('month');
+    const [view, setView] = useState<View>('week');
     const [date, setDate] = useState<Date>(new Date());
     const clickRef = useRef<number|undefined|null>(null)
     // 展示在页面的任务,默认获取当前月的信息。
@@ -36,6 +36,10 @@ const CalShow: React.FC = () => {
     const [itemId, setItemId] = useState(-1);
     const [expectedStartTime, setExpectedStartTime] = useState<Dayjs>();
     const [expectedEndTime, setExpectedEndTime] = useState<Dayjs>();
+    const [range, setRange] = useState<{start: Date; end: Date}>({
+        start: dayjs(date).startOf('week').toDate(),
+        end: dayjs(date).endOf('week').toDate()
+    });
 
     let state: string = useContext(LocalContext).taskState
     const handleViewChange = (newView: View) => {
@@ -56,12 +60,13 @@ const CalShow: React.FC = () => {
                 operateType: "TREE"
             });
         }
-        searchList.push({name: "expectedStartTime", value: dayjs(newDate).startOf('month'), operateType: ">="})
+        searchList.push({name: "expectedStartTime", value: range.start, operateType: ">="})
-        searchList.push({name: 'expectedStartTime', value: dayjs(newDate).endOf('month'), operateType: "<="})
+        searchList.push({name: 'expectedStartTime', value: range.end, operateType: "<="})
         loadData(searchList);
     };
 
     useEffect(() => {
+        console.log("CalShow:useEffect:range",range)
         const searchListE = []
         if (pid != null) {
             searchListE.push({name: "pid", value: pid, operateType: "="}, {
@@ -70,13 +75,8 @@ const CalShow: React.FC = () => {
                 operateType: "TREE"
             });
         }
-        if (view === 'month') {
+        searchListE.push({name: 'expectedStartTime', value: range.start, operateType: ">="})
-            searchListE.push({name: 'expectedStartTime', value: dayjs(date).startOf('month'), operateType: ">="})
+        searchListE.push({name: 'expectedStartTime', value: range.end, 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: "<="})
-        }
         loadData(searchListE);
         /**
          * What Is This?
@@ -243,6 +243,36 @@ const CalShow: React.FC = () => {
         }),
         [setEvents]
     )
+    const rangeChange = (rangeLet: Date[]|{ start: Date; end: Date })=>{
+        console.log("rangeChange:",rangeLet)
+        // view 为天的时候类型为数组，index:0为当天
+        if (view==="day"&&Array.isArray(rangeLet)) {
+            if (range.start.valueOf()>rangeLet[0].valueOf()){
+                setRange({...range,start:rangeLet[0]})
+            }else if (range.end.valueOf()<rangeLet[0].valueOf()){
+                setRange({...range,end:rangeLet[0]})
+            }
+        }
+        //      为周的时候类型为数组，周一到周日七天
+        if (view==="week"&&Array.isArray(rangeLet)){
+            if (range.start.valueOf()>rangeLet[0].valueOf()){
+                setRange({...range,start:rangeLet[0]})
+            }
+            if (range.end.valueOf()<rangeLet[6].valueOf()){
+                setRange({...range,end:rangeLet[6]})
+            }
+        }
+        //      为周的时候类型为对象
+        if (view==="month"&& rangeLet && !Array.isArray(rangeLet)){
+            if (range.start.valueOf()>rangeLet.start.valueOf()){
+                setRange({...range,start:rangeLet.start})
+            }
+            if (range.end.valueOf()<rangeLet.end.valueOf()){
+                setRange({...range,end:rangeLet.end})
+            }
+        }
+
+    }
     return <div className="App" style={{height: '90vh'}}>
         {open&&<DetailModelForm operationId={operationId} description={description} open={open} haveButton={false}
                          itemId={itemId} pid={pid?Number(pid):0}
@@ -259,7 +289,7 @@ const CalShow: React.FC = () => {
             view={view}
             // 界面改变
             onView={handleViewChange}
-            // onRangeChange={rangeChange}
+            onRangeChange={rangeChange}
             // 时间
             date={date}
             // 条目信息改变