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

<!-- 随手拍-添加 -->
<template>
	<view class="examine">
		<view class="header" @click="handleClick('manage')">
			<text>随手拍管理</text>
			<img src="@/pages_safetyExamine/images/icon_04.png">
		</view>
		<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">

			<view class="basics">
				<view class="basics_li">
					<view class="basics_li_l">学院</view>
					<picker @change="collegeChange" :value="collegeIndex" :range="collegeArray" class="scope_r">
						<view class="basics_li_r college_r">
							<view>{{form.deptName?form.deptName:'选择学院'}}</view>
							<img src="@/pages_safetyExamine/images/icon_06.png">
						</view>
					</picker>
				</view>
				<view class="basics_li">
					<view class="basics_li_l">实验室</view>
					<view class="basics_li_r lab_r">
						<input class="picker-text" @click="popupClick(1)" type="text" disabled v-model="form.subName"
							placeholder="请输入实验室关键词查询" placeholder-style="font-size: 30rpx;color:#333;">
						<view class="img-box" @click.stop="saoCode">
							<img src="@/pages_safetyExamine/images/icon_aqjc_sm.png">
						</view>
					</view>
				</view>
				<view class="check-for-input-max-box">
					<view class="left-title-p">隐患描述：</view>
					<textarea type="text" v-model="form.hazardDescribe" 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="configURL+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 class="record"><text @click="handleClick('self')">随手拍上报记录</text></view>
		</scroll-view>
		<!-- 房间选择弹出层 -->
		<view class="popup-max-box" v-if="popupType">
			<view class="popup-null" @click="popupClick(2)"></view>
			<view class="popup-big-box">
				<view class="popup-input-box">
					<input type="text" maxlength="10" v-model="room" placeholder="请输入关键字">
					<view @click="buildBySub">搜索</view>
				</view>
				<view class="popup-for-max-box">
					<view class="popup-for-null" v-if="!roomList[0]">暂无数据</view>
					<view class="popup-for-box" v-for="(item,index) in roomList" :key="index">
						<view class="name-p">{{item.subName}} ({{item.roomNum?item.roomNum:'-'}})</view>
						<view class="button-p" @click="popupClickItem(item)">确定</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_btn" @click="submitForm()">提交</view>
	</view>

</template>

<script>
	import {
		config
	} from '@/api/request/config.js'

	import {
		laboratorySubRelInfoGetRelList,
		getUserCollegCheck,
		systemDeptDropList,
		checkClapAdd,
	} from '@/pages_safetyExamine/api/index.js'

	export default {
		name: "rectifyList",
		components: {

		},
		data() {
			return {
				configURL: config.base_url,
				pageType: 0,
				//列表请求参数
				getData: {
					pageNum: 1,
					pageSize: 20,
				},
				form: {
					deptId: '',
					deptName: '',
					subId: '',
					subName: '',
					hazardDescribe: '',
					imgDtoList: [],
				},
				collegeIndex: 0,
				collegeArray: [],
				categoryIndex: 0,
				collegeList: [],
				categoryArray: ['校级巡查', '院级巡查'],
				planIndex: 0,
				planArray: ['请选择巡查计划标题', '2023年3月份校级督导检查', '2023年4月份校级督导检查'],
				resultIndex: 0,
				resultArray: ['不符合', '符合'],
				informIndex: 0,
				informArray: ['整改告知书', '整改通知书'],


				//房间弹层 状态
				popupType: false,
				//房间搜索字段
				room: "",
				roomList: [],

			}
		},
		onLoad(option) {

		},
		onShow() {

		},
		mounted() {
			this.listDepartments();
			// this.getUserCollegCheck();
		},
		methods: {
			//滚动事件
			scrollGet() {},
			handleClick(doType) {
				let self = this;
				if (doType == 'manage') { //随手拍管理
					uni.navigateTo({
						url: '/pages_safetyExamine/views/snapshotManage/snapshotList?pageType=1'
					});
				} else if (doType == 'self') { //随手拍上报记录
					uni.navigateTo({
						url: '/pages_safetyExamine/views/snapshotManage/snapshotList?pageType=2'
					});
				} else if (doType == 'subBtn') { //提交

				}

			},
			collegeChange(e) {
				this.collegeIndex = e.target.value;
				this.form.deptId = this.collegeList[e.target.value].deptId
				this.form.deptName = this.collegeList[e.target.value].deptName
			},
			// 图片上传
			selectImage() {
				let self = this;
				if (this.form.imgDtoList.length > 4) {
					uni.showToast({
						title: '最多上传5张图片',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				wx.chooseImage({
					count: 5,
					sizeType: ["original", "compressed"],
					sourceType: ["album", "camera"],
					success: function(res) {
						//let tempFilePaths = res.tempFilePaths[0];
						self.uploadImg(res.tempFilePaths);
					}
				});
			},
			async uploadImg(tempFilePaths) {
				var self = this;
				uni.showLoading({
					title: '上传中',
					mask: true
				});
				for (let i = 0; i < tempFilePaths.length; i++) {
					console.log(tempFilePaths[i])
					uni.uploadFile({
						url: config.base_url + '/system/file/upload', //仅为示例，非真实的接口地址
						header: {
							'Authorization': uni.getStorageSync('token')
						},
						filePath: tempFilePaths[i],
						name: 'file',
						formData: {
							'user': 'test'
						},
						success: (uploadFileRes) => {
							let res = JSON.parse(uploadFileRes.data);
							console.log(res.data)
							if (res.code == 200) {
								this.form.imgDtoList.push({
									'fileUrl': res.data.url,
									'fileName': res.data.name
								});
							} 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();
			},
			//搜索房间弹层开关
			popupClick(type) {
				if (type == 1) {
					this.room = "";
					this.roomList = [];
					this.popupType = true;
					this.buildBySub();
				} else if (type == 2) {
					this.popupType = false;
				}
			},
			//搜索房间接口
			async buildBySub() {
				let self = this;
				const {
					data
				} = await laboratorySubRelInfoGetRelList({
					'searchValue': this.room,
					'deptId': this.form.deptId
				});
				if (data.code == 200) {
					if (data.data[0]) {
						this.roomList = data.data;
					} else {
						uni.showToast({
							title: '未找到相关实验室',
							icon: "none",
							mask: true,
							duration: 2000
						});
					}
				}
			},
			//确认搜索房间
			popupClickItem(item) {
				console.log(item)
				this.$set(this.form, "subId", item.subId)
				this.$set(this.form, "subName", item.subName)
				this.$set(this.form, "deptId", item.deptId)
				for (let i = 0; i < this.collegeList.length; i++) {
					if (item.deptId == this.collegeList[i].deptId) {
						this.$set(this.form, "deptName", this.collegeList[i].deptName)
					}
				}
				this.popupType = false;
			},
			//调用摄像头
			saoCode() {
				let self = this;
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						if (res.result.indexOf("code") != -1 && res.result.indexOf("-") != -1 && res.result
							.indexOf("&") != -1) {
							let codeRoom = "";
							let newList = res.result.split("?")[1].split("&")
							let list = newList[0].split("=")[1].split("-")
							codeRoom = list[1];
							if (codeRoom) {
								self.roomList = [];
								self.room = codeRoom;
								self.buildBySub();
								self.popupType = true;
							} else {
								uni.showToast({
									title: '请扫描正确的二维码',
									icon: "none",
									mask: true,
									duration: 2000
								});
							}
						} else {
							uni.showToast({
								title: '请扫描正确的二维码',
								icon: "none",
								mask: true,
								duration: 2000
							});
						}
					}
				});
			},

			//查询用户身份信息
			async getUserCollegCheck() {
				let _this = this;
				const {
					data
				} = await getUserCollegCheck();
				if (data.code == 200) {
					this.form.deptId = data.data.dept.deptId;
					this.form.deptName = data.data.dept.deptName;

				}
			},
			//查询学院列表
			async listDepartments() {
				let self = this;
				const {
					data
				} = await systemDeptDropList({
					deptName: '',
					level: 2,
					deptType: 1
				});
				if (data.code == 200) {

					for (let i = 0; i < data.data.length; i++) {
						self.collegeArray.push(data.data[i].deptName)
					}
					self.collegeList = data.data;

				}
			},
			//添加
			async submitForm() {
				let _this = this;
				if (!this.form.deptId) {
					uni.showToast({
						title: '请选择学院!',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				if (!this.form.subId) {
					uni.showToast({
						title: '请选择实验室!',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				if (this.form.imgDtoList.length == 0) {
					uni.showToast({
						title: '请上传隐患照片!',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				const {
					data
				} = await checkClapAdd(_this.form);
				if (data.code == 200) {
					uni.showToast({
						title: '提交成功',
						icon: "none",
						mask: true,
						duration: 2000
					});
					uni.navigateTo({
						url: '/pages_safetyExamine/views/snapshotManage/snapshotList?pageType=2'
					});

				}
			},


		}
	}
</script>

<style lang="stylus" scoped>
	.examine {
		height: 100%;
		display flex;
		box-sizing: border-box;

		.info-max-box {
			flex: 1;
			overflow: scroll;
			padding: 120rpx 0rpx 128rpx;
			box-sizing: border-box;
		}

		.header {
			width: 749rpx;
			height: 100rpx;
			background: #FFFFFF;
			padding: 0 40rpx 0 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			left: 0;
			top: 0;

			>text {
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 42rpx;
			}

			>img {
				width: 8rpx;
				height: 14rpx;
			}
		}

		.basics {
			margin: 0 30rpx;
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx 28rpx 30rpx;
			box-sizing: border-box;

			.basics_li {
				display: flex;
				justify-content: flex-start;
				margin-bottom: 24rpx;

				.basics_li_l {
					width: 146rpx;
					text-align: left;
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 80rpx;
				}

				.basics_li_r {
					width: 486rpx;
					height: 80rpx;
					border-radius: 10rpx;
					opacity: 1;
					border: 1rpx solid #E0E0E0;
					padding-left: 20rpx;
					box-sizing: border-box;


				}

				/* 学院 */
				.college_r {
					width: 486rpx;
					height: 80rpx;
					border-radius: 10rpx;
					border: 1rpx solid #E0E0E0;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					>view {
						flex: 1;
						line-height: 80rpx;
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 80rpx;
					}

					>img {
						width: 14rpx;
						height: 8rpx;
						margin-right: 30rpx;
					}
				}

				/* 实验室 */
				.lab_r {
					width: 486rpx;
					height: 80rpx;
					display: flex;
					justify-content: flex-start;

					.picker-text {
						width: 438rpx;
						height: 80rpx;
					}

					.img-box {
						width: 48rpx;

						>img {
							width: 30rpx;
							height: 28rpx;
							margin: 26rpx 18rpx 0 0;
						}
					}
				}
			}

			/* 隐患描述 */
			.check-for-input-max-box {
				.left-title-p {
					width: 150rpx;
					line-height: 80rpx;
					text-align right;
					font-size: 30rpx;
				}

				textarea {
					width: 630rpx;
					height: 158rpx;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					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;
					}
				}
			}
		}

		.record {
			overflow: hidden;

			>text {
				display: block;
				width: 220rpx;
				height: 40rpx;
				background: #E0E0E0;
				border-radius: 60rpx 60rpx 60rpx 60rpx;
				margin: 122rpx 0 90rpx 266rpx;
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #0183FA;
				line-height: 40rpx;
				text-align: center;
			}
		}

		.popup-max-box {
			z-index: 10;
			height: 100%;
			width: 100%;
			position fixed;
			background rgba(0, 0, 0, 0.2);
			display flex;

			flex-direction column;

			.popup-null {
				flex: 1;
			}

			.popup-big-box {
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;

				background #fff;

				.popup-input-box {
					padding: 30rpx 20rpx;
					display: flex;

					input {
						flex: 1;
						height: 70rpx;
						border: 1rpx solid #e0e0e0;
						border-radius: 10rpx;
						margin-right: 20rpx;
						padding: 0 20rpx;
					}

					view {
						background #0183FA;
						color: #fff;
						border-radius: 10rpx;
						width: 140rpx;
						line-height: 70rpx;
						text-align center;
						font-size: 28rpx;
					}
				}

				.popup-for-max-box {
					margin: 0 20rpx 30rpx;
					height: 600rpx;
					overflow-y scroll;

					.popup-for-null {
						line-height: 100rpx;
						text-align center;
						color: #999;
					}

					.popup-for-box {
						display: flex;
						padding: 10px 0;

						.name-p {
							flex: 1;
							line-height: 60rpx;
						}

						.button-p {
							background #0183FA;
							color: #fff;
							text-align center;
							width: 100rpx;
							line-height: 60rpx;
							height: 60rpx;
							border-radius: 10rpx;
						}
					}
				}
			}
		}

		.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>