From fe5b496feab3ddedf9d621f1d3f00138b022850c Mon Sep 17 00:00:00 2001
From: CD配唱片 <CD配唱片>
Date: 星期日, 27 四月 2025 14:52:33 +0800
Subject: [PATCH] 提交日历视图页面
---
src/views/basicData/calendarView/index.vue | 282 ++++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 241 insertions(+), 41 deletions(-)
diff --git a/src/views/basicData/calendarView/index.vue b/src/views/basicData/calendarView/index.vue
index 1ddb1ae..6bc1757 100644
--- a/src/views/basicData/calendarView/index.vue
+++ b/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/>
- 宸ヤ綔鏃�
- {{ data.isSelected ? '鉁旓笍' : '' }}
- </p>
- </template>
- </el-calendar>
+ <div class="container">
+ <div class="header">
+ <div class="title">{{ nowYear }}骞磠{ nowMonth }}鏈�</div>
+ <!-- <div class="btns">
+ <button @click="toPrevMonth"> < </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();
+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锛屽苟鐢╬adStart琛ラ浂
+ // 鏍煎紡鍖栧勾浠藉拰鏈堜唤涓� "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>
--
Gitblit v1.9.3