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(6)" :class="checkedTab==6?'checkedTab':'noCheckTab'">区域</view>
			<!-- <view class="tabType" @click="changeTab(1)" :class="checkedTab==1?'checkedTab':'noCheckTab'">无需整改</view> -->
		</view>
		<view class="content">
			<view class="type flex" v-if="checkedTab==6">

				<picker @click="$refs.locationTree._show()" :disabled="true" class="picker"
					style="margin-bottom: 15px;">
					<view class="uni-input uni-select cl" v-if="checkPointName==''" style="margin-left: 20px;
                   line-height: 30px">
						区域查询 <image class="icon-down" src="/static/icon-down-black.png" style="margin-right: 40px;"></image>
					</view>
					<view class="uni-input uni-select flex2" v-else>
						<view style="width: 98%;text-align: center;
    line-height: 30px;;" class="ellipsis" >{{checkPointName}}</view>
					</view>
				</picker>
			</view>
			<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 bg4" v-if="checkedTab==6">区域</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>
			<!-- 检查部位 -->
			<tki-tree ref="locationTree" @confirm="(val)=>checkPointBtn(val,1)" idKey='id' :range="checkPointList"
				rangeKey="regionName" confirmColor="#4e8af7" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkPointList: [], //获取检查部位数据
				checkPointName: '',
				type: 1,
				listData: [],
				checkedTab: 2,
				condition: {
					pageNo: 1,
					pageSize: 10,
					projectSn: "",
					status: 2,
				},
				teach: true,
				userInfo: '',
				regionId:[],
				
			}
		},
		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')))
			this.getCheckPointList();
		},
		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: {
			//确定选中--回显
			checkPointBtn(val, type) {
				if (type == 1) {
					
					
					let arr = JSON.parse(JSON.stringify(val[0].parents));
					let obj = {
						id: val[0].id,
						regionName: val[0].regionName
					};
					
					arr.push(obj);
					this.regionId.push(obj.id)
					console.log('this.regionId=============',this.regionId);
					//获取选中的字符串 名称
					var regionName = arr.map(function(item, index) {
						return item.regionName;
					}).join("/");
					this.checkPointName = regionName;
				}
				this.listData = [];
				this.getListData()
			},
			//获取检查部位 列表
			getCheckPointList() {
				this.sendRequest({
					url: 'xmgl/qualityRegion/list',
					method: 'post',
					data: {
						projectSn: this.condition.projectSn
					},
					success: res => {
						if (res.code == 200) {
							this.checkPointList = res.result;
							console.log(this.checkPointList)
						}
					}
				})
			},
			//切换tab
			changeTab(type) {
				this.checkedTab = type;
				this.condition.status = type;
				this.condition.pageNo = 1;
				this.condition.pageSize = 10;
				this.listData = [];
				this.checkPointName=''
				this.regionId =[]
				this.getListData()
			},
			//获取列表数据
			getListData() {
				if (this.checkedTab == 2 || this.checkedTab == 5) {
					this.condition.changeId = this.userInfo.userId
					this.condition.reviewId = ''
					this.condition.verifyManId = ''
					this.condition.regionId=[]
				} else if (this.checkedTab == 3) {
					this.condition.reviewId = this.userInfo.userId
					this.condition.changeId = '';
					this.condition.verifyManId = ''
					this.condition.regionId=[]
				} 
				else if (this.checkedTab == 4) {
					this.condition.verifyManId = this.userInfo.userId
					this.condition.changeId = '';
					this.condition.reviewId = ''
					this.condition.regionId=[]
				}
				else if(this.checkedTab == 6){
					this.condition.status = ''
					this.condition.verifyManId = ''
					this.condition.changeId = '';
					this.condition.reviewId = ''
					this.condition.regionId=this.regionId
				}
				else {
					this.condition.status = ''
					this.condition.reviewId = '';
					this.condition.changeId = '';
					this.condition.verifyManId = ''
					this.condition.regionId=''
				}
				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>
	.picker {
		margin-bottom: 15px;
		margin-left: 100px;
		width: 164px;
		border: 1px solid #ccc;
		height: 30px;
		border-radius: 10px;
	}

	.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>