日程添加
This commit is contained in:
WindowBird
parent
5c8cacf998
commit
0ff56a83d4
|
|
@ -1,17 +1,15 @@
|
|||
<template>
|
||||
|
||||
<!-- 顶部Tabs栏 -->
|
||||
<view class="fixed-tabs" >
|
||||
<uv-tabs :list="topTabs" @click="click"></uv-tabs>
|
||||
</view>
|
||||
|
||||
<uv-tabs :list="topTabs" @click="clickTab"></uv-tabs>
|
||||
<!-- 内容区域 -->
|
||||
<view class="content-wrapper" :style="{ paddingTop: ( tabsHeight) + 'px' }">
|
||||
<view class="content-wrapper" >
|
||||
<view>
|
||||
<uv-calendar ref="calendar" mode="single" @change="handleConfirm" closeOnClickConfirm="false"></uv-calendar>
|
||||
<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>
|
||||
|
|
@ -25,24 +23,20 @@
|
|||
<!-- 底部导航 -->
|
||||
<uv-tabbar :value="value" @change="index=>value = index">
|
||||
<uv-tabbar-item text="首页" icon="home"></uv-tabbar-item>
|
||||
<uv-tabbar-item text="放映厅" icon="photo"></uv-tabbar-item>
|
||||
<uv-tabbar-item text="直播 " icon="play-right"></uv-tabbar-item>
|
||||
<uv-tabbar-item text="我的" icon="account"></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 } from 'vue';
|
||||
import { ref, computed, watch } from 'vue';
|
||||
|
||||
import TimeTable from '@/components/TimeTable.vue';
|
||||
import FabPlus from '@/components/FabPlus.vue';
|
||||
import AddEventModal from '@/components/AddEventModal.vue';
|
||||
|
||||
// 获取状态栏高度
|
||||
|
||||
const tabsHeight = ref(44); // tabs 高度，单位：px
|
||||
|
||||
|
||||
// 顶部tabs选项
|
||||
const topTabs = [
|
||||
{ name: '日程编辑', value: 0 },
|
||||
|
|
@ -52,7 +46,7 @@ const topTabs = [
|
|||
];
|
||||
const topTabValue = ref(0);
|
||||
|
||||
function click(item) {
|
||||
function clickTab(item) {
|
||||
topTabValue.value = item.value;
|
||||
console.log('切换tab:', item.name);
|
||||
}
|
||||
|
|
@ -61,49 +55,99 @@ function click(item) {
|
|||
const selectedDate = ref(new Date().toISOString().slice(0, 10));
|
||||
|
||||
// 小时段
|
||||
const hours = Array.from({length: 24}, (_,i)=>i); // 8~20点
|
||||
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:'日程标题',startHour:15,startMin:30,color:'#e3fae6',date:today},
|
||||
{id:2,title:'日程标题',startHour:16,startMin:0,color:'#fae1e1',date:today},
|
||||
{id:3,title:'日程标题',startHour:23,startMin:0,color:'#e3fae6',date:today},
|
||||
{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(() =>
|
||||
allEvents.value.filter(e=>e.date===selectedDate.value)
|
||||
);
|
||||
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('日历选择：', e);
|
||||
// 处理日历返回的日期，可能是对象或字符串
|
||||
let dateStr = '';
|
||||
if (typeof e === 'string') {
|
||||
dateStr = e;
|
||||
} else if (e?.date) {
|
||||
dateStr = e.date;
|
||||
} else if (e?.value) {
|
||||
dateStr = e.value;
|
||||
} else if (Array.isArray(e) && e.length > 0) {
|
||||
// 如果是数组，取第一个
|
||||
dateStr = typeof e[0] === 'string' ? e[0] : (e[0]?.date || e[0]?.value || '');
|
||||
}
|
||||
|
||||
// 格式化日期为 YYYY-MM-DD
|
||||
if (dateStr) {
|
||||
const date = new Date(dateStr);
|
||||
if (!isNaN(date.getTime())) {
|
||||
selectedDate.value = date.toISOString().slice(0, 10);
|
||||
console.log('更新选择日期：', selectedDate.value);
|
||||
}
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -118,16 +162,6 @@ function addEvent(e) {
|
|||
showAdd.value = false;
|
||||
}
|
||||
const value=ref(0);
|
||||
|
||||
// 底部导航
|
||||
const tabbarItems = [
|
||||
{ label: '任务列表', value: 0, icon: 'list' },
|
||||
{ label: '首页', value: 1, icon: 'home' },
|
||||
{ label: '工作台', value: 2, icon: 'calendar' },
|
||||
{ label: '月度考核', value: 3, icon: 'integral' },
|
||||
{ label: '管理', value: 4, icon: 'account' }
|
||||
];
|
||||
const tabbarVal = ref(1);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user