2022-12-08 10:07:45 +00:00
|
|
|
<template>
|
2023-01-12 11:47:46 +00:00
|
|
|
<view class="calendar" v-if="ifLoading">
|
2022-12-08 10:07:45 +00:00
|
|
|
<view class="data font28 color-white">
|
|
|
|
<view class="btn btn-pro" @tap="proEv"></view>
|
|
|
|
<view class="txt">{{curYear}}年{{curMonth<10?'0'+curMonth:curMonth}}月</view>
|
|
|
|
<view class="btn btn-next" @tap="nextEv"></view>
|
|
|
|
</view>
|
|
|
|
<view class="week font24">
|
|
|
|
<view class="item" v-for="(item,index) in weeks" :key="index">{{item}}</view>
|
|
|
|
</view>
|
|
|
|
<view class="days bg-white font26">
|
2023-01-16 08:01:40 +00:00
|
|
|
<view class="item" :class="daysIndex==item.status&&item.status!==-2?'active':''" v-for="(item,index) in days" :key="index">
|
2022-12-08 10:07:45 +00:00
|
|
|
<view class="txt color-99" v-if="item.status==-2">{{item.date}}</view>
|
2023-01-12 11:47:46 +00:00
|
|
|
<view @tap="toDetail(item.status)" class="txt color-white bg-green" v-if="statusObj.ok.indexOf(item.status)!==-1&&statusObj.add.indexOf(item.status)==-1">{{item.date}}</view>
|
2023-01-14 03:15:59 +00:00
|
|
|
<view @tap="toDetail(item.status)" class="txt color-white bg-orange" v-if="statusObj.add.indexOf(item.status)!==-1&&statusObj.no.indexOf(item.status)==-1">{{item.date}}</view>
|
2023-01-12 11:47:46 +00:00
|
|
|
<view @tap="toDetail(item.status)" class="txt color-white bg-red" v-if="statusObj.no.indexOf(item.status)!==-1">{{item.date}}</view>
|
2023-01-14 03:15:59 +00:00
|
|
|
<view class="txt" @tap="toDetail(item.status)" v-if="statusObj.ok.indexOf(item.status)==-1&&statusObj.add.indexOf(item.status)==-1&&statusObj.no.indexOf(item.status)==-1&&item.status!==-2">{{item.date}}</view>
|
2022-12-08 10:07:45 +00:00
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="tips font22">
|
|
|
|
<view class="item">正常打卡</view>
|
|
|
|
<view class="item">补打卡</view>
|
|
|
|
<view class="item">非正常打卡</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import {
|
|
|
|
mapState
|
|
|
|
} from 'vuex'; //引入mapState
|
|
|
|
export default {
|
|
|
|
name: 'sign-calendar',
|
2023-01-16 08:01:40 +00:00
|
|
|
props:{
|
|
|
|
// 当前选中项
|
|
|
|
daysIndex:{
|
|
|
|
type:Number,
|
|
|
|
default:new Date().getDate()
|
|
|
|
},
|
|
|
|
},
|
2022-12-08 10:07:45 +00:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
weeks: ['日', '一', '二', '三', '四', '五', '六'], //星期列表
|
|
|
|
days:[], //天数
|
|
|
|
curYear:new Date().getFullYear(), //当前年
|
|
|
|
curMonth:new Date().getMonth() + 1, //当前月
|
|
|
|
statusObj:{}, //状态列表
|
2023-01-12 11:47:46 +00:00
|
|
|
ifLoading:false, //是否加载完成
|
2022-12-08 10:07:45 +00:00
|
|
|
};
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
// 获取数组,绘制格子
|
|
|
|
this.getDaysList();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
// 获取数组,绘制格子
|
|
|
|
getDaysList(){
|
|
|
|
// 清空数组
|
|
|
|
this.days = [];
|
|
|
|
// 计算当月天数
|
|
|
|
let curDays = new Date(this.curYear,this.curMonth, 0).getDate();
|
|
|
|
// 计算当月第一天星期几
|
|
|
|
let firstWeek = new Date(Date.UTC(this.curYear, this.curMonth-1, 1)).getDay();
|
|
|
|
// 计算当月最后一天星期几
|
|
|
|
let lastWeek = new Date(Date.UTC(this.curYear, this.curMonth-1,curDays)).getDay();
|
|
|
|
|
|
|
|
// 上月还有展示
|
|
|
|
if(firstWeek!==0){
|
|
|
|
// 绘制上月天数占的格子
|
|
|
|
this.proMonthDays(firstWeek,curDays);
|
|
|
|
}else{
|
|
|
|
// 绘制当月天数占的格子
|
|
|
|
this.curMonthDays(curDays);
|
|
|
|
}
|
|
|
|
// 下月还有展示
|
|
|
|
if(lastWeek!==6){
|
|
|
|
// 绘制下月天数占的格子
|
|
|
|
this.nextMonthDays(lastWeek)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
// 绘制上月天数占的格子
|
|
|
|
proMonthDays(firstWeek,curDays){
|
|
|
|
// 计算上月天数
|
|
|
|
let proDays = 0;
|
|
|
|
if(this.curMonth==1){
|
|
|
|
proDays = new Date(this.curYear-1,12, 0).getDate();
|
|
|
|
}else{
|
|
|
|
proDays = new Date(this.curYear,this.curMonth-1, 0).getDate();
|
|
|
|
}
|
|
|
|
// 创建上月天数数组
|
|
|
|
let proDaysArr=[];
|
|
|
|
for (let i=proDays-firstWeek+1; i<=proDays;i++) {
|
|
|
|
let proObj = {
|
|
|
|
date: i,
|
|
|
|
status: -2
|
|
|
|
}
|
|
|
|
proDaysArr.push(proObj);
|
|
|
|
}
|
|
|
|
this.days = proDaysArr;
|
|
|
|
// 绘制当月天数占的格子
|
|
|
|
this.curMonthDays(curDays);
|
|
|
|
},
|
|
|
|
|
|
|
|
// 绘制当月天数占的格子
|
|
|
|
curMonthDays(curDays) {
|
|
|
|
// 创建当月天数数组
|
|
|
|
let curDaysArr=[];
|
|
|
|
for (let i=1; i<=curDays;i++) {
|
|
|
|
let curObj = {
|
|
|
|
date: i,
|
|
|
|
status: i
|
|
|
|
}
|
|
|
|
curDaysArr.push(curObj);
|
|
|
|
}
|
|
|
|
this.days = this.days.concat(curDaysArr);
|
|
|
|
// 获取状态列表
|
2023-01-14 08:13:24 +00:00
|
|
|
this.getStatusObj(uni.getStorageSync('casual_worksite_id'));
|
2022-12-08 10:07:45 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
// 绘制下月天数占的格子
|
|
|
|
nextMonthDays(lastWeek) {
|
|
|
|
// 创建上月天数数组
|
|
|
|
let nextDaysArr=[];
|
|
|
|
for (let i=1; i<=6-lastWeek;i++) {
|
|
|
|
let nextObj = {
|
|
|
|
date: i,
|
|
|
|
status: -2
|
|
|
|
}
|
|
|
|
nextDaysArr.push(nextObj);
|
|
|
|
}
|
|
|
|
this.days = this.days.concat(nextDaysArr);
|
|
|
|
},
|
|
|
|
|
|
|
|
// 获取状态列表
|
2023-01-14 08:13:24 +00:00
|
|
|
getStatusObj(id){
|
|
|
|
if(id&&id!==''&&id!==undefined){
|
|
|
|
uni.setStorageSync('casual_worksite_id',uni.getStorageSync('worker_role')!==0?id:0)
|
|
|
|
}else{
|
|
|
|
uni.setStorageSync('casual_worksite_id',uni.getStorageSync('worker_role')!==0?uni.getStorageSync('worksite_id'):0)
|
|
|
|
}
|
2023-01-15 07:31:11 +00:00
|
|
|
let params = {};
|
|
|
|
if(uni.getStorageSync('worksite_id')){
|
|
|
|
params = {
|
|
|
|
date:`${this.curYear}-${this.curMonth<10?'0'+this.curMonth:this.curMonth}`,
|
|
|
|
worksite_id:uni.getStorageSync('casual_worksite_id')
|
|
|
|
};
|
|
|
|
}else{
|
|
|
|
params = {
|
|
|
|
date:`${this.curYear}-${this.curMonth<10?'0'+this.curMonth:this.curMonth}`
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2023-01-14 03:15:59 +00:00
|
|
|
this.$requst.get('/api/v1/user/month-sign-log',params).then(res=>{
|
2023-01-12 11:47:46 +00:00
|
|
|
if(res.code==0){
|
|
|
|
console.log(res,'月度打卡信息');
|
|
|
|
this.statusObj = res.data;
|
|
|
|
this.ifLoading = true;
|
|
|
|
}
|
|
|
|
})
|
|
|
|
},
|
|
|
|
|
|
|
|
// 去查看打卡记录
|
|
|
|
toDetail(status){
|
2023-01-16 08:01:40 +00:00
|
|
|
this.daysIndex = status;
|
2023-01-12 11:47:46 +00:00
|
|
|
let date = `${this.curYear}-${this.curMonth<10?'0'+this.curMonth:this.curMonth}-${status<10?'0'+status:status}`;
|
|
|
|
this.$emit('getDate', date);
|
2022-12-08 10:07:45 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
// 上一月
|
|
|
|
proEv(){
|
|
|
|
if(this.curMonth!==1){
|
|
|
|
this.curMonth--;
|
|
|
|
}else{
|
|
|
|
this.curMonth = 12;
|
|
|
|
this.curYear--;
|
|
|
|
}
|
|
|
|
// 获取数组,绘制格子
|
|
|
|
this.getDaysList();
|
|
|
|
},
|
|
|
|
|
|
|
|
// 下一月
|
|
|
|
nextEv(){
|
|
|
|
if(this.curMonth!==12){
|
|
|
|
this.curMonth++
|
|
|
|
}else{
|
|
|
|
this.curMonth = 1;
|
|
|
|
this.curYear++;
|
|
|
|
}
|
|
|
|
// 获取数组,绘制格子
|
|
|
|
this.getDaysList();
|
|
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
.calendar .data{
|
|
|
|
box-sizing: border-box;
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
align-items: center;
|
|
|
|
width: 100%;
|
|
|
|
height: 92rpx;
|
|
|
|
padding: 0 22rpx;
|
|
|
|
background-color: #0788ff;
|
|
|
|
}
|
|
|
|
|
|
|
|
.calendar .btn{
|
|
|
|
width: 42rpx;
|
|
|
|
height: 42rpx;
|
|
|
|
background-image: url(/static/icon/icon-calendar-btn.png);
|
|
|
|
background-size: cover;
|
|
|
|
}
|
|
|
|
|
|
|
|
.calendar .btn-next{
|
|
|
|
transform: rotateY(180deg);
|
|
|
|
}
|
|
|
|
|
|
|
|
.calendar .week{
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
background-color: #ececec;
|
|
|
|
}
|
|
|
|
|
|
|
|
.calendar .week .item{
|
|
|
|
width: calc(100%/7);
|
|
|
|
line-height: 58rpx;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.calendar .days{
|
|
|
|
display: flex;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.calendar .days .item{
|
|
|
|
box-sizing: border-box;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
width: calc(100%/7);
|
|
|
|
height: 86rpx;
|
|
|
|
border-top: 2rpx solid #ececec;
|
|
|
|
border-right: 2rpx solid #ececec;
|
2023-01-16 08:01:40 +00:00
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
|
|
|
|
.calendar .days .item.active{
|
|
|
|
background-color: #ececec;
|
2022-12-08 10:07:45 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.calendar .days .item:nth-of-type(7n){
|
|
|
|
border-right: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.calendar .days .item .txt{
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
width: 58rpx;
|
|
|
|
height: 58rpx;
|
|
|
|
border-radius: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.calendar .tips{
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
padding: 30rpx 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.calendar .tips .item{
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
height: 30rpx;
|
|
|
|
margin: 0 12rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
.calendar .tips .item:before{
|
|
|
|
content: '';
|
|
|
|
display: block;
|
|
|
|
width: 12rpx;
|
|
|
|
height: 12rpx;
|
|
|
|
background-color: #ec7807;
|
|
|
|
border-radius: 100%;
|
|
|
|
margin-right: 9rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
.calendar .tips .item:first-child:before{
|
|
|
|
background-color: #25a63b;
|
|
|
|
}
|
|
|
|
|
|
|
|
.calendar .tips .item:last-child:before{
|
|
|
|
background-color: #ec0707;
|
|
|
|
}
|
|
|
|
</style>
|