zhgdyunapp_vue3/pages/projectEnd/dangerBigProject/verifyTableList.vue

<template>
	<view class="control">
		<!-- <view class="control-h2 flex j-between a-center">
			进度记录
			<view class="control-total">0/10</view>
		</view> -->
		<view class="control-list" v-if="listData && listData.length>0">
			<view class="control-item" v-for="(item,index) in listData" :key="index" @click="previewDetail(item)">
				<view class="item-title flex a-center j-between b-bottom">
					{{item.acceptanceType == 1 ? '施工条件验收': item.acceptanceType == 2 ? '危大工程验收':''}} {{item.createUserName}} {{item.createTime}}
					<view class="tag" :class="{'status1': item.status == 2, 'status2': item.status == 1}">
						{{ item.status == 1 ? '执行中': item.status == 2 ? '已完成' : '未执行'}}
					</view>
				</view>
				<view class="item-select-box b-bottom" >
					<view class="item-content flex a-center">
						<view class="item-label">验收部位：</view>
						<view class="item-info">
							<view class="text">
								{{item.acceptanceRegion}}
							</view>
						</view>
					</view>
				</view>
				<view class="item-select-box b-bottom">
					<view class="item-content flex a-center">
						<view class="item-label">验收人：</view>
						<view class="item-info">
							<view class="text">
								{{item.userlist.join(',')}}
							</view>
						</view>
					</view>
				</view>
				<view class="item-select-box" :class="{'b-bottom': item.status == 2}">
					<view class="item-content flex">
						<view class="item-label">计划执行时间：</view>
						<view class="item-info">
							<view class="text">
								{{item.planExecuteTime}}
							</view>
						</view>
					</view>
				</view>
				<view class="item-select-box" v-if="item.status == 2">
					<view class="item-content flex">
						<view class="item-label">验收结果：</view>
						<view class="item-info">
							<view class="text" v-for="(item,index) in JSON.parse(item.userChooseResult)" :key="index" :style="{'color': colorList[index]}">
								{{item.name}} {{item.num ? item.num:'0'}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="no-data" v-else>
			<image class="img" src="/static/noData.png"></image>
			<text class="txt">暂无数据</text>
		</view>
	</view>
</template>

<script>
	export default {
		props:['detailId'],
		data(){
			return{
				listData:[],
				colorList:['#13B98C','#F0AD4E','#DD524D', '#4396E7'],
				userId: ""
			}
		},
		created(){
			this.initData();
			this.userId = JSON.parse(uni.getStorageSync('userInfo')).userId
		},
		methods:{
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			initData(){
				this.sendRequest({
					url:'xmgl/acceptanceTableCheckTask/selectList',
					method:'post',
					data: {engineeringId: this.detailId},
					success:res=>{
						uni.hideLoading()
						if(res.code==200){
							this.listData = res.result
							console.log(res)
						}
					}
				})
			},
			previewDetail(val){
				console.log(val)
				if(val.status==0){
					if(val.createUser == this.userId){
						uni.navigateTo({
							url:'./addVerifyForm?type=1&taskId='+val.id
						})
					} else{
						uni.navigateTo({
							url:'./addVerifyForm?type=2&taskId='+val.id
						})
					}
				}else{
					let type = 1
					val.acceptanceUser.split(',').forEach(item=>{
						if(this.userId == item){
							type = 2
							return;
						}
					})
					// console.log(type, this.userId)
					uni.navigateTo({
						url: './dangerBigCheck?id='+val.engineeringId+'&taskId='+val.id+'&type='+type + '&status='+ val.status
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.control{
		padding-top: 20rpx;
		padding-bottom: 40rpx;
		.flex{
			display: flex;
		}
		.j-between{
			justify-content: space-between;
		}
		.a-center{
			align-items: center;
		}
		.b-bottom{
			border-bottom: 1px solid #F6F6F6;
		}
		.control-h2{
			font-size: 28rpx;
			height: 60rpx;
			padding: 0 20rpx;
			background: rgba(255,255,255,0.5);
		}
		.control-list{
			font-size: 28rpx;
			.control-item{
				margin-bottom: 20rpx;
				.item-title{
					// font-weight: 600;
					background: rgba(255, 255, 255, 0.5);
					padding: 0 20rpx;
					height: 62rpx;
					line-height: 72rpx;
					.tag{
						font-weight: normal;
						border-radius: 6rpx;
						font-size: 24rpx;
						height: 40rpx;
						line-height: 40rpx;
						padding: 0 20rpx;
						color: #909399;
						background: #EEEEEE;
					}
					.status1{
						color: #13B98C;
						background: rgba(#13B98C, 0.1);
					}
					.status2{
						color: #F0AD4E;
						background: rgba(#F0AD4E, 0.1);
					}
				}
			}
			.item-select-box{
				padding: 18rpx 20rpx;
				background: #fff;
				.item-content{
					width: 100%;
					.item-label{
						white-space: nowrap;
						width: 208rpx;
						line-height: 52rpx;
					}
					.item-info{
						flex: 1;
						.text{
							margin-right: 18rpx;
							line-height: 52rpx;
							display: inline-block;
						}
					}
				}
				
			}
			.img-wrap{
				margin-top: 20rpx;
				flex-wrap: wrap;
			}
			.item-img{
				padding: 20rpx 0;
				.imgBox{
					width: 100rpx;
					height: 100rpx;
					margin-left: 20rpx;
					.img{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.no-data{
			text-align: center;
			.img{
				display: block;
				height: 200rpx;
				width: 200rpx;
				margin: 0 auto;
				margin-top: 60rpx;
				margin-bottom: 60rpx;
			}
			.txt{
				color: #C0C4CC;
			}
		}
	}
</style>