jp-youdian-Inspection/pages/task/maintenanceTaks.vue

<template>
	<view  class="jpmain  " >
			<u-navbar  title="维修结果" title-color="#101010"></u-navbar>
			
				<u-picker mode="time" v-model="completionTimeShow"
				@confirm="completionTimeConfirm" :default-time="taskInfo.completionTime"
				 :params="params"></u-picker>

			
			<view class="list" >
				<view class="item">
					<view class="name">
						问题类型
				
					</view>
					<view class="value">
						<span  v-if="floorlockErrorRecord.type" :class="'typeN typeN'+floorlockErrorRecord.type">
							{{floorlockErrorRecord.typeN}}
						</span>
						{{floorlockErrorRecord.errorCodeText}}
						
						
					</view>
				</view>
				<view class="item item-plus"  v-if="floorlockErrorRecord.errorDesc">
					<view class="name">
						问题描述				
					</view>
					<view class="value">
						{{floorlockErrorRecord.errorDesc}}
						
					</view>
				</view>
				<view class="item item-plus" v-if="imgList.length">
					<view class="name">
						照片				
					</view>
					<view class="value" style="display: block;">
						<img  class="viewImg" v-for="(item,i) in imgList"
						  @click="previewImage(i,'imgList')"
						 :key="i"
						 :src="item" mode=""></img>
						
					</view>
				</view>
				
				<view class="item">
					<view class="name">
						创建时间
				
					</view>
					<view class="value">
						{{floorlockErrorRecord.createTime}}
						
					</view>
				</view>
				<view class="item" v-if="floorlockErrorRecord.type==2">
					<view class="name">
						上报人
				
					</view>
					<view class="value">
						{{floorlockErrorRecord.createByName}}
						
					</view>
				</view>
			</view>
			
			
			<view class="list" >
				<view class="item"  @click="gotoUrl('/pages/station/stationInfo?id='+floorlockInfo.id)" >
					<view class="name">
						地锁编号
				
					</view>
					<view class="value valueplus">
						{{floorlockInfo.lockNo}}
						<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
					</view>
				</view>
				<view class="item">
					<view class="name">
						地锁名称
				
					</view>
					<view class="value">
						{{floorlockInfo.name}}
					</view>
				</view>
				
				<view class="item">
					<view class="name">
						所属停车场
				
					</view>
					<view class="value valueplus" @click="navigate">
						<view>{{parkingInfo.name}}</view>
						<image class="img" v-if="parkingInfo.latitude&&parkingInfo.longitude"
						 src="@/assets/img/daohuang.png" mode=""></image>
						
					</view>
				</view>
				<view class="item" v-if="parkingInfo.address">
					<view class="name">
						详细地址
				
					</view>
					<view class="value">
						{{parkingInfo.address}}
					</view>
				</view>
				
			</view>
			<view class="list" >
				<view class="item item-plus"  >
					<view class="name">
						处理人员
				
					</view>
					<view class="value" v-if="floorlockErrorRecord.status!=0">
						{{floorlockErrorRecord.updateTime}}
						
					</view>
					<view class="value  " 
				
					v-else>
					
					<u-checkbox-group >
								<u-checkbox 
								
									v-model="item.checked" 
									v-for="(item, index) in listcheckbox" :key="index" 
									:name="item.name"
								>{{item.name}}</u-checkbox>
							</u-checkbox-group>
					
						
					</view>
				</view>
				
				<view class="item item-plus" style="    align-items: center;"  >
					<view class="name">
						处理时间
				
					</view>
					<view class="value" v-if="floorlockErrorRecord.status!=0">
						{{floorlockErrorRecord.updateTime}}
						
					</view>
					<view class="value  " 
					@click="completionTimeShow=true"
					v-else>
					<view class="valueclock">
						<u-icon name="clock" size="32" color="#BBBBBB"></u-icon>
						
							{{taskInfo.completionTime}}
					</view>
					
						
					</view>
				</view>
				
				
				<view class="item item-plus"  >
					<view class="name">
						维修方式
				
					</view>
					<view class="value" v-if="floorlockErrorRecord.status!=0">
						{{floorlockErrorRecord.updateTime}}
						
					</view>
					<view class="value  " 
				
					v-else>
					
					<u-radio-group v-model="value" @change="radioGroupChange">
								<u-radio 
								 
									v-for="(item, index) in listradio" :key="index" 
									:name="item.name"
									 
								>
									{{item.name}}
								</u-radio>
							</u-radio-group>
					
						
					</view>
				</view>
				
				
				<view class="item item-plus"  >
					<view class="name">
						处理结果				
					</view>
					<view class="value"   v-if="floorlockErrorRecord.status==0" >
						<textarea placeholder="请记录处理步骤及结果" 
						placeholder-class="textareaclass"
						style="    height: 100px;"
						v-model="taskInfo.desc"
						class="textarea"></textarea>
					</view>
					<view class="value"    v-else >
						<textarea  style="    height: 100px;"
						 placeholder="" 
						placeholder-class="textareaclass"
						v-model="floorlockErrorRecord.repairDesc"
						class="textarea"></textarea>
					</view>
				</view>
				<view class="item item-plus"  >
					<view class="name">
						现场照片

				
					</view>
					<view class="value" v-if="floorlockErrorRecord.status==0" >
						<u-upload name="photoFile"
								ref="uUpload"
								 :form-data="formData" :header="header" :action="action"
								  :file-list="listPic" ></u-upload>
					</view>
					<view class="value"  v-else >
						
						<img  class="viewImg" v-for="(item,i) in repairImageList"
						  @click="previewImage(i,'repairImageList')"
						 :key="i"
						 :src="item" mode=""></img>
						 
					</view>
				</view>
			
			</view>
			
			
			<view class="floating-button"  v-if="floorlockErrorRecord.status==0" >
				<view class="button"  @click="submit" >
					
					提交
				</view>
				
			</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/pagesTask.js'
	import * as WxJsApi from '@/apis/utils/wxJsApi.js'
	
	import {
		
		currentTimeStamp,
		parseUnixTime
	} from '@/apis/utils'
	
	export default {
		data() {
			return {
				listradio:[
					{
										name: '重启',
										disabled: false
									},
									{
										name: '更换设备',
										disabled: false
									},
									{
										name: '其他',
										disabled: false
									}
				],
				listcheckbox:[
					{
										name: 'apple',
										checked: false,
										disabled: false
									},
									{
										name: 'banner',
										checked: false,
										disabled: false
									},
									{
										name: 'orange',
										checked: false,
										disabled: false
									}
				],
				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:"",
					completionTime:"",
					
				},
				codeList:[],
				id:"",
				imgList:[],
				repairImageList:[],
				completionTimeShow:false,
			};
		},
		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.completionTime= parseUnixTime(currentTimeStamp())
			this.errDetails()
			
			
		},
		onReady() {
			WxJsApi.getWxConfig([ 'openLocation']).then((res) => {
				// //(res)
			}).catch(error => {
				//(res)
			})
		},
		methods:{
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e);
			},
			completionTimeConfirm(e){
				console.log(e)
				
				this.taskInfo.completionTime= 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
				}
				//console.log(item)
				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.errDetails({
					id:this.id
				}).then((res) => {
					this.floorlockErrorRecord=res.data.floorlockErrorRecord
					this.floorlockInfo=res.data.floorlockInfo
					this.parkingInfo=res.data.parkingInfo
					if(this.floorlockErrorRecord.errorImage){
						this.imgList=this.floorlockErrorRecord.errorImage.split(',')
					}
					if(this.floorlockErrorRecord.repairImage){
						this.repairImageList=this.floorlockErrorRecord.repairImage.split(',')
					}
					
					uni.hideLoading();
				
				}).catch(error => {
				
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			submitApi(){
				let files = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				// 如果您不需要进行太多的处理，直接如下即可
					// files = this.$refs.uUpload.lists;
				
				//(files);
					
				var imgUrl=files.map(item=>{
					return item.response.data;
				})
				//(imgUrl);
				this.taskInfo.images = imgUrl.join(',');
				this.taskInfo.id=this.id;
				
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.updateErr(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(){
				
				if(!this.taskInfo.desc){
					uni.showModal({
						title: '提示',
						showCancel: true,
						cancelText:"返回填写",
						confirmText:"继续提交",
						content: "未填写处理步骤，是否继续提交",
						success: res1 => {
							if (res1.confirm) {
								this.submitApi()
							} else if (res1.cancel) {
								//('用户点击取消');
							}
						}
					})
				}else{
					this.submitApi()
				}
			
				
				
			},
			
		}
	}
</script>

<style lang="scss">
	.jpmain{padding-bottom: 120rpx;}
.list{
		background-color: rgba(255,255,255,1);
		border-radius: 8px;

		margin: 20rpx ;
		.item:not(:last-child) {
		  border-bottom:1px solid rgba(232,232,232,1);
		}
		.item{
			padding: 20rpx 24rpx;
			display: flex;
			    justify-content: space-between;
			.name{
				    width: 40%;
					font-size: 32rpx;
					color: #777777;
					span{
						color:red
					}
					white-space: pre;
			}
			.valueplus{
				display: flex;
				justify-content: space-between;
				 
			}
			.valueclock{
				width: 100%;
				border-radius: 4px;
				   padding: 0 8px;
				   height: 64rpx;
				line-height: 64rpx;
				background-color: rgba(241,242,245,1);
			}
			.value{
				font-size: 32rpx;
				    width: 60%;
				    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: 4px;
					}
					.typeN{
						font-size: 24rpx;
						margin-right: 8rpx;
						display: flex;
						align-items: center;
							border-radius: 4px;
							padding: 2px 8rpx;
							color: #fff;
					}
					.typeN1{
						background-color:#1677ff;
						//border: 1px solid #1677ff;
					}
					.typeN2{
						background-color:#19be6b;
						//border: 1px solid #19be6b;
						 
					}
			}
		}
		.item-plus{
			flex-direction: column;
			.value,.name{
				   width: 100%;
			}
			.name{
				    padding-bottom: 32rpx;
			}
		}
		
	}
	.textareaclass{
		padding:16rpx
	}
	.floating-button {
		z-index: 999;
		position: fixed; 
		  bottom: 0;    /* 距离底部 20px */
		    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>