v3-lab-xcx/pages_basics/views/photoInspection.vue

<!-- 拍照检查 -->
<template>
	<view id="photoInspection">
		<view class="picker-max-box">
			<view class="picker-title-box">
				<view>*</view>
				<view>实验室:</view>
			</view>
			<picker @change="buttonChange" :range-key="'subName'" :value="subId" :range="subList">
				<view class="picker-min-box">
					<view>{{subListIndex?subList[subListIndex].subName:'请选择'}}</view>
					<img src="@/pages_basics/images/icon_06.png">
				</view>
			</picker>
		</view>
		<view class="null-p" v-if="!subList[0]">当前无正在进行中的打卡记录</view>
		<view class="null-p" v-if="subList[0]&&subListIndex!=''">请选择实验</view>
		<view class="outCheckList-max-box">
			<view class="for-add-max-box" v-for="(item,index) in outCheckData.list" :key="index">
				<view class="for-add-img-box" v-if="outCheckData.isUpload">
					<p v-if="!item.subUrl" @click="upImg(index)">+添加</p>
					<img v-else :src="baseUrl+item.subUrl" @click="upImg(index)">
				</view>
				<view @click="checkItem(index)" :class="outCheckData.isUpload?'for-add-name-p-one':'for-add-name-p-two'"
					class="for-add-name-p">
					{{item.checkOutName}}
				</view>
				<uni-icons v-if="item.checkType" class="for-add-icon" type="checkmarkempty" color='#fff' size="24"></uni-icons>

			</view>
		</view>
		<view class="up-data-button" @click="upButton">提交</view>
		<helang-compress ref="helangCompress"></helang-compress>
	</view>

</template>

<script>
	import helangCompress from '@/pages_basics/component/compress.vue';
	import {
		config
	} from '@/api/request/config.js'
	import {
		laboratoryAppletSignSubList,
		laboratoryAppletOutCheckList,
		laboratoryAppletAddPhotoInspect
	} from '@/pages_basics/api/index.js'
	export default {
		components: {
			helangCompress
		},
		data() {
			return {
				baseUrl: config.base_url,
				newData: {},
				subList: [],
				subListIndex: "",
				pageType: 2,
				outCheckData: {
					list: [],
				},
				params: {
					maxSize: 400,
					fileType: 'png',
					quality: 0.85,
					minSize: 320
				}

			}
		},
		onLoad(option) {
			// this.newData = JSON.parse(decodeURIComponent(option.newData));
			// console.log(this.newData)
		},
		onShow() {
			this.laboratoryAppletSignSubList();
		},
		methods: {
			buttonChange(e) {
				this.subListIndex = e.mp.detail.value;
				this.laboratoryAppletOutCheckList()
			},
			//获取实验室
			async laboratoryAppletSignSubList() {
				const {
					data
				} = await laboratoryAppletSignSubList();
				if (data.code == 200) {
					this.subList = data.data;
				}
			},
			//获取实验室-检查项
			async laboratoryAppletOutCheckList() {
				const {
					data
				} = await laboratoryAppletOutCheckList({
					subId: this.subList[this.subListIndex].subId
				});
				if (data.code == 200) {
					this.outCheckData = data.data;
				}
			},
			checkItem(index) {
				if (!this.outCheckData.isUpload) {
					this.$set(this.outCheckData.list[index], 'checkType', !this.outCheckData.list[index].checkType);
				}
			},
			upButton() {
				let self = this;
				if (!this.subListIndex) {
					uni.showToast({
						title: '请选择实验室',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				if (self.outCheckData.isUpload) {
					for (let i = 0; i < self.outCheckData.list.length; i++) {
						if (!self.outCheckData.list[i].subUrl) {
							uni.showToast({
								title: self.outCheckData.list[i].checkOutName + '-检查照片未上传',
								icon: "none",
								mask: true,
								duration: 2000
							});
							return
						}
					}
				} else {
					for (let i = 0; i < self.outCheckData.list.length; i++) {
						if (!self.outCheckData.list[i].checkType) {
							uni.showToast({
								title: '请点击确认' + self.outCheckData.list[i].checkOutName,
								icon: "none",
								mask: true,
								duration: 2000
							});
							return
						}
					}
				}
				uni.showModal({
					// title: '确认要退出吗?',
					content: '确认提交吗?',
					cancelColor: "#999",
					confirmColor: "#0183FA",
					success: function(res) {
						if (res.confirm) {
							self.laboratoryAppletAddPhotoInspect();
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//拍照检查提交
			async laboratoryAppletAddPhotoInspect() {
				let self = this;
				let obj = {
					photoList: [],
				}
				for (let i = 0; i < self.outCheckData.list.length; i++) {
					obj.photoList.push({
						passOutId: self.subList[self.subListIndex].passOutId,
						checkOut: self.outCheckData.list[i].checkOut,
						checkOutName: self.outCheckData.list[i].checkOutName,
						subUrl: self.outCheckData.isUpload ? self.outCheckData.list[i].subUrl : ''
					})
				}
				const {
					data
				} = await laboratoryAppletAddPhotoInspect(obj);
				if (data.code == 200) {
					uni.showToast({
						title: '提交成功',
						icon: "none",
						mask: true,
						duration: 2000
					});
					setTimeout(function() {
						uni.navigateBack();
					}, 2000);
				}
			},
			upImg(index) {
				let self = this;
				wx.chooseImage({
					count: 1,
					sizeType: ["original", "compressed"],
					sourceType: ["album", "camera"],
					success: function(res) {
						self.compress(res.tempFilePaths, index);
					}
				});
			},
			//图片压缩
			compress(tempFilePaths, index) {
				let self = this;
				uni.showLoading({
					title: '压缩中',
					mask: true
				});

				this.$refs.helangCompress.compress({
					src: tempFilePaths[0],
					maxSize: this.params.maxSize,
					fileType: this.params.fileType,
					quality: this.params.quality,
					minSize: this.params.minSize
				}).then((res) => {
					uni.hideLoading();
					console.log('压缩成功-res', res)
					console.log('压缩成功-name', index)
					self.uploadImg(res, index);

				}).catch((err) => {
					uni.hideLoading();
					uni.showToast({
						title: "压缩失败,请重新上传",
						icon: "none"
					})
				})
			},
			async uploadImg(tempFilePaths, index) {
				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) {
							self.$set(this.outCheckData.list[index], 'subUrl', res.data.url);
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								mask: true,
								duration: 2000
							});
						}
					},
					fail: err => {},
					complete: () => {
						uni.hideLoading()
					}
				});
			},
		}
	}
</script>

<style lang="stylus" scoped>
	#photoInspection {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.null-p {
			text-align: center;
			font-size: 28rpx;
			line-height: 100rpx;
			color: #999;
		}

		.picker-max-box {
			width: 100%;
			padding: 20rpx 0;
			display: flex;
			background: #FFFFFF;
			z-index: 100;

			.picker-title-box {
				padding: 0 20rpx;
				display flex;

				view {
					line-height: 80rpx;
					font-size: 28rpx;
				}

				view:nth-child(1) {
					color: red;
				}

				view:nth-child(2) {}

				view:nth-child(3) {
					color: #999;
				}
			}

			.picker-min-box {
				display flex;
				height: 80rpx;
				width: 556rpx;
				border: 1rpx solid #a2a2a2;
				border-radius: 10rpx;
				margin: 0 20rpx;

				view {
					flex: 1;
					line-height: 80rpx;
					padding: 0 20rpx;
					color: #999;
					font-size: 28rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				img {
					width: 24rpx;
					height: 12rpx;
					margin: 35rpx 23rpx;
				}
			}
		}

		.outCheckList-max-box {
			margin-top: 30rpx;
			flex: 1;
			overflow-y: scroll;

			.for-add-max-box {
				margin: 0 30rpx;
				padding-bottom: 40rpx;
				position: relative;

				.for-add-img-box {
					background: #fff;
					overflow: hidden;
					border: 1px dashed #dedede;

					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;

					p {
						width: 690rpx;
						height: 250rpx;
						line-height: 250rpx;
						text-align: center;
						color: #0183FA;
					}

					img {
						width: 690rpx;
						height: 250rpx;
					}
				}

				.for-add-name-p {
					background: #fff;
					text-align: center;
					line-height: 80rpx;
					font-size: 30rpx;
					padding: 0 30rpx;
					display: block;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.for-add-name-p-one {
					border: 1px dashed #dedede;
					border-top: none;
					border-bottom-left-radius: 20rpx;
					border-bottom-right-radius: 20rpx
				}

				.for-add-name-p-two {
					border: 1px dashed #dedede;
					border-radius: 20rpx
				}

				.for-add-icon {
					position: absolute;
					right: 0;
					bottom: 40rpx;
					background-color: #0183FA;
					border-top-left-radius: 20rpx;
					border-bottom-right-radius: 20rpx;
				}
			}
		}

		.up-data-button {
			margin:25rpx;
			width: 700rpx;
			height: 90rpx;
			background: #0183FA;
			line-height: 90rpx;
			border-radius:10rpx;
			text-align center;
			color: #fff;
			font-size: 30rpx;
			bottom: 0;
		}
	}
</style>