修改日历展示和查询逻辑

src/baseComponents/Calendar.vue

@@ -4,15 +4,20 @@
             <!-- 自定义日历头 -->
             <template #header="{ date }">
                     <img :src="preBtnIcon" alt="" @click="selectDate('prev-month')">
-                    <span>{{ date }}</span>
+                    
+                    <!-- 显示日期选择组件 -->
+                    <template v-if="showSelectDatePicker">
+                        <el-date-picker   ref="datePickerRef" v-model="selectedCalendarTime" 
+                            type="month"  @blur="showSelectDatePicker = false"/>
+                    </template>
+                    <!-- 展示选择的月 -->
+                    <span v-else @click="OpenSelectDatePicker">{{ date }}</span>
                     <img :src="nextBtnIcon" alt=""  @click="selectDate('next-month')">
             </template>
 
             <!-- 自定义日期单元格 -->
                 <template #date-cell="{ data}">
-                    <span  :class="[props?.dateStatus?.find(item=>item.day == data.day)?.hasToDo ? 'has_to_do' : '',
-                        formatTime(selectedCalendarTime).split(' ')[0]== data.day ? '' : 'not_default_select'
-                    ]" >
+                    <span  :class="[props?.dateStatus?.find(item=>item.day == data.day)?.hasToDo ? 'has_to_do' : '']">
                         {{ data.day.split('-').pop() }}
                     </span>
             </template>
@@ -21,12 +26,11 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { ref,nextTick } from 'vue';
+
 import preBtnIcon from '@/assets/clientManage/pre_btn.png'
 import nextBtnIcon from '@/assets/clientManage/next_btn.png'
 
-import {formatTime} from '@/utils/timeRangeGet'
-
 interface DateStatusItm {
     day:string,
     hasToDo:Boolean
@@ -48,6 +52,18 @@ const selectDate = (val) => {
   calendar.value.selectDate(val)
 }
 
+// 日期选择
+const datePickerRef = ref<any>(null)
+const showSelectDatePicker = ref(false)
+const OpenSelectDatePicker = ()=>{
+    showSelectDatePicker.value = true
+    nextTick(() => {
+        if (datePickerRef.value) {
+            datePickerRef.value.focus()
+        }
+    })
+}
+
 </script>
 
 

src/views/appointmentAndTodo/index.vue

@@ -7,7 +7,6 @@
                 :dateStatus="dateStatus">
             </Calendar>
 
-            <!-- {{ selectedCalendarTime }} -->
              <div class="calendar_desc"> 
                 <div class="calendar_desc_title">
                     <span class="date_desc">{{dayjs(selectedCalendarTime || undefined).month() + 1}}月预约</span>
@@ -108,7 +107,7 @@ const HandleTypeChange = (val)=>{
 }
 
 // 当前选中的日历信息
-const selectedCalendarTime =ref(null)
+const selectedCalendarTime =ref(dayjs())
 
 const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth() + 1 )