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 item-head">

				<span v-if="errorRecord.type" :class="'typeN typeN'+errorRecord.type">
					{{errorRecord.typeN}}
				</span>
				<span class="head-text">
					{{errorRecord.errorCodeText}}
				</span>


			</view>
			<view class="item item-plus" v-if="errorRecord.errorDesc">
				<view class="name">
					问题描述
				</view>
				<view class="value">
					{{errorRecord.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">
					{{errorRecord.createTime}}

				</view>
			</view>
			<view class="item" v-if="errorRecord.type==2">
				<view class="name">
					上报人

				</view>
				<view class="value">
					{{errorRecord.errorReportNames}}

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


		<view class="list">
			<view class="item" @click="gotoUrl('/pages/station/stationInfo?id='+errorRecord.stationId)">
				<view class="name">
					所属站点

				</view>
				<view class="value valueplus">
					{{errorRecord.stationName}}
					<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
				</view>
			</view>


			<view class="item">
				<view class="name">
					详细地址

				</view>
				<view class="value valueplus" @click="navigate">
					<view>{{errorRecord.stationAddress}}</view>
					<image class="img" v-if="errorRecord.latitude&&errorRecord.longitude"
						src="@/assets/img/daohuang.png" mode=""></image>

				</view>
			</view>


		</view>
		<view class="list" v-if="errorRecord.status==0" >
			<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" @change="memberListchange"
							v-for="(item, index) in memberList" :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">
					<span style="color: red;">*</span>处理时间

				</view>
				 
				<view class="value  " @click="completionTimeShow=true" >
					<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">
					<span style="color: red;">*</span>维修方式

				</view>
			
				<view class="value  " >

					<u-radio-group v-model="valueradio" @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">
					<span style="color: red;">*</span>处理结果
				</view>
				<view class="value" >
					<textarea placeholder="请记录处理步骤及结果" placeholder-class="textareaclass" style="    height: 100px;"
						v-model="taskInfo.desc" class="textarea"></textarea>
				</view>
				
			</view>
			<view class="item item-plus">
				<view class="name">
					<span style="color: red;">*</span>现场照片


				</view>
				<view class="value">
					<u-upload name="photoFile" ref="uUpload" :form-data="formData" :header="header" :action="action"
						:file-list="listPic"></u-upload>
				</view>
				
			</view>

		</view>
		<view class="listtimeline" v-else >
			<view class="title">
				处理结果
			</view>
			<u-time-line>
					<u-time-line-item nodeTop="2">
					
						<template v-slot:content>
							<view>
								<view class="u-order-title">
									<span class="errorReportNames">{{errorRecord.repairNames}}</span>
									完成故障处理

								</view>
								<view class="u-order-title">
									处理结果：{{errorRecord.repairDesc}}
								
								</view>
								<view class="u-order-desc">
									<img  class="viewImg" v-for="(item,i) in repairImageList"
									  @click="previewImage(i,'repairImageList')"
									 :key="i"
									 :src="item" mode=""></img>
								</view>
								<view class="u-order-time" >{{errorRecord.repairTime}}</view>
							</view>
						</template>
					</u-time-line-item>
					<u-time-line-item nodeTop="2">
					
						<template v-slot:content>
							<view>
								<view class="u-order-title">设备故障</view>
								<view class="u-order-title">故障类型：{{errorRecord.typeN}}</view>
								
								<view class="u-order-time">{{errorRecord.errorReportTime}}</view>
							</view>
						</template>
					</u-time-line-item>
				
					
				</u-time-line>	
		</view>
		<view class="floating-button" v-if="errorRecord.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 {
				valueradio:"",
				listradio: [{
						name: '重启',
						disabled: false
					},
					{
						name: '更换设备',
						disabled: false
					},
					{
						name: '其他',
						disabled: false
					}
				],
				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: {},
				errorRecord: {},
				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()
			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"
					})
				})

			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e);
				this.taskInfo.desc=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.errorRecord
				if (!(this.errorRecord.latitude && this.errorRecord.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.errorRecord = res.data.record

					if (this.errorRecord.errorImage) {
						this.imgList = this.errorRecord.errorImage.split(',')
					}
					if (this.errorRecord.repairImage) {
						this.repairImageList = this.errorRecord.repairImage.split(',')
					}

					uni.hideLoading();

				}).catch(error => {

					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			submitApi() {
				
				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() {
			
			var mp=this.memberList.filter(item=>{
				return item.checked
			}).map(item=>{
				return item.id
			})
			
			if (mp.length==0) {
				uni.showToast({
					title: "请选择上报人员"
				})
				return
			}
			this.taskInfo.updateUserIds=mp.join()
			
			if (!this.valueradio) {
				uni.showToast({
					title: "请选择维修方式"
				})
				return
			}
			
			
			if (!this.taskInfo.desc) {
				uni.showToast({
					title: "请记录处理步骤及结果"
				})
				return
			}
			
			
			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;
			})
			if (imgUrl.length==0) {
				uni.showToast({
					title: "请拍照上传现场照片"
				})
				return
			}
			//(imgUrl);
			this.taskInfo.images = imgUrl.join(',');
			
			
			
			this.submitApi()



			},

		}
	}
</script>

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

		margin: 20rpx;

		.item:not(:last-child) {
			border-bottom: 2rpx 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: 8rpx;
				padding: 0 16rpx;
				height: 64rpx;
				line-height: 64rpx;
				background-color: rgba(241, 242, 245, 1);
			}

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

			}

			.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: 8rpx;
				}

			}
		}

		.item-plus {
			flex-direction: column;

			.value,
			.name {
				width: 100%;
			}

			.name {
				padding-bottom: 32rpx;
			}
		}

		.item-head {
			justify-content: left;

			.head-text {
				font-weight: bold;
				font-size: 32rpx;
			}
		}

	}

	.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;
	}
	
	.listtimeline {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 16rpx;
	
		margin: 20rpx;
		padding: 32rpx 24rpx;
		.title{
			color: rgba(51,51,51,1);
			font-size: 32rpx;
			margin-bottom: 24rpx;
		}
		
	}
	::v-deep .u-dot{
		background:#1677FF ;
	}
	.errorReportNames{
		color: #1677FF ;
	}
	.u-order-title{
		margin-bottom: 20rpx;
	}
	.u-order-time{
		margin-bottom: 40rpx;
	}
	
</style>