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 {
		checkClapById,
		checkClapRectify
	} from '@/pages_safetyExamine/api/index.js'
	export default {
		name: "rectifyList",
		components: {

		},
		data() {
			return {
				baseUrl: config.base_url,
				id: '',
				rectifyStatus: '', //整改状态，0是待整改，1是已整改，2是暂无法整改
				pageType: 1,
				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 + '/system/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/views/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>