<template>
|
<div class="calenBox">
|
<el-calendar ref="calendar" v-model="leftValue" @change="handleMonthChange(date)">
|
<template #date-cell="{ data }">
|
<div>
|
<div class="date-number">{{ data.day.slice(8, 10) }}</div>
|
<div class="events">
|
<div
|
v-for="(event, index) in getEvents(data.day)"
|
:key="index"
|
class="event-item"
|
:class="event.type"
|
>
|
<span></span>
|
{{ event.content }}
|
</div>
|
</div>
|
</div>
|
</template>
|
</el-calendar>
|
</div>
|
</template>
|
|
<script setup>
|
import dayjs from 'dayjs';
|
import { jobEventBar, getCalen } from '@/api/home/index';
|
// 日历事件数据
|
// 格式: 'YYYY-MM-DD': [...events]
|
const events = ref({
|
'2025-05-01': [
|
{ type: 'work-order', content: '工单26' },
|
{ type: 'task', content: '任务26' },
|
],
|
'2025-05-04': [
|
{ type: 'task', content: '任务26' },
|
{ type: 'work-order', content: '工单26' },
|
],
|
});
|
const params = ref({
|
end_date: undefined,
|
start_date: undefined,
|
});
|
|
function getCurrentMonthRange() {
|
return {
|
start_date: dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
|
end_date: dayjs().endOf('month').format('YYYY-MM-DD HH:mm:ss'),
|
};
|
}
|
const leftValue = ref(new Date());
|
watch(
|
() => leftValue.value,
|
(newV, oldV) => {
|
if (newV && dayjs(newV).isSame(dayjs(), 'day')) {
|
console.log('点击了今天');
|
}
|
|
if (newV && oldV) {
|
const newDate = dayjs(newV);
|
const oldDate = dayjs(oldV);
|
|
if (newDate.isBefore(oldDate, 'month')) {
|
console.log('点击了上个月');
|
} else if (newDate.isAfter(oldDate, 'month')) {
|
console.log('点击了下个月');
|
}
|
}
|
},
|
{ deep: true }
|
);
|
const handleMonthChange = date => {
|
console.log('date', date);
|
|
// 获取当前视图月份的第一天
|
const firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
|
|
// 获取当前视图月份的最后一天
|
const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
|
|
// 格式化为YYYY-MM-DD格式（可选）
|
const formatDate = d => d.toISOString().slice(0, 10);
|
|
console.log('首日:', formatDate(firstDay));
|
console.log('末日:', formatDate(lastDay));
|
};
|
// 获取日期数字
|
const getDate = date => {
|
return date.getDate();
|
};
|
// 获取对应日期的事件
|
const getEvents = dateString => {
|
// console.log('000',dateString);
|
|
return events.value[dateString] || [];
|
};
|
const getJobEventBar = () => {
|
const monthRange = getCurrentMonthRange();
|
params.value = monthRange;
|
console.log(monthRange);
|
getCalen(params.value).then(res => {
|
if (res.data.code !== 0) return;
|
// events.value = res.data.data
|
console.log('日历', res.data.data);
|
});
|
};
|
onMounted(() => {
|
getJobEventBar();
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.calenBox {
|
margin-top: 10px;
|
height: 546px;
|
overflow: hidden;
|
.event-item {
|
font-size: 12px;
|
padding: 2px;
|
margin: 2px 0;
|
border-radius: 3px;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
|
&.work-order {
|
// background: #ecf5ff;
|
color: #409eff;
|
span {
|
display: inline-block;
|
width: 7px;
|
height: 7px;
|
background: #1c5cff;
|
border-radius: 50%;
|
margin-right: 2px;
|
}
|
}
|
|
&.task {
|
// background: #f0f9eb;
|
color: #67c23a;
|
span {
|
display: inline-block;
|
width: 7px;
|
height: 7px;
|
background: #029d36;
|
border-radius: 50%;
|
margin-right: 2px;
|
}
|
}
|
}
|
}
|
</style>
|
