feat: 名称修改

罗广辉

2025-10-11 02409bfbe15f22fc3b5dccadabfd860a660a49d9

 src/views/wel/components/calendarBox.vue

@@ -1,6 +1,9 @@
<template>
  <div class="calenBox">
    <el-calendar ref="calendar" v-model="currentMonth">
    <el-calendar ref="calendar" v-model="currentMonth"  :class="{
    'five-rows': weeksNeeded === 5,
    'six-rows': weeksNeeded === 6
  }">
      <template #header="{ date }">
        <div>
          <img :src="caleft" alt="" @click="selectDate('prev-month')" />
@@ -37,7 +40,6 @@
    </el-calendar>
  </div>
</template>

<script setup>
import dayjs from 'dayjs';
import { ref, watch, onMounted, nextTick } from 'vue';
@@ -47,7 +49,6 @@
import ev2 from '@/assets/images/workbench/ev2.svg';
import caleft from '@/assets/images/workbench/caleft.png';
import caright from '@/assets/images/workbench/caright.png';

const router = useRouter();
const calendar = ref();
const events = ref({});
@@ -57,14 +58,12 @@
  end_date: undefined,
  start_date: undefined,
});
const formatDate = (date, format = 'YYYY年M月') => {
  return dayjs(date).format(format);
};

const eventIcons = ref({
  'work-order': ev1,
  task: ev2,
});
// 初始化月份范围

const monthRange = getCurrentMonthRange();
params.value = monthRange;
// 检查日期是否是当前月份
@@ -73,25 +72,20 @@
};
// 处理月份选择器变化
const handleMonthChange = val => {
  const selectedDate = new Date(val);
  const now = new Date();
  const selectedMonth = new Date(val);
  currentMonth.value = selectedMonth;

  // 如果是当前月份，则选中当天；否则不选中
  if (
    selectedDate.getFullYear() === now.getFullYear() &&
    selectedDate.getMonth() === now.getMonth()
  ) {
    currentMonth.value = selectedDate;
  if (isCurrentMonth(selectedMonth)) {
    selectedDate.value = new Date();
  } else {
    currentMonth.value = selectedDate;
    // 清除选中状态
    nextTick(() => {
      const selectedCells = document.querySelectorAll('.el-calendar-table td.is-selected');
      selectedCells.forEach(cell => {
        cell.classList.remove('is-selected');
      });
    });
    selectedDate.value = null;
  }

  // 强制更新日历视图
  nextTick(() => {
    updateCalendarSelection();
  });
};

// 获取日历数据
@@ -130,17 +124,34 @@
    currentMonth.value = dayjs(currentMonth.value).add(1, 'month').toDate();
  }

  // 如果是当前月份，则选中当天；否则不选中
  if (isCurrentMonth(currentMonth.value)) {
    selectedDate.value = new Date();
  } else {
    selectedDate.value = null;
  }

  await nextTick();
  // 强制清除所有选中状态
  updateCalendarSelection();
};
const updateCalendarSelection = () => {
  // 清除所有选中状态
  const selectedCells = document.querySelectorAll('.el-calendar-table td.is-selected');
  selectedCells.forEach(cell => {
    cell.classList.remove('is-selected');
  });

  // 如果是当前月份才设置选中
  if (isCurrentMonth(currentMonth.value)) {
    selectedDate.value = new Date();
    
  // 如果是当前月份，设置当前日为选中状态
  if (isCurrentMonth(currentMonth.value) && selectedDate.value) {
    const currentDay = dayjs(selectedDate.value).date();
    const calendarCells = document.querySelectorAll('.el-calendar-table td');

    calendarCells.forEach(cell => {
      const day = parseInt(cell.querySelector('.date-number').textContent);
      if (day === currentDay) {
        cell.classList.add('is-selected');
      }
    });
  }
};

@@ -153,13 +164,15 @@
      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 (isCurrentMonth(newMonth)) {
      selectedDate.value = new Date();
    } else {
      selectedDate.value = null;
    }
    nextTick(() => {
      updateCalendarSelection();
    });

    getJobEventBar();
  },
@@ -193,6 +206,20 @@
  }
};

const weeksNeeded = computed(() => {
  const date = dayjs(currentMonth.value);
  const firstDay = date.startOf('month').day(); // 0-6 (周日到周六)
  const days = date.daysInMonth();

  // 强制 2025 年 6 月显示六行
   //if (date.year() === 2025 && date.month() === 5) {
   //  return 6;
  // }

  // 其他月份按原逻辑计算
  return Math.ceil((firstDay + days) / 7);
})
const isSixRows = computed(() => weeksNeeded.value > 5);
onMounted(() => {
  // 初始化时如果是当前月份，选中当天；否则不选中
  if (isCurrentMonth(currentMonth.value)) {
@@ -200,19 +227,24 @@
  } else {
    selectedDate.value = null;
  }

  nextTick(() => {
    updateCalendarSelection();
  });

  getJobEventBar();
});
</script>

<style lang="scss">
.calenBox {
  height: pxToVh(660);
  height: pxToVh(670);
  // 隐藏按钮组中间按钮
  .el-button-group > .el-button:not(:first-child):not(:last-child) {
    display: none;
  }
  .el-calendar__body {
    padding-top: 0;
    padding-top: 0 !important;
  }
  .date-number {
    font-size: 13px !important;
@@ -247,7 +279,7 @@
  }
  .el-calendar-table .el-calendar-day {
    box-sizing: border-box;
    padding: 0.8rem;
    padding: 0.4rem 0.8rem 0.8rem 0.8rem;
    background: #f5f7fa;
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #efefef;
@@ -285,7 +317,7 @@
<style lang="scss" scoped>
.calenBox {
  margin-top: 10px;
  height: pxToVh(622);
  height: pxToVh(632);
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
@@ -299,12 +331,16 @@
      font-size: 14px;
      color: #363636;
    }
    .el-calendar-table .el-calendar-day {
      height: pxToVh(85) !important;
    }

 &.five-rows .el-calendar-table .el-calendar-day {
    height: pxToVh(92) !important;
  }

  &.six-rows .el-calendar-table .el-calendar-day {
    height: pxToVh(78) !important;
  }
    // 选中日期样式
    .el-calendar-table td.is-selected {
    .el-calendar-table td.is-selected.is-today {
      .el-calendar-day {
        outline: 2px solid #409eff;
        outline-offset: -2px;
@@ -318,6 +354,7 @@
    .el-calendar-table td.is-selected {
      background-color: transparent;
    }

  }

  .event-item {
@@ -348,7 +385,7 @@

      span {
        font-weight: 600;
        font-size: 18px;
        font-size: 17px;
        color: #029d36;
        margin-left: 2px;
      }