Преглед на файлове

Enhance date range selection in StatisticsPlaymateServicePage

- Introduced a DATE_PICKER_CONFIG to manage date picker settings based on selected type (date, week, month).
- Updated the date range handling logic to dynamically format start and end dates according to the selected type.
- Modified the RangePicker component to utilize the new configuration for improved user experience.
0es преди 1 седмица
родител
ревизия
e8e1344980
променени са 1 файла, в които са добавени 28 реда и са изтрити 4 реда
  1. 28 4
      src/app/(dashboard)/statistics/playmate-service/page.tsx

+ 28 - 4
src/app/(dashboard)/statistics/playmate-service/page.tsx

@@ -40,6 +40,15 @@ const DATE_TYPE_OPTIONS = [
   { label: "月", value: 2 },
 ];
 
+const DATE_PICKER_CONFIG: Record<
+  number,
+  { picker: "date" | "week" | "month"; format: string }
+> = {
+  0: { picker: "date", format: "YYYY-MM-DD" },
+  1: { picker: "week", format: "YYYY-[W]WW" },
+  2: { picker: "month", format: "YYYY-MM" },
+};
+
 function flattenBizCategories(
   categories: BizCategoryConfigAdminDTO[] = [],
 ): BizCategoryConfigAdminDTO[] {
@@ -154,13 +163,24 @@ const StatisticsPlaymateServicePage: React.FC = () => {
     void loadCategoryOptions();
   }, [loadCategoryOptions]);
 
+  const selectedType = Form.useWatch("type", form) as number | undefined;
+  const datePickerConfig =
+    DATE_PICKER_CONFIG[Number(selectedType)] ?? DATE_PICKER_CONFIG[0];
+
   const handleSearch = () => {
     const values = form.getFieldsValue();
     const range = values.dateRange as [Dayjs, Dayjs] | undefined;
-    const startDay =
-      range?.[0]?.format?.("YYYY-MM-DD") || defaultRange.beginDateTime;
-    const endDay = range?.[1]?.format?.("YYYY-MM-DD") || defaultRange.endDateTime;
     const type = Number(values.type ?? 0);
+    const isWeekType = type === 1;
+    const isMonthType = type === 2;
+    const startDay =
+      range?.[0]
+        ?.startOf?.(isWeekType ? "week" : isMonthType ? "month" : "day")
+        ?.format?.("YYYY-MM-DD") || defaultRange.beginDateTime;
+    const endDay =
+      range?.[1]
+        ?.endOf?.(isWeekType ? "week" : isMonthType ? "month" : "day")
+        ?.format?.("YYYY-MM-DD") || defaultRange.endDateTime;
 
     setQueryParams((prev) => ({
       ...prev,
@@ -527,7 +547,11 @@ const StatisticsPlaymateServicePage: React.FC = () => {
             name="dateRange"
             rules={[{ required: true, message: "请选择日期范围" }]}
           >
-            <RangePicker allowClear={false} format="YYYY-MM-DD" />
+            <RangePicker
+              allowClear={false}
+              picker={datePickerConfig.picker}
+              format={datePickerConfig.format}
+            />
           </Form.Item>
           <Form.Item label="日期维度" name="type" initialValue={0}>
             <Select