From f2e9fc9546efb031de80315ed0f6d372eae5a2cc Mon Sep 17 00:00:00 2001
From: 21819 <tomorasd@foxmail.com>
Date: Wed, 24 Jan 2024 14:38:35 +0800
Subject: [PATCH] =?UTF-8?q?=E8=8A=82=E5=81=87=E6=97=A5=E4=BF=A1=E6=81=AF?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=AE=8C=E5=96=84=EF=BC=8C=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HolidayList.vue | 668 ++++++++++-----------------------
 1 file changed, 203 insertions(+), 465 deletions(-)

diff --git a/src/components/HolidayList.vue b/src/components/HolidayList.vue
index c64e2e0..0bebcb8 100644
--- a/src/components/HolidayList.vue
+++ b/src/components/HolidayList.vue
@@ -1,482 +1,220 @@
 <template>
-    <div style="height:1360px;" v-loading="loading" element-loading-text="正在同步数据，请稍候..."
-        element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
-        <el-col :span="8" class="el-col">
-            <el-select v-model="search" placeholder="请选择年份">
-                <el-option v-for="item in options" :key="item.search" :label="item.label" :value="item.search">
-                </el-option>
-            </el-select>
-        </el-col>
-        <el-button type="text" @click="SearchHoliday(search)">
-            <i></i>查询节假日
-        </el-button>
-        <el-button type="text" @click="Save(search)" style="margin-left: 200px;">
-            <i></i>同步节假日
-        </el-button>
-        <br />
-        <span id="tip"></span>
-        <div class="calendar_1">
-            <el-calendar ref="cal_1" v-model="change1">
-                <template #dateCell="{ date, data }">
-                    {{ data.day.split('-').slice(2).join('-') }}
-                    <div style="width:100%;" v-for="item in scheduleData1" :key="item">
-                        <el-tag type="danger"
-                            v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1">
-                            {{ item.content }}
-                        </el-tag>
-                    </div>
-                </template>
-            </el-calendar>
-        </div>
-        <div class="calendar_2">
-            <el-calendar v-model="change2">
-                <template #dateCell="{ date, data }">
-                    {{ data.day.split('-').slice(2).join('-') }}
-                    <div style="width:100%;" v-for="item in scheduleData2" :key="item">
-                        <el-tag type="danger"
-                            v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1">
-                            {{ item.content }}
-                        </el-tag>
-                    </div>
-                </template>
-            </el-calendar>
-        </div>
-        <div class="calendar_3">
-            <el-calendar v-model="change3">
-                <template #dateCell="{ date, data }">
-                    {{ data.day.split('-').slice(2).join('-') }}
-                    <div style="width:100%;" v-for="item in scheduleData3" :key="item">
-                        <el-tag type="danger"
-                            v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1">
-                            {{ item.content }}
-                        </el-tag>
-                    </div>
-                </template>
-            </el-calendar>
-        </div>
-        <div class="calendar_4">
-            <el-calendar v-model="change4">
-                <template #dateCell="{ date, data }">
-                    {{ data.day.split('-').slice(2).join('-') }}
-                    <div style="width:100%;" v-for="item in scheduleData4" :key="item">
-                        <el-tag type="danger"
-                            v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1">
-                            {{ item.content }}
-                        </el-tag>
-                    </div>
-                </template>
-            </el-calendar>
-        </div>
-        <div class="calendar_5">
-            <el-calendar v-model="change5">
-                <template #dateCell="{ date, data }">
-                    {{ data.day.split('-').slice(2).join('-') }}
-                    <div style="width:100%;" v-for="item in scheduleData5" :key="item">
-                        <el-tag type="danger"
-                            v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1">
-                            {{ item.content }}
-                        </el-tag>
-                    </div>
-                </template>
-            </el-calendar>
-        </div>
-        <div class="calendar_6">
-            <el-calendar v-model="change6">
-                <template #dateCell="{ date, data }">
-                    {{ data.day.split('-').slice(2).join('-') }}
-                    <div style="width:100%;" v-for="item in scheduleData6" :key="item">
-                        <el-tag type="danger"
-                            v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1">
-                            {{ item.content }}
-                        </el-tag>
-                    </div>
-                </template>
-            </el-calendar>
-        </div>
-        <div class="calendar_7">
-            <el-calendar v-model="change7">
-                <template #dateCell="{ date, data }">
-                    {{ data.day.split('-').slice(2).join('-') }}
-                    <div style="width:100%;" v-for="item in scheduleData7" :key="item">
-                        <el-tag type="danger"
-                            v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1">
-                            {{ item.content }}
-                        </el-tag>
-                    </div>
-                </template>
-            </el-calendar>
-        </div>
-        <div class="calendar_8">
-            <el-calendar v-model="change8">
-                <template #dateCell="{ date, data }">
-                    {{ data.day.split('-').slice(2).join('-') }}
-                    <div style="width:100%;" v-for="item in scheduleData8" :key="item">
-                        <el-tag type="danger"
-                            v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1">
-                            {{ item.content }}
-                        </el-tag>
-                    </div>
-                </template>
-            </el-calendar>
-        </div>
-        <div class="calendar_9">
-            <el-calendar v-model="change9">
-                <template #dateCell="{ date, data }">
-                    {{ data.day.split('-').slice(2).join('-') }}
-                    <div style="width:100%;" v-for="item in scheduleData9" :key="item">
-                        <el-tag type="danger"
-                            v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1">
-                            {{ item.content }}
-                        </el-tag>
-                    </div>
-                </template>
-            </el-calendar>
-        </div>
-        <div class="calendar_10">
-            <el-calendar v-model="change10">
-                <template #dateCell="{ date, data }">
-                    {{ data.day.split('-').slice(2).join('-') }}
-                    <div style="width:100%;" v-for="item in scheduleData10" :key="item">
-                        <el-tag type="danger"
-                            v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1">
-                            {{ item.content }}
-                        </el-tag>
-                    </div>
-                </template>
-            </el-calendar>
-        </div>
-        <div class="calendar_11">
-            <el-calendar v-model="change11">
-                <template #dateCell="{ date, data }">
-                    {{ data.day.split('-').slice(2).join('-') }}
-                    <div style="width:100%;" v-for="item in scheduleData11" :key="item">
-                        <el-tag type="danger"
-                            v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1">
-                            {{ item.content }}
-                        </el-tag>
-                    </div>
-                </template>
-            </el-calendar>
-        </div>
-        <div class="calendar_12">
-            <el-calendar v-model="change12">
-                <template #dateCell="{ date, data }">
-                    {{ data.day.split('-').slice(2).join('-') }}
-                    <div style="width:100%;" v-for="item in scheduleData12" :key="item">
-                        <el-tag type="danger"
-                            v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-')) != -1">
-                            {{ item.content }}
-                        </el-tag>
-                    </div>
-                </template>
-            </el-calendar>
-        </div>
-
+    <div class="app-container" v-loading="loading">
+        <el-form :inline="true" style="display: flex; justify-content: center;margin-top: 10px;margin-right: 70px;">
+            <el-form-item label="请选择年份">
+                <el-date-picker type="year" v-model="currenYear" placeholder="请选择年份" value-format="YYYY"></el-date-picker>
+            </el-form-item>
+            <el-button type="primary" @click="searchHoliday">查询节假日</el-button>
+            <el-button type="primary" @click="refreshHoliday">同步节假日</el-button>
+        </el-form>
+        <el-row>
+            <el-col v-for="(item, index) in   defaultCals  " :key="item.cal" :span="7"
+                style="margin-right: 10px;margin-left: 50px;">
+                <el-card shadow="hover" style="margin-bottom: 20px;">
+                    <el-calendar v-model="item.cal" class="holiday" style="pointer-events:none">
+                        <!-- <el-calendar v-model="item.cal" class="holiday"> -->
+                        <template #date-cell="{ data }">
+                            <div class="holiday-cell" v-show="data.type === 'current-month'" :id="index + '-' + data.day"
+                                :class="{ 'is-holiday': ifHoliday(data.day) }, { 'is-adjust': ifAdjustDay(data.day) }">
+                                {{ data.day.split('-')[2] }}
+                                <span class="holiday-text">{{ ifHoliday(data.day) ? '休' : '' }}</span>
+                                <span class="adjust-text">{{ ifAdjustDay(data.day) ? '班' : '' }}</span>
+                                <span class="content-text">{{ dayContent(data.day) }}</span>
+                            </div>
+                        </template>
+                    </el-calendar>
+                </el-card>
+            </el-col>
+        </el-row>
     </div>
 </template>
-<script>
-// import {getholiday} from "@/api/holiday"
-import { getholiday } from '@/api/holiday'
-import { showholiday } from '@/api/holiday'
-import { timePanelSharedProps } from 'element-plus/es/components/time-picker/src/props/shared'
-import { saveholiday } from '@/api/holiday'
-export default {
-
-    data() {
-        return {
-            loading: false,
-            options: [{
-                search: new Date().getFullYear(),
-                label: new Date().getFullYear(),
-            }, {
-                search: new Date().getFullYear() + 1,
-                label: new Date().getFullYear() + 1
-            }, {
-                search: new Date().getFullYear() + 2,
-                label: new Date().getFullYear() + 2
-            }, {
-                search: new Date().getFullYear() + 3,
-                label: new Date().getFullYear() + 3
-            },],
-            scheduleData1: [],
-            scheduleData2: [],
-            scheduleData3: [],
-            scheduleData4: [],
-            scheduleData5: [],
-            scheduleData6: [],
-            scheduleData7: [],
-            scheduleData8: [],
-            scheduleData9: [],
-            scheduleData10: [],
-            scheduleData11: [],
-            scheduleData12: [],
-            search: new Date().getFullYear(),
-            change1: new Date(new Date().getFullYear() + '-1'),
-            change2: new Date(new Date().getFullYear() + '-2'),
-            change3: new Date(new Date().getFullYear() + '-3'),
-            change4: new Date(new Date().getFullYear() + '-4'),
-            change5: new Date(new Date().getFullYear() + '-5'),
-            change6: new Date(new Date().getFullYear() + '-6'),
-            change7: new Date(new Date().getFullYear() + '-7'),
-            change8: new Date(new Date().getFullYear() + '-8'),
-            change9: new Date(new Date().getFullYear() + '-9'),
-            change10: new Date(new Date().getFullYear() + '-10'),
-            change11: new Date(new Date().getFullYear() + '-11'),
-            change12: new Date(new Date().getFullYear() + '-12'),
-
-        }
-    },
-    mounted() {
-
-        getholiday(new Date().getFullYear()).then(res => {
-            console.log(res.data.mouth01);
-            this.scheduleData1 = res.data.mouth01;
-            this.scheduleData2 = res.data.mouth02;
-            this.scheduleData3 = res.data.mouth03;
-            this.scheduleData4 = res.data.mouth04;
-            this.scheduleData5 = res.data.mouth05;
-            this.scheduleData6 = res.data.mouth06;
-            this.scheduleData7 = res.data.mouth07;
-            this.scheduleData8 = res.data.mouth08;
-            this.scheduleData9 = res.data.mouth09;
-            this.scheduleData10 = res.data.mouth10;
-            this.scheduleData11 = res.data.mouth11;
-            this.scheduleData12 = res.data.mouth12;
-        })
-
-    },
-    methods: {
-        SearchHoliday(search) {
-            this.scheduleData1 = [], this.scheduleData2 = [], this.scheduleData3 = [], this.scheduleData4 = [], this.scheduleData5 = [], this.scheduleData6 = [],
-                this.scheduleData7 = [], this.scheduleData8 = [], this.scheduleData9 = [], this.scheduleData10 = [], this.scheduleData11 = [], this.scheduleData12 = [];
-            if (search == "") {
-                search = new Date().getFullYear();
-            } else if (search != new Date().getFullYear()) {
-                this.ShowBaseHoliday(search);
-                console.log("年份" + search)
-                alert("暂无该年份节假日数据");
-                // tip.value="暂无该年份节假日数据";
-
-                return;
-            }
-            this.ShowBaseHoliday(search);
-            this.getHolidayList(search);
-        },
-        getHolidayList(search) {
-            getholiday(search).then(res => {
-
-                this.scheduleData1 = res.data.mouth01;
-                this.scheduleData2 = res.data.mouth02;
-                this.scheduleData3 = res.data.mouth03;
-                this.scheduleData4 = res.data.mouth04;
-                this.scheduleData5 = res.data.mouth05;
-                this.scheduleData6 = res.data.mouth06;
-                this.scheduleData7 = res.data.mouth07;
-                this.scheduleData8 = res.data.mouth08;
-                this.scheduleData9 = res.data.mouth09;
-                this.scheduleData10 = res.data.mouth10;
-                this.scheduleData11 = res.data.mouth11;
-                this.scheduleData12 = res.data.mouth12;
-            })
-        },
-        ShowBaseHoliday(search) {
-            this.change1 = new Date(search + '-1')
-            this.change2 = new Date(search + '-2')
-            this.change3 = new Date(search + '-3')
-            this.change4 = new Date(search + '-4')
-            this.change5 = new Date(search + '-5')
-            this.change6 = new Date(search + '-6')
-            this.change7 = new Date(search + '-7')
-            this.change8 = new Date(search + '-8')
-            this.change9 = new Date(search + '-9')
-            this.change10 = new Date(search + '-10')
-            this.change11 = new Date(search + '-11')
-            this.change12 = new Date(search + '-12')
-        },
-        Save(search) {
-            if (search != new Date().getFullYear()) {
-                this.ShowBaseHoliday(search);
-                console.log("年份" + search)
-                alert("暂无该年份节假日数据");
-                return;
-            }
-            //   if(confirm('此操作将同步节假日数据, 是否继续?')){
-            //     this.loading=true,
-            //     saveholiday(search).then(res => {
-            //    this.loading=false,
-            //    alert("同步成功");
-            //    })
-            //   }else{
-            //     alert("操作取消");
-            //   }
-            this.$confirm('此操作将同步节假日数据, 是否继续?', '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning',
-                center: true
-            }).then(() => {
-                this.loading = true,
-                    saveholiday(search).then(res => {
-                        this.loading = false,
-                            alert("同步成功");
-                        this.ShowBaseHoliday(search);
-                        this.getHolidayList(search);
-                    })
-                // this.$message({
-                //   type: 'success',
-                //   message: '删除成功!'
-                // });
-            }).catch(() => {
-                this.$message({
-                    // type: 'info',
-                    // message: '已取消删除'
-                });
-            });
 
-        }
-    },
-}
+<script setup>
+import { ref, onMounted, onBeforeMount } from 'vue';
+import { ElMessage } from 'element-plus'
+import axios from 'axios';
+
+const currenYear = ref('');
+const loading = ref(true);
+const defaultCals = ref([]);
+const dayType = ref({
+    date: '',
+    type: ''
+});
+
+const getDateData = (date) => {
+    axios.get('/api/outer/holiday/show-holiday').then(res => {
+        dayType.value = res.data;
+        loading.value = false;
+        console.log(dayType.value);
+    }).catch(err => {
+        console.log(err);
+    });
+}
+
+onBeforeMount(() => {
+    getDateData();
+})
+
+
+onMounted(() => {
+    let nowYear = new Date().getFullYear();
+    initCalendar(nowYear);
+    loading.value = false;
+});
+
+const initCalendar = (year) => {
+    const months = [];
+    for (let i = 0; i < 12; i++)
+        months.push({ cal: new Date(year, i, 1) });
+    defaultCals.value = months;
+    // console.log(defaultCals.value);
+};
+
+const searchHoliday = () => {
+    loading.value = true;
+    let nowYear = new Date().getFullYear();
+    console.log(currenYear.value + '==' + nowYear);
+    if (currenYear.value === String(nowYear)) {
+        getDateData();
+        setTimeout(() => {
+            loading.value = false;
+        }, 1000);
+    } else {
+        ElMessage.info('其他年份尚未拥有数据')
+        loading.value = false;
+    }
+};
+
+
+const refreshHoliday = () => {
+    loading.value = true;
+    let nowYear = new Date().getFullYear();
+    console.log(currenYear.value + '==' + nowYear);
+    if (currenYear.value === String(nowYear)) {
+        getDateData();
+        setTimeout(() => {
+            loading.value = false;
+        }, 1000);
+    } else {
+        ElMessage.info('其他年份尚未拥有数据')
+        loading.value = false;
+    }
+};
+
+const ifHoliday = (day) => {
+    // console.log('Comparing dayType.value.date:', dayType.value.date, 'with day:', day);
+    for (let i = 0; i < dayType.value.length; i++)
+        if (dayType.value[i].date === day && dayType.value[i].holidayFlag === 'Y')
+            return true;
+    return false;
+};
+
+const ifAdjustDay = (day) => {
+    // console.log('Comparing dayType.value.date:', dayType.value.date, 'with day:', day);
+    for (let i = 0; i < dayType.value.length; i++)
+        if (dayType.value[i].date === day && dayType.value[i].holidayFlag === 'N')
+            return true;
+    return false;
+};
+
+// const ifCurrentDay = (day, index) => {
+//     var today = new Date();
+//     // 获取当前时间的年、月和日
+//     var year = today.getFullYear();
+//     var month = ('0' + (today.getMonth() + 1)).slice(-2); // 月份需要加1，并且确保两位数字
+//     var dayNumber = ('0' + today.getDate()).slice(-2); // 确保两位数字
+
+//     // if (String(year) === currenYear && String(index + 1) === month && dayNumber == String(day))
+//     if (String(year) === currenYear && '02' === month && '11' == String(day))
+//         return true;
+//     else
+//         return false;
+// };
+
+const dayContent = (day) => {
+    // console.log('Comparing dayType.value.date:', dayType.value.date, 'with day:', day);
+    for (let i = 0; i < dayType.value.length; i++)
+        if (dayType.value[i].date === day)
+            return dayType.value[i].detail;
+    return '';
+};
 </script>
-<style scoped>
-.demo-table-expand {
-    font-size: 0;
-}
-
-.demo-table-expand label {
-    width: 90px;
-    color: #99a9bf;
-}
 
-.demo-table-expand .el-form-item {
-    margin-right: 0;
-    margin-bottom: 0;
-    width: 50%;
+<style>
+.holiday .el-calendar__button-group {
+    display: none;
 }
 
-.el-calendar__button-group {
+.select-month .el-calendar__button-group {
     display: none;
 }
 
-.el-calendar__header {
-    margin-bottom: 2px;
+.holiday .el-calendar-day {
     padding: 1px;
+    width: 100%;
+    height: 40px;
+    background: #FFF;
 }
 
-.el-calendar-table {
-
-    width: 400px;
-    height: 100px;
-}
-
-.el-calendar {
-
-    width: 300px;
-    height: 300px;
-}
-
-.el-calendar__body {
-    margin-top: 2px;
-    padding-top: 5px;
-    padding-left: 0px;
-}
-
-.calendar_1,
-.calendar_2,
-.calendar_3,
-.calendar_4,
-.calendar_5,
-.calendar_6,
-.calendar_7,
-.calendar_8,
-.calendar_9,
-.calendar_10,
-.calendar_11,
-.calendar_12 {
-    display: inline-block;
-    height: 400px;
-    width: 400px;
-    margin-right: 20px;
-    margin-bottom: 20px;
-    margin-left: 10px;
-    margin-top: 10px;
-    border-style: solid solid solid solid;
-    pointer-events: none;
-}
-
-.input {
-    border: 2px, black, solid;
-    height: 30px;
-    width: 600px;
-    display: inline-block;
-}
-
-.el-button {
-    font-size: 20px;
-    margin-left: 200px;
-}
-
-.el-calendar-table .el-calendar-day {
-    height: 50px;
-    width: 50px;
-    padding-left: 20px;
-    margin-bottom: 6px;
-}
-
-.el-calendar-table thead th {
-    margin-top: 1px;
-    padding-bottom: 2px;
-}
-
-.el-calendar__title {
-    margin-left: 30px;
-}
-
-.el-col {
-    width: 300px;
-    height: 0px;
-    display: inline-block;
-}
-
-.el-tag {
-    width: 20px;
-    height: 20px;
-    padding-left: 2px;
-}
-
-.prev {
-    visibility: hidden;
-}
-
-.next {
-    visibility: hidden;
-}
-
-.el-message-box {
-    position: relative;
-    left: 550px;
-    bottom: 1300px;
-    background: #00a7d0;
-    width: 550px;
-}
-
-.el-message-box__headerbtn {
-    position: relative;
-    left: 520px;
-    bottom: 10px;
-}
-
-.main .el-loading-text {
-    font-size: 50px;
-    position: relative;
-    top: 0px;
+.select-month .el-calendar-day {
+    padding: 1px;
+    width: 100%;
 }
 
-.el-loading-spinner {
+.holiday-cell {
     position: relative;
-    top: 100px;
-    margin-top: 0px;
-}
-
-.main .circular {
-    color: #00a7d0;
-}</style>
\ No newline at end of file
+    width: 60px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+}
+
+.holiday-text {
+    position: absolute;
+    top: 15%;
+    left: 85%;
+    transform: translate(-50%, -50%);
+    font-size: 12px;
+    color: #5e72cc;
+}
+
+.adjust-text {
+    position: absolute;
+    top: 15%;
+    left: 85%;
+    transform: translate(-50%, -50%);
+    font-size: 12px;
+    color: #5e72cc;
+}
+
+.content-text {
+    position: absolute;
+    top: 70%;
+    left: 55%;
+    transform: translate(-50%, -50%);
+    font-size: 12px;
+    white-space: nowrap;
+}
+
+.is-holiday {
+    border-radius: 5px;
+    background: linear-gradient(145deg, #a7d2b3, #c6f9d5);
+    box-shadow: 5px 5px 10px #90b69b,
+        -5px -5px 10px #e2fff3;
+}
+
+.is-adjust {
+    border-radius: 5px;
+    background: linear-gradient(145deg, #d9a2a2, #ffc1c1);
+    box-shadow: 5px 5px 10px #bc8c8c,
+        -5px -5px 10px #ffdcdc;
+}
+
+/* .is-today {
+    border-radius: 5px;
+    background: linear-gradient(145deg, #d9a2a2, #ffc1c1);
+    box-shadow: 5px 5px 10px #bc8c8c,
+        -5px -5px 10px #ffdcdc;
+} */
+</style>
\ No newline at end of file