yuanqu_ui/work/pages/clock/abnormal.vue

<template>
	<view class="abbox">
		<block v-for="(ite,idx) in recordList" :key='idx'>
			<view class="ablist" v-if="ite.kaTypeAmIn&&ite.kaTypeAmIn!=1">
				<view class="ablistop">
					<view>{{ite.kaTime}} {{weeks[ite.kaWeek]}}</view>
					<view>上午上班
						<text v-if="ite.kaTypeAmIn==2">迟到</text>
						<text v-if="ite.kaTypeAmIn==3">外勤</text>
						<text v-if="ite.kaTypeAmIn==4">早退</text>
						<text v-if="ite.kaTypeAmIn==5">旷工</text>
					
					</view>
				</view>
				<!-- <view class="ablistr bg1" v-if="ite.kaTypeAmIn==2||ite.kaTypeAmIn==4||ite.kaTypeAmIn==5">补卡</view>
				<view class="ablistr bg6" v-if="ite.kaTypeAmIn==3">外勤</view> -->
				<view class="ablistr cicr2" v-if="ite.kaTypeAmIn==2">迟到</view>
				<view class="ablistr cicr3" v-if="ite.kaTypeAmIn==3">外勤</view>
				<view class="ablistr cicr4" v-if="ite.kaTypeAmIn==4">早退</view>
				<view class="ablistr cicr5" v-if="ite.kaTypeAmIn==5">旷工</view>
			</view>
			<view class="ablist" v-if="ite.kaTypeAmOut&&ite.kaTypeAmOut!=1">
				<view class="ablistop">
					<view>{{ite.kaTime}} {{weeks[ite.kaWeek]}}</view>
					<view>上午下班
						<text v-if="ite.kaTypeAmOut==2">迟到</text>
						<text v-if="ite.kaTypeAmOut==3">外勤</text>
						<text v-if="ite.kaTypeAmOut==4">早退</text>
						<text v-if="ite.kaTypeAmOut==5">旷工</text>
					
					</view>
				</view>
				<!-- <view class="ablistr bg1" v-if="ite.kaTypeAmOut==2||ite.kaTypeAmOut==4||ite.kaTypeAmOut==5">补卡</view>
				<view class="ablistr bg6" v-if="ite.kaTypeAmOut==3">外勤</view> -->
				<view class="ablistr cicr2" v-if="ite.kaTypeAmOut==2">迟到</view>
				<view class="ablistr cicr3" v-if="ite.kaTypeAmOut==3">外勤</view>
				<view class="ablistr cicr4" v-if="ite.kaTypeAmOut==4">早退</view>
				<view class="ablistr cicr5" v-if="ite.kaTypeAmOut==5">旷工</view>
			</view>
			<view class="ablist" v-if="ite.kaTypePmIn&&ite.kaTypePmIn!=1">
				<view class="ablistop">
					<view>{{ite.kaTime}} {{weeks[ite.kaWeek]}}</view>
					<view>下午上班
						<text v-if="ite.kaTypePmIn==2">迟到</text>
						<text v-if="ite.kaTypePmIn==3">外勤</text>
						<text v-if="ite.kaTypePmIn==4">早退</text>
						<text v-if="ite.kaTypePmIn==5">旷工</text>
					
					</view>
				</view>
				<!-- <view class="ablistr bg1" v-if="ite.kaTypePmIn==2||ite.kaTypePmIn==4||ite.kaTypePmIn==5">补卡</view>
				<view class="ablistr bg6" v-if="ite.kaTypePmIn==3">外勤</view> -->
				<view class="ablistr cicr2" v-if="ite.kaTypePmIn==2">迟到</view>
				<view class="ablistr cicr3" v-if="ite.kaTypePmIn==3">外勤</view>
				<view class="ablistr cicr4" v-if="ite.kaTypePmIn==4">早退</view>
				<view class="ablistr cicr5" v-if="ite.kaTypePmIn==5">旷工</view>
			</view>
			<view class="ablist" v-if="ite.kaTypePmOut&&ite.kaTypePmOut!=1">
				<view class="ablistop">
					<view>{{ite.kaTime}} {{weeks[ite.kaWeek]}}</view>
					<view>下午下班
						<text v-if="ite.kaTypePmOut==2">迟到</text>
						<text v-if="ite.kaTypePmOut==3">外勤</text>
						<text v-if="ite.kaTypePmOut==4">早退</text>
						<text v-if="ite.kaTypePmOut==5">旷工</text>
					
					</view>
				</view>
				<!-- <view class="ablistr bg1" v-if="ite.kaTypePmOut==2||ite.kaTypePmOut==4||ite.kaTypePmOut==5">补卡</view> -->
				<view class="ablistr cicr2" v-if="ite.kaTypePmOut==2">迟到</view>
				<view class="ablistr cicr3" v-if="ite.kaTypePmOut==3">外勤</view>
				<view class="ablistr cicr4" v-if="ite.kaTypePmOut==4">早退</view>
				<view class="ablistr cicr5" v-if="ite.kaTypePmOut==5">旷工</view>
			</view>
			
		</block>
		<view class="shax" v-if="recordList.length>0">{{wtdt}}</view>
		<view class="nodata" v-else>
			<image :src="noiconpimg"></image>
			<view>
				暂无数据
			</view>
		</view>
		<!-- <block v-else>
			<view class="shax">
				暂无数据
			</view>
		</block> -->
		<!-- <view class="ablist">
			<view class="ablistop">
				<view>2021-05-12 星期一</view>
				<view>临时请假 1小时32分钟</view>
				<view class="ablistopt">请假时间：09:06-10:38</view>
			</view>
			<view class="ablistr bg0" @click="getNoFan">销假</view>
		</view>
		<view class="ablist">
			<view class="ablistop">
				<view>2021-05-12 星期一</view>
				<view>下午上班打卡 未打卡</view>
				<view class="ablistopt">打卡时间：09:01</view>
			</view>
			<view class="ablistr bg6">请假</view>
		</view> -->
	</view>
</template>

<script>
	import {
		getRecordList} from "@/api/work/check.js"
	export default{
		data(){
			return{
				noiconpimg:require("@/work/static/clock/noiconp.png"),
				pageNum:1,
				pageSize:10,
				reachflag:true,
				wtdt:'上拉加载更多',
				recordList:[],
				userId: this.$store.state.user.userId,
				deptId: this.$store.state.user.deptId,
				weeks: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
			}
		},
		onLoad() {
			// this.formatDateTime()
			// this.getDataFn()
		},
		methods:{
			getNoFan(){
				this.$tab.navigateTo("/pages/noleave")
			},
			formatDateTime() {
				var date=new Date()
			  let y = date.getFullYear();
			  let m = date.getMonth() + 1;
			  m = m < 10 ? "0" + m : m;
			  let d = date.getDate();
			  d = d < 10 ? "0" + d : d;
			  const time = y + "-" + m ;
			  this.kaYear=y;
			  this.kaMonth=m;
			  return `${y}-${m}`;
			
			},
			getDataFn() {
			var params = {
					deptId: this.deptId,
					userId: this.userId,
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					kaYear: this.kaYear,
					kaMonth: this.kaMonth,
					kaStatus:2
					}
					getRecordList(params).then(res => {
						if (res.code == 200) {
							if (res.rows.length < this.pageSize) {
								this.reachflag = false
								this.wtdt = '到底了~';
							} else {
								var num = parseInt(res.rows.length) + parseInt(this.pageSize) * parseInt(this.pageNum -
									1)
								if (num < res.total) {
									this.reachflag = true
									this.wtdt = '上拉加载更多'
								} else {
									this.reachflag = false
									this.wtdt = '到底了~';
								}
							}
							if (this.pageNum == 1) {
								this.recordList = res.rows;
							} else {
								this.recordList = this.recordList.concat(res.rows)
							}
								
						} else {
							this.$toast(res.msg)
						}
					})		
			},
		}
	}
</script>

<style scoped lang="scss">
.nodata{
		padding-top: 200rpx;display: flex;flex-direction: column;align-items: center;
		image{width: 472rpx;height: 308rpx;margin-bottom: 48rpx;}
		view{font-size: 26rpx;color: #343434;font-weight: bold;}
	}
.abbox{padding: 32rpx 32rpx 4rpx;background-color: #f2f2f2;box-sizing: border-box;min-height: 100vh;}

.ablist{background: #FFFFFF;
box-shadow: 0px 4rpx 6rpx 0px rgba(189,189,189,0.35);margin-bottom: 20rpx;
border-radius: 10rpx;padding: 36rpx 24rpx 20rpx 36rpx;display: flex;align-items: center;
	.ablistop{font-size: 28rpx;color: #343434;flex: 1;line-height: 40rpx;
		.ablistopt{font-size: 28rpx;color: #666666;margin-top: 6rpx;}
	}
	.ablistr{min-width: 138rpx;height: 48rpx;background: #6CBC0A;border-radius: 24rpx;font-size: 26rpx;color: #FFFFFF;line-height: 48rpx;text-align: center;padding: 0 12rpx;box-sizing: border-box;flex: 0 0 auto;margin-left: 20rpx;

	&.cicr2{background-color: $uni-katype2 !important;}//迟到
	&.cicr3{background-color: $uni-katype3 !important;}//外勤
	&.cicr4{background-color: $uni-katype4 !important;}//早退
	&.cicr5{background-color: $uni-katype5 !important;}//旷工
	}
}
</style>