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="completionTimeShow" @confirm="completionTimeConfirm"
			:default-time="taskInfo.completionTime" :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">
					处理人员

				</view>

				<view class="value  ">

					<u-checkbox-group>
						<u-checkbox v-model="item.checked" 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">
					处理时间

				</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" v-if="0">
				<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="list" v-for="(item,index) in contentList" >
			<view class="item ">
			{{index+1}}	{{item.name}}
		
			</view>
			<view class="item item-plus">
				<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">
				<view class="name">
					{{item.desc}}
			
				</view>
			
				<view class="value  ">
			
					<u-input style="background-color: #888888;" :placeholder="item.descP"></u-input>
			
			
				</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 {
				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: "",
					completionTime: "",

				},
				codeList: [],
				id: "",
				imgList: [],
				repairImageList: [],
				completionTimeShow: false,
				content: [
					"变压器外观是否正常无损坏？",
					"配线柜内线缆是否完好，接头是否有过热或烧伤痕迹？",
					"断路器是否有异响，是否有异味（烧焦的味道）？",
					{
						name:"电度表读数（否完远程电表）？",
						btn:[{
							name:"是",
							value:"1"
						},{
							name:"数字输入",
							value:"-1"
						}],
						desc:"电度表读数",
						descP:"例如：000-217",
					},
					"充电桩外观是否正常无损坏，枪头是否正常无损坏，无积水、无异物？",
					"散热板是否清洁？",
					"充电桩箱体内接头是否有过热或烧伤痕迹？",
					"充电电缆是否无破损？",
					"基座是否完好、无损坏，无积水？",
					"消防设施是否完好？",
					"充电桩是否有异响动，外观是否干净清洁，附近是否有易燃、易爆或可燃材料、化学品、可燃蒸汽等危险物品？",
				],
				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.completionTime = parseUnixTime(currentTimeStamp())
			//this.errDetails()
			
			this.contentList=this.content.map(item=>{
				if(typeof item === "string" ){
					return {
						name:item,
						btn:[{
							name:"正常",
							value:"1"
						},{
							name:"异常",
							value:"0"
						}],
						desc:"问题描述",
						descP:"请简单描述发现的问题",
					}
				}else{
					return item
				}
			})
			
			this.submitcontent=this.contentList.map(item=>{
				return {
					name:item.name,
					result:"1",
					image:"",
					extended1:""
				}
			})
			
			this.getteamMembers()


		},
		onReady() {
			WxJsApi.getWxConfig(['openLocation']).then((res) => {
				// //(res)
			}).catch(error => {
				//(res)
			})
		},
		methods: {
			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"
					})
				})

			},
			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: 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>