Compare commits
1 Commits
| Author | SHA1 | Date |
|---|---|---|
laishajiang
|
ba8c9b1abb | 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