zhgdyunapp_vue3/pages/projectEnd/dangerBigProject/dangerBigCheckDetail.vue

<template>
	<view class="content">
		<view class="list">
			<view class="list-item"  v-for="(item,index) in tableData" :key="index">
				<view class="item-title" :class="{'noCheck': item.chooseType == '0'}" @click="showDetail(item)">
					<view class="title-left">
						<view>{{item.checkItem}}</view>
					</view>
					<view class="tag" v-if="item.chooseType == '0'">不检查</view>
					<view v-else>
						<uni-icons2 v-if="!item.isShow" type="arrowright" size="18"></uni-icons2>
						<uni-icons2 v-else type="arrowdown" size="18"></uni-icons2>
					</view>
				</view>
				<view v-if="item.isShow && item.chooseType != '0'">
					<view class="item-children" v-for="(item2,index2) in item.children" :key="index2">
						<view class="item-title title2" :class="{'noCheck': item2.chooseType == '0'}">
							<view class="title-left">
								<view>{{item2.checkContent}}</view>
							</view>
							<view class="tag" v-if="item2.chooseType == '0'">不检查</view>
						</view>
						<view v-if="item2.chooseType != '0'">
							<view class="item-detail" v-for="(item3,index3) in item2.children" :key="index3">
								<view class="item-title title3" :class="{'noCheck': item3.chooseType == '0'}">
									<view class="title-left">
										<view>{{item3.checkDetailContent}}</view>
									</view>
									<view class="tag" v-if="item3.chooseType == '0'">不检查</view>
								</view>
								<view class="item-actions" v-if="item3.chooseType != '0'">
									<view class="upload-img" :class="{'no-image': !item3.imageUrl}">
										<view @click="previewImage(item3)">
											<uni-icons2 type="image" :color="!item3.imageUrl ? '':'#4396E7'" size="16"></uni-icons2>
											{{item3.imageUrl ? item3.imageUrl.split(',').length:'0'}}
										</view>
									</view>
									<view class="item-radio">
										<view class="tag" :class="{'status1': item3.chooseType == 1, 'status2': item3.chooseType == 2,'status3': item3.chooseType == 3}">
											{{item3.chooseName}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="submit-btn" v-if="type != 1 && isEdit == '1' && tableData.length>0 && status != 2" @click="createDanger">创建隐患</view>
	</view>
</template>

<script>
	export default {
		props:['tableData','type','engineeringId','isEdit','status'],
		data(){
			return{
				imgFileList: [],
				colorList:['#1ecc8f','#ff9305','#ff4b49'],
				checkList:[{
					name: '符合',
					value: "1"
				},{
					name: '基本符合',
					value: "2"
				},{
					name: '不符合',
					value: "3"
				}],
				activeIndex: "",
				isShow: true,
			}
		},
		methods:{
			checkRadio(val){
				this.activeIndex = val
			},
			showDetail(val){
				val.isShow = !val.isShow
				this.$forceUpdate()
			},
			previewImage(val) {
				let arr = []
				if(val.imageUrl){
					val.imageUrl.split(',').forEach(item=>{
						arr.push(this.url_config+'image/'+item)
					})
				}
				console.log(arr)
				if(arr.length > 0){
					uni.previewImage({
						urls: arr
					})
				}
			},
			createDanger(){
				uni.navigateTo({
					url:'./checkItemList?id='+ this.tableData[0].children[0].children[0].userCheckId + '&engineeringId='+ this.engineeringId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 20rpx 0;
		.list{
			padding-bottom: 96rpx;
			.list-item{
				margin-bottom: 20rpx;
				.item-title{
					display: flex;
					align-items: center;
					height: 96rpx;
					background: #f8f8f8;
					justify-content: space-between;
					padding: 0 28rpx;
					.title-left{
						display: flex;
						align-items: center;
						font-size: 28rpx;
						width: 100%;
						>view{
							flex: 1;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.uni-icons{
							margin-right: 32rpx;
						}
					}
				}
				.title2{
					background: #fff;
					padding-left: 54rpx;
					border-bottom: 1px solid #eee;
				}
				.title3{
					background: #fff;
					padding-left: 88rpx;
				}
				.item-children{
					background: #fff;
					.item-actions{
						display: flex;
						padding: 20rpx 0;
						padding-left: 88rpx;
						padding-right: 28rpx;
						align-items: center;
						justify-content: space-between;
						border-bottom: 1px solid #eee;
						.upload-img{
							display: flex;
							align-items: center;
							font-size: 28rpx;
							// border: 1px solid #4396E7;
							padding: 10rpx 10rpx;
							color: #4396E7;
							border-radius: 6rpx;
							.uni-icons{
								margin-right: 16rpx;
							}
						}
						.no-image{
							color: #000;
						}
						.item-radio{
							display: flex;
							font-size: 28rpx;
							border-right: 1px solid #eee;
							.tag{
								padding: 4rpx 8rpx;
							}
							.status1{
								background: rgba(#06C232,0.1);
								color: #06C232;
							}
							.status2{
								background: rgba(#ff9305,0.1);
								color: #ff9305;
							}
							.status3{
								background: rgba(#ff4b49,0.1);
								color: #ff4b49;
							}
						}
					}
				}
			}
		}
		.submit-btn{
			position: fixed;
			bottom: 0;
			left: 0;
			height: 96rpx;
			background: #4a88f5;
			color: #fff;
			width: 100%;
			text-align: center;
			line-height: 96rpx;
		}
		.noCheck{
			opacity: 0.5;
			border-bottom: 1px solid #eee;
			font-size: 28rpx;
			.tag{
				padding: 4rpx 8rpx;
				background: #eee;
			}
		}
	}
</style>