parking_inspection/pages/report/report.vue

<template>
	<view class="f-padding">
		<u-navbar
		 :title="title" 
		 title-color="#fff"
		 :border-bottom="false"
		 :custom-back="customBack"
		 back-icon-color="#CCE8FF" 
		 :background="{background: 'linear-gradient(99deg, #7A4398 0%, #5A5DB9 100%)' }"></u-navbar>
		<u-form :model="form" ref="uForm">
			<!-- <u-form-item label="路段/停车场：" prop="roadName" required :label-width="labelWidth">
				<u-input v-model="form.roadName" type="select" :border="true" placeholder="请选择" @click="selectShow = true" />
				<u-select v-model="selectShow" :list="roadList" value-name="roadNo" label-name="roadName" @confirm="selectConfirm"></u-select>
			</u-form-item> -->
			<view class="block-til">异常信息</view>
			<view class="block">
				<u-form-item label="问题描述" prop="exceprionDes" required :label-width="labelWidth">
					<u-input type="textarea" :border="true" maxlength="200" v-model="form.exceprionDes" />
				</u-form-item>
				<u-form-item label="图片说明" :label-width="labelWidth" :border-bottom="false">
					<u-upload ref="uploadRef" :action="action" :file-list="fileList" max-count="3"></u-upload>
				</u-form-item>
			</view>
			<view class="block-til">处理登记</view>
			<view class="block">
			<u-form-item label="处理状态" :label-width="labelWidth" prop="isProcess" :required="true">
				<view class="select-view" @click="oneSelectOpen('isProcess')">
					{{form.isProcess|filterIsProcess}}
				</view>
				<u-icon @click="oneSelectOpen('isProcess')" color="#42494F" name="arrow-right"></u-icon>
			</u-form-item>
			<view v-if="form.isProcess&&form.isProcess!=0" class="">
				<u-form-item label="处理员" prop="processBy" required :label-width="labelWidth">
					<u-input type="text" :border="true" maxlength="200" v-model="form.processBy" />
				</u-form-item>
				<u-form-item label="处理设备" :label-width="labelWidth" prop="processDevice" :required="false">
					<view class="select-view" @click="oneSelectOpen('processDeviceList')">
						{{filterProcessDevice(form.processDevice)||'请选择'}}
					</view>
					<u-icon @click="oneSelectOpen('processDeviceList')" color="#42494F" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="损坏类型" :label-width="labelWidth" prop="damageType" :required="false">
					<view class="select-view" @click="oneSelectOpen('damageTypeList')">
						{{filterDamageType(form.damageType)||'请选择'}}
					</view>
					<u-icon @click="oneSelectOpen('damageTypeList')" color="#42494F" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="处理方式" :label-width="labelWidth" prop="processType" :required="false">
					<view class="select-view" @click="oneSelectOpen('processTypeList')">
						{{filterProcessType(form.processType)||'请选择'}}
					</view>
					<u-input @click="oneSelectOpen('processTypeList')" placeholder="请选择" v-model="form.processType"
						disabled />
					<u-icon @click="oneSelectOpen('processTypeList')" color="#42494F" name="arrow-right"></u-icon>
				</u-form-item>
				</view>
			</view>
		</u-form>
		<u-button type="primary" @click="submit" style="margin-top: 24rpx;">提交</u-button>
		<!-- 单列下拉选择 -->
		<u-select v-model="selectShow" :list="selectData" @confirm="selectConfirm"></u-select>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				title:'问题上报',
				labelWidth:190,
				action:this.config.upFileUrl,
				fileList:[],
				selectShow:false,
				selectList:[],
				roadList:[],
				selectTag: '',
				selectShow: false,
				selectData: [],
				listMap: {
					isProcess: [{
						value: '0',
						label: '未处理'
					}, {
						value: '1',
						label: '已处理'
					}, {
						value: '2',
						label: '部分处理'
					}],
					processDeviceList:[],
					damageTypeList:[],
					processTypeList:[],
				},
				form:{
					roadName:'',
					roadNo:'',
					exceprionDes:'',
					imgList:[]
				},
				rules:{
					roadName: [
						{ 
							required: true, 
							message: '请选择路段', 
							trigger: ['change','blur'],
						}
					],
					processBy: [
						{ 
							required: true, 
							message: '请输入处理员', 
							trigger: ['change','blur'],
						}
					],
					exceprionDes: [
						{ 
							required: true, 
							message: '请输入内容', 
							trigger: ['change','blur'],
						}
					],
				}
			}
		},
		onLoad(page){
			this.form.deviceId = page.deviceId;
			this.form.deviceType = page.deviceType;
			this.form.roadNo = page.roadNo;
			this.form.roadName = page.roadName;
			this.reportId = page.reportId;
			// console.log('this.reportId',this.reportId);
			if(this.reportId){
				this.getReportDetails();
			}
			
		},
		onShow(){
			this.getProcessDevice();
			this.getDamageType();
			this.getProcessType();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		computed:{
			filterProcessDevice(value){
				return function(value){
					let v = '';
					for (let i = 0; i < this.listMap.processDeviceList.length; i++){
						let item = this.listMap.processDeviceList[i];
						if (value == item.value) {
						  v = item.label;
						  break;
						}
					}
					return v
				}
			},
			filterDamageType(value){
				return function(value){
					let v = '';
					for (let i = 0; i < this.listMap.damageTypeList.length; i++){
						let item = this.listMap.damageTypeList[i];
						if (value == item.value) {
						  v = item.label;
						  break;
						}
					}
					return v
				}
			},
			filterProcessType(value){
				return function(value){
					let v = '';
					for (let i = 0; i < this.listMap.processTypeList.length; i++){
						let item = this.listMap.processTypeList[i];
						if (value == item.value) {
						  v = item.label;
						  break;
						}
					}
					return v
				}
			},
		},
		methods:{
			customBack(){
				uni.navigateBack()
			},
			getReportDetails(){
				this.$u.api.excptionById({id:this.reportId}).then(res=>{
					if(res.code==200){
						// this.reportDetails = res.data;
						// this.fileList = res.data.imgList;
						let imgList = res.data.imgList;
						if(imgList.length>0){
							this.fileList=imgList.map(img=>{
								return {url:img}
							})
						}
						this.form = {
						  ...res.data,
						  imgList:[],
						}
						console.log('this.formthis.form',this.form);
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
					console.log('res',res);
				}).catch(err=>{
					console.log('err',err);
				})
			},
			getProcessDevice(){
				console.log('this.form.deviceType',this.form.deviceType);
				if(this.form.deviceType==1){
					this.getProcessDeviceGeo();
				}else if(this.form.deviceType==2){
					this.getProcessDeviceLock();
				}else if(this.form.deviceType==3){
					this.getProcessDeviceRoom();
				}
				
			},
			getProcessDeviceGeo(){
				this.$u.api.processDeviceGeo().then(res=>{
					if(res.code==200){
						this.listMap.processDeviceList = res.data.data.map(item=>{
							return {value:item.dictValue,label:item.dictLabel}
						});
						// console.log('this.listMap.processDeviceList',this.listMap.processDeviceList);
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
					console.log('res',res);
				}).catch(err=>{
					console.log('err',err);
				})
			},
			getProcessDeviceLock(){
				this.$u.api.processDeviceLock().then(res=>{
					if(res.code==200){
						this.listMap.processDeviceList = res.data.data.map(item=>{
							return {value:item.dictValue,label:item.dictLabel}
						});
						// console.log('this.listMap.processDeviceList',this.listMap.processDeviceList);
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
					console.log('res',res);
				}).catch(err=>{
					console.log('err',err);
				})
			},
			getProcessDeviceRoom(){
				this.$u.api.processDeviceRoom().then(res=>{
					if(res.code==200){
						this.listMap.processDeviceList = res.data.data.map(item=>{
							return {value:item.dictValue,label:item.dictLabel}
						});
						// console.log('this.listMap.processDeviceList',this.listMap.processDeviceList);
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
					console.log('res',res);
				}).catch(err=>{
					console.log('err',err);
				})
			},
			getDamageType(){
				this.$u.api.damageType().then(res=>{
					if(res.code==200){
						this.listMap.damageTypeList =  res.data.data.map(item=>{
							return {value:item.dictValue,label:item.dictLabel}
						});
						// console.log('getDeviceStatis',res);
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
					console.log('res',res);
				}).catch(err=>{
					console.log('err',err);
				})
			},
			getProcessType(){
				this.$u.api.processType().then(res=>{
					if(res.code==200){
						this.listMap.processTypeList =  res.data.data.map(item=>{
							return {value:item.dictValue,label:item.dictLabel}
						});
						// console.log('getDeviceStatis',res);
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
					console.log('res',res);
				}).catch(err=>{
					console.log('err',err);
				})
			},
			// selectConfirm(e){
			// 	// console.log('e',e);
			// 	this.form.roadNo = e[0].value;
			// 	this.form.roadName = e[0].label;
			// 	// console.log('this.form',this.form);
			// },
			// 单列下拉选择框打开事件
			oneSelectOpen(key) {
				this.selectTag = key;
				this.selectData = this.listMap[key];
				this.selectShow = true
			},
			selectConfirm(e) {
				// console.log('selectConfirm',e);
				// console.log('selectTag', this.selectTag);
				switch (this.selectTag) {
				 case 'isProcess': //处理状态
						// console.log('处理状态',e);
						this.form.isProcess = e[0].value;
						break;
					case 'processDeviceList': //处理设备
						this.form.processDevice = e[0].value;
						this.form.damageType = '';
						this.form.processType = '';
						// this.getDamageType();
						break;
					case 'damageTypeList': //损坏类型
						this.form.damageType = e[0].value;
						this.form.processType = '';
						// this.getProcessType();
						break;
					case 'processTypeList': //处理方式
						this.form.processType = e[0].value;
						break;
					default:
						// console.log('3', e);
				}
			},
			submit(){
				// console.log('this.form',this.form);
				let that = this;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						// delete this.dealForm.selectedUserList;
						let files = [];
						// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
						files = this.$refs.uploadRef.lists.filter(val => {
							return val.progress == 100;
						})
						console.log('files',files);
						// 如果您不需要进行太多的处理，直接如下即可
						// files = this.$refs.uUpload.lists;
						files.forEach(function(item){
							console.log('item',item);
							if(item?.response?.data){that.form.imgList.push(item.response.data.url)}
							else if(item.url){that.form.imgList.push(item.url)}
						});
						if(this.reportId){
							this.editReport();
						}else{
							this.addReport();
						}
						
					} else {
						console.log('验证失败');
					}
				});
			},
			addReport(){
				let that = this;
				this.$u.api.deviceexcptionprocess(this.form).then(res=>{
					console.log('res',res);
					// this.form = {};
					uni.showToast({
						icon:'none',
						title:res.msg,
						duration:1500,
					});
					if(res.code==200){
						setTimeout(()=>{
							that.customBack()
						},1500)
					}
				}).catch(err=>{
					uni.showToast({
						icon:'none',
						title:err.msg
					})
					console.log('err',err);
				})
			},
			editReport(){
				let that = this;
				this.$u.api.editDeviceexcptionprocess(this.form).then(res=>{
					console.log('res',res);
					// this.form = {};
					uni.showToast({
						icon:'none',
						title:res.msg,
						duration:1500,
					});
					if(res.code==200){
						setTimeout(()=>{
							that.customBack()
						},1500)
					}
				}).catch(err=>{
					uni.showToast({
						icon:'none',
						title:err.msg
					})
					console.log('err',err);
				})
				
			}
		}
	}
</script>
<style>
	page{background-color: #F3F3F3;}
</style>
<style lang="scss" scoped>
	@import  '@/pages/report/report.scss';
	.select-view{
		box-sizing: border-box;
		padding-right: 24rpx;
		width: 100%;
		text-align: right;
	}
</style>