jp-youdian-Inspection/pages/inspection/add.vue

<template>
	<view class="jpmain  ">
		<u-navbar title="维修结果" title-color="#101010"></u-navbar>

		<u-picker mode="time" v-model="inspectionTimeShow" @confirm="inspectionTimeConfirm"
			:default-time="taskInfo.inspectionTime" :params="params"></u-picker>


		<view class="list">
			<view class="item">
				荆鹏充电站


			</view>
			<view class="item ">
				<view class="name">
					站点地址 荆州市沙市区江津东路155号院内

				</view>
				<view class="value">
					站点地址 荆州市沙市区江津东路155号院内

				</view>
			</view>



		</view>


		<view class="list">
			<view class="item ">
				巡检操作记录

			</view>
			<view class="item item-plus">
				<view class="name">
				<span style="color: red;">*</span>	处理人员

				</view>

				<view class="value  ">

					<u-checkbox-group>
						<u-checkbox v-model="item.checked" v-for="(item, index) in memberList" :key="index"  @change="memberListchange"
							:name="item.name">{{item.name}}</u-checkbox>
					</u-checkbox-group>


				</view>
			</view>

			<view class="item item-plus" style="    align-items: center;">
				<view class="name">
					<span style="color: red;">*</span>处理时间

				</view>

				<view class="value  " @click="inspectionTimeShow=true">
					<view class="valueclock">
						<u-icon name="clock" size="32" color="#BBBBBB"></u-icon>

						{{taskInfo.inspectionTime}}
					</view>


				</view>
			</view>



			

		</view>
		
		<view class="list" v-for="(item,index) in contentList" >
			<view class="item ">
			{{index+1}}	{{item.name}}
		
			</view>
			<view class="item item-plus"  v-if="item.btn&&item.btn.length">
				<view class="name">
					<span style="color: red;">*</span>检测结果

				</view>
			
				<view class="value  ">
			
					<u-radio-group v-model="submitcontent[index].result">
								<u-radio 
									
									v-for="(it, i) in item.btn" :key="index+'-'+i" 
									:name="it.value"
									
								>
									{{it.name}}
								</u-radio>
							</u-radio-group>
			
			
				</view>
			</view>
			
			<view class="item item-plus" v-if="submitcontent[index].result==0">
				<view class="name">
					<span style="color: red;" v-if="item.field" >*</span>{{item.desc}}
			
				</view>
			
				<view class="value  ">
			
					<u-input style="background-color: #f1f2f5;" 
					 v-model="submitcontent[index].content"
					:placeholder="item.descP"></u-input>
			
			
				</view>
			</view>
			
			<view class="item item-plus" v-if="item.imageRequired">
				<view class="name">
					<span style="color: red;">*</span>拍照上传(请上传设备状态照片)

				</view>
				<view class="value" >
					<u-upload name="photoFile"   :class="'uUpload'+index" 
					:ref="'uUpload'+index"  :width="100" :height="100" uploadText=""
					:form-data="formData" :header="header"
					 :action="action"
						:file-list="listPic[index]"></u-upload>
				</view>
				
			</view>
			
		</view>
		
		
		
		
		<view class="floating-button" >
			<view class="button" @click="submit">

				提交
			</view>

		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/pagesInspection.js'
	import * as WxJsApi from '@/apis/utils/wxJsApi.js'

	import {

		currentTimeStamp,
		parseUnixTime
	} from '@/apis/utils'

	export default {
		data() {
			return {
				record:{},
				memberList: [

				],
				listPic: [],
				action: "",
				formData: {

				},
				header: {

				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true,
					timestamp: true,
				},
				codeN: "",
				selectTaskInfoCode: false,
				selectTaskInfoCodeValue: [0],
				lockNo: "",
				lockName: "",

				floorlockInfo: {},
				floorlockErrorRecord: {},
				parkingInfo: {},
				taskInfo: {
					id: "",
					desc: "",
					images: "",
					inspectionTime: "",

				},
				codeList: [],
				id: "",
				imgList: [],
				repairImageList: [],
				inspectionTimeShow: false,
				content: [
					
				],
				contentList:[],
				submitcontent:[]
			};
		},
		onLoad(op) {
			this.action = process.jphelp.BASE_URL + "uploadPicture"
			this.formData.subFolder = "/floorlock/inspection/updateErr"
			var token = this.jphelp.getToken()
			this.header = {

				'Authorization': token
			}
			this.id = op.id
			this.taskInfo.inspectionTime = parseUnixTime(currentTimeStamp())
			this.errDetails()
			
		
			
			this.getteamMembers()


		},
		onReady() {
			WxJsApi.getWxConfig(['openLocation']).then((res) => {
				// //(res)
			}).catch(error => {
				//(res)
			})
		},
		methods: {
			memberListchange(e){
				console.log(e)
				this.$forceUpdate()
			},
			getteamMembers() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.teamMembers().then((res) => {

					var arr = res.data.memberList

					this.memberList = arr

					this.memberList.forEach(item => {
						if (item.id == this.jphelp.getPersonInfo().id) {
							item.checked = true
						} else {
							item.checked = false
						}
					})
					uni.hideLoading();

				}).catch(error => {

					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})

			},
			inspectionTimeConfirm(e) {
				

				this.taskInfo.inspectionTime = parseUnixTime(new Date(e.timestamp * 1000))
			},
			previewImage(i, name) {
				let imgs = this[name];
				//imgs.push(img);
				uni.previewImage({
					urls: imgs,
					current: i
				})
			},
			navigate() {
				var item = this.parkingInfo
				if (!(this.parkingInfo.latitude && this.parkingInfo.longitude)) {
					return
				}
				
				uni.showLoading({

				})
				setTimeout(() => {
					uni.hideLoading()
				}, 3 * 1000)
				WxJsApi.openLocation({
					latitude: parseFloat(item.latitude), //目的地latitude
					longitude: parseFloat(item.longitude), //目的地longitude
					name: item.name,
					address: item.address,
					scale: 15, //地图缩放大小，可根据情况具体调整
					success(res) {
						uni.hideLoading()
					},
					complete() {
						//	uni.hideLoading()
					}
				});
				// //('station'+JSON.stringify(_self.stationDetail.station))
				// window.location.href = "https://uri.amap.com/marker?position=" + _self.stationDetail.station.longitude +
				// 	"," + _self.stationDetail.station.latitude + "&name=" + _self.stationDetail.station.name;

			},
			errDetails() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.recordDetails({
					id: this.id
				}).then((res) => {
					
					this.content=res.data.content
					this.record=res.data.record
					uni.hideLoading();
					this.contentMethod()
				}).catch(error => {

					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			contentMethod(){
				this.listPic=[]
				this.contentList=this.content.map(item=>{
					this.listPic.push([])
					
					var obj={
						dataId:item.dataId,
						name:item.name,
						btn:[{
							name:"正常",
							value:"1"
						},{
							name:"异常",
							value:"0"
						}],
						desc:"问题描述",
						descP:"请简单描述发现的问题",
					}
					
					if(item.extended1){
						var extended1=JSON.parse(item.extended1)
						
						Object.keys(extended1).forEach(key1 => {
							
							obj[key1]=extended1[key1]
						})
					}
					
					return obj
				})
				
				this.submitcontent=this.contentList.map(item=>{
					return {
						dataId:item.dataId,
						name:item.name,
						result:"1",
						image:"",
						content:""
					}
				})
			},
			
			submitApi() {
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				this.taskInfo.content=this.submitcontent
				API.recordReport(this.taskInfo).then((res) => {

					const eventChannel = this.getOpenerEventChannel();

					eventChannel.emit('acceptDataFromOpenerPage', {})

					uni.showModal({
						title: '提示',
						showCancel: false,
						content: "操作成功",
						success: res1 => {
							if (res1.confirm) {
								uni.navigateBack()
							} else if (res1.cancel) {
								//('用户点击取消');
							}
						}
					})

					uni.hideLoading();

				}).catch(error => {

					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			submit() {
				
				var mp=this.memberList.filter(item=>{
					return item.checked
				}).map(item=>{
					return item.id
				})
				
				if (mp.length==0) {
					uni.showToast({
						title: "请选择上报人员"
					})
					return
				}
				this.taskInfo.userIds=mp.join()
				this.taskInfo.id=this.id
				this.taskInfo.status=0
				this.taskInfo.stationId=this.record.stationId
				
				
				
				
				var i =0
				var bl=false
				this.contentList.forEach(item=>{
					if(bl==true){
						return
					}
					if(item.imageRequired&&0){
						let files = [];
						console.log(this.$refs)
						console.log(item.imageRequired,i,this.$refs['uUpload'+i])
						// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
						files = this.$refs['uUpload'+i][0].lists.filter(val => {
							return val.progress == 100;
						})
						var imgUrl = files.map(item => {
							return item.response.data;
						})
						if(imgUrl.length==0){
							uni.showToast({
								title: "请上传设备状态照片（第"+(i+1)+"项）"
							})
							bl=true;
						}
						this.submitcontent[i].image=imgUrl.join(',');
						
					}
					if(item.field){
						if(this.submitcontent[i].result==0&&!this.submitcontent[i].content){
							uni.showToast({
								title: "请填写"+item.name
							})
							bl=true;
						}
						this.taskInfo[item.field]=this.submitcontent[i].content
					}
					
					
					i++;
				})
				
				if(bl==true){
					return
				}
				console.log(this.taskInfo)
				console.log(this.submitcontent)
				this.submitApi()



			},

		}
	}
</script>

<style lang="scss">
	.jpmain {
		padding-bottom: 120rpx;
	}

	.list {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 16rpx;

		margin: 20rpx;

		.item:first-child {
			border-bottom: 2rpx solid rgba(232, 232, 232, 1);
			font-size: 32rpx;
			font-weight: bold;
		}


		.item {
			padding: 20rpx 24rpx;

			.name {
				// width: 40%;
				padding-bottom: 32rpx;
				font-size: 32rpx;
				color: #777777;

				span {
					color: red
				}

				white-space: pre;
			}

			.valueplus {
				display: flex;
				justify-content: space-between;

			}

			.valueclock {
				width: 100%;
				border-radius: 8rpx;
				padding: 0 16rpx;
				height: 64rpx;
				line-height: 64rpx;
				background-color: rgba(241, 242, 245, 1);
			}

			.value {
				font-size: 32rpx;

				display: flex;
				align-items: center;

				input::placeholder {
					color: #AAAAAA;
				}

				.img {
					width: 40rpx;
					height: 40rpx;

				}

				.textarea {
					background-color: rgba(241, 242, 245, 1);
					width: 100%;
					border-radius: 8rpx;
				}

				.typeN {
					font-size: 24rpx;
					margin-right: 8rpx;
					display: flex;
					align-items: center;
					border-radius: 8rpx;
					padding: 4rpx 8rpx;
					color: #fff;
				}

				.typeN1 {
					background-color: #1677ff;
					//border: 2rpx solid #1677ff;
				}

				.typeN2 {
					background-color: #19be6b;
					//border: 2rpx solid #19be6b;

				}
			}
		}


	}

	.textareaclass {
		padding: 16rpx
	}

	.floating-button {
		z-index: 999;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		height: 120rpx;
		justify-content: center;
		background-color: rgba(255, 255, 255, 1);

		.button {
			margin-top: 24rpx;
			border-radius: 50px;
			height: 80rpx;
			width: 80%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 12rpx;

			background-color: rgba(22, 119, 255, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 36rpx;
		}
	}

	.viewImg {
		width: 160rpx;
		height: 160rpx;
	}
</style>