6 changed files with 531 additions and 32 deletions
@ -0,0 +1,10 @@
|
||||
import { get, post} from "@/util/request" |
||||
export function getholiday(search) { |
||||
return get('/outer/holiday/getholiday?search='+search) |
||||
} |
||||
export function showholiday() { |
||||
return get('/outer/holiday/showholiday') |
||||
} |
||||
export function saveholiday(search) { |
||||
return post('/outer/holiday/saveholiday',search) |
||||
} |
||||
@ -0,0 +1,470 @@
|
||||
<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> |
||||
</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> |
||||
<style> |
||||
.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%; |
||||
} |
||||
|
||||
.el-calendar__button-group { |
||||
display: none; |
||||
} |
||||
|
||||
.el-calendar__header { |
||||
margin-bottom: 2px; |
||||
padding: 1px; |
||||
} |
||||
|
||||
.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; |
||||
} |
||||
|
||||
.el-loading-spinner { |
||||
position: relative; |
||||
top: 100px; |
||||
margin-top: 0px; |
||||
} |
||||
|
||||
.main .circular { |
||||
color: #00a7d0; |
||||
}</style> |
||||
@ -1,35 +1,54 @@
|
||||
|
||||
const basePath = '/api' |
||||
|
||||
export function post(url, data) { |
||||
return new Promise((resolve, reject) => { |
||||
fetch(`${basePath}${url}`, { |
||||
method: 'POST', |
||||
body: data? JSON.stringify(data) : '', |
||||
}).then(res => { |
||||
return res.json(); |
||||
}).then(res => { |
||||
if (res.ok()) { |
||||
resolve(res) |
||||
} else { |
||||
reject(res) |
||||
} |
||||
body: data ? JSON.stringify(data) : '', |
||||
}) |
||||
// .then(res => {
|
||||
// return res.json();
|
||||
// }).then(res => {
|
||||
// if (res.ok()) {
|
||||
// resolve(res)
|
||||
// } else {
|
||||
// reject(res)
|
||||
// }
|
||||
// })
|
||||
.then(res => { |
||||
resolve(res); |
||||
}).catch(e => { |
||||
console.error("请求失败了,详细信息:" + JSON.stringify(e)); |
||||
reject(e); |
||||
}) |
||||
}) |
||||
} |
||||
|
||||
export function get(url) { |
||||
return new Promise((resolve, reject) => { |
||||
fetch(`${basePath}${url}`, { |
||||
method: 'GET', |
||||
}).then(res => { |
||||
return res.json(); |
||||
}).then(res => { |
||||
if (res.ok()) { |
||||
resolve(res) |
||||
} else { |
||||
reject(res) |
||||
} |
||||
}) |
||||
.then(res => { |
||||
let data = res.text();//转成字符串判断
|
||||
return data.then(r => { |
||||
if (r.length === 0) return null; |
||||
else return JSON.parse(r); |
||||
}) |
||||
}) |
||||
// .then(res => {
|
||||
// return res.json();
|
||||
// })
|
||||
// .then(res => {
|
||||
// if (res.ok()) {
|
||||
// resolve(res)
|
||||
// } else {
|
||||
// reject(res)
|
||||
// }
|
||||
// })
|
||||
.then(res => { |
||||
resolve(res); |
||||
}).catch(e => { |
||||
console.error("请求失败了,详细信息:" + JSON.stringify(e)); |
||||
reject(e); |
||||
}) |
||||
}) |
||||
} |
||||
Loading…
Reference in new issue