Просмотр исходного кода

feat(attendance): 优化日期选择高亮逻辑,确保选中日期与今日状态一致

xieyong 4 дней назад
Родитель
Сommit
6dd541e2eb
1 измененных файлов с 28 добавлено и 10 удалено
  1. 28 10
      src/pages/attendance/index.vue

+ 28 - 10
src/pages/attendance/index.vue

@@ -194,26 +194,31 @@ const grid = computed(() => {
       day: d,
       day: d,
       data,
       data,
       isToday: ds === todayStr,
       isToday: ds === todayStr,
-      dot: computeDot(data, ds === todayStr),
-      dotCls: computeDotCls(data, ds === todayStr),
+      // 选中态跟原来 today 走同一套蓝色样式,这样点击其他日期时蓝色高亮会跟着移动,
+      // 跟 record 卡片的数据切换形成视觉上的对应
+      isSelected: ds === selectedDate.value,
+      dot: computeDot(data, ds === selectedDate.value),
+      dotCls: computeDotCls(data, ds === selectedDate.value),
     });
     });
   }
   }
   while (cells.length % 7 !== 0) cells.push({ blank: true });
   while (cells.length % 7 !== 0) cells.push({ blank: true });
   return cells;
   return cells;
 });
 });
 
 
-function computeDot(data, isToday) {
-  if (!data) return isToday;
+function computeDot(data, isSelected) {
+  if (!data) return isSelected;
   const status = data.attendanceStatusList;
   const status = data.attendanceStatusList;
-  if (isToday) return true;
+  // 选中态:始终显示圆点(蓝底配白点)
+  if (isSelected) return true;
   if ((data.exceptionCount || 0) > 0) return true;
   if ((data.exceptionCount || 0) > 0) return true;
   if (status === "NORMAL") return true;
   if (status === "NORMAL") return true;
   return false;
   return false;
 }
 }
 
 
-function computeDotCls(data, isToday) {
-  if (!data) return isToday ? "today" : "";
-  if (isToday) return "today";
+function computeDotCls(data, isSelected) {
+  // 选中态用白点(跟蓝底搭),其他日期按状态色显示(绿/红)
+  if (!data) return isSelected ? "today" : "";
+  if (isSelected) return "today";
   if ((data.exceptionCount || 0) > 0) return "abnormal";
   if ((data.exceptionCount || 0) > 0) return "abnormal";
   return "normal";
   return "normal";
 }
 }
@@ -222,7 +227,10 @@ function cellClass(cell) {
   if (cell.blank) return "blank";
   if (cell.blank) return "blank";
   const status = cell.data?.attendanceStatusList;
   const status = cell.data?.attendanceStatusList;
   const cls = [];
   const cls = [];
-  if (cell.isToday) cls.push("today");
+  // 选中态优先:被选中的日期复用原本 today 的蓝色背景(白字 + 白点)
+  if (cell.isSelected) cls.push("today");
+  // 今天的标记:仅在今天不是当前选中时显示,避免选中其他日期后"今天"完全消失
+  if (cell.isToday && !cell.isSelected) cls.push("is-today-mark");
   if (status === "REST") cls.push("rest");
   if (status === "REST") cls.push("rest");
   else if (status === "LEAVE") cls.push("leave");
   else if (status === "LEAVE") cls.push("leave");
   else if ((cell.data?.exceptionCount || 0) > 0) cls.push("abnormal");
   else if ((cell.data?.exceptionCount || 0) > 0) cls.push("abnormal");
@@ -297,8 +305,13 @@ async function selectDate(date) {
   try {
   try {
     const user = getCurrentUser() || currentUser || {};
     const user = getCurrentUser() || currentUser || {};
     const userId = (user && user.raw && user.raw.userId) || (user && user.raw && user.raw.id) || (user && user.id) || "";
     const userId = (user && user.raw && user.raw.userId) || (user && user.raw && user.raw.id) || (user && user.id) || "";
-    dailyDetail.value = await queryDailyAttendance(userId, date);
+    const result = await queryDailyAttendance(userId, date);
+    // 后端未返回数据(null/undefined)→ 显式清空,
+    // 否则 record 卡片会继续展示上一个日期的记录,与 selectedDate 不同步
+    dailyDetail.value = result || null;
   } catch (error) {
   } catch (error) {
+    // 接口异常时也清空,避免 toast 提示完之后 record 卡片还停在旧数据
+    dailyDetail.value = null;
     uni.showToast({ title: error.message || "日期详情加载失败", icon: "none" });
     uni.showToast({ title: error.message || "日期详情加载失败", icon: "none" });
   }
   }
 }
 }
@@ -500,6 +513,11 @@ onShow(async () => {
   color: #fff;
   color: #fff;
   background: #1677ff;
   background: #1677ff;
 }
 }
+/* 今天但未被选中时的标记:保持蓝色识别又不抢选中态的视觉权重 */
+.day.is-today-mark {
+  color: #1677ff;
+  box-shadow: inset 0 0 0 1rpx #1677ff;
+}
 .day-dot {
 .day-dot {
   position: absolute;
   position: absolute;
   bottom: 7rpx;
   bottom: 7rpx;