zhgdyunapp_vue3/pages/projectEnd/dangerBigProject/backlogTrial/backlogTrial.vue

<template>
	<view class="addPlan">
		<view class="fixedheader">
			<headers :themeType="true" :showBack="true">
				<view class="headerName">
					{{title}}
				</view>
			</headers>
		</view>
		<view :style="{ 'padding-top': ((statusBarHeight * 2) + 45) * 1.5 + 'rpx' }">
			<view class="plan-form">
				<view style="background-color: #fff;border-bottom: 20rpx solid #068de8;padding:20rpx 20rpx 30rpx 20rpx">
					<view class="backlogMargin">危大工程名称：{{checkRecord.engineeringName}}</view>
					<view class="backlogMargin">计划执行时间：{{checkRecord.planTime}}</view>
					<view class="backlogMargin">申请验收单位：{{checkRecord.applyAcceptanceUnitName}}</view>
					<view class="backlogMargin">申请验收人：{{checkRecord.applyAcceptanceUserName}}</view>
				</view>
				
				<view class="form-item b-bottom" style="justify-content: flex-start;">
					<view class="form-lable"><text class="tag">*</text>验收结果</view>
					<view class="form-result" v-if="checkRecord.acceptanceResult !== 1 && checkRecord.acceptanceResult !== 2">
						<ul class="form-radio">
							<li :class="{'active-radio': formData.acceptanceResult == 1}" @click="checkRadio(1)">合格</li>
							<li :class="{'active-radio': formData.acceptanceResult == 2}" @click="checkRadio(2)">不合格</li>
						</ul>
					</view>
					<view class="form-result" v-else>
						<ul class="form-radio">
							<li :class="{'active-radio': checkRecord.acceptanceResult == 1}" @click="checkRadio(1)">合格</li>
							<li :class="{'active-radio': checkRecord.acceptanceResult == 2}" @click="checkRadio(2)">不合格</li>
						</ul>
					</view>
				</view>
				
				<view class="form-item f-column b-bottom a-none" v-if="checkRecord.acceptanceResult !== 1 && checkRecord.acceptanceResult !== 2">
					<view class="form-lable"><text class="tag">*</text>验收描述</view>
					<textarea class="form-textarea" @input="bindLength" @blur="bindTextAreaBlur" maxlength="50"
						:value="formData.acceptanceDescribe" placeholder="请输入验收描述" />
					<view class="txt-length">{{textareaLengh}}/50</view>
				</view>
				<view class="form-item f-column b-bottom a-none" v-else>
					<view class="form-lable"><text class="tag">*</text>验收描述</view>
					<textarea class="form-textarea" maxlength="50" :disabled="true"
						:value="checkRecord.acceptanceDesc" placeholder="请输入验收描述" />
				</view>
				
				<view class="form-item f-column a-none">
					<view class="form-lable"><text class="tag">*</text>现场照片</view>
					<view class="uni-form-input imgBox_wrap" v-if="checkRecord.acceptanceResult !== 1 && checkRecord.acceptanceResult !== 2">
						<view class="addImgBox" @click="uploadImg" v-show="formData.imgFileList.length == 0">
							<image src="/static/safeMange/upload_image.png" class="icon-add" color="#F56C6C"></image>
						</view>
						<view class="imgBox" v-show="formData.imgFileList.length>0"
							v-for="(item,index) in formData.imgFileList" :key="index">
							<image :src="url_config+'image/'+item.url" class="img"
								@click="previewImage(url_config+'image/'+item.url)"></image>
							<view @click="deleteImg(item,1)" class="deleteImg">
								<image src="/static/safeMange/close_icon.png"></image>
							</view>
						</view>
					</view>
					<view class="" v-else>
						<view class="imgBox">
							<image :src="url_config+'image/'+checkRecord.photo" class="img"
								@click="previewImage(url_config+'image/'+item.url)"></image>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="save-btn" v-if="checkRecord.acceptanceResult !== 1 && checkRecord.acceptanceResult !== 2" @click="saveForm">确 认</view>
		<!-- <u-popup :show="isPopupVisible" @close="closePopup" @open="isPopupVisible === true" z-index="9999">
			<view class="slot-content">
				弹窗内容
				这里是弹窗的内容
				<u-button @click="closePopup">关闭弹窗</u-button>
			</view>
		</u-popup> -->
		
		
		<view class="dialog-container" v-if="unitDialog" @click="unitDialog=false">
		<!-- <view class="dialog-container" v-if="unitDialog"> -->
			<view class="dialog-content">
				<view class="text-tip">
					提示：最终验收通过后，将闭合整个危大任务计划，任何人不能再进行操作！
				</view>
				<view class="confirm-btn" @click="confirmClose">关闭危大工程</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				unitDialog: false,
				checkRecord: {},	//验收记录
				
				statusBarHeight: 0,
				isPopupVisible: true,
				title: "新增验收记录",
				formData: {
					acceptanceRegion: "",
					acceptanceDescribe: "",
					imgFileList: [],
					acceptanceResult: 1,
					acceptanceType: "",
					dangerousEngineeringId: ""
				},
				textareaLengh: 0,
				typeIndex: "",
				typeList: [{
					id: 1,
					name: '施工条件验收'
				}, {
					id: 2,
					name: '危大工程验收'
				}]
			}
		},
		onShow() {
			this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
		},
		onLoad(val) {
			// this.formData.dangerousEngineeringId = val.id
			this.checkRecord = JSON.parse(decodeURIComponent(val.checkRecord));
			console.log("===============onload===================");
			console.log(this.checkRecord);
			console.log("===============onload===================");
		},
		methods: {
			checkRadio(val) {
				this.formData.acceptanceResult = val
			},
			bindTextAreaBlur(e) {
				console.log(e)
				this.formData.acceptanceDescribe = e.detail.value
			},
			bindInputBlur(e) {
				console.log(e)
				this.formData.acceptanceRegion = e.detail.value
			},
			uploadImg() {
				var that = this
				uni.chooseImage({
					count: 5 - that.formData.imgFileList.length,
					success(res) {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'files',
							success: (uploadFileRes) => {
								let data = {
									name: JSON.parse(uploadFileRes.data).data[0].filename,
									url: JSON.parse(uploadFileRes.data).data[0].imageUrl
								};
								that.formData.imgFileList.push(data)
							}
						});
					}
				})
			},
			//删除附件
			deleteImg(val, type) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除该附件吗?',
					success: function(res) {
						if (res.confirm) {
							if (type == 1) {
								let fileArr = JSON.parse(JSON.stringify(that.formData.imgFileList));
								fileArr.forEach((item, index) => {
									if (item.url == val.url) {
										fileArr.splice(index, 1)
									}
								})
								that.formData.imgFileList = fileArr;
							} else if (type == 2) {
								let fileArr = JSON.parse(JSON.stringify(that.videoFileList));
								fileArr.forEach((item, index) => {
									if (item.url == val.url) {
										fileArr.splice(index, 1)
									}
								})
								that.videoFileList = fileArr;
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},

			//预览图片
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			bindLength(e) {
				// console.log(e)
				this.textareaLengh = e.detail.value.split('').length
			},
			saveForm() {
				// console.log(this.formData)
				// this.isPopupVisible = true
				
				if(!this.formData.acceptanceResult){
					uni.showToast({
					    title: '请选择结果',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if(!this.formData.acceptanceDescribe){
					uni.showToast({
					    title: '请输入验收描述',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if(!this.formData.imgFileList[0]){
					uni.showToast({
					    title: '请上传现场照片',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if(this.formData.acceptanceResult === 1){
					this.unitDialog = true
				}else{
					this.confirmClose()
				}
			},
			confirmClose(){
				// this.unitDialog = true
				let data = {
					id: this.checkRecord.id,
					acceptanceResult: this.formData.acceptanceResult,	//验收结果
					acceptanceDesc: this.formData.acceptanceDescribe,	//验收描述
					photo: this.formData.imgFileList[0].url,
					type: 1
				}
				// data.createUser = JSON.parse(uni.getStorageSync('userInfo')).userId;
				// let arr = []
				// this.formData.imgFileList.forEach(item=>{
				// 	arr.push(item.url)
				// })
				// data.imageUrl = arr.join(',')
				// console.log(data)
				this.sendRequest({
					url:'xmgl/xzDangerousEngineeringAcceptance/edit',
					method:'post',
					data: data,
					success:res=>{
						uni.hideLoading()
						if(res.code==200){
							uni.showToast({
								title:'保存成功'
							})
							this.unitDialog = false
							uni.navigateBack({})
						}
						console.log(res)
					}
				})
			},
			bindPickerChange(e) {
				this.typeIndex = e.target.value
				this.formData.acceptanceType = this.typeList[e.target.value].id
			},
			closePopup() {
				this.isPopupVisible = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addPlan {
		min-height: 100%;
		background: #F6F6F6;

		.fixedheader {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 2;
		}

		.save-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 96rpx;
			background: #2b8df3;
			color: #fff;
			text-align: center;
			line-height: 96rpx;
		}

		.imgBox_wrap {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;
			width: 100%;
			min-height: 120rpx;
		}

		.imgBox {
			width: 120rpx;
			height: 120rpx;
			display: inline-flex;
			position: relative;
			margin-right: 30rpx;
			margin-bottom: 16rpx;

			.img {
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
			}

			.deleteImg {
				position: absolute;
				right: -12rpx;
				top: -18rpx;

				uni-image {
					width: 20rpx;
					height: 20rpx;
				}
			}

		}

		.addImgBox {
			border: 1px solid rgba(42, 43, 91, 0.1);
			background-color: #f6f5f8;
			width: 120rpx;
			height: 120rpx;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border-radius: 20rpx;
			font-size: 24rpx;
			margin-right: 12rpx;

			uni-image {
				width: 100%;
				height: 100%;
			}

			// .icon-add {
			// 	width: 36rpx;
			// 	height: 36rpx;
			// }
		}

		.b-bottom {
			border-bottom: 1px solid #F6F6F6;
		}

		.f-column {
			flex-direction: column;
		}

		.plan-form {
			padding-top: 20rpx;
			padding-bottom: 96rpx;

			.form-item {
				padding: 28rpx 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #fff;

				.form-lable {
					white-space: nowrap;

					.tag {
						color: #DD524D;
					}
				}

				.from-input {
					text-align: right;
				}

				.form-result {
					.form-radio {
						display: flex;
						margin-left: 30rpx;
						border: 1px solid #E5E5E5;
						padding: 0;
						border-radius: 12rpx;
						overflow: hidden;

						li {
							list-style: none;
							font-size: 28rpx;
							background: #EEEEEE;
							text-align: center;
							width: 156rpx;
							padding: 12rpx 0;
						}

						.active-radio {
							background: #2b8df3;
							color: #fff;
						}
					}
				}
			}

			.txt-length {
				color: #888;
				text-align: right;
				margin-top: 20rpx;
				font-size: 28rpx;
			}

			.form-textarea {
				margin-top: 30rpx;
				width: 100%;
				background: #F8F8F8;
				border: 1px solid #f0f0f0;
				height: 160rpx;
				padding: 20rpx;
				box-sizing: border-box;

				// overflow: auto;
				:deep(uni-textarea ){
					width: 100%;
					height: 100%;
					font-size: 28rpx;

					.uni-textarea-compute {
						width: 100%;
						height: 100%;
						overflow: auto;
					}
				}
			}

			.a-none {
				align-items: initial;
			}
		}
	}

	.backlogMargin {
		margin-bottom: 30rpx;
	}
	.dialog-container {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 111;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		.dialog-content{
			// padding: 20rpx 20rpx;
			width: 80%;
			height: 400rpx;
			background-color: #fff;
			// line-height: 64rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.text-tip{
				font-size: 28rpx;
				width: 93%;
				height: 70%;
				// position: absolute;
				// background-color: darkred;
			}
			.confirm-btn{
				width: auto;
				height: 15%;
				color: #fff;
				background-color: #2b8df3;
				display: flex;
				align-items: center;
				padding: 0 10rpx;
				border-radius: 10rpx;
			}
		}
	}
</style>