This commit is contained in:
parent
bf13cbfbb7
commit
1a9927e60a
@ -160,9 +160,7 @@ const scheduleData: {
|
|||||||
date: string;
|
date: string;
|
||||||
list: { type: BadgeProps['status']; content: string }[];
|
list: { type: BadgeProps['status']; content: string }[];
|
||||||
}[] = [
|
}[] = [
|
||||||
{ date: '2025-07-08', list: [{ type: 'warning', content: '7月8日事件' }] },
|
//组件需要数据结构 { date: '2025-07-08', list: [{ type: 'warning', content: '7月8日事件' }] },
|
||||||
{ date: '2025-07-06', list: [{ type: 'success', content: '8月8日事件' }] },
|
|
||||||
// ...
|
|
||||||
];
|
];
|
||||||
// 切换视图模式
|
// 切换视图模式
|
||||||
function handleViewModeChange(e: RadioChangeEvent): void {
|
function handleViewModeChange(e: RadioChangeEvent): void {
|
||||||
@ -180,45 +178,11 @@ const getListData2 = (
|
|||||||
if (found) {
|
if (found) {
|
||||||
return found.list;
|
return found.list;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
// 如果没有找到数据,返回空数组
|
// 如果没有找到数据,返回空数组
|
||||||
return [];
|
return [];
|
||||||
};
|
};
|
||||||
|
|
||||||
const getListData = (
|
|
||||||
value: Dayjs,
|
|
||||||
): { type: BadgeProps['status']; content: string }[] => {
|
|
||||||
let listData: { type: BadgeProps['status']; content: string }[] | undefined;
|
|
||||||
switch (value.date()) {
|
|
||||||
case 8:
|
|
||||||
listData = [
|
|
||||||
{ type: 'warning', content: 'This is warning event.' },
|
|
||||||
{ type: 'success', content: 'This is usual event.' },
|
|
||||||
];
|
|
||||||
break;
|
|
||||||
case 10:
|
|
||||||
listData = [
|
|
||||||
{ type: 'warning', content: 'This is warning event.' },
|
|
||||||
{ type: 'success', content: 'This is usual event.' },
|
|
||||||
{ type: 'error', content: 'This is error event.' },
|
|
||||||
];
|
|
||||||
break;
|
|
||||||
case 15:
|
|
||||||
listData = [
|
|
||||||
{ type: 'warning', content: 'This is warning event' },
|
|
||||||
{ type: 'success', content: 'This is very long usual event。。....' },
|
|
||||||
{ type: 'error', content: 'This is error event 1.' },
|
|
||||||
{ type: 'error', content: 'This is error event 2.' },
|
|
||||||
{ type: 'error', content: 'This is error event 3.' },
|
|
||||||
{ type: 'error', content: 'This is error event 4.' },
|
|
||||||
];
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
}
|
|
||||||
return listData || [];
|
|
||||||
};
|
|
||||||
|
|
||||||
function customHeader() {
|
function customHeader() {
|
||||||
// 返回想要的VNode或null
|
// 返回想要的VNode或null
|
||||||
return null; // 什么都不显示
|
return null; // 什么都不显示
|
||||||
@ -284,6 +248,11 @@ function handleViewDateDetails(date: string) {
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
fetchCalendarData();
|
fetchCalendarData();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 暴露方法给父组件调用
|
||||||
|
defineExpose({
|
||||||
|
fetchCalendarData,
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="flex h-full flex-col">
|
<div class="flex h-full flex-col">
|
||||||
|
@ -1,22 +1,36 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue';
|
import { ref, nextTick } from 'vue';
|
||||||
import calendarView from './calendarView.vue';
|
import calendarView from './calendarView.vue';
|
||||||
import scheduleView from './scheduleView.vue';
|
import scheduleView from './scheduleView.vue';
|
||||||
const viewMode = ref<'calender' | 'schedule'>('calender');
|
const viewMode = ref<'calender' | 'schedule'>('calender');
|
||||||
// const isCalenderView = ref(true);
|
const calendarViewRef = ref();
|
||||||
|
const scheduleViewRef = ref();
|
||||||
|
|
||||||
function handleViewModeChange(mode: 'calender' | 'schedule') {
|
function handleViewModeChange(mode: 'calender' | 'schedule') {
|
||||||
viewMode.value = mode;
|
viewMode.value = mode;
|
||||||
|
// 切换视图后,需要重新加载对应视图的数据
|
||||||
|
nextTick(() => {
|
||||||
|
if (mode === 'calender') {
|
||||||
|
// 触发日历视图的数据加载
|
||||||
|
calendarViewRef.value?.fetchCalendarData();
|
||||||
|
} else if (mode === 'schedule') {
|
||||||
|
// 触发班表视图的数据加载
|
||||||
|
scheduleViewRef.value?.tableApi?.query();
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="h-full p-4">
|
<div class="h-full p-4">
|
||||||
<div class="h-full bg-white p-4">
|
<div class="h-full bg-white p-4">
|
||||||
<calendarView
|
<calendarView
|
||||||
|
ref="calendarViewRef"
|
||||||
v-show="viewMode === 'calender'"
|
v-show="viewMode === 'calender'"
|
||||||
:viewMode="viewMode"
|
:viewMode="viewMode"
|
||||||
@changeView="handleViewModeChange"
|
@changeView="handleViewModeChange"
|
||||||
/>
|
/>
|
||||||
<scheduleView
|
<scheduleView
|
||||||
|
ref="scheduleViewRef"
|
||||||
v-show="viewMode === 'schedule'"
|
v-show="viewMode === 'schedule'"
|
||||||
:viewMode="viewMode"
|
:viewMode="viewMode"
|
||||||
@changeView="handleViewModeChange"
|
@changeView="handleViewModeChange"
|
||||||
|
@ -82,15 +82,15 @@ function handleAdd() {
|
|||||||
modalApi.open();
|
modalApi.open();
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleEdit(row: Required<ArrangementForm>) {
|
|
||||||
modalApi.setData({ id: row.scheduleId });
|
|
||||||
modalApi.open();
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleDelete(row: Required<ArrangementForm>) {
|
async function handleDelete(row: Required<ArrangementForm>) {
|
||||||
await arrangementRemove(row.scheduleId);
|
await arrangementRemove(row.scheduleId);
|
||||||
await tableApi.query();
|
await tableApi.query();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 暴露方法给父组件调用
|
||||||
|
defineExpose({
|
||||||
|
tableApi,
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="h-full">
|
<div class="h-full">
|
||||||
|
Loading…
Reference in New Issue
Block a user