时间的切换

src/utils/DateUtils.ts

@@ -33,6 +33,14 @@ class DateUtils {
     };
   }
 
+  static MonthStrToDate(dateStr: string): Date {
+    const year = parseInt(dateStr.split('年')[0]);
+    const month = parseInt(dateStr.split('年')[1].split('月')[0]) - 1; // 月份从0开始
+
+    const date = new Date(year, month, 1);
+    return date;
+  }
+
   /**
    * 获取指定年份和月的范围
    * @param year 年份

src/views/property-marketing/assignment-management/index.vue

@@ -15,6 +15,7 @@
             v-else-if="choseType === '周'"
             @change="onChangeWeek"
             v-model="weekModel"
+            format="YYYY年MM月DD日"
           />
           <a-month-picker
             class="w-188px size-14px"
@@ -199,7 +200,8 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted, watch, computed } from 'vue';
+import { ref, reactive, onMounted, watch, computed, nextTick } from 'vue';
+import type { TableColumnData } from '@arco-design/web-vue';
 import { getTaskSchedules } from '@/api/all/assignment-management';
 import { fetchAccountOperators } from '@/api/all/propertyMarketing';
 
@@ -213,17 +215,16 @@ import icon7 from '@/assets/img/platform/icon-ks.png';
 import icon8 from '@/assets/img/platform/icon-bilibili.png';
 import DateUtils from '@/utils/DateUtils';
 
-const choseType = ref('周');
+const choseType = ref('日');
+const dayModel = ref(new Date());
+const weekModel = ref(new Date());
+const monthModel = ref(new Date());
 const currentDateRange = reactive({
   start: '',
   end: '',
 });
-const weekModel = ref(DateUtils.formatDate(new Date()));
+const columns = ref<TableColumnData[]>([]);
-const dayModel = ref(DateUtils.formatDate(new Date()));
+const data = ref<any[]>([]);
-const monthModel = ref(DateUtils.formatDate(new Date()));
-
-const columns = ref([]);
-const data = ref([]);
 const operators = ref([]);
 const platformOptions = ref([
   { value: 0, label: '抖音' },
@@ -250,7 +251,7 @@ const query = reactive({
   execution_time: [] as string[],
 });
 
-const handleMore = (record: any[], column: number) => {
+const handleMore = (record: any, column: any) => {
   console.log('record', record);
   console.log('column', column);
   console.log('data', record[column.dataIndex]);
@@ -259,12 +260,12 @@ const handleMore = (record: any[], column: number) => {
 // 计算当前日期范围内的所有日期，统一返回 number 数组
 const currentDateHeaders = computed(() => {
   if (choseType.value === '周') {
-    const specificWeek = DateUtils.getWeekDaysByDate(new Date(currentDateRange.start || new Date().toString()), 0);
+    const specificWeek = DateUtils.getWeekDaysByDate(new Date(weekModel.value), 0);
-    return specificWeek.map((item) => parseInt(item.day, 10)); // 转换为数字数组
+    return specificWeek.map((item) => parseInt(item.day.toString(), 10)); // 转换为数字数组
   } else if (choseType.value === '月') {
-    const currentYearMonth = DateUtils.getCurrentYearMonth();
+    const date = new Date(monthModel.value);
-    const tabTitle = DateUtils.getDaysAndWeekdays(currentYearMonth.year, currentYearMonth.month);
+    const tabTitle = DateUtils.getDaysAndWeekdays(date.getFullYear(), date.getMonth());
-    return tabTitle.map((item) => parseInt(item.day, 10)); // 转换为数字数组
+    return tabTitle.map((item) => parseInt(item.day.toString(), 10)); // 转换为数字数组
   } else {
     // 日维度，返回当天的日期数字
     const day = new Date(dayModel.value).getDate();
@@ -303,7 +304,7 @@ const formatTaskName = (name: string) => {
 // 时间戳转日期格式，并提取日期数字
 const timestampToDayNumber = (timestamp: number) => {
   const date = new Date(timestamp * 1000); // 假设时间戳是秒级
-  return parseInt(date.getDate().toString().padStart(2, '0')); // 返回 '01', '02', ..., '31'
+  return date.getDate(); // 返回数字类型的日期
 };
 
 // 时间戳转时间格式 (HH:MM)
@@ -371,15 +372,16 @@ const setDateRange = () => {
   } else if (choseType.value === '月') {
     const monthRange = DateUtils.getMonthRangeByYearMonth(
       new Date(monthModel.value).getFullYear(),
-      new Date(monthModel.value).getMonth() + 1
+      new Date(monthModel.value).getMonth() + 1,
     );
     currentDateRange.start = monthRange.startFormatted;
     currentDateRange.end = monthRange.endFormatted;
     query.execution_time = [currentDateRange.start, currentDateRange.end];
   } else {
     // 日维度
-    currentDateRange.start = dayModel.value;
+    const date = new Date(dayModel.value);
-    currentDateRange.end = dayModel.value;
+    currentDateRange.start = DateUtils.formatDate(date);
+    currentDateRange.end = DateUtils.formatDate(date);
     query.execution_time = [currentDateRange.start, currentDateRange.end];
   }
 };
@@ -391,7 +393,6 @@ const setTableSpecific = () => {
       title: '账号与发布平台',
       slotName: 'name',
       width: 150,
-      minWidth: 100,
       fixed: 'left',
     },
   ];
@@ -399,18 +400,18 @@ const setTableSpecific = () => {
   let dateHeaders: any[] = [];
 
   if (choseType.value === '周') {
-    const specificWeek = DateUtils.getWeekDaysByDate(new Date(currentDateRange.start || new Date().toString()), 0);
+    const specificWeek = DateUtils.getWeekDaysByDate(new Date(weekModel.value), 0);
     dateHeaders = specificWeek;
   } else if (choseType.value === '月') {
-    const currentYearMonth = DateUtils.getCurrentYearMonth();
+    const date = new Date(monthModel.value);
-    const tabTitle = DateUtils.getDaysAndWeekdays(currentYearMonth.year, currentYearMonth.month);
+    const tabTitle = DateUtils.getDaysAndWeekdays(date.getFullYear(), date.getMonth());
     dateHeaders = tabTitle;
   } else {
     // 日维度
     const date = new Date(dayModel.value);
-    const day = date.getDate().toString().padStart(2, '0');
+    const day = date.getDate();
     const weekday = DateUtils.formatDateToWeekdayDay(date);
-    dateHeaders = [{ day, weekday }];
+    dateHeaders = [{ day: day, weekday, date: DateUtils.formatDate(date) }];
   }
 
   // 添加日期列
@@ -418,10 +419,8 @@ const setTableSpecific = () => {
     columns.value.push({
       title: `${item.weekday}`,
       dataIndex: item.day, // 使用日期数字作为dataIndex
-      key: item.day,
       slotName: 'dateCell',
       width: 135,
-      minWidth: 100,
       sortable: {
         sortDirections: ['ascend', 'descend'],
       },
@@ -429,41 +428,62 @@ const setTableSpecific = () => {
   });
 };
 
-// 日期变化处理
+// 日期变化处理（日维度）
 const onChangeDate = (val: any) => {
   if (val) {
-    dayModel.value = DateUtils.formatDate(new Date(val));
+    // 确保val是Date对象
+    const selectedDate = val instanceof Date ? val : new Date(val);
+    dayModel.value = selectedDate;
+
+    // 更新日期范围和其他相关状态
     setDateRange();
     setTableSpecific();
+
+    // 在下一个tick中执行搜索，确保DOM更新完成
+    nextTick(() => {
       handleSearch();
+    });
   }
 };
 
+// 日期变化处理（周维度）
 const onChangeWeek = (val: any) => {
   console.log('onChangeWeek val', val);
   if (val) {
-    const weekRange = DateUtils.getWeekRange(new Date(val));
+    // 确保val是Date对象
-    console.log('weekRange', weekRange);
+    const selectedDate = val instanceof Date ? val : new Date(val);
-    currentDateRange.start = weekRange.startFormatted;
+    weekModel.value = selectedDate;
-    currentDateRange.end = weekRange.endFormatted;
+
-    query.execution_time = [currentDateRange.start, currentDateRange.end];
+    // 更新日期范围和其他相关状态
-    weekModel.value = val;
+    setDateRange();
     setTableSpecific();
+
+    // 在下一个tick中执行搜索，确保DOM更新完成
+    nextTick(() => {
       handleSearch();
+    });
   }
 };
 
 const onChangeMonth = (val: any) => {
-  console.log('val', val);
+  if (typeof val === 'string') {
+    val = DateUtils.MonthStrToDate(val);
+    console.log('onChangeMonth val', val);
+  }
+  console.log('onChangeMonth val', val);
   if (val) {
-    const monthRange = DateUtils.getMonthRange(new Date(val));
+    // 确保val是Date对象
-    currentDateRange.start = monthRange.startFormatted;
+    const selectedDate = val instanceof Date ? val : new Date(val);
-    currentDateRange.end = monthRange.endFormatted;
+    monthModel.value = selectedDate;
-    query.execution_time = [currentDateRange.start, currentDateRange.end];
+
-    const date = new Date(val);
+    // 更新日期范围和其他相关状态
-    monthModel.value = val;
+    setDateRange();
     setTableSpecific();
+
+    // 在下一个tick中执行搜索，确保DOM更新完成
+    nextTick(() => {
       handleSearch();
+    });
   }
 };
 
@@ -472,7 +492,9 @@ const handleSelect = (val: string) => {
   choseType.value = val;
   setDateRange();
   setTableSpecific();
+  nextTick(() => {
     handleSearch();
+  });
 };
 
 // 日期导航
@@ -481,15 +503,15 @@ const handlePrev = () => {
   if (choseType.value === '周') {
     const prevWeek = new Date(weekModel.value);
     prevWeek.setDate(prevWeek.getDate() - 7);
-    onChangeWeek(DateUtils.formatDate(prevWeek, false));
+    onChangeWeek(prevWeek);
   } else if (choseType.value === '月') {
     const prevMonth = new Date(monthModel.value);
     prevMonth.setMonth(prevMonth.getMonth() - 1);
-    onChangeMonth(DateUtils.formatDate(prevMonth, false));
+    onChangeMonth(prevMonth);
   } else {
     const prevDay = new Date(dayModel.value);
     prevDay.setDate(prevDay.getDate() - 1);
-    onChangeDate(DateUtils.formatDate(prevDay, false));
+    onChangeDate(prevDay);
   }
 };
 
@@ -498,15 +520,15 @@ const handleNext = () => {
   if (choseType.value === '周') {
     const nextWeek = new Date(weekModel.value);
     nextWeek.setDate(nextWeek.getDate() + 7);
-    onChangeWeek(DateUtils.formatDate(nextWeek, false));
+    onChangeWeek(nextWeek);
   } else if (choseType.value === '月') {
     const nextMonth = new Date(monthModel.value);
     nextMonth.setMonth(nextMonth.getMonth() + 1);
-    onChangeMonth(DateUtils.formatDate(nextMonth, false));
+    onChangeMonth(nextMonth);
   } else {
     const nextDay = new Date(dayModel.value);
     nextDay.setDate(nextDay.getDate() + 1);
-    onChangeDate(DateUtils.formatDate(nextDay, false));
+    onChangeDate(nextDay);
   }
 };
 
@@ -514,11 +536,11 @@ const handleToday = () => {
   // 回到今天
   const today = new Date();
   if (choseType.value === '周') {
-    onChangeWeek(DateUtils.formatDate(today, false));
+    onChangeWeek(today);
   } else if (choseType.value === '月') {
-    onChangeMonth(DateUtils.formatDate(today, false));
+    onChangeMonth(today);
   } else {
-    onChangeDate(DateUtils.formatDate(today, false));
+    onChangeDate(today);
   }
 };
 
@@ -559,10 +581,21 @@ const getOperators = async () => {
 
 // 监听日期维度变化
 watch(choseType, (newVal) => {
+  // 重置对应模型的值为当前日期
+  const now = new Date();
+  if (newVal === '日') {
+    dayModel.value = now;
+  } else if (newVal === '周') {
+    weekModel.value = now;
+  } else if (newVal === '月') {
+    monthModel.value = now;
+  }
+  nextTick(() => {
     setDateRange();
     setTableSpecific();
     handleSearch();
   });
+});
 
 onMounted(() => {
   setDateRange();