police-mailbox
/
mailbox-outer-admin-vue
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

节假日信息显示完善，界面优化

厅长信箱
21819 2 years ago
parent
2b2a217fd7
commit
f2e9fc9546
1 changed files with 203 additions and 465 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 668
      src/components/HolidayList.vue

668
src/components/HolidayList.vue
Unescape View File

@ -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>
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>
Write Preview
Loading…
Cancel
Save