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 && repairList.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 repairList" :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.worksite_name}}</text>
						<text>姓名：{{item.worker_name}}</text>
						<text>提交时间：{{item.create_time}}</text>
						<text>补卡内容：{{item.desc}}</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">{{repairList.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
				repairList:[], //打卡列表
				page:1,
				size:10,
				status:0,
				total:0,
				isAll:false, //是否全选
				ids:'', //选中的id
			}
		},
		onLoad() {
			// 获取补卡列表
			this.getRepairList();
		},
		onShow() {
			
		},
		onReachBottom() {
			if(this.repairList.length<this.total){
				this.page++;
				// 获取补卡列表
				this.getRepairList();
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			// 获取补卡列表
			this.getRepairList();	
			// 关闭下拉刷新
			uni.stopPullDownRefresh();
		},
		methods: {
			// 选择栏目
			changeEv(index){
				this.status = index;
				this.page = 1;
				// 获取补卡列表
				this.getRepairList();
			},
			// 选中事件
			chooseEv(index) {
				this.repairList[index].ifcheck = !this.repairList[index].ifcheck;
				let exit = this.repairList.filter(item=>item.ifcheck==false);
				if(exit.length>0){
					this.isAll = false;
				} else {
					this.isAll = true;
				}
				let idsTemparr = this.repairList.filter(item=>{return item.ifcheck==true})
				let idsArr = [];
				idsTemparr.forEach(item=>{
					idsArr.push(item.id)
				})
				// 选中的id
				this.ids = idsArr.join(',');
			},
			
			// 全选事件
			chooseAll(){
				let exit = this.repairList.filter(item=>item.ifcheck==false);
				if(exit.length>0){
					this.isAll = true;
					this.repairList.forEach(item=>item.ifcheck = true);
				} else {
					this.isAll = false;
					this.repairList.forEach(item=>{item.ifcheck = false});
				}
				let idsTemparr = this.repairList.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-replenish',params).then(res=>{
					if(res.code==0){
						if(type==0){
							this.$toolAll.tools.showToast('已退回');
						}else{
							this.$toolAll.tools.showToast('已确认');
						}
						// 获取补卡列表
						this.getRepairList();
					}
				})
			},
			
			// 批量确认&退回事件
			submitAll(type){
				let params = {
					id:this.ids,
					type:type
				}
				this.$requst.post('/api/v1/manager/check-replenish',params).then(res=>{
					if(res.code==0){
						if(type==0){
							this.$toolAll.tools.showToast('已退回');
						}else{
							this.$toolAll.tools.showToast('已确认');
						}
						// 获取补卡列表
						this.getRepairList();
					}
				})
			},
			
			// 获取补卡列表
			getRepairList(){
				let params = {
					page:this.page,
					size:this.size,
					status:this.status
				}
				if(this.page==1) this.repairList = [];
				this.$requst.post('/api/v1/manager/replenish-list',params).then(res=>{
					if(res.code==0){
						console.log(res,'补卡列表');
						this.total = res.data.total;
						let repairArr = [];
						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,
								create_time:item.create_time,
								type_text:item.type_text,
								day_text:item.day_text,
								is_statistic:item.is_statistic,
								desc: item.desc,
								ifcheck:false,
							}
							repairArr.push(obj);
						})
						this.repairList = this.repairList.concat(repairArr);
					}
				})
			},
		}
	}
</script>
<style scoped>
	
</style>