排产计划生成页面增加物料、计划生产数量筛选输入框；修复日历组件展示超出错位问题

cuilei

昨天 7bb4635dff502d78ff82768c1e6f68e88b2c291b

 src/views/mes/modules/MesProductionWeekCalendar.vue

@@ -1,11 +1,11 @@
<!-- src/views/mes/modules/MesProductionWeekCalendar.vue -->
<template>
  <div class="week-calendar">
    <div class="calendar-header">
      <a-button icon="left" @click="prevWeek" size="small" />
    <div v-if="showHeader" class="calendar-header">
      <a-button v-if="showNavigation" icon="left" @click="prevWeek" size="small" />
      <span class="current-week-range">{{ weekRangeText }}</span>
      <a-button icon="right" @click="nextWeek" size="small" />
      <a-button @click="goToToday" size="small" style="margin-left: 8px">今天</a-button>
      <a-button v-if="showNavigation" icon="right" @click="nextWeek" size="small" />
      <a-button v-if="showTodayButton" @click="goToToday" size="small" style="margin-left: 8px">今天</a-button>
    </div>

    <div class="calendar-grid">
@@ -14,11 +14,16 @@
          v-for="(day, index) in weekDays"
          :key="index"
          class="header-cell"
          :class="{ 'first-day-highlight': showFirstDayHighlight && index === 0 }"
        >
          <div class="day-name">{{ day.format('ddd') }}</div>
          <div
            class="day-number"
            :class="{ today: isToday(day), selected: isSelected(day) }"
            :class="{
              'highlight': showTodayHighlight && isToday(day),
              today: isToday(day),
              selected: isSelected(day)
            }"
            @click="selectDay(day)"
          >
            {{ day.date() }}
@@ -31,10 +36,15 @@
          v-for="(day, index) in weekDays"
          :key="index"
          class="day-cell"
          :class="{ today: isToday(day), selected: isSelected(day) }"
          :class="{
            'highlight': showTodayHighlight && isToday(day),
            'first-day-highlight': showFirstDayHighlight && index === 0,
            today: isToday(day),
            selected: isSelected(day)
          }"
          @click="selectDay(day)"
        >
          <div class="cell-content">
          <div class="cell-content" style="height: 100%; overflow: hidden">
            <!-- 插槽用于渲染日期内容 -->
            <slot
              name="dateCell"
@@ -64,6 +74,31 @@
    startDate: {
      type: [Object, String, Date],
      default: null
    },
    // 是否显示头部导航
    showHeader: {
      type: Boolean,
      default: true
    },
    // 是否显示导航按钮（前后翻页）
    showNavigation: {
      type: Boolean,
      default: true
    },
    // 是否显示今天按钮
    showTodayButton: {
      type: Boolean,
      default: true
    },
    // 是否高亮当天
    showTodayHighlight: {
      type: Boolean,
      default: true
    },
    // 是否高亮本周第一天
    showFirstDayHighlight: {
      type: Boolean,
      default: true
    }
  },
  data() {
@@ -71,7 +106,7 @@
      // 当前显示的起始日期
      currentStartDate: this.startDate ? moment(this.startDate) : moment(),
      // 选中的日期
      selectedDate: this.startDate ? moment(this.startDate) : moment()
      selectedDate: null
    }
  },
  computed: {
@@ -173,10 +208,17 @@
  text-align: center;
  padding: 8px 0;
  border-right: 1px solid #e8e8e8;
  min-width: 0;
  flex-basis: 100px;
  box-sizing: border-box;
}

.header-cell:last-child {
  border-right: none;
}

.header-cell.first-day-highlight {
  background-color: #ffffff; /* 重置第一天的背景色 */
}

.day-name {
@@ -196,7 +238,7 @@
  border-radius: 50%;
}

.day-number.today {
.day-number.today.highlight {
  background-color: #1890ff;
  color: white;
}
@@ -216,16 +258,24 @@
  border-right: 1px solid #e8e8e8;
  cursor: pointer;
  padding: 4px;
  min-width: 0;
  flex-basis: 100px;
  box-sizing: border-box;
}

.day-cell:last-child {
  border-right: none;
}

.day-cell.today {
.day-cell.today.highlight {
  background-color: #e6f7ff;
}

.day-cell.first-day-highlight {
  background-color: transparent !important;
  border-left: none !important;
}

.day-cell.selected {
  background-color: #bae7ff;
}