提交页面script加上name命名

chengxiangling

2025-05-11 eedfb8fa8d1eeb83554081f5785f832f45a64f3a

 src/views/basicData/calendarView/index.vue

@@ -1,48 +1,248 @@
<template>
  <el-calendar ref="calendar">
    <template #header="{ date }">
      <span>日历视图</span>
      <span>{{ date }}</span>
      <el-button-group>
        <el-button size="small" @click="selectDate('prev-year')">
          Previous Year1
        </el-button>
        <el-button size="small" @click="selectDate('prev-month')">
          Previous Month1
        </el-button>
        <el-button size="small" @click="selectDate('today')">Today</el-button>
        <el-button size="small" @click="selectDate('next-month')">
          Next Month1
        </el-button>
        <el-button size="small" @click="selectDate('next-year')">
          Next Year
        </el-button>
      </el-button-group>
    </template>
    <template #date-cell="{ data }">
      <p :class="data.isSelected ? 'is-selected' : ''">
        {{ data.day.split('-').slice(1).join('-') }} <br/>
        &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; 工作日
        {{ data.isSelected ? '✔️' : '' }}
      </p>
    </template>
  </el-calendar>
  <div class="container">
    <div class="header">
      <div class="title">{{ nowYear }}年{{ nowMonth }}月</div>
      <!-- <div class="btns">
        <button @click="toPrevMonth"> &lt; </button>
        <button @click="toToday"> 今天 </button>
        <button @click="toNextMonth"> > </button>
      </div> -->
      <div>
        <el-date-picker
          v-model="queryParams.monthDays"
          type="month"
          placeholder="选择月份"
          @change="changeDate($event)"
        />
        <el-select
          clearable
          v-model="queryParams.applicableFactory"
          style="width: 160px; margin-left: 20px"
          placeholder="请输入适用工厂"
          @change="changePlant($event)"
        >
          <el-option
            v-for="plant in plantList"
            :key="plant.id"
            :label="plant.plantName"
            :value="plant.plantCode"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="calendar">
      <div class="itemWeeks" v-for="item in weeks" :key="item">
        {{ "周" + item }}
      </div>
      <!-- <div
        class="item color_grey"
        v-for="item in prefixView"
        :key="item"
        @click="toPrevMonth(item.day)"
      >
        {{ item.day.split("-")[2] }} {{ item.typeHoliday }}
      </div> -->
      <!--         :class="{
          today:
            realDate.year === nowYear &&
            realDate.month === nowMonth &&
            realDate.date === item,
        }" -->
      <div
        v-for="item in dateCalendarView"
        :key="item"
        class="item"
        :class="{
          'bg_success': item.type === '休息日',
          'bg_primary': item.type === '工作日',
          'bg_warn': item.type === '节假日',
        }"
      >
        <div
          class="text_cell"
          :class="{
            color_grey:
              item.date.substring(0, 7) !==
              dateStr(queryParams.monthDays).substring(0, 7),
          }"
        >
          {{ item.date.split("-")[2] }}
        </div>
        <div class="text_cell_right">{{ item.type }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
const calendar = ref()
const selectDate = (val) => {
  if (!calendar.value) return
  calendar.value.selectDate(val)
}
const isToday = (date) => {
  const today = new Date();
  return date.getDate() === today.getDate() && 
         date.getMonth() === today.getMonth() && 
         date.getFullYear() === today.getFullYear();

<script setup name="CalendarView">
import { calendarView } from "@/api/basicData/calendar";
import { listAll_plant } from "@/api/basicData/plant";
const plantList = ref([]);
// 今天的年月日
const realDate = {
  year: new Date().getFullYear(),
  month: (new Date().getMonth() + 1).toString().padStart(2, "0"),
  date: new Date().getDate(),
};
const queryParams = ref({
  monthDays: `${realDate.year}-${realDate.month}`,
  applicableFactory: "沈阳",
  applicableFactoryCode: "FORTUNE",
});
const weeks = ["日", "一", "二", "三", "四", "五", "六"];
const now = ref(new Date());
const dateCalendarView = ref([]);
const formatDateCalendar = (day) => {
  dateCalendarView.value.map((item) => {
    console.log(day.day, item.day);
    if (day.day === item.day) {
      return {
        ...day,
        ...item,
      };
    }
  });
};
// 本月1号是周几
// const firstDateDay = computed(() => {
//   return new Date(now.value.getFullYear(), now.value.getMonth(), 1).getDay();
// });
// // 本月的总天数
// const days = computed(() => {
//   return new Date(
//     now.value.getFullYear(),
//     now.value.getMonth() + 1,
//     0
//   ).getDate();
// });
// 实时计算当前页面显示的年份
const nowYear = computed(() => {
  return dateStr(queryParams.value.monthDays).split("-")[0];
});
// 实时计算当前页面显示的月份
const nowMonth = computed(() => {
  return dateStr(queryParams.value.monthDays).split("-")[1];
});

const toPrevMonth = (date) => {
  now.value = date
    ? new Date(date.split("-")[0], parseInt(date.split("-")[1]) - 1, 1)
    : new Date(now.value.getFullYear(), now.value.getMonth() - 1, 1);
};
const toNextMonth = (date) => {
  now.value = date
    ? new Date(date.split("-")[0], parseInt(date.split("-")[1]) - 1, 1)
    : new Date(now.value.getFullYear(), now.value.getMonth() + 1, 1);
};
// 回到今天
const toToday = () => {
  now.value = new Date();
  console.log(now.value, "now.valuenow.value");
};
function dateStr(dateTimeString) {
  const dateTime = new Date(dateTimeString);
  // 提取年份和月份
  const year = dateTime.getFullYear();
  const month = String(dateTime.getMonth() + 1).padStart(2, "0"); // 月份从0开始，所以需要加1，并用padStart补零
  // 格式化年份和月份为 "yyyy-mm" 格式的字符串
  return `${year}-${month}-01`;
}
async function changePlant(plant) {
  queryParams.value.applicableFactoryCode = plant;
  const res = await calendarView({
    effectiveDate: dateStr(queryParams.value.monthDays),
    applicableFactory: plant,
  });
  dateCalendarView.value = res.data;
}
async function changeDate(e) {
  const res = await calendarView({
    effectiveDate: dateStr(queryParams.value.monthDays),
    applicableFactory: queryParams.value.applicableFactoryCode,
  });
  dateCalendarView.value = res.data;
}
onMounted(async () => {
  const response = await listAll_plant({});
  plantList.value = response.data;
  const res = await calendarView({
    effectiveDate: `${queryParams.value.monthDays}-01`,
    applicableFactory: "FORTUNE",
  });
  dateCalendarView.value = res.data;
});
</script>
<style lang="scss" scoped>
.is-selected {
  color: #1989fa;

<style lang="scss">
.container {
  .header {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    .title {
      font-size: 26px;
      font-weight: 600;
    }
    .btns {
      button {
        height: 26px;
        border-radius: 0;
        margin: 0 2px;
        cursor: pointer;
        border-width: 1px;
      }
    }
  }
  .calendar {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    .itemWeeks {
      width: calc(100% / 7);
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-top: 1px solid #ccc;
      border-right: 1px solid #ccc;
    }
    .item {
      width: calc(100% / 7);
      height: 92px;
      text-align: center;
      border-top: 1px solid #ccc;
      border-right: 1px solid #ccc;
      & .color_grey {
        color: #999;
      }
      .text_cell_right {
        text-align: right;
        margin-right:20px;
        margin-top:30px;
      }
      .text_cell {
        padding-top: 10px;
      }
    }
    .today {
      color: blue;
      font-weight: 600;
    }
  }
}
.bg_success {
  background: #f0f9eb;
  color: #67c23a;
}
.bg_warn {
  background: #fdf6ec;
  color: #e6a23c;
}
.bg_primary {
  background: #d8ebff;
  color: #409EFF;
}
</style>