OfficeSystem/pages/index/index.vue

<template>
  <!-- 顶部Tabs栏 -->
    <uv-tabs :list="topTabs" @click="clickTab"></uv-tabs>
  <!-- 内容区域 -->
  <view class="content-wrapper" >
    <view>
      <uv-calendar ref="calendar" mode="single"  @confirm="handleConfirm" ></uv-calendar>
      <button @click="openCalendar">选择日期</button>
      <view style=" font-size: 12px; color: #666;">
        当前选择日期：{{ selectedDate }}，事件数：{{ eventsInDay.length }}
      </view>
    </view>
    <!-- 时间轴表格 -->
    <TimeTable :hours="hours" :events="eventsInDay" />
  </view>

  <!-- 悬浮新建按钮 -->
  <FabPlus @click="showAdd = true" />

  <!-- 新建日程弹窗 -->
  <AddEventModal :show="showAdd" @ok="addEvent" @cancel="showAdd = false" />

  <!-- 底部导航 -->
  <uv-tabbar :value="value" @change="index=>value = index">
    <uv-tabbar-item text="首页" icon="home"></uv-tabbar-item>
    <uv-tabbar-item text="工作台" icon="calendar"></uv-tabbar-item>
    <uv-tabbar-item text="月度考核 " icon="integral"></uv-tabbar-item>
    <uv-tabbar-item text="管理" icon="account"></uv-tabbar-item>
  </uv-tabbar>

</template>

<script setup>
import { ref, computed, watch } from 'vue';

import TimeTable from '@/components/TimeTable.vue';
import FabPlus from '@/components/FabPlus.vue';
import AddEventModal from '@/components/AddEventModal.vue';

// 顶部tabs选项
const topTabs = [
  { name: '日程编辑', value: 0 },
  { name: '内容看板', value: 1 },
  { name: '待办事项', value: 2 },
  { name: '消息内容', value: 3 }
];
const topTabValue = ref(0);

function clickTab(item) {
  topTabValue.value = item.value;
  console.log('切换tab:', item.name);
}

// 当前选择的日期，格式：YYYY-MM-DD
const selectedDate = ref(new Date().toISOString().slice(0, 10));

// 小时段
const hours = Array.from({length: 24}, (_,i)=>i); // 0~23点
// 示例日程
const today = new Date().toISOString().slice(0, 10);
// 获取明天的日期
const tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
const tomorrowStr = tomorrow.toISOString().slice(0, 10);
// 获取昨天的日期
const yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);
const yesterdayStr = yesterday.toISOString().slice(0, 10);

const allEvents = ref([
  {id:1,title:'今天的日程1',startHour:15,startMin:30,color:'#e3fae6',date:today},
  {id:2,title:'今天的日程2',startHour:16,startMin:0,color:'#fae1e1',date:today},
  {id:3,title:'今天的日程3',startHour:23,startMin:0,color:'#e3fae6',date:today},
  {id:4,title:'明天的日程1',startHour:9,startMin:0,color:'#e3fae6',date:tomorrowStr},
  {id:5,title:'明天的日程2',startHour:14,startMin:30,color:'#fae1e1',date:tomorrowStr},
  {id:6,title:'昨天的日程',startHour:10,startMin:0,color:'#e3fae6',date:yesterdayStr},
]);

// 根据当前选择日期过滤
const eventsInDay = computed(() => {
  const filtered = allEvents.value.filter(e=>e.date===selectedDate.value);
  console.log('计算 eventsInDay，selectedDate:', selectedDate.value, '过滤后事件数:', filtered.length);
  return filtered;
});

// 监控 selectedDate 的变化
watch(selectedDate, (newDate, oldDate) => {
  console.log('selectedDate 发生变化：', oldDate, '->', newDate);
  console.log('eventsInDay 新值：', eventsInDay.value);
}, { immediate: true });

const calendar = ref(null)

// 格式化日期为 YYYY-MM-DD
function formatDateToYYYYMMDD(dateInput) {
  if (!dateInput) return '';

  let dateStr = '';

  // 如果已经是字符串格式 YYYY-MM-DD，直接返回
  if (typeof dateInput === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(dateInput)) {
    return dateInput;
  }

  // 处理各种可能的输入格式
  if (typeof dateInput === 'string') {
    dateStr = dateInput;
  } else if (dateInput?.date) {
    dateStr = dateInput.date;
  } else if (dateInput?.value) {
    dateStr = dateInput.value;
  } else if (Array.isArray(dateInput) && dateInput.length > 0) {
    dateStr = typeof dateInput[0] === 'string' ? dateInput[0] : (dateInput[0]?.date || dateInput[0]?.value || '');
  }

  if (!dateStr) return '';

  // 尝试解析日期
  const date = new Date(dateStr);
  if (!isNaN(date.getTime())) {
    // 格式化为 YYYY-MM-DD
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  }

  // 如果已经是 YYYY-MM-DD 格式但 new Date 解析失败（如时区问题），尝试直接使用
  if (/^\d{4}-\d{2}-\d{2}/.test(dateStr)) {
    return dateStr.slice(0, 10);
  }

  return '';
}

// 打开日历方法
const openCalendar = () => {
  if (calendar.value) {
    calendar.value.open()
  }
}

// confirm 事件处理（可能在确认时触发）
const handleConfirm = (e) => {
  console.log('日历 confirm 事件：', e, typeof e);
  const formattedDate = formatDateToYYYYMMDD(e);
  if (formattedDate) {
    selectedDate.value = formattedDate;
    console.log('通过 confirm 更新选择日期：', selectedDate.value);
    console.log('过滤后的事件数：', eventsInDay.value.length);
  }
}

// 悬浮按钮/弹窗控制
const showAdd = ref(false);
function addEvent(e) {
  // e是{title, startHour, startMin, color}，补充date
  allEvents.value.push({
    ...e, date: selectedDate.value,
    id: Date.now()
  });
  showAdd.value = false;
}
const value=ref(0);
</script>

<style lang="scss" scoped>

.status_bar {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.fixed-tabs {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;
  z-index: 999;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.content-wrapper {
  min-height: 100vh;
}

:deep(.bottom-tabbar) { z-index: 1000 !important; }

.schedule-timeline {
  padding-bottom: 130rpx !important;
}
</style>