jp-floorlock-Inspection/pages/task/addTask.vue

<template>
	<view  class="jpmain  " >
			<u-navbar  title="故障上报" title-color="#101010"></u-navbar>
			
			<view class="list" >
				<view class="item"  >
					<view class="name">
						<span>*</span>选择地锁
				
					</view>
					<view class="value"  @click="gotoSelectLock()">
						<view :style="taskInfo.lockId?'':'color:#BBB'"
						>{{taskInfo.lockId?lockName:'选择需要上报的地锁'}}</view>
						<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
					</view>
				</view>
				<view class="item">
					<view class="name">
						地锁编号
				
					</view>
					<view class="value">
						<view :style="taskInfo.lockId?'':'color:#BBB'"
						>{{taskInfo.lockId?lockNo:'选择需要上报的地锁'}}</view>
					</view>
				</view>
				 
			</view>
			<view class="list" >
				<view class="item"  >
					<view class="name">
						<span>*</span>故障类型
				
					</view>
					<view class="value" @click="selectTaskInfoCodeBtn">
						<view :style="taskInfo.code?'':'color:#BBB'"
						>{{taskInfo.code?codeN:'请选择故障类型'}}</view>
						<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
					</view>
				</view>
				<view class="item item-plus"  >
					<view class="name">
						问题描述
				
					</view>
					<view class="value" >
						<textarea placeholder="请简单描述处理内容" 
						v-model="taskInfo.desc" placeholder-class="textareaclass"
						class="textarea"></textarea>
					</view>
				</view>
				<view class="item item-plus"  >
					<view class="name">
						上传图片
				
					</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>
			
			<u-select v-model="selectTaskInfoCode"  :default-value="selectTaskInfoCodeValue"
			value-name="value" label-name="name" @confirm="selectTaskInfoCodeConfirm"
			:list="codeList"></u-select>
			
			<view class="floating-button">
				<view class="button"  @click="submit" >
					
					提交
				</view>
				
			</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/pagesTask.js'
	
	export default {
		data() {
			return {
				listPic: [],
				action:"",
				formData:{
					
				},
				header:{
					
				},
				codeN:"",
				selectTaskInfoCode:false,
				selectTaskInfoCodeValue:[0],
				lockNo:"",
				lockName:"",
				
				taskInfo:{
					lockId:"",
					code:"",
					desc:"",
					images:"",
					
				},
				codeList:[]
			};
		},
		onLoad() {
			this.action=process.jphelp.BASE_URL+"uploadPicture"
			this.formData.subFolder="/floorlock/inspection/addTask"
			var token=this.jphelp.getToken()
			
			this.header={
					
				'Authorization':token
			}
			this.findByCatalogName({
				catalogName:'设备故障类型'
			},"codeList")
		},
		methods:{
			submit(){
				if(!this.taskInfo.lockId){
					uni.showToast({
						title:"选择需要上报的地锁"
					})
					 return
				}
				if(!this.taskInfo.code){
					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;
				})
				//(imgUrl);
				this.taskInfo.images = imgUrl.join(',');
				
				
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.addErr(this.taskInfo).then((res) => {
					
					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"
					})
				})
				
				
			},
			findByCatalogName(obj,listName){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.findByCatalogName(obj).then((res) => {
					
					var arr = res.data.dataDictionaryList
					
					this[listName] = arr
				
					uni.hideLoading();
				
				}).catch(error => {
				
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
				
			},
			
			selectTaskInfoCodeConfirm(e){
				console.log(e)
				this.codeN=e[0].label
				this.taskInfo.code=e[0].value
			},
			selectTaskInfoCodeBtn(){
				if(this.taskInfo.code){
					//this.selectTaskInfoCodeValue=[parseInt(this.bindInfo.type)-1]
					var i =this.codeList.findIndex(item=>{
						return item.value==this.taskInfo.code
					})
					this.selectTaskInfoCodeValue=[i]
				}
				this.selectTaskInfoCode=true;
			},
			gotoSelectLock(){
				uni.navigateTo({
				  url: '/pages/task/selectLock',
				  events: {
				    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
				    acceptDataFromOpenerPage: (item)=>{
						console.log(item)
						this.taskInfo.lockId=item.item.id
						this.lockName=item.item.name
						this.lockNo=item.item.lockNo
						this.$forceUpdate()
						
				    },
				 
				  }
				 
				})
			}
		}
	}
</script>

<style lang="scss">
	.jpmain{padding-bottom: 120rpx;}
.list{
		background-color: rgba(255,255,255,1);
		
		margin: 20rpx 0;
		.item:not(:last-child) {
		  border-bottom:1px solid rgba(232,232,232,1);
		}
		.item{
			padding: 24rpx;
			display: flex;
			    justify-content: space-between;
			.name{
				    width: 40%;
					font-size: 32rpx;
					color: #777777;
					span{
						color:red
					}
					white-space: pre;
			}
			.value{
				font-size: 32rpx;
				    width: 60%;
				display: flex;
				    justify-content: space-between;
					input::placeholder{
						color:#AAAAAA;
					}
					.img{
						width: 40rpx;
						height: 40rpx;
						
					}
					.textarea{
						background-color: rgba(241,242,245,1);
						width: 100%;
						border-radius: 4px;
					}
					
			}
		}
		.item-plus{
			flex-direction: column;
			.value,.name{
				   width: 100%;
			}
			.name{
				    padding-bottom: 32rpx;
			}
		}
	}
	
	.floating-button {
		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;
			}
	}
	
	.textareaclass{
		padding:16rpx
	}
</style>