Vue【原创】基于【日历组件Calendar】的【节假日管理】功能整合

基于日历组件（lilo-calendar）的节假日管理功能整合。

效果图：

完整代码：

  1 <template>
  2     <div class="root-calendar">
  3         <div class="control-wrapper">
  4             <div class="year-wrapper">
  5                 <el-button v-for="(year, index) in years" :key="index" :type="year.isCurrent ? 'primary' : ''"
  6                     @click="changeYear(year)">
  7                     {{ year.value }}年
  8                 </el-button>
  9             </div>
 10             <div class="btn-wrapper">
 11                 <el-button type="primary" icon="el-icon-check" @click="submit">设置节假日</el-button>
 12             </div>
 13         </div>
 14         <div class="calendar-wrapper" :style="{ height: `${calendarHeight}px` }">
 15             <div class="calendar" v-for="(calendar, index) in calendars" :key="index">
 16                 <lilo-calendar :default-selected-dates="calendar.selectedDates" :current-date="calendar.date" can-select
 17                     @date-selected="dateSelected">
 18                 </lilo-calendar>
 19             </div>
 20         </div>
 21     </div>
 22 </template>
 23
 24 <script>
 25     import _ from 'lodash';
 26     // import {
 27     //     get1year, //业务接口，获取初始化的整年节假日
 28     //     set1year //业务接口，设置正年的节假日
 29     // } from '@/api/khxt/holidays/index.js';
 30
 31     export default {
 32         data() {
 33             return {
 34                 years: [],
 35                 currentYear: new Date().getFullYear(),
 36                 calendars: [],
 37                 calendarHeight: 0,
 38             }
 39         },
 40         created() {
 41             this.defaultSelectedDates = []
 42             this.selectedDates = []
 43             this.tempSelectedDates = []
 44
 45             this.years = this.createYears();
 46             this.calendars = this.createDates(new Date().getFullYear())
 47         },
 48         mounted() {
 49             this.calendarHeight = window.document.body.clientHeight - 150;
 50             window.addEventListener('resize', () => {
 51                 this.calendarHeight = window.document.body.clientHeight - 150;
 52             });
 53
 54             this.getHolidays();
 55         },
 56         computed: {},
 57         methods: {
 58             getHolidays() {
 59                 this.tempSelectedDates = []
 60                 // get1year({ year: this.currentYear }).then(res => {
 61                 //     const data = res.data
 62                 //     let result = []
 63                 //     data.forEach(d => {
 64                 //         const { date } = d
 65                 //         result.push(date)
 66                 //     })
 67                 //     this.defaultSelectedDates = result
 68                 // });
 69
 70                 //静态测试数据，应该从业务接口获取
 71                 this.defaultSelectedDates = [
 72                     "2023-01-01", "2023-01-02", "2023-01-07", "2023-01-08", "2023-01-14", "2023-01-15", "2023-01-21",
 73                     "2023-01-22", "2023-01-23", "2023-01-24", "2023-01-25", "2023-01-26", "2023-01-27", "2023-02-04",
 74                     "2023-02-05", "2023-02-11", "2023-02-12", "2023-02-18", "2023-02-19", "2023-02-25", "2023-02-26",
 75                     "2023-03-04", "2023-03-05", "2023-03-11", "2023-03-12", "2023-03-18", "2023-03-19", "2023-03-25",
 76                     "2023-03-26", "2023-04-01", "2023-04-02", "2023-04-05", "2023-04-08", "2023-04-09", "2023-04-15",
 77                     "2023-04-16", "2023-04-22", "2023-04-29", "2023-04-30", "2023-05-01", "2023-05-02", "2023-05-03",
 78                     "2023-05-07", "2023-05-13", "2023-05-14", "2023-05-20", "2023-05-21", "2023-05-27", "2023-05-28",
 79                     "2023-06-03", "2023-06-04", "2023-06-10", "2023-06-11", "2023-06-17", "2023-06-18", "2023-06-22",
 80                     "2023-06-23", "2023-06-24", "2023-07-01", "2023-07-02", "2023-07-08", "2023-07-09", "2023-07-15",
 81                     "2023-07-16", "2023-07-22", "2023-07-23", "2023-07-29", "2023-07-30", "2023-08-05", "2023-08-06",
 82                     "2023-08-12", "2023-08-13", "2023-08-19", "2023-08-20", "2023-08-26", "2023-08-27", "2023-09-02",
 83                     "2023-09-03", "2023-09-09", "2023-09-10", "2023-09-16", "2023-09-17", "2023-09-23", "2023-09-24",
 84                     "2023-09-29", "2023-09-30", "2023-10-01", "2023-10-02", "2023-10-03", "2023-10-04", "2023-10-05",
 85                     "2023-10-06", "2023-10-14", "2023-10-15", "2023-10-21", "2023-10-22", "2023-10-28", "2023-10-29",
 86                     "2023-11-04", "2023-11-05", "2023-11-11", "2023-11-12", "2023-11-18", "2023-11-19", "2023-11-25",
 87                     "2023-11-26", "2023-12-02", "2023-12-03", "2023-12-09", "2023-12-10", "2023-12-16", "2023-12-17",
 88                     "2023-12-23", "2023-12-24", "2023-12-30", "2023-12-31"
 89                 ]
 90                 //把整年的选中日期分配到每个月，这个数据结构的组装过程应该在服务端构建更好
 91                 this.calendars.forEach(calendar => {
 92                     calendar.selectedDates = []
 93                     this.defaultSelectedDates.forEach(dsd => {
 94                         if(dsd.indexOf(calendar.date) !== -1) {
 95                             calendar.selectedDates.push(dsd)
 96                         }
 97                     })
 98                 })
 99                 // console.log(this.calendars)
100             },
101             createYears() {
102                 let result = []
103                 const dt = new Date()
104                 const curYear = dt.getFullYear()
105                 for (let i = 5; i >= -1; i--) {
106                     result.push({
107                         value: curYear - i,
108                         isCurrent: i === 0
109                     })
110                 }
111                 return result
112             },
113             createDates(curYear) {
114                 let result = []
115                 for (let i = 1; i <= 12; i++) {
116                     result.push({
117                         date: curYear + '-' + (i < 10 ? `0${i}` : i)
118                     })
119                 }
120                 return result
121             },
122             changeYear(year) {
123                 this.years.forEach(y => {
124                     y.isCurrent = false;
125                 })
126                 year.isCurrent = true;
127
128                 this.currentYear = year.value;
129
130                 this.calendars = this.createDates(year.value)
131
132                 this.getHolidays();
133             },
134             dateSelected(val) {
135                 //我这边服务端需要全量返回，包括默认选中的内容，你也可以根据业务自己构建返回数据
136                 if (val.selectedDates) {
137                     this.tempSelectedDates = this.defaultSelectedDates.concat(this.tempSelectedDates).concat(val
138                         .selectedDates)
139                     this.tempSelectedDates = Array.from(new Set(this.tempSelectedDates));
140                 }
141                 if (val.removeDate) {
142                     this.tempSelectedDates.splice(this.tempSelectedDates.indexOf(val.removeDate), 1);
143                     const index = this.defaultSelectedDates.indexOf(val.removeDate);
144                     if (index !== -1) {
145                         this.defaultSelectedDates.splice(index, 1);
146                     }
147                 }
148                 let result = []
149                 this.tempSelectedDates.forEach(sd => {
150                     result.push({
151                         date: sd
152                     })
153                 })
154                 this.selectedDates = result
155             },
156             submit: _.debounce(function() {
157                 this.$confirm('是否确认提交', '提示', {
158                         confirmButtonText: '确定',
159                         cancelButtonText: '取消',
160                         type: 'warning'
161                     })
162                     .then(() => {
163                         const param = {
164                             year: this.currentYear,
165                             holidays: this.selectedDates
166                         }
167                         // set1year(param).then(res => {
168                         //     this.$notify.success({
169                         //         title: '通知',
170                         //         message: res.message
171                         //     });
172
173                         //     this.getHolidays();
174                         // })
175                         //打印最终提交结果数据
176                         console.log(param);
177                     })
178                     .catch(() => {
179                         this.loading = false;
180                         this.$message({
181                             type: 'info',
182                             message: '已取消'
183                         });
184                     });
185             }, 300),
186         }
187     };
188 </script>
189
190 <style lang="scss" scoped>
191     .root-calendar {
192         display: flex;
193         flex-direction: column;
194
195         .control-wrapper {
196             display: flex;
197             justify-content: center;
198             align-items: center;
199
200             .year-wrapper {
201                 flex: 1;
202                 padding: 10px;
203             }
204
205             .btn-wrapper {
206                 flex: 0 0 100px;
207                 padding: 10px;
208             }
209         }
210
211         .calendar-wrapper {
212             // height: calc(100vh - 150px);
213             overflow-y: auto;
214             // flex: 1;
215             display: flex;
216             flex-wrap: wrap;
217
218             .calendar {
219                 flex: 0 0 33.333%;
220                 padding: 10px;
221             }
222         }
223     }
224 </style>

查看lilo-calendar日历组件请移步我的另外一个帖子：https://www.cnblogs.com/loveFlex/p/17662243.html