v3-lab-xcx/pages_safetyExamine/views/snapshotManage/snapshotDetail.vue

<!-- 随手拍-详情 -->
<template>
  <view class="examine">
	<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
		<view  class="basics">
			<view class="grade">
				<text>学院：</text>
				<text>{{item.deptName}}</text>
			</view>
			<view class="grade">
				<text>实验室：</text>
				<text>{{item.subName}}</text>
			</view>
			<view class="project">
				<view class="project_t">隐患描述：</view>
				<view class="project_b">{{item.hazardDescribe}}</view>
			</view>
			<view class="picture">
				<view class="picture_t">隐患照片：</view>
				<view class="picture_b" @click="lockImg(item.yhDtoList)">
					<img  :src="baseUrl+item.fileUrl" v-for="(item,index) in item.yhDtoList"/>
				</view>
			</view>
			<view class="grade">
				<text>上报时间：</text>
				<text>{{item.createTime}}</text>
			</view>
			<view class="grade" style="border:none;">
				<text>上报人：</text>
				<text >{{item.createName}}</text>
			</view>
		</view>
		<!-- 待整改 -->
		<view v-if="rectifyStatus==0 && item.rectifyGentle">
			<view class="await">
				<view class="result">
					<view class="result_l">整改结果</view>
					<view class="result_r">
						<view v-for="(item,index) in resultArray" :key="index" @click="tabClick(index)">
							<text :class="resultIndex==index?'checked':'result_r_l' "></text>
							<text class="result_r_r">{{item}}</text>
						</view>
					</view>
				</view>
				<view class="describe">
					<view class="describe_l">{{describeTitle}}：</view>
					<textarea class="describe_r" type="text" v-model="form.rectifyDescribe" maxlength="50" placeholder="请输入描述内容" placeholder-style="font-size:28rpx;color:#999;"></textarea>
				</view>
				<view class="check-for-img-max-box">
					<view class="left-title-p">隐患照片（最多上传5张）：</view>
					<view class="right-img-box">
						<view class="img-box" v-for="(imgUrl,imgIndex) in form.imgDtoList" :key="imgIndex">
							<img class="img-data" :src="baseUrl+imgUrl.fileUrl">
							<img class="position-img" src="@/pages_safetyExamine/images/icon_ssp_closure.png" @click="delImg(imgIndex)">
						</view>
						<img class="add-button" src="@/pages_safetyExamine/images/icon_07.png" @click="selectImage()" v-if="form.imgDtoList.length<5">
					</view>
				</view>
			</view>
		</view>
		<!-- 隐患整改 -->
		<view  class="basics"  v-if="rectifyStatus==1 || rectifyStatus==2">
			<view class="small_title">隐患整改</view>
			<view class="grade">
				<text>整改结果：</text>
				<text style="color: #0183FA;">{{item.rectifyStatus==1?'已整改':'暂无法整改'}}</text>
			</view>
			<view class="project">
				<view class="project_t">整改措施：</view>
				<view class="project_b">{{item.rectifyDescribe}}</view>
			</view>
			<view class="picture">
				<view class="picture_t">上传照片：</view>
				<view class="picture_b" @click="lockImg(item.zgDtoList)">
					<img  :src="baseUrl+item.fileUrl" v-for="(item,index) in item.zgDtoList"/>
				</view>
			</view>
			<view class="grade">
				<text>整改时间：</text>
				<text>{{item.rectifyTime}}</text>
			</view>
			<view class="grade" style="border:none;">
				<text>整改人：</text>
				<text >{{item.rectifyPeople}}</text>
			</view>
		</view>
	</scroll-view>
	<view v-if="rectifyStatus==0 && item.rectifyGentle" class="bottom_btn" @click="submitForm()">提交</view>
  </view>

</template>

<script>
import { config } from '@/api/request/config.js'
import { getSelectInfoByRoom,checkClapById,checkClapRectify} from '@/api/apiDemo/index.js'
export default {
  name: "rectifyList",
  components: {

  },
  data() {
    return {
		baseUrl:config.base_url,
		id:'',
		rectifyStatus:'',//整改状态，0是待整改，1是已整改，2是暂无法整改
		pageType:0,
		form:{
			id:'',
			rectifyStatus:1,//0待整改 1已整改 2暂无法整改
			rectifyDescribe:'',
			imgDtoList:[],
		},
		item:{},
		describeTitle:'整改措施',
		resultIndex:0,
		resultArray:['已整改','暂无法整改'],
	}
  },
  onLoad(option) {
	  console.log(option.id)
	  if(option.id){
		this.id=option.id
	  }
	  if(option.pageType){
	  	this.pageType=option.pageType
	  }
	  if(option.rectifyStatus){
		  this.rectifyStatus=option.rectifyStatus
		  if(option.rectifyStatus==0){
			  uni.setNavigationBarTitle({
			  	 title:'待整改'
			  })
		  }else if(option.rectifyStatus==1){
			  uni.setNavigationBarTitle({
			  	 title:'已整改'
			  })
		  }else if(option.rectifyStatus==2){
			  uni.setNavigationBarTitle({
			  	 title:'暂无法整改'
			  })
		  }
	  }


  },
  onShow() {

  },
  mounted(){
	  this.checkClapById();
  },
  methods: {
		//整改结果
		tabClick(index) {
			this.resultIndex = index;
			if(index==0){
				this.describeTitle='整改措施';
				this.form.rectifyStatus=1;
			}else if(index==1){
				this.describeTitle='原因描述';
				this.form.rectifyStatus=2;
			}
		},
		//滚动事件
		scrollGet(){},
	    handleClick(doType){
		  let self=this;
		  if(doType=='subBtn'){//提交

		  }

	    },
		//查看图片
		lockImg(list){
			console.log(list)
			if(!list[0]){
				return
			}
			let urlList=[];
			for(let i=0;i<list.length;i++){
				urlList.push(this.baseUrl+list[i].fileUrl)
			}
			wx.previewImage({
				urls: urlList, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				current: '', // 当前显示图片的http链接，默认是第一个
				success: function(res) {},
				fail: function(res) {},
				complete: function(res) {},
			})
		},

		// 图片上传
		selectImage() {
		    let self = this;
		    if(this.form.imgDtoList.length>4){
		        uni.showToast({
		            title: '最多上传5张图片',
		            icon:"none",
		            mask:true,
		            duration: 2000
		        });
		        return
		    }
		    wx.chooseImage({
		        count: 1,
		        sizeType: ["original", "compressed"],
		        sourceType: ["album", "camera"],
		        success: function(res) {
		            let tempFilePaths = res.tempFilePaths[0];
		            self.uploadImg(tempFilePaths);
		        }
		    });
		},
		async uploadImg(tempFilePaths){
		    var self = this;
		    uni.showLoading({
		        title: '上传中',
		        mask: true
		    });
		    uni.uploadFile({
		        url: config.base_url+'/base/file/upload', //仅为示例，非真实的接口地址
		        header:{'Authorization':uni.getStorageSync('token')},
		        filePath: tempFilePaths,
		        name: 'file',
		        formData: {
		            'user': 'test'
		        },
		        success: (uploadFileRes) => {
		            let res = JSON.parse(uploadFileRes.data);
					if(res.code == 200){
						this.form.imgDtoList.push({'fileUrl':res.data.url,'fileName':res.data.name});
						console.log(res.data.url)
					}else{
						uni.showToast({
							title: res.msg,
							icon:"none",
							mask:true,
							duration: 2000
						});
					}
		        },
		        fail: err => {},
		        complete: () => {
		            uni.hideLoading()
		        }
		    });
		},
		//删除图片
		delImg(minIndex){
		     this.form.imgDtoList.splice(minIndex,1);
			this.$forceUpdate();
		},
		//随手拍详情
		async checkClapById(){
			let _this = this;
			const {data} = await checkClapById({id:this.id});
			if(data.code == 200){
					_this.item=data.data;
					_this.form.id=data.data.id;

			}
		},
		//提交
		async submitForm(){
			let _this = this;
			const {data} = await checkClapRectify(_this.form);
			if(data.code == 200){
			    uni.showToast({
			        title: '提交成功',
			        icon:"none",
			        mask:true,
			        duration: 2000
			    });
				uni.redirectTo({
					url: '/pages_safetyExamine/snapshotManage/snapshotList?pageType='+this.pageType
				});

			}
		},



  }
}
</script>

<style lang="stylus" scoped>
.examine{
	height:100%;
	display flex;
	box-sizing: border-box;
	.info-max-box{
		flex: 1;
		overflow: scroll;
		padding-bottom: 128rpx;
		box-sizing: border-box;
	}
	.basics{
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx 30rpx 32rpx;
		box-sizing: border-box;
		margin: 20rpx 30rpx ;
		.small_title{
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 80rpx;
			border-bottom: 1rpx solid #D8D8D8;
		}
		.grade{
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #D8D8D8;
			>text:nth-of-type(1){
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 80rpx;
				width: 140rpx;
			}
			>text:nth-of-type(2){
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 80rpx;
				text-align: right;
			}
		}
		.project{
			.project_t{
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 80rpx;
			}
			.project_b{
				min-height: 158rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
				padding: 20rpx 14rpx;
				box-sizing: border-box;
				background: #F5F5F5;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}
			.project_b2{
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 26rpx;
				margin-top: 14rpx;
				text-align: right;
			}
		}
		.picture{
			.picture_t{
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 80rpx;
			}
			.picture_b{
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				>img{
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					margin-right: 14rpx;
					margin-bottom: 10rpx;
				}
				>img:nth-of-type(3n+3){
					margin-right: 0rpx;
				}
			}
		}
	}
	/* 待整改 */
	.await{
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx 30rpx 32rpx;
		box-sizing: border-box;
		margin: 20rpx 30rpx ;
		/* 整改结果 */
		.result{
			display: flex;
			justify-content: flex-start;
			border-bottom: 1rpx solid #D8D8D8;
			.result_l{
				width: 146rpx;
				text-align: left;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 80rpx;
			}
			.result_r{
				width: 486rpx;
				height: 80rpx;
				padding-left: 20rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				>view{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-right: 24rpx;
					.result_r_l{
						display: inline-block;
						width: 30rpx;
						height: 30rpx;
						border-radius: 50%;
						border: 1rpx solid #E0E0E0;
						margin-right: 14rpx;
					}
					.result_r_r{
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 80rpx;
					}
					.checked{
						display: inline-block;
						width: 30rpx;
						height: 30rpx;
						border-radius: 50%;
						border: 1rpx solid #0183FA;
						margin-right: 14rpx;
						position: relative;
					}
					.checked::after{
						content: '';
						position: absolute;
						top: 5rpx;
						left:5rpx;
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
						background: #0183FA;
					}
				}
			}
		}
		/* 原因描述 */
		.describe{
			.describe_l{
				width: 158rpx;
				text-align: left;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 80rpx;
			}
			.describe_r{
				width: 630rpx;
				height: 158rpx;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				opacity: 1;
				border: 1rpx solid #E0E0E0;
				padding: 20rpx 14rpx;
				box-sizing: border-box;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 34rpx;
			}
		}
		/* 上传照片 */
		.check-for-img-max-box{
			.left-title-p{
				width: 100%;
				text-align: left;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 80rpx;
			}
			.right-img-box{
				.img-box{
					display inline-block;
					height:200rpx;
					width:200rpx;
					position relative
					margin:0 14rpx 20rpx 0;
					border-radius 10rpx;
					overflow hidden;
					.img-data{
						height:200rpx;
						width:200rpx;
					}
					.position-img{
						position absolute
						right:0;
						top:0;
						width:36rpx;
						height:36rpx;
					}
				}
				.img-box:nth-of-type(3n+3){
					margin-right: 0rpx;
				}
				.add-button{
					margin:0 0rpx 20rpx 0;
					border-radius 10rpx;
					overflow hidden;
					display inline-block
					height:200rpx;
					width:200rpx;
				}
			}
		}
}
    .bottom_btn{
		position: fixed;
		bottom: 26rpx;
		left: 30rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 90rpx;
		width: 690rpx;
		height: 90rpx;
		background: #0183FA;
		border-radius: 20rpx;
		text-align: center;

	}
}
</style>