修复手表数据日历展示问题，屏蔽非当前月的日期，切换日期发生年份变化时获取新年份月数据

src/views/healthMonitor/healMonitorManage/monitorToll/personalData/componets/personalDataModal.vue

@@ -23,6 +23,7 @@
                                 format="YYYY-MM-DD"
                                 @change="changeValue"
                                 :allow-clear="false"
+                                dropdownClassName="personal-data-no-other-month"
                                 style="opacity: 0; z-index: 99; position: absolute; top: 0; left: 0"
                             >
                                 <template #dateRender="{ current }">
@@ -47,7 +48,7 @@
     </BasicModal>
 </template>
 <script setup lang="ts" name="personalDataModal">
-    import { computed, ref, watch } from 'vue';
+    import { computed, ref, watch, onMounted, onUnmounted, nextTick } from 'vue';
     import { BasicModal, useModalInner } from '/@/components/Modal';
     import AllLook from '/@/views/healthMonitor/healMonitorManage/monitorToll/userInfo/componets/allLook.vue';
     import { getDetail, userDataDayByMonth } from '/@/views/healthMonitor/healMonitorManage/monitorToll/personalData/personalData.api';
@@ -59,11 +60,14 @@
     const userId = ref('');
     const haveInfo = ref('');
     const nowDate = ref(dayjs());
+    const loadedYear = ref(dayjs().format('YYYY'));
     const isRight = computed(() => dayjs(nowDate.value).format('YYYY-MM-DD') != dayjs().format('YYYY-MM-DD'));
     //表单赋值
     const [registerModal, { setModalProps }] = useModalInner(async (data) => {
         userInfo.value = data.record;
         userId.value = data.record.userId;
+        // 重置已加载年份，避免上次切换年份的残留状态
+        loadedYear.value = dayjs().format('YYYY');
         await userDataDayByMonth({ userId: data.record.userId, year: dayjs().format('YYYY') }).then((res) => {
             let year = dayjs().format('YYYY');
             let month = '';
@@ -94,6 +98,8 @@
 
     function getDisabled(current) {
         let flag = false;
+        // 年份不匹配时不渲染 bgc
+        if (dayjs(current).format('YYYY') !== loadedYear.value) return false;
 
         for (let i = 0; i < Object.keys(haveInfo.value).length; i++) {
             if (Object.keys(haveInfo.value)[i] == dayjs(current).format('MM') * 1) {
@@ -148,6 +154,31 @@
     function changeValue() {
         getInfo();
     }
+
+    // 加载指定年份的 bgc 标记数据
+    async function loadYearData(year: string) {
+        if (year === loadedYear.value) return;
+        await userDataDayByMonth({ userId: userId.value, year }).then((res) => {
+            haveInfo.value = res;
+            loadedYear.value = year;
+        });
+    }
+
+    // 监听面板内点击，DOM 更新后从年份按钮读取当前展示的年份
+    function onPickerPanelClick(e: MouseEvent) {
+        const panel = document.querySelector('.personal-data-no-other-month');
+        if (!panel?.contains(e.target as Node)) return;
+        nextTick(() => {
+            const yearBtn = panel.querySelector('.ant-picker-year-btn');
+            if (!yearBtn) return;
+            // 按钮文本可能为 "2024年" 或 "2024"，提取4位数字
+            const year = yearBtn.textContent?.replace(/[^0-9]/g, '').slice(0, 4) || '';
+            if (year.length === 4) loadYearData(year);
+        });
+    }
+
+    onMounted(() => document.addEventListener('click', onPickerPanelClick));
+    onUnmounted(() => document.removeEventListener('click', onPickerPanelClick));
 </script>
 
 <style scoped lang="less">
@@ -185,3 +216,11 @@
         cursor: pointer !important;
     }
 </style>
+
+<style>
+    /* 隐藏日历面板中非当前月份的日期格，仅对该 picker 生效 */
+    .personal-data-no-other-month .ant-picker-cell:not(.ant-picker-cell-in-view) {
+        visibility: hidden;
+        pointer-events: none;
+    }
+</style>