laishajiang
2 years ago
7 changed files with 532 additions and 37 deletions
@ -0,0 +1,13 @@ |
|||||||
|
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,462 @@ |
|||||||
|
<template> |
||||||
|
<div class="main" |
||||||
|
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> |
||||||
Loading…
Reference in new issue