|
@@ -1,187 +0,0 @@
|
|
|
-<template>
|
|
|
|
|
- <div class="app-container">
|
|
|
|
|
- <el-form ref="queryForm" :model="queryParams" size="small" :inline="true">
|
|
|
|
|
- <el-form-item label="年份" prop="holidayYear">
|
|
|
|
|
- <el-date-picker
|
|
|
|
|
- v-model="queryParams.holidayYear"
|
|
|
|
|
- type="year"
|
|
|
|
|
- :clearable="false"
|
|
|
|
|
- placeholder="选择年"
|
|
|
|
|
- />
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- <el-form-item>
|
|
|
|
|
- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
|
|
- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- </el-form>
|
|
|
|
|
- <el-row>
|
|
|
|
|
- <div v-for="cal in defaultCals" @click="handleUpdateHoliday(cal)">
|
|
|
|
|
- <el-col :span="6">
|
|
|
|
|
- <el-calendar :value="cal" class="holiday">
|
|
|
|
|
- <template slot="dateCell" slot-scope="{date, data}" class="temp-mt">
|
|
|
|
|
- <div v-show="data.type === 'current-month'" :id="cal.getMonth()+'-'+data.day" class="holiday-cell">
|
|
|
|
|
- {{ data.day.split('-')[2] }}
|
|
|
|
|
- </div>
|
|
|
|
|
- </template>
|
|
|
|
|
- </el-calendar>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- </div>
|
|
|
|
|
- </el-row>
|
|
|
|
|
-
|
|
|
|
|
- <el-dialog title="节假日设置" :visible.sync="show" width="40%">
|
|
|
|
|
- <el-calendar :value="currentMonth" class="select-month">
|
|
|
|
|
- <!-- 这里使用的是 2.5 slot 语法,对于新项目请使用 2.6 slot 语法-->
|
|
|
|
|
- <template slot="dateCell" slot-scope="{date, data}" class="temp-mt">
|
|
|
|
|
- <div v-show="data.type === 'current-month'" class="holiday-cell" @click="selectDate(date,data)">
|
|
|
|
|
- <span>{{ data.day.split('-')[2] }}</span>
|
|
|
|
|
- <span :id="data.day">{{ initHolidayDate(data) }}</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- </template>
|
|
|
|
|
- </el-calendar>
|
|
|
|
|
- <span slot="footer" class="dialog-footer">
|
|
|
|
|
- <el-button @click="show = false">取 消</el-button>
|
|
|
|
|
- <el-button type="primary" @click="submitHoliday">确 定</el-button>
|
|
|
|
|
- </span>
|
|
|
|
|
- </el-dialog>
|
|
|
|
|
- </div>
|
|
|
|
|
-</template>
|
|
|
|
|
-
|
|
|
|
|
-<script>
|
|
|
|
|
-
|
|
|
|
|
-export default {
|
|
|
|
|
- name: 'Temp',
|
|
|
|
|
- data() {
|
|
|
|
|
- return {
|
|
|
|
|
- queryParams: {
|
|
|
|
|
- holidayYear: new Date()
|
|
|
|
|
- },
|
|
|
|
|
- // 设置的月份
|
|
|
|
|
- defaultCals: [],
|
|
|
|
|
- // 全年已选中的日期
|
|
|
|
|
- holidayDate: [],
|
|
|
|
|
- // 弹框
|
|
|
|
|
- show: false,
|
|
|
|
|
- // 点击修改的月份
|
|
|
|
|
- currentMonth: undefined,
|
|
|
|
|
- // 点击月中已选中的日期
|
|
|
|
|
- currentDate: []
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- created() {
|
|
|
|
|
- // 初始化日历
|
|
|
|
|
- const nowYear = new Date().getFullYear()
|
|
|
|
|
- this.initCalendar(nowYear)
|
|
|
|
|
- },
|
|
|
|
|
- methods: {
|
|
|
|
|
- // 初始化日历
|
|
|
|
|
- initCalendar(year) {
|
|
|
|
|
- this.defaultCals = [
|
|
|
|
|
- new Date(year, 0, 1), new Date(year, 1, 1), new Date(year, 2, 1),
|
|
|
|
|
- new Date(year, 3, 1), new Date(year, 4, 1), new Date(year, 5, 1),
|
|
|
|
|
- new Date(year, 6, 1), new Date(year, 7, 1), new Date(year, 8, 1),
|
|
|
|
|
- new Date(year, 9, 1), new Date(year, 10, 1), new Date(year, 11, 1)
|
|
|
|
|
- ]
|
|
|
|
|
-
|
|
|
|
|
- // 调接口获取
|
|
|
|
|
- this.holidayDate = [
|
|
|
|
|
- { day: 2, date: '0-' + year + '-01-02' },
|
|
|
|
|
- { day: 2, date: '1-' + year + '-02-02' },
|
|
|
|
|
- { day: 2, date: '2-' + year + '-03-02' }
|
|
|
|
|
- ]
|
|
|
|
|
- this.$nextTick(() => {
|
|
|
|
|
- const holidayCell = document.getElementsByClassName('holiday-cell')
|
|
|
|
|
- for (const i in holidayCell) {
|
|
|
|
|
- if (undefined != holidayCell[i].style) {
|
|
|
|
|
- holidayCell[i].style.backgroundColor = '#FFFFFF'
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- // 给已选中的日期加背景色
|
|
|
|
|
- for (const i in this.holidayDate) {
|
|
|
|
|
- const span = document.getElementById(this.holidayDate[i].date)
|
|
|
|
|
- span.style.backgroundColor = '#F56C6C'
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- /** 搜索按钮操作 */
|
|
|
|
|
- handleQuery() {
|
|
|
|
|
- const year = this.queryParams.holidayYear.getFullYear()
|
|
|
|
|
- this.initCalendar(year)
|
|
|
|
|
- },
|
|
|
|
|
- /** 重置按钮操作 */
|
|
|
|
|
- resetQuery() {
|
|
|
|
|
- this.resetForm('queryForm')
|
|
|
|
|
- this.queryParams.holidayYear = new Date()
|
|
|
|
|
- this.handleQuery()
|
|
|
|
|
- },
|
|
|
|
|
- // 初始化已选中的日期
|
|
|
|
|
- initHolidayDate(data) {
|
|
|
|
|
- for (const i in this.currentDate) {
|
|
|
|
|
- if (data.day === this.currentDate[i].date) {
|
|
|
|
|
- data.isSelected = true
|
|
|
|
|
- return '✔️'
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- // 节假日设置
|
|
|
|
|
- handleUpdateHoliday(cal) {
|
|
|
|
|
- this.show = true
|
|
|
|
|
- this.currentMonth = cal
|
|
|
|
|
- // 调接口获取
|
|
|
|
|
- this.currentDate = [
|
|
|
|
|
- { day: 2, date: cal.getFullYear() + '-01-02' }
|
|
|
|
|
- ]
|
|
|
|
|
- },
|
|
|
|
|
- selectDate(date, data) {
|
|
|
|
|
- const day = date.getDate()
|
|
|
|
|
- const span = document.getElementById(data.day)
|
|
|
|
|
- if (span.innerText) {
|
|
|
|
|
- span.innerText = ''
|
|
|
|
|
- for (const i in this.currentDate) {
|
|
|
|
|
- if (day === this.currentDate[i].day) {
|
|
|
|
|
- this.currentDate.splice(i, 1)
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- } else {
|
|
|
|
|
- span.innerText = '✔️'
|
|
|
|
|
- this.currentDate.push({ day: day, date: data.day })
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- // 提交
|
|
|
|
|
- submitHoliday() {
|
|
|
|
|
- console.log(this.currentMonth, this.currentDate)
|
|
|
|
|
- this.show = false
|
|
|
|
|
- this.queryParams.holidayYear = this.currentMonth
|
|
|
|
|
- this.handleQuery()
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-</script>
|
|
|
|
|
-
|
|
|
|
|
-<style>
|
|
|
|
|
-.holiday .el-calendar__button-group{
|
|
|
|
|
- display: none;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.select-month .el-calendar__button-group{
|
|
|
|
|
- display: none;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.holiday .el-calendar-day{
|
|
|
|
|
- padding: 1px;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 34px;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.select-month .el-calendar-day{
|
|
|
|
|
- padding: 1px;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.holiday-cell{
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- display:flex;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
-}
|
|
|
|
|
-</style>
|
|
|