个人工作台

张含笑

2025-05-09 bec7efb74cb9350dc720fb1ea641f06d7316b4dc

 src/views/wel/components/calendarBox.vue

@@ -1,6 +1,6 @@
<template>
  <div class="calenBox">
    <el-calendar ref="calendar" v-model="leftValue" @change="handleMonthChange(date)">
    <el-calendar ref="calendar" v-model="leftValue">
      <template #date-cell="{ data }">
        <div>
          <div class="date-number">{{ data.day.slice(8, 10) }}</div>
@@ -12,7 +12,7 @@
              :class="event.type"
            >
              <span></span>
              {{ event.content }}
              {{ event.name }}{{ event.value }}
            </div>
          </div>
        </div>
@@ -52,55 +52,45 @@
  () => 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('点击了下个月');
      }
      const newDateStr = newDate.format('YYYY-MM-DD HH:mm:ss');
      const oldDateStr = oldDate.format('YYYY-MM-DD HH:mm:ss');
      // console.log('新日期:', newDateStr, '旧日期:', oldDateStr);
      params.value = {
        start_date: newDate.startOf('month').format('YYYY-MM-DD HH:mm:ss'),
        end_date: newDate.endOf('month').format('YYYY-MM-DD HH:mm:ss'),
      };
     
      // if (newDate.isBefore(oldDate, 'month')) {
      //   console.log('点击了上个月', params.value);
      // } else if (newDate.isAfter(oldDate, 'month')) {
      //   console.log('点击了下个月', params.value);
      // }
       getJobEventBar();
    }
  },
  { deep: true }
  { deep: true, immediate: 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 monthRange = getCurrentMonthRange();
params.value = monthRange;
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);
    events.value = res.data.data
    // console.log('日历', res.data.data);
  });
};
onMounted(() => {
@@ -119,8 +109,8 @@
    margin: 2px 0;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    // overflow: hidden;
    // text-overflow: ellipsis;

    &.work-order {
      // background: #ecf5ff;