提交日历视图页面

CD配唱片

2025-04-27 fe5b496feab3ddedf9d621f1d3f00138b022850c

提交日历视图页面

 src/api/basicData/calendar.js

@@ -51,3 +51,11 @@
    params: query
  })
}

export function calendarView(data) {
  return request({
    url: '/aps/calendar/selectCalendarView',
    method: 'post',
    data: data
  })
}

 src/assets/styles/index.scss

@@ -178,3 +178,11 @@
    margin-bottom: 10px;
  }
}
p {
  display: block;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  unicode-bidi: isolate;
}

 src/views/basicData/calendarView/index copy.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,217 @@
<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('-') -->
        {{ data.day.split('-')[2] }} <br/>
        &nbsp;{{formatDateCalendar(data).typeHoliday}}
        <!-- {{ data.isSelected ? '✔️' : '' }} -->
      </p>
    </template>
  </el-calendar>
</template>
<script setup>
import { onMounted } from "vue";

const calendar = ref();
const dateCalendarView = ref([
  {
    day:"2025-03-30",
    typeHoliday:"节假日"
  },
  {
    day:"2025-03-31",
    typeHoliday:"工作日"
  },
  {
    day:"2025-04-01",
    typeHoliday:"节假日"
  },
  {
    day:"2025-04-02",
    typeHoliday:"工作日"
  },
  {
    day:"2025-04-02",
    typeHoliday:"工作日"
  },
  {
    day:"2025-04-03",
    typeHoliday:"工作日"
  },
  {
    day:"2025-04-04",
    typeHoliday:"工作日"
  },
  {
    day:"2025-04-04",
    typeHoliday:"工作日"
  },
  {
    day:"2025-04-05",
    typeHoliday:"工作日"
  },
  {
    day:"2025-04-06",
    typeHoliday:"节假日"
  },
  {
    day:"2025-04-07",
    typeHoliday:"节假日"
  },
  {
    day:"2025-04-08",
    typeHoliday:"工作日"
  },
  {
    day:"2025-04-09",
    typeHoliday:"工作日"
  },
  {
    day:"2025-04-10",
    typeHoliday:"工作日"
  },
  {
    day:"2025-04-11",
    typeHoliday:"工作日"
  },
  {
    day:"2025-04-12",
    typeHoliday:"工作日"
  },
  {
    day:"2025-04-13",
    typeHoliday:"工作日"
  },
  {
    day:"2025-04-14",
    typeHoliday:"节假日"
  },
  {
    day:"2025-04-15",
    typeHoliday:"工作日"
  },
  {
    day:"2025-04-16",
    typeHoliday:"工作日"
  },
  {
    day:"2025-04-17",
    typeHoliday:"工作日"
  },
  {
    day:"2025-04-18",
    typeHoliday:"工作日"
  },
  {
    day:"2025-04-19",
    typeHoliday:"工作日"
  },
  {
    day:"2025-04-20",
    typeHoliday:"工作日"
  },
  {
    day:"2025-04-21",
    typeHoliday:"工作日"
  },
  {
    day:"2025-04-22",
    typeHoliday:"工作日"
  },
  {
    day:"2025-04-23",
    typeHoliday:"工作日"
  },
  {
    day:"2025-04-26",
    typeHoliday:"工作日"
  },
  {
    day:"2025-04-27",
    typeHoliday:"工作日"
  },
  {
    day:"2025-04-28",
    typeHoliday:"工作日"
  },
  {
    day:"2025-04-29",
    typeHoliday:"工作日"
  },
  {
    day:"2025-04-30",
    typeHoliday:"工作日"
  },
  {
    day:"2025-05-01",
    typeHoliday:"工作日"
  },
  {
    day:"2025-05-02",
    typeHoliday:"工作日"
  },
  {
    day:"2025-05-03",
    typeHoliday:"工作日"
  },
])
const formatDateCalendar = (day)=>{
  dateCalendarView.value.map(item=>{
    console.log(day.day,item.day)
    if(day.day===item.day){
      return {
        ...day,
        ...item
      }
    }
  })
}
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>
<style lang="scss">
.el-calendar-table .el-calendar-day{
  padding:0;
}
</style>
<style lang="scss" scoped>
.is-selected {
  color: #1989fa;
  background:greenyellow;
  width:100%;
  height:100%;
  &p {
    display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
}
}
</style>

 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>
  <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>
    <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>
</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();
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: 80px;
      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:20px;
      }
      .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>