patrol-maintain-mobile/packageB/pages/dailyInspection/dailyInspection.vue

<template>
	<view class="content">
		<u-form :model="form" ref="uForm">
			<u-form-item label="巡查项目" label-position="top" prop="name" required>
				<u-input v-model="form.name" type="text" :border="true" placeholder="请填写巡查项目"/>
			</u-form-item>
			<u-form-item label-position="top" label="巡查记录" prop="content">
				<u-input v-model="form.content" type='textarea' height='100' :border="true" />
			</u-form-item>
			<u-form-item label-position="top" label="现场照片">
				<u-upload ref="uUpload" multiple :maxCount="10" :action="action" upload-text="选择附件"
					:previewFullImage="true" :file-list="filesList" :form-data="otherData" :show-tips="false" @on-uploaded="function(lists, name) {return toupload(lists, name,'filesList')}"
					@on-remove="function(index, lists, name) {return toremove(index, lists, name,'filesList')}">
				</u-upload>
			</u-form-item>
			<u-form-item label-position="top" label="状态">
				<u-radio-group v-model="form.status">
					<u-radio 
						@change="radioChange" 
						v-for="(item, index) in statuss" :key="index" 
						:name="item.id"
					>
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<div v-if="form.status==2">
				<u-form-item label="" label-position="top" prop="nextStatus">
					<u-input v-model="nextStatus" type="select" :border="true" @click="nextShow = true" />
					<u-select v-model="nextShow" mode="single-column" value-name="id" label-name="name" :list="slist"
						@confirm="confirmNext"></u-select>
				</u-form-item>
			</div>
			<div v-if="form.status==2 && nextStatusId==2">
				<u-form-item label-position="top" label="处理记录" prop="deal_content">
					<u-input v-model="form.deal_content" type='textarea' height='100' :border="true" />
				</u-form-item>
				
				<u-form-item label-position="top" label="处理后照片">
					<u-upload ref="uUpload" multiple :maxCount="10" :action="action" upload-text="选择附件"
						:previewFullImage="true" :file-list="dealFilesList" :form-data="otherData" :show-tips="false" @on-uploaded="function(lists, name) {return toupload(lists, name,'dealFilesList')}"
						@on-remove="function(index, lists, name) {return toremove(index, lists, name,'dealFilesList')}">
					</u-upload>
				</u-form-item>
			</div>
			<div v-if="nextStatusId==3">
				<u-form-item label="位置" label-position="top" required>
					<!-- <text>{{form.address}}</text> -->
					<u-input v-model="form.address" disabled type='text'/>
					<u-button shape="square" slot='right' size="mini" @click="chooseLocation" type="info">重新获取</u-button>
				</u-form-item>
			</div>
		</u-form>
		<u-button type="primary" @click="submit">提交</u-button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				otherData: {
					token: ""
				},
				showMap: false,
				nextStatus:"可现场处理",
				nextStatusId:2,
				nextShow:false,
				action: "",
				location: {},
				slist:[
					{
						id:2,
						name:"可现场处理"
					},
					{
						id:3,
						name:"不可现场处理"
					}
				],
				statuss:[
					{
						id:1,
						name:"无异常"
					},
					{
						id:2,
						name:"有异常"
					}
				],
				filesList:[],
				dealFilesList:[],
				form: {
					name:"",
					content:"",
					status:1,
					deal_content:"",
					deal_longitude:"",
					deal_latitude:"",
					address:"",
					files_list:"",
					deal_files_list:""
				},
				width: 300,
				height: 300,
				rules: {
					name: [{
						required: true,
						message: '请填写项目名称',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['blur'],
					}]
				}
			}
		},
		onLoad() {
			var that = this;
			this.action = this.util.HOST + "/api/mobile/upload-file";
			this.otherData.token = uni.getStorageSync("userInfo_token").access_token;
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			let that = this;
			uni.getLocation({
				type: "gcj02",
				geocode:true,
				success(res) {
					that.location = res;
					that.form.deal_latitude = res.latitude;
					that.form.deal_longitude = res.longitude;
					
					
				}
			})
			uni.getSystemInfo({
				complete(res) {
					that.width = res.screenWidth * .8
					that.height = res.screenHeight * .6
				}
			})

		},
		methods: {
			toremove(index, lists, name,whatfile) {
				console.log(lists);
				console.log(whatfile);
				let list = [];
				for (var m of lists) {
					list.push({
						upload_id: m.response.id
					})
				}
				if(whatfile=="filesList"){
					this.form.files_list = list;
				}
				if(whatfile=="dealFilesList"){
					this.form.deal_files_list = list;
				}
			},
			toupload(lists, name,whatfile) {
				console.log(lists)
				console.log(whatfile)
				let list = [];
				for (var m of lists) {
					list.push({
						upload_id: m.response.id
					})
				}
				if(whatfile=="filesList"){
					this.form.files_list = list;
				}
				if(whatfile=="dealFilesList"){
					this.form.deal_files_list = list;
				}
			},
			radioChange(val){
				console.log(val)
			},
			confirmNext(e) {
				console.log(e);
				var that = this;
				that.nextStatusId = e[0].value
				that.nextStatus = e[0].label
			},
			submit() {
				let that = this;
				if(that.nextStatusId==3){
					that.form.status = that.nextStatusId
				}else{
					that.form.deal_latitude = "";
					that.form.deal_longitude = "";
				}
				// console.log(that.form);
				// return;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						that.util.request({
							api: '/api/mobile/daily-inspection/store',
							method: "POST",
							data: that.form,
							utilSuccess: function(res) {
								uni.showToast({
									icon: "none",
									title: "提交成功",
									complete() {
										that.afterSubmit(res);
									},
									duration: 2000
								})
							},
							utilFail: function(res) {
								this.util.alert(res);
							}
						});
					} else {
						console.log('验证失败');
					}
				});
			},
			afterSubmit(res) {
				uni.redirectTo({
					url: "../dailyList/dailyList"
				})
			},
			
			chooseLocation(e) { //打开地图选择位置
				var that = this;
				uni.chooseLocation({
					success: res => {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						that.form.address = res.name;
						uni.getLocation({
							type: 'gcj02',
							altitude:true,
							geocode:true,
							success: function(res) {
								that.form.deal_longitude = res.longitude;
								that.form.deal_latitude = res.latitude;
							}
						});
						
						
					}
				});
			},


		}
	}
</script>

<style>
	.content {
		padding: 20rpx;
	}

	.popuptitle {
		background: #2979ff;
		color: #fff;
		padding: 20rpx 30rpx;
	}
</style>