巡查日历逻辑优化

src/components/Calendar/index.vue

@@ -22,13 +22,9 @@
         <tr v-for="row in rows" :key="row">
           <td v-for="date in dateList.slice((row - 1) * 7, (row - 1) * 7 + 7)" :key="date.value">
             <div
-                class="calendar-date hand"
-                :class="{
-                  'calendar-date--grey': date.month !== showDate.month,
-                  'calendar-date--today': date.value === currentDate.value
-                }"
+                :class="date.month == showDate.month ? 'calendar-date hand' : 'calendar-date--grey'"
                 :style="getStyle(date)"
-                @click="handleChangeCurrent(date.dayjs)"
+                @click="handleChangeCurrent(date)"
             >
               <span>{{ date.date }}</span>
             </div>
@@ -69,6 +65,7 @@ const props = withDefaults(defineProps<Props>(), {
   format: "YYYY-MM-DD",
   disabled: false
 });
+const emits = defineEmits(['updateCalendar', 'change']);
 const sevenDay: Array<string> = ["日", "一", "二", "三", "四", "五", "六"];
 const dateList = ref<CalendarDate[]>([]);
 
@@ -81,10 +78,8 @@ const getCalendarDate = (dayjs: Dayjs): CalendarDate => {
     dayjs: dayjs
   };
 };
-// 选中的日期
-const currentDate = ref<CalendarDate>(getCalendarDate(dayjs()));
 // 当前日历展示的日期
-const showDate = ref<CalendarDate>(currentDate.value);
+const showDate = ref<CalendarDate>(getCalendarDate(dayjs()));
 
 // 获取日期列表，6*7天
 const rows = 6;
@@ -100,38 +95,47 @@ const getDateList = (): Array<CalendarDate> => {
 
 const nextMonth = (number: number) => {
   showDate.value = getCalendarDate(showDate.value.dayjs.add(number, "month"));
+  emits('updateCalendar', showDate.value);
   dateList.value = getDateList();
 };
 const nextYear = (number: number) => {
   showDate.value = getCalendarDate(showDate.value.dayjs.add(number, "year"));
+  emits('updateCalendar', showDate.value);
   dateList.value = getDateList();
 };
 
 // 修改选中日期
-const emit = defineEmits(["change"]);
-const handleChangeCurrent = (dayjs: Dayjs) => {
+const handleChangeCurrent = (date) => {
   if (props.disabled) return;
-  currentDate.value = getCalendarDate(dayjs);
-  showDate.value = currentDate.value;
+  showDate.value = getCalendarDate(date.dayjs);
+  emits("change", showDate.value);
   dateList.value = getDateList();
-  emit("change", currentDate.value);
 };
 
 // 给不同颜色赋值
 const getStyle = (date) => {
-  let style = { backgroundColor: '' }
+  let style = { backgroundColor: '', color: '' }
+  const day = date.year+ '-' + (date.month + 1) + '-' + date.date;
   for (let i = 0; i < props.dotDays.length; i++) {
-    if (props.dotDays[i].date === date.value) {
+    if (props.dotDays[i].date === day) {
       style.backgroundColor = props.dotDays[i].color;
+      style.color = props.dotDays[i].color === '#409eff' ? '#fff' : '#000'
       break;
     }
   }
+  if (showDate.value.value === date.value) {
+    // 当前选中日期
+    style.backgroundColor = '#474747';
+    style.color = '#fff'
+  }
   return style;
 }
 
 // 选择今天
 const handleSelectToday = () => {
-  currentDate.value = getCalendarDate(dayjs());
+  showDate.value = getCalendarDate(dayjs());
+  emits('updateCalendar', showDate.value);
+  dateList.value = getDateList();
 };
 onMounted(() => {
   if (props.current) {

src/views/worker/inspectionWork/index.vue

@@ -55,7 +55,7 @@ const handleClickTab = (id) => {
       .tab-text {
         color: #414F64;
         font-size: 14px;
-        margin-top: -8px;
+        margin-top: -18px;
       }
       .text-active {
         color: #2C81FF;

src/views/worker/inspectionWork/patrolCalendar.vue

@@ -3,6 +3,7 @@
     ref="calendarRef"
     :current="current"
     :dotDays="taskData.days"
+    @updateCalendar="handleChange"
     @change="handleChange"
   />
   <div>
@@ -140,10 +141,10 @@ const get_task_range = range => {
 };
 
 const handleChange = date => {
-  year_1.value = parseTime(date.value, "{y}");
-  month_1.value = parseTime(date.value, "{m}");
-  day_1.value = parseTime(date.value, "{d}");
-  current.value = date.value;
+  year_1.value = date.year;
+  month_1.value = (date.month + 1);
+  day_1.value = date.date;
+  current.value = date.year+ '-' + (date.month + 1) + '-' + date.date;
   console.log("handleChange:", year_1.value, month_1.value, day_1.value);
   getList();
 };
@@ -157,7 +158,7 @@ const getList = () => {
       res.data.map((item, index) => {
         // 有事已完成
         if (item.status == 1) {
-          days.push({ date: item.date, color: "#a2d7f1" });
+          days.push({ date: item.date, color: "#dfdfe0" });
         }
         // 有事未完成
         else if (item.status == 2) {
@@ -167,7 +168,11 @@ const getList = () => {
         else if (item.status == 3) {
           days.push({ date: item.date, color: "#ffefcc" });
         }
-
+        // 今天
+        else if (item.status == 4) {
+          days.push({ date: item.date, color: "#409eff" });
+        }
+        console.log(current.value)
         if (item.date == current.value) {
           taskData.value.tasks = item.task_list;
         }