palletApp/components/checkContent.vue

<template>
	<view>
		<view v-for="(i,ind) in relatedContents" :key='ind'> 
		<view v-if="(ind==0 && i.sort) || (ind>0 && i.sort && i.sort!=relatedContents[ind-1].sort)" style="width: 100%; font-size: 28rpx;font-weight: 600;color:#000; margin-left: 20rpx;">
			<view style="margin:24rpx 0 12rpx 0">
				<image v-if="i.isTmpFlag=='1'" :src="zdy" class="radius" style="margin-right: 8rpx;"></image>
			    {{i.sort}}
			</view>
		</view>
		<view class="checkproduct finish" >
			<view class="u-flex u-col-top  u-row-between">
				<view class="u-flex  u-row-between">
					<view v-if="!editContent" class="noticeBar" style="margin-right: 20rpx;" >{{i.content||i.checkContent}}</view>
					<u-input v-else v-model="i.content" type="text" class="noticeBar contentInp" placeholder="请输入检查内容" height="30" />
				</view>
				<view>
					<image v-if="editContent" :src="del" @click="delContent(ind)" class="delIcon"></image>
					<!-- <u-tag v-if="checkResult" class="tit" :text='i.checkResult==0?"无隐患":"有隐患"' border-color="#fff"
						:type="i.checkResult==0?'success':'error'" /> -->
				</view>
			</view>
			<view class="u-flex u-row-between star">
				
				<view v-if="!checkResult">
					<u-radio-group v-model="i.checkResult" @change="changeRadio($event,ind)">
						<u-radio size="mini" v-for="(item, index)  in checkList" :key="index" :name="item.value">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
				<view v-else style="width: 200rpx;">
					<view :class="i.checkResult==0?'dangerno':'dangeryes'">
						<image v-if="i.checkResult==0" class="radius" :src="radius" width="32rpx" height="32rpx"></image>
						<image v-else class="radius" :src="radiusyes" width="38rpx" height="38rpx"></image>
						<span style="margin-left: 8rpx; margin-bottom: 8rpx;">{{i.checkResult==0?"无隐患":"有隐患"}}</span>
					</view>
				</view>
				
				<view style="width: 100%; text-align: right;">
					<u-button v-if="i.regionIds" size="mini" class="colorBtn" style="margin-right: 20rpx;" shape="square"
						@click="lookRegion(i.regionIds,ind)">所在区域
					</u-button>
					<u-button size="mini" :class="(i.problemDesc||i.checkResult=='1')?'colorBtnRed':''" shape="square"
						@click="(i.problemDesc||i.checkResult==1)&&problem(i.problemDesc,ind)">问题描述
					</u-button>
					<u-button size="mini" :class="(i.photoIds.length>0||!checkResult)?'colorBtn':''" style="margin-left: 20rpx;" shape="square"
						@click="(i.photoIds.length>0||!checkResult)&&lookphoto(i.photoIds,ind)">现场照片
					</u-button>
				</view>
		
				<u-modal v-model="showModal" content="是否删除该检查项" show-cancel-button @confirm='modalDel'
					@cancel="showModal=false"></u-modal>
			</view>
		</view>
		</view>
		<u-popup v-model="show" z-index="1000" mode="bottom" border-radius="8" height="300rpx">
			<view class="popup">
				<view v-if="checkResult&&relatedContents[itemIndex]" >
					<u-image class="checkimg" width="200rpx" height="200rpx" v-for="(item,index) in relatedContents[itemIndex].photoList" :key="index" @tap="ViewImage1(item,index)" :data-url="index"
						:src="imgurl+`/portal/file/onlinePreviewController/v1/getFileById_${item.id}`"></u-image>
				</view>
		
				<UploadFile v-else @picIds="picIds" :fileidList='fileidList'></UploadFile>
			</view>
		</u-popup>
		<u-popup v-model="showRemark" z-index="1000" mode="bottom" border-radius="8" height="200rpx">
			<view class="popup">
				
				<u-input v-if="editContent" type="textarea" :value="problemDesc" @blur='blur' maxlength='30' placeholder="请填写问题描述" />
				<view style="margin-right: 20rpx;line-height: 36rpx;">{{problemDesc}}</view>
				
			</view>
		</u-popup>
		<u-popup v-model="showRegion" style="z-index: 10000;" @close="close" @open="open" mode="bottom">
			<view class="popcon">
				<view class="popbtn" @tap="close">
					<u-icon name="close" size="36" color="#909399"></u-icon>
				</view>
				<view class="poptitle">
					所在区域
				</view>
				<view class="popcell" v-if="regionListNames">
					<view class="rlist" v-for="(res, index) in regionListNames" :key="index">
						<view class="rhead">
							{{res.name}}
						</view>
						<view class="rcon">
							<view class="rcell" v-for="(text, ii) in res.texts" :key="ii">
								{{text}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
		<u-button type="primary" v-if="!checkResult" class="submit" @click="submitTask" shape="circle">提 交</u-button>
		<view style="height:40rpx ;"></view>
	</view>
</template>

<script>
	import UploadFile from "@/components/UploadFile.vue"
	export default {
		name: "myCheck",
		components: {
			UploadFile
		},
		props: ['list', 'editContent', 'checkResult'],
		data() {
			return {
				del: require("@/static/images/del.png"),
				zdy: require("@/static/images/zdy.png"),
				radius: require("@/static/images/radius.png"),
				radiusyes: require("@/static/images/radiusred.png"),
				imgurl:'',
				fileidList: [],
				showRemark: false,
				showModal: false,
				showRegion: false,
				content: {},
				relatedContents: [],
				show: false,
				showColor:false,
				desc:false,
				problemDesc: '',
				delIndex: null,
				picidlist: [],
				problemIndex: null,
				checkList: [{
					name: "无隐患",
					value: "0"
				}, {
					name: "有隐患",
					value: "1"
				}],
				itemIndex: 0,
				regionListNames:[]
			}

		},
		watch: {
			list(val) {
				this.relatedContents = val.map(function(item) {
					if (item.photoIds&&Array.isArray(item.photoIds)) {
						item.photoIds = item.photoIds
					} else if (item.photoIds&&typeof(item.photoIds) == 'string') {
						item.photoIds = item.photoIds.split(',')
					} else {
						item.photoIds = []
					}
				item.checkResult=item.checkResult?item.checkResult:"0"
					return item;
				})
			}
		},
		mounted() {
			this.imgurl=this.$u.api.imgurl;
		},
		methods: {
			lookphoto(val, index) {
				this.show = true;
				this.itemIndex = index
				if (this.relatedContents[this.itemIndex].photoIds.length > 0) {
					this.fileidList = this.relatedContents[this.itemIndex].photoIds
				}else{
					this.fileidList =[]
				}
			},
			picIds(val, i) {
				this.relatedContents[this.itemIndex].photoIds = val;
			},
			submitTask() {
				let isok = this.relatedContents.every(item => {
					item.checkResult = !item.checkResult ? '0' : item.checkResult
					return (item.checkResult == 1 && item.problemDesc) || (item.checkResult == 0)
				})
				if (!isok) {
					this.$refs.uToast.show({
						title: '有隐患时请填写问题描述',
						type: 'error',
					})
				} else {
					this.$emit('submitData', this.relatedContents)
				}
			},
			delContent(index) {
				this.delIndex = index
				this.showModal = true
			},
			changeRadio(val,ind){
				this.$forceUpdate()
			},
			ViewImage1(val,index) {
				var imgList=[];
				this.relatedContents[this.itemIndex].photoList.forEach((item,index)=>{
					imgList.push(this.imgurl+`/portal/file/onlinePreviewController/v1/getFileById_${item.id}`);
				})
				uni.previewImage({
					urls: imgList,
					current:index
				});
			},
			problem(val, index) {
				this.showRemark = true
				this.problemIndex = index
				this.problemDesc = val
			},
			lookRegion(val,index) {
				if(!this.relatedContents[index].regionListName){
					this.relatedContents[index].regionListName=[];
					// 获取区域数据
					uni.showLoading();
					var param={
						regionIds:val
					}
					this.$u.api.queryregionNameById(param).then(res => { 
						uni.hideLoading();
						console.log(res)
						if(res&&res.length>0){
							var regionListName=res;
							regionListName.forEach((cell) => {
								var ii= Object.keys(cell)[0];
							    var item={
							        name: ii,
							        texts:cell[ii]?(cell[ii]).split(','):[]
							    };
							    this.relatedContents[index].regionListName.push(item);
							});
							console.log(this.relatedContents[index].regionListName)
							this.regionListNames=this.relatedContents[index].regionListName;
							this.showRegion = true;
						}
					})
				}
				else{
					this.regionListNames=this.relatedContents[index].regionListName;
					this.showRegion = true;
				}
			},
			modalDel() {
				this.relatedContents.splice(this.delIndex, 1)
				this.$emit('contentData', this.relatedContents)
			},
			blur(val) {
				this.relatedContents[this.problemIndex].problemDesc = val;
			},
			close() {
				// console.log('close');
				this.showRegion=false;
			},
			open() {
				// console.log('open');
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep img{
		opacity: 1
	}
	.radius{
		width: 28rpx;
		height: 28rpx;
	}
.u-drawer{
	height: auto !important;
}
.checkimg{

	margin-right: 20rpx;
	display: inline-block;
	
}
.tit{
	width: 120rpx;
	margin-top: -12rpx;
}
	.checkproduct {
		width: 710rpx;
		padding: 24rpx;
		margin-left: 20rpx;
		background: #fff;
		// height: 80rpx;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		image {
			width: 28rpx;
			height: 28rpx;
			// top: -6rpx;
		}
		.noticeBar {
			// width: 450rpx;
			// margin-top: 20rpx;
			margin-bottom: 8rpx;
			font-size: 28rpx;
			color:#000;
		}
		.delIcon {
			float: right;
		}
		.dangerno{
			height: 60rpx;
			width: 150rpx;
			background: url('../static/images/nobg.png') no-repeat center center;
			background-size: 100% auto;
			font-size: 24rpx;
			color:#347ACF;
			padding: 12rpx;
		}
		.dangeryes{
			height: 60rpx;
			width: 150rpx;
			background: url('../static/images/hasbg.png') no-repeat center center;
			background-size: 100% auto;
			font-size: 24rpx;
			color:#fa3534;
			padding: 12rpx;
		}
	}

	.contentInp {
		margin-left: 20rpx;
		z-index: 9;
		    // display: inline-block;
		 // width: 300rpx;
	}



	.finish {
		// height: 180rpx;

		.buttonList {
			margin-left: 360rpx;
			margin-top: 40rpx;
		}
	}

	.popup {
		margin-left: 46rpx;
		margin-top: 40rpx;
	}

	.star {
		position: relative;
		top: 10rpx;
		// height: 166rpx;
	}

	.colorBtn {
		color: #347ACF;
		border-color: #347ACF;

	}
	.colorBtnRed {
		color: #fa3534;
		border-color: #fa3534;

	}
	.submit {
		width: 710rpx;
		margin: 20rpx
	}
	.popcon{
		position: relative;
		display: block;
		overflow: hidden;
		width: 100%;
		.popbtn{
			position: absolute;
			right:20rpx;
			top:26rpx;
			font-size: 28rpx;
		}
		.poptitle
		{
			color:#33383C;
			font-size: 30upx;
			margin: 26rpx;
			text-align: left;
		}
		.popcell{
			padding: 20rpx;
			.rlist{
				position: relative;
				display: block;
				overflow: hidden;
				width: 100%;
				.rhead{
					width: 100%;
					height: 66rpx;
					line-height: 66rpx;
					text-align: center;
					background: url('../static/images/areabg.jpg') no-repeat center center;
					background-size: 100% auto;
					font-size: 28rpx;
					font-weight: 600;
					color:#fff;
					border-radius: 10rpx 10rpx 0 0;
				}
				.rcon{
					width: 100%;
					background-color: #f8fafc;
					padding-bottom: 20rpx;
					.rcell{
						display:inline-block;
						font-size:26rpx;
						color:#000;
						background:#fff;
						padding:10rpx 28rpx;
						height:60rpx;
						border-radius:30rpx;
						border:1rpx solid #d8dde6;
						margin-left:16rpx;
						margin-right:3rpx;
						margin-top:18rpx;
						box-shadow: 0 9rpx 19rpx 0 #DCDFE6, 0 0 17rpx 0 #DCDFE6;
					}
				}
			}
		}
	}
</style>