|
|
@@ -1,15 +1,26 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<div class="SetWorking-all">
|
|
|
+ <div class="SetWorking-btn">
|
|
|
+ <el-button @click="SetWorkday('工作日')" type="primary">设置为工作日</el-button>
|
|
|
+ <el-button @click="SetWorkday('休息日')" type="success">设置为休息日</el-button>
|
|
|
+ <el-button @click="SetWorkday('节假日')" type="warning">设置为节假日</el-button>
|
|
|
+ </div>
|
|
|
<div class="calendar-box">
|
|
|
<el-calendar ref="calendar" class="aaa" v-model="value">
|
|
|
<template #dateCell="{ data }">
|
|
|
- <div class="calendar-btn-box" @click="allcalendar(data)">
|
|
|
+ <div :class="datearr.includes(data.day)?'is-selected':''" class="calendar-btn-box" @click="allcalendar(data)">
|
|
|
<div class="calendar-day">
|
|
|
{{ data.day.split("-").slice(2).join("-") }}
|
|
|
</div>
|
|
|
- <div :class="datayz.includes(data.day)?'schedule-box':'schedule-boxs'">
|
|
|
- {{datayz.includes(data.day)?'工作日':'休息'}}
|
|
|
+ <div v-if="datayz.includes(data.day)" class="schedule-box">
|
|
|
+ 工作日
|
|
|
+ </div>
|
|
|
+ <div v-if="datayzxx.includes(data.day)" class="schedule-boxxx">
|
|
|
+ 休息日
|
|
|
+ </div>
|
|
|
+ <div v-if="datayzjj.includes(data.day)" class="schedule-boxjj">
|
|
|
+ 节假日
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -22,36 +33,29 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- datayz:[
|
|
|
- '2023-11-01',
|
|
|
- '2023-11-02',
|
|
|
- '2023-11-03',
|
|
|
- '2023-11-06',
|
|
|
- '2023-11-07',
|
|
|
- '2023-11-08',
|
|
|
- '2023-11-09',
|
|
|
- '2023-11-10',
|
|
|
- '2023-11-13',
|
|
|
- '2023-11-14',
|
|
|
- '2023-11-15',
|
|
|
- '2023-11-16',
|
|
|
- '2023-11-17',
|
|
|
- '2023-11-20',
|
|
|
- '2023-11-21',
|
|
|
- '2023-11-22',
|
|
|
- '2023-11-23',
|
|
|
- '2023-11-24',
|
|
|
- '2023-11-27',
|
|
|
- '2023-11-28',
|
|
|
- '2023-11-29',
|
|
|
- '2023-11-30',
|
|
|
- ],
|
|
|
- value:''
|
|
|
+ userId:'',
|
|
|
+ datayz:[],
|
|
|
+ datayzxx:[],
|
|
|
+ datayzjj:[],
|
|
|
+ datayzwsz:[],
|
|
|
+ value:new Date(),
|
|
|
+ datearr:[],
|
|
|
+ parametersarr:[],
|
|
|
+ yearMonth:"",
|
|
|
+ startDate:"",
|
|
|
+ endDate:"",
|
|
|
}
|
|
|
},
|
|
|
methods:{
|
|
|
allcalendar(data) {
|
|
|
- console.log(data);
|
|
|
+ console.log(this.parametersarr)
|
|
|
+ if(this.datearr.indexOf(data.day)>-1){
|
|
|
+
|
|
|
+ this.datearr.splice(this.datearr.indexOf(data.day),1);
|
|
|
+ }else{
|
|
|
+ this.datearr.push(data.day)
|
|
|
+ }
|
|
|
+ console.log(this.datearr)
|
|
|
// const loading = this.$loading({
|
|
|
// lock: true, //加上这个 页面点击日历的时候会莫名其妙抖动一下 因为我界面上有滚动条，所以我注释了
|
|
|
// text: "Loading",
|
|
|
@@ -64,20 +68,175 @@ export default {
|
|
|
// loading.close();
|
|
|
// }, 500);
|
|
|
},
|
|
|
+ //处理日期
|
|
|
formattedDate(val){
|
|
|
const date = new Date(val);
|
|
|
const year = date.getFullYear();
|
|
|
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
|
const day = date.getDate().toString().padStart(2, '0');
|
|
|
- const formattedDate = `${year}-${month}-${day}`;
|
|
|
+ return year+'-'+month+'-'+day
|
|
|
+ },
|
|
|
+ //处理月份
|
|
|
+ formattedMonth(val){
|
|
|
+ const date = new Date(val);
|
|
|
+ const year = date.getFullYear();
|
|
|
+ const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
|
+ return year+'-'+month
|
|
|
+ },
|
|
|
+ //获取工作日
|
|
|
+ GetWageSheetMonthWorkday(startDt,endDt){
|
|
|
+ var dataarr=[];
|
|
|
+ var xxrdataarr=[];
|
|
|
+ var jjrdataarr=[];
|
|
|
+ var wszdataarr=[];
|
|
|
+ var that = this
|
|
|
+ this.$axios({
|
|
|
+ method: 'post',
|
|
|
+ url: '/api/PersonnelModule/GetWageSheetMonthWorkdays?startDt='+startDt+'&endDt='+endDt,
|
|
|
+ headers: {
|
|
|
+ Authorization: 'Bearer ' + this.token
|
|
|
+ }
|
|
|
+ }).then(function (res) {
|
|
|
+ console.log(res)
|
|
|
+ if(res.data.code==200){
|
|
|
+ console.log(res.data.data)
|
|
|
+ that.parametersarr=res.data.data;
|
|
|
+ for(let a=0;a<res.data.data.length;a++){
|
|
|
+ if(res.data.data[a].isWorkDay){
|
|
|
+ dataarr.push(res.data.data[a].dt)
|
|
|
+ }
|
|
|
+ if(res.data.data[a].holiName=='休息日'){
|
|
|
+ xxrdataarr.push(res.data.data[a].dt)
|
|
|
+ }
|
|
|
+ if(res.data.data[a].holiName=='节假日'){
|
|
|
+ jjrdataarr.push(res.data.data[a].dt)
|
|
|
+ }
|
|
|
+ if(res.data.data[a].holiName==''){
|
|
|
+ wszdataarr.push(res.data.data[a].dt)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ that.datayz=dataarr
|
|
|
+ that.datayzxx=xxrdataarr
|
|
|
+ that.datayzjj=jjrdataarr
|
|
|
+ that.datayzwsz=wszdataarr
|
|
|
+ }else{
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取月初月末
|
|
|
+ getMonthEnd(val){
|
|
|
+ let myDate = new Date(val);
|
|
|
+ let month = myDate.getMonth() + 1;
|
|
|
+ month = month < 10 ? "0" + month : month; //格式化月份，补0
|
|
|
+ let statDateStart = new Date(myDate.getFullYear().toString() +'-'+ month +'-'+ "01"); //月初
|
|
|
+ let dayEnd = new Date(myDate.getFullYear(), month, 0).getDate(); //获取当月一共有多少天
|
|
|
+ let statDateEnd = new Date(myDate.getFullYear().toString() +'-'+ month +'-'+ dayEnd); //月末
|
|
|
+ // return ""+this.formattedDate(statDateStart),""+this.formattedDate(statDateEnd)
|
|
|
+ this.GetWageSheetMonthWorkday(this.formattedDate(statDateStart),this.formattedDate(statDateEnd))
|
|
|
+ },
|
|
|
+ //处理月初月末
|
|
|
+ //设置日类型
|
|
|
+ SetWorkday(text){
|
|
|
+ let datearrnew=[]
|
|
|
+ let myDate = new Date(this.value);
|
|
|
+ let month = myDate.getMonth() + 1;
|
|
|
+ month = month < 10 ? "0" + month : month; //格式化月份，补0
|
|
|
+ let statDateStart = new Date(myDate.getFullYear().toString() +'-'+ month +'-'+ "01"); //月初
|
|
|
+ let dayEnd = new Date(myDate.getFullYear(), month, 0).getDate(); //获取当月一共有多少天
|
|
|
+ let statDateEnd = new Date(myDate.getFullYear().toString() +'-'+ month +'-'+ dayEnd); //月末
|
|
|
+ console.log(this.formattedDate(statDateStart),this.formattedDate(statDateEnd))
|
|
|
+ this.yearMonth=this.formattedMonth(this.value);
|
|
|
+ this.startDate=this.formattedDate(statDateStart);
|
|
|
+ this.endDate=this.formattedDate(statDateEnd);
|
|
|
+ if(text=='工作日'){
|
|
|
+ for(let j=0;j<this.datearr.length;j++){
|
|
|
+ datearrnew.push({dt:this.datearr[j],isWorkDay:true,isHoliDay:false,holiName:text,id:0})
|
|
|
+ }
|
|
|
+ for(let m=0;m<this.parametersarr.length;m++){
|
|
|
+ for(let x=0;x<datearrnew.length;x++){
|
|
|
+ if(this.parametersarr[m].dt==datearrnew[x].dt){
|
|
|
+ datearrnew[x].id=this.parametersarr[m].id
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(this.value)
|
|
|
+ }
|
|
|
+ if(text=='休息日'){
|
|
|
+ for(let j=0;j<this.datearr.length;j++){
|
|
|
+ datearrnew.push({dt:this.datearr[j],isWorkDay:false,isHoliDay:true,holiName:text})
|
|
|
+ }
|
|
|
+ for(let m=0;m<this.parametersarr.length;m++){
|
|
|
+ for(let x=0;x<datearrnew.length;x++){
|
|
|
+ if(this.parametersarr[m].dt==datearrnew[x].dt){
|
|
|
+ datearrnew[x].id=this.parametersarr[m].id
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(text=='节假日'){
|
|
|
+ for(let j=0;j<this.datearr.length;j++){
|
|
|
+ datearrnew.push({dt:this.datearr[j],isWorkDay:false,isHoliDay:true,holiName:text})
|
|
|
+ }
|
|
|
+ for(let m=0;m<this.parametersarr.length;m++){
|
|
|
+ for(let x=0;x<datearrnew.length;x++){
|
|
|
+ if(this.parametersarr[m].dt==datearrnew[x].dt){
|
|
|
+ datearrnew[x].id=this.parametersarr[m].id
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // console.log(datearrnew,this.userId,this.yearMonth,this.startDate,this.endDate,);
|
|
|
+ this.AddOrEdit(datearrnew);
|
|
|
+ },
|
|
|
+ //设置日期API
|
|
|
+ AddOrEdit(arr){
|
|
|
+ var url = "/api/PersonnelModule/GetWageSheetMonthWorkdaysAddOrEdit"
|
|
|
+ var that = this
|
|
|
+ this.$axios({
|
|
|
+ method: 'post',
|
|
|
+ url: url,
|
|
|
+ headers: {
|
|
|
+ Authorization: 'Bearer ' + this.token
|
|
|
+ },
|
|
|
+ data:{
|
|
|
+ userId:this.userId,
|
|
|
+ yearMonth:this.yearMonth,
|
|
|
+ startDate:this.startDate,
|
|
|
+ endDate:this.endDate,
|
|
|
+ calendarInfos:arr,
|
|
|
+ }
|
|
|
+ }).then(function (res) {
|
|
|
+ console.log(res)
|
|
|
+ if(res.data.code==200){
|
|
|
+ that.getMonthEnd(that.value)
|
|
|
+ that.$message({
|
|
|
+ message:res.data.msg,
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ that.$message({
|
|
|
+ message: res.data.msg,
|
|
|
+ type: 'warning'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).catch(()=>{})
|
|
|
}
|
|
|
},
|
|
|
watch:{
|
|
|
value:{//监听月份变化
|
|
|
handler(newValue,oldValue){
|
|
|
- console.log(newValue,oldValue)
|
|
|
+ if(this.formattedMonth(newValue)!=this.formattedMonth(oldValue)){
|
|
|
+ this.datearr=[]
|
|
|
+ this.getMonthEnd(newValue)
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.userId=JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
|
|
|
+ console.log(this.formattedMonth(this.value))
|
|
|
+ console.log(this.getMonthEnd(this.formattedMonth(this.value)))
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -91,7 +250,7 @@ export default {
|
|
|
min-height: 830px;
|
|
|
}
|
|
|
.is-selected {
|
|
|
- color: #1989FA;
|
|
|
+ background: #d1e8ff;
|
|
|
}
|
|
|
.calendar-btn-box{
|
|
|
text-align: center;
|
|
|
@@ -115,5 +274,25 @@ export default {
|
|
|
font-weight: 600;
|
|
|
color: #a8a4a4;
|
|
|
}
|
|
|
-
|
|
|
+.schedule-boxxx{
|
|
|
+ font-size: 17px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #85ce61;
|
|
|
+}
|
|
|
+.schedule-boxjj{
|
|
|
+ font-size: 17px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #ebb563;
|
|
|
+}
|
|
|
+::v-deep .el-calendar-table:not(.is-range) td.prev,
|
|
|
+::v-deep .el-calendar-table:not(.is-range) td.next {
|
|
|
+ cursor: not-allowed;
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+.prev>.el-calendar-day>.calendar-btn-box{
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.next>.el-calendar-day>.calendar-btn-box{
|
|
|
+ display: none;
|
|
|
+}
|
|
|
</style>
|
