building-sign/pagesB/repair/repair.vue

<template>
	<view class="pad-x120">
		<!-- 头部 -->
		<status-nav navBarTitle="补卡确认"></status-nav>
		<view class="content" :style="{'padding-top':statusHeight+50+'px'}">
			<!-- 导航 -->
			<view class="pull-nav" :style="{'top':statusHeight+50+'px'}">
				<sub-nav @changeEv="changeEv"></sub-nav>
			</view>
			<!-- 全选 -->
			<view class="choose-all-bg">
				<view class="choose-all font26" v-if="status==0 && signList.length>0">
					<view class="radio" :class="isAll?'checked':''" @tap="chooseAll"></view>
					<view class="title">全选</view>
					<view class="choose-all-btns font24" v-if="ids!==''">
						<view class="btn color-blue" @tap="submitAll(1)">一键确认</view>
						<view class="btn color-99 btn-no" @tap="submitAll(0)">退回</view>
					</view>
				</view>
			</view>
			<!-- 打卡列表 -->
			<view class="sign-record sign-record-other bg-white">
				<view class="item font26" v-for="(item,index) in signList" :key="index">
					<view class="radio" :class="item.ifcheck?'checked':''" @tap="chooseEv(index)" v-if="status==0"></view>
					<view class="info" :class="status==0?'hide':''">
						<text>姓名：{{item.worker_name}}</text>
						<text>{{item.type_text}}打卡：{{item.created_at}}</text>
						<text>打卡工地：{{item.worksite_name}}</text>
					</view>
					<!-- 待确认 -->
					<view class="examine-btns font24" v-if="item.status==0">
						<view class="btn color-blue" @tap="submitEv(item.id,1)">确认</view>
						<view class="btn color-99" @tap="submitEv(item.id,0)">退回</view>
					</view>
					<!-- 已确认 -->
					<view class="state" :class="item.status==-1?'color-red':''" v-if="item.status==1 || item.status==-1">{{item.status_text}}</view>
				</view>
				<!-- 加载更多 -->
				<view class="more-tips font24">{{signList.length==total?'没有更多数据了':'下滑获取更多'}}</view>
			</view>
		</view>
		<!-- 尾部 -->
		<tabbar :userType="userType" current="2"></tabbar>
	</view>
</template>
<script>
	import subNav from '@/components/sub-nav/sub-nav.vue';
	import tabbar from '@/components/tabbar/tabbar';
	export default {
		components:{
			subNav,
			tabbar
		},
		data() {
			return {
				statusHeight:uni.getSystemInfoSync().statusBarHeight, //状态栏高度
				userType:'director', //账户类型 工人：worker 负责人：director
				signList:[], //打卡列表
				page:1,
				size:10,
				status:0,
				total:0,
				isAll:false, //是否全选
				ids:'', //选中的id
			}
		},
		onLoad() {
			
		},
		onShow() {
			// 获取打卡列表
			this.getSignList();
		},
		onReachBottom() {
			if(this.signList.length<this.total){
				this.page++;
				// 获取打卡列表
				this.getSignList();
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			// 获取打卡列表
			this.getSignList();	
			// 关闭下拉刷新
			uni.stopPullDownRefresh();
		},
		onShareAppMessage(res) {
			let shareObj = {
				title:'工地打卡',
				path: '/pages/pagehome/pagehome',
				imageUrl:'/static/share-logo.jpg',
			}
			// 返回shareObj
			return shareObj;
		},
		methods: {
			// 选择栏目
			changeEv(index){
				this.status = index;
				this.page = 1;
				// 获取打卡列表
				this.getSignList();
			},
			// 选中事件
			chooseEv(index) {
				this.signList[index].ifcheck = !this.signList[index].ifcheck;
				let exit = this.signList.filter(item=>item.ifcheck==false);
				if(exit.length>0){
					this.isAll = false;
				} else {
					this.isAll = true;
				}
				let idsTemparr = this.signList.filter(item=>{return item.ifcheck==true})
				let idsArr = [];
				idsTemparr.forEach(item=>{
					idsArr.push(item.id)
				})
				// 选中的id
				this.ids = idsArr.join(',');
			},
			
			// 全选事件
			chooseAll(){
				let exit = this.signList.filter(item=>item.ifcheck==false);
				if(exit.length>0){
					this.isAll = true;
					this.signList.forEach(item=>item.ifcheck = true);
				} else {
					this.isAll = false;
					this.signList.forEach(item=>{item.ifcheck = false});
				}
				let idsTemparr = this.signList.filter(item=>{return item.ifcheck==true})
				let idsArr = [];
				idsTemparr.forEach(item=>{
					idsArr.push(item.id)
				})
				// 选中的id
				this.ids = idsArr.join(',');
			},
			
			// 确认&退回事件
			submitEv(id,type){
				let params = {
					id:id,
					type:type
				}
				this.$requst.post('/api/v1/manager/check-clock',params).then(res=>{
					if(res.code==0){
						if(type==0){
							this.$toolAll.tools.showToast('已退回');
						}else{
							this.$toolAll.tools.showToast('已确认');
						}
						// 获取打卡列表
						this.getSignList();
					}
				})
			},
			
			// 批量确认&退回事件
			submitAll(type){
				let params = {
					id:this.ids,
					type:type
				}
				this.$requst.post('/api/v1/manager/check-clock',params).then(res=>{
					if(res.code==0){
						if(type==0){
							this.$toolAll.tools.showToast('已退回');
						}else{
							this.$toolAll.tools.showToast('已确认');
						}
						// 获取打卡列表
						this.getSignList();
					}
				})
			},
			
			// 获取打卡列表
			getSignList(){
				let params = {
					page:this.page,
					size:this.size,
					status:this.status
				}
				if(this.page==1) this.signList = [];
				this.$requst.post('/api/v1/manager/clock-list',params).then(res=>{
					if(res.code==0){
						console.log(res,'打卡列表');
						this.total = res.data.total;
						let signArr = [];
						res.data.list.forEach(item=>{
							let obj = {
								id: item.id,
								created_at:item.created_at,
								status:item.status,
								status_text:item.status_text,
								worksite_name: item.worksite_name,
								worker_name:item.worker_name,
								type_text: item.type_text,
								is_statistic: item.is_statistic,
								ifcheck:false,
							}
							signArr.push(obj);
						})
						this.signList = this.signList.concat(signArr);
					}
				})
			},
		}
	}
</script>
<style scoped>
	
</style>