zhgdyunapp/pages/projectEnd/qualityManage/list.vue

<template>
	<view class="listPage">
		<headers :showBack="true">
			<view class="headerName">
				质量检查记录
			</view>
		</headers>
		<view class="tab flex2">
			<view class="tabType" @click="changeTab(0)" :class="checkedTab==0?'checkedTab':'noCheckTab'">全部</view>
			<view class="tabType" @click="changeTab(2)" :class="checkedTab==2?'checkedTab':'noCheckTab'">待整改</view>
			<view class="tabType" @click="changeTab(3)" :class="checkedTab==3?'checkedTab':'noCheckTab'">待复查</view>
			<view class="tabType" @click="changeTab(4)" :class="checkedTab==4?'checkedTab':'noCheckTab'">待核验</view>
			<view class="tabType" @click="changeTab(5)" :class="checkedTab==5?'checkedTab':'noCheckTab'">已整改</view>
			<!-- <view class="tabType" @click="changeTab(1)" :class="checkedTab==1?'checkedTab':'noCheckTab'">无需整改</view> -->
		</view>
		<view class="content">
			<view class="item" v-if="listData.length>0" v-for="(item,index) in listData" :key="index" @click="goDetails(item.id)">
				<view class="item_title">{{item.dangerItemContent}}</view>
				<view class="item_content">整改人: {{item.changeName}}</view>
				<view class="item_info flex2">
					<view class="name">检查人：{{item.inspectManName}}</view>
					<view class="time">{{item.inspectTime}}</view>
					<view class="state bg1" v-if="checkedTab==2">待整改</view>
					<view class="state bg2" v-if="checkedTab==3">待复查</view>
					<view class="state bg3" v-if="checkedTab==4">待核验</view>
					<view class="state bg4" v-if="checkedTab==5">已整改</view>
					<!-- <view class="state bg3" v-if="checkedTab==1">无需整改</view> -->
				</view>
			</view>
			<view class="noData" v-if="listData.length==0">
				<image class="noDataImg" src="../../../static/noData.png"></image>
				<view>暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
				listData: [],
				checkedTab: 2,
				condition: {
					pageNo: 1,
					pageSize: 10,
					projectSn: "",
					status:2,
				},
				teach:true,
				userInfo: ''
			}
		},
		onLoad(option) {
			this.condition.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			// console.log(JSON.parse(uni.getStorageSync('userInfo')))
		},
		onShow() {
			this.listData=[];
			this.condition.pageNo = 1;
			this.condition.pageSize = 10;
			this.getListData();
		},
		//上拉触底时间
		onReachBottom(){
			if(this.teach){
				this.condition.pageNo = this.condition.pageNo+1;
				this.getListData();
			}
		},
		methods: {
			//切换tab
			changeTab(type) {
				this.checkedTab = type;
				this.condition.status = type;
				this.condition.pageNo = 1;
				this.condition.pageSize = 10;
				this.listData = [];
				this.getListData();
			},
			//获取列表数据
			getListData(){
				if(this.checkedTab == 2 || this.checkedTab == 5){
					this.condition.changeId = this.userInfo.userId
					this.condition.reviewId = ''
					this.condition.verifyManId = ''
				} else if (this.checkedTab == 3 ) {
					this.condition.reviewId = this.userInfo.userId
					this.condition.changeId = '';
					this.condition.verifyManId = ''
				} else if (this.checkedTab == 4) {
					this.condition.verifyManId = this.userInfo.userId
					this.condition.changeId = '';
					this.condition.reviewId = ''
				} else {
					this.condition.status = ''
					this.condition.reviewId = '';
					this.condition.changeId = '';
					this.condition.verifyManId = ''
				}
				console.log(this.condition,this.checkedTab)
				let that  = this;
				// uni.showLoading({title: '加载中'})
				this.sendRequest({
					url:'xmgl/qualityInspectionRecord/list',
					method:'post',
					data:that.condition,
					success:res=>{
						console.log(res)
						// uni.hideLoading()
						let arr = JSON.parse(JSON.stringify(this.listData));
						if(res.result.page.records.length>0){
							let newArr = arr.concat(res.result.page.records);
							if(res.result.page.records.length<10){
								that.teach=false;
							}else{
								that.teach=true;
							}
							that.listData = newArr;
							console.log(that.listData)
						}else{
							that.teach = false;
						}
					}
				})
			},
			goDetails(id){
				uni.navigateTo({
					url:'./details?id='+id+ '&type=' + this.checkedTab
				})
			}
		}
	}
</script>

<style>
	.flex {
		display: flex;
		align-items: center;
	}

	.flex2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tab {
		width: 100%;
		height: 45px;
		text-align: center;
		box-shadow: 0 0 10px  rgba(194, 194, 194, 0.5);
	}

	.tabType {
		width: 33%;
		line-height: 43px;
		border-bottom: 1px solid rgba(194, 194, 194, 0.2);
		
	}

	.checkedTab {
		color: #4181FE;
		border-bottom: 2px solid #4181FE;

	}
	.noCheckTab {
		padding-bottom: 2px;
	}
	
	.content{
		padding: 20px 30rpx 0;
		box-sizing: border-box;
		width: 100%;
	}
	.item{
		width: 100%;
		padding: 12px 30rpx;
		box-sizing: border-box;
		box-shadow: 0 0 10px  rgba(194, 194, 194, 0.5);
		border-radius: 4px;
		margin-bottom: 15px;
		color: rgba(51, 51, 51, 1);
		font-size: 32rpx;
		font-family: PingFangSC-Medium;
	}
	.item_title{
		font-weight: 600;
		margin-bottom: 2px;
	}
	.item_content{
		width: 100%;
		font-size:28rpx ;
		color: rgba(51, 51, 51, 1);
		font-family: PingFangSC-Regular;
		line-height: 28px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		
	}
	.item_info{
		font-size: 26rpx;
		line-height: 24px;
		font-family: PingFangSC-Regular;
		color: #999;
	}
	
	.state{
		padding: 0px 8px;
		color: #fff;
		box-sizing: border-box;
		border-radius: 30px;
		font-size: 24rpx;
	}
	.bg1{
		background-color: rgba(245, 166, 35, 1);
		box-shadow: 0px 2px  0px rgba(242, 76, 50, 0.28);
	}
	.bg2{
		background-color: rgba(88, 86, 214, 1);
		box-shadow: 0px 2px 0px rgba(87, 81, 217, 0.28);
	}
	.bg3{
		background-color: rgba(238, 94, 94, 1);
		box-shadow: 0px 2px 0px rgba(236, 92, 98, 0.28);
	}
	.bg4{
		background-color: rgba(76, 217, 100, 1);
		box-shadow: 0px 2px 0px rgba(68, 219, 94, 0.28);
	}
	.noData{
		text-align: center;
		font-size: 32rpx;
		margin-top: 120px;
		color: #bed0fb;
	}
	.noDataImg{
		width: 125px;
		height: 98px;
	}
</style>