parking_inspection/pages/report/payeeReport/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>
			<u-form-item label="收费员" prop="payeeName" required :label-width="labelWidth">
				<u-input type="text" :border="true" maxlength="200" @click="$u.route('/pages/payee/payee')" v-model="form.payeeName" disabled />
			<!-- 	<u-input v-model="form.payeeName" type="select" :border="true" placeholder="请选择" @click="selectPayeeShow = true" />
				<u-select v-model="selectPayeeShow" :list="payeeList" value-name="roadNo" label-name="roadName" @confirm="selectPayeeConfirm"></u-select> -->
			</u-form-item>
			<u-form-item label="问题类型："  required :label-width="labelWidth">
				<!-- <u-input v-model="form.payeeExceptionType" type="select" :border="true" placeholder="请选择" @click="problemShow = true" />
				<u-select v-model="problemShow" :list="payeeExceptionTypeList" value-name="dictValue" label-name="dictLabel" @confirm="problemConfirm"></u-select> -->
				<u-checkbox-group @change="checkboxGroupChange"  width="50%">
					<u-checkbox 
					size="24"
						@change="checkboxChange" 
						v-model="item.checked"
						:disabled="item.disabled"
						v-for="(item, index) in payeeExceptionTypeList" :key="item.dictValue" 
						:name="item.dictValue"
						>{{item.dictLabel}}
					</u-checkbox>
				</u-checkbox-group>
			</u-form-item>
			<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" max-count="3"></u-upload>
			</u-form-item>
		</u-form>
		<u-button type="primary" @click="submit" style="margin-top: 20vh;">提交</u-button>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				title:'问题上报',
				labelWidth:190,
				action:this.config.upFileUrl,
				selectShow:false,
				problemShow:false,
				selectPayeeShow:false,
				selectList:[],
				roadList:[],
				payeeList:[],
				payeeExceptionTypeList:[],
				form:{
					roadName:'',
					roadNo:'',
					exceprionDes:'',
					imgList:[],
					payeeExceptionType:'',
				},
				rules:{
					roadName: [
						{ 
							required: true, 
							message: '请选择路段', 
							trigger: ['change','blur'],
						}
					],
					payeeName: [
						{ 
							required: true, 
							message: '请选择收费员', 
							trigger: ['change','blur'],
						}
					],
					payeeExceptionType: [
						{ 
							required: true, 
							message: '请选择问题类型', 
							trigger: ['change','blur'],
						}
					],
					exceprionDes: [
						{ 
							required: true, 
							message: '请输入内容', 
							trigger: ['change','blur'],
						}
					],
				}
			}
		},
		onLoad(){
			
		},
		onShow(){
			this.getRoadAllList();
			this.getPayeeExceptionType();
			this.form.payeeExceptionType = '';
			// this.getPayeeList();
			this.form.payeeName = this.vuex_selected_payee.name;
			this.form.payeeId = this.vuex_selected_payee.id;
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods:{
			customBack(){
				// uni.reLaunch({
				//     url: '/pages/index/index'
				// });
				uni.navigateBack()
			},
			getRoadAllList(){
				this.$u.api.getRoadAllList().then(res=>{
					if(res.code==200){
						this.roadList = res.data;
						// console.log('getDeviceStatis',res);
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
					console.log('res',res);
				}).catch(err=>{
					console.log('err',err);
				})
			},
			getPayeeExceptionType(){
				this.$u.api.payeeExceptionType().then(res=>{
					if(res.code==200){
						this.payeeExceptionTypeList = res.data.data;
						// this.payeeExceptionType.forEach((item)=>{
						// 	item.disabled = false
						// 	item.checked = false;
						// });
						console.log('this.payeeExceptionTypeList',this.payeeExceptionTypeList);
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
					console.log('res',res);
				}).catch(err=>{
					console.log('err',err);
				})
			},
			// getPayeeList(){
			// 	this.$u.api.payeeList().then(res=>{
			// 		if(res.code==200){
			// 			this.payeeList = res.data.data;
			// 			// 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);
			},
			selectPayeeConfirm(e){
				console.log('e',e);				
			},
			checkboxChange(e){
				console.log('checkboxChange',e);
			},
			checkboxGroupChange(e){
				console.log('checkboxGroupChange',e);
				this.form.payeeExceptionType = e.toString();
			},
			submit(){
				console.log('this.form',this.form);
				if(this.form.payeeExceptionType.length<1){
					uni.showToast({
						icon:'error',
						title:'请选择问题类型'
					})					
					return
				}
				
				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){
							if(item.response.data){that.form.imgList.push(item.response.data.url)}
						});
						this.$u.api.payeeReport(this.form).then(res=>{
							console.log('res',res);
							// this.form = {};
							uni.showToast({
								icon:'none',
								title:res.msg,
								duration:1500,
							});
							setTimeout(()=>{
								uni.switchTab({
									url: '/pages/index/index',
								})
							},1500)
						}).catch(err=>{
							uni.showToast({
								icon:'none',
								title:err.msg
							})
							console.log('err',err);
						})
					} else {
						console.log('验证失败');
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	// @import  './report.scss'
</style>