ParkApp/punch/pages/punch-list/punch-list.vue

<template>
	<view class="content">
		<u-navbar :background="background" back-icon-color="#fff" titleColor="#fff" :title="vuex_now_date"></u-navbar>
		<calendar ref='ren' :markDays='markDays' :open="true" :disabledAfter='true'  @onDayClick='onDayClick'></calendar>
		
		<view class="rule" style="padding-top: 30rpx;padding-bottom: 30rpx;" v-if="$isEmpty(rule)">
			<view class="left">
				<text class="text-bold">查看打卡规则</text>
			</view>
			<view class="right desc">
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view class="rule" v-else>
			<view class="left">
				<view class="title">上下班打卡</view>
				<view class="desc">
					<text>打卡规则：</text>
					<text>{{rule.beginTime}} ~ {{rule.endTime}}</text>
					<text style="padding: 0 15rpx;">|</text>
					<text>工作时长：</text>
					<text>{{rule.totalTime}}</text>
				</view>
			</view>
			<view class="right desc">
				<text class="cuIcon-right"></text>
			</view>
		</view>
		
		<view class="history" v-if="!$isEmpty(rule)">
			<view class="left">
				<text class="time">{{rule.beginTime}}</text>
				<view class="bar">
					<text></text>
				</view>
				<text class="time">{{rule.endTime}}</text>
			</view>
			
			<view class="right" style="width: 100%;">
				<view class="working" style="padding-bottom: 25rpx;border-bottom: 1rpx solid #dedede;">
					<text class="padding-bottom-10">上班</text>
					<text v-if="workPunchRecord[0]&&workPunchRecord[0].exceptionMessage" class="desc" style="color: #da0000;">打卡异常 ({{workCheckinTime  | date("hh:MM")}})</text>
					<text class="desc" v-else-if="workPunchRecord[0]&&!workPunchRecord[0].exceptionMessage">正常打卡 ({{workCheckinTime  | date("hh:MM")}})</text>
					<text class="desc" v-else>暂无记录</text>
				</view>
				
				<view class="working" style="padding-top: 25rpx;">
					<text class="padding-bottom-10">下班</text>
					<text v-if="offWorkPunchRecord[0]&&offWorkPunchRecord[0].exceptionMessage" class="desc" style="color: #da0000;">打卡异常 ({{offWorkCheckinTime  | date("hh:MM")}})</text>
					<text class="desc" v-else-if="offWorkPunchRecord[0]&&!offWorkPunchRecord[0].exceptionMessage">正常打卡 ({{offWorkCheckinTime  | date("hh:MM")}})</text>
					<text class="desc" v-else>暂无记录</text>
				</view>
			</view>
		</view>
		<view class="" v-if="!$isEmpty(outWorkPunchRecord)">
			<view style="background-color: #f1f1f1;padding: 8rpx 30rpx;color: #686868;">
				<text class="">外出打卡</text>
			</view>
			
			<view class="out-punch">
				<view class="time">
					<text>18:31</text>
				</view>
				<view class="content">
					<text class="name">黄明潘</text>
					<text class="desc">临江大道5号</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
    import calendar from '@/components/calendar/calendar.vue'
	export default {
        components:{
            calendar
        },
		data() {
			return {
				userId:'',
				background: {
					backgroundColor: '#5064eb',
				},
				isfuture:false,
                markDays:[],
				rule:{},
				//上班打卡记录
				workPunchRecord:[],
				workCheckinTime:'',
				//下班打卡记录
				offWorkPunchRecord:[],
				offWorkCheckinTime:'',
				//外出打卡记录
				outWorkPunchRecord:[],
				outWorkCheckinTime:''
			}
		},
		watch:{
			vuex_now_date(newVal,oldVal){
				let newValStr=newVal?newVal.replace('年','/').replace('月','/').replace('日',''):''
				let oldValStr=oldVal?oldVal.replace('年','/').replace('月','/').replace('日',''):''
				let newValDate=this.$dateTime.createDate(newValStr)
				let oldValDate=this.$dateTime.createDate(oldValStr)
				let newYearMonth=newValDate.getFullYear()+"-"+(newValDate.getMonth()+1)
				let oldYearMonth=oldValDate.getFullYear()+"-"+(oldValDate.getMonth()+1)
				if (newYearMonth!=oldYearMonth) {
					this.getMarkDays()
				}
			}
		},
		onReady() {
            let today = this.$refs.ren.getToday().date;
			this.$u.vuex("vuex_now_date",this.$dateTime.format(new Date(today),"YYYY年mm月dd日"))
		},
		onLoad() {
			this.userId=this.$cache.get('userId')
			this.getRecordsByDate(this.$dateTime.format())
			this.getRuleByDate(this.$dateTime.format())
		},
		onUnload() {
			this.$u.vuex("vuex_now_date",null)
		},
		onBackPress() {
			this.$u.vuex("vuex_now_date",null)
		},
		methods: {
			getRuleByDate(date){
				let params={
					personId:this.userId,
					personType:0,
					date
				}
				this.$api.punch.getRuleByDate(params).then(res=>{
					this.rule=res.data
				})
			},
			getMarkDays(){
				let strDate=this.vuex_now_date.replace('年','/').replace('月','/').replace('日','')
				let date=this.$dateTime.createDate(strDate)
				let params={
					personId:this.userId,
					personType:0,
					year:date.getFullYear(),
					month:date.getMonth()+1
				}
				this.$api.punch.getMarkDays(params).then(res=>{
					this.markDays=res.data
				})
			},
            onDayClick(data){
				if (!data) {
					this.isfuture=true
					this.$u.toast('未来日期')
					return
				}
				this.isfuture=false
				this.$u.vuex("vuex_now_date",this.$dateTime.format(new Date(data.date),"YYYY年mm月dd日"))
				
				//获取打卡记录
				let date=this.vuex_now_date.replace('年','-').replace('月','-').replace('日','')
				this.getRecordsByDate(date)
				this.getRuleByDate(date)
            },
			getRecordsByDate(checkinTime){
				let params={
					personId:this.$cache.get('userId'),
					personType:0,
					checkinTime:checkinTime
				}
				this.$api.punch.getRecordsByDate(params).then(res=>{
					let record=res.data
					
					//上班打卡
					this.workPunchRecord= record.filter(item=>{
						return item.checkinType==0
					})
					if (!this.$isEmpty(this.workPunchRecord)) {
						this.workCheckinTime=this.workPunchRecord[0].checkinTime
					}
					
					//下班打卡
					this.offWorkPunchRecord= record.filter(item=>{
						return item.checkinType==1
					})
					if (!this.$isEmpty(this.offWorkPunchRecord)) {
						this.offWorkCheckinTime=this.offWorkPunchRecord[0].checkinTime
					}
					
					//外出打卡
					this.outWorkPunchRecord= record.filter(item=>{
						return item.checkinType==2
					})
					if (!this.$isEmpty(this.outWorkPunchRecord)) {
						this.outWorkCheckinTime=this.outWorkPunchRecord[0].checkinTime
					}
				})
			}
		}
	}
</script>

<style lang="scss">
    page{
        background-color: #FFFFFF;
    }
	
	.flex-center{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.desc{
		font-size: 28rpx;
		color: #8f8f8f;
	}
	
	.content {
		.change{
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            margin-top: 100rpx;
            height: 100rpx;
            color: #b89249;
            background-color: #21191b;
        }
	}
	
	.rule{
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid $dt-border-color-sm;
		
		.left{
			.title{
				font-size: 30rpx;
				font-weight: 800;
				padding-bottom: 10rpx;
			}
		}
		.right{
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	
	.history{
		display: flex;
		padding: 40rpx;
		.left{
			display: flex;
			flex-direction: column;
			justify-content: center;
			
			.time{
				font-weight: 550;
				font-size: 36rpx;
			}
			.bar{
				padding: 10rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;
				
				text{
					width: 8rpx;
					height: 80rpx;
					background-color: #dedede;
				}
			}
		}
		.right{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding-left: 50rpx;
			.working{
				display: flex;
				flex-direction: column;
				
				text:first-child{
					font-weight: 550;
					font-size: 32rpx;
				}
			}
		}
	}
	
	.out-punch{
		display: flex;
		padding:15rpx 30rpx;
		border-bottom: 1rpx solid $dt-border-color-sm;
		
		.time{
			padding-left: 15rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: 550;
			font-size: 36rpx;
		}
		
		.content{
			padding-left: 50rpx;
			display: flex;
			flex-direction: column;
			
			.name{
				font-weight: 550;
				font-size: 32rpx;
				padding-bottom: 10rpx;
			}
		}
		
	}
</style>