patrol-maintain-mobile/packageA/pages/generalPatrol/generalPatrol.vue

<template>
	<view class="content">
		<view>
			所属道路：{{roadName}}
		</view>
		<u-form :model="form" ref="uForm">
			<u-form-item label="问题类型" label-position="top" prop="typeName" required>
				<u-input v-model="form.typeName" type="select" :border="true" @click="typeshow = true" />
				<u-select v-model="typeshow" mode="single-column" value-name="id" label-name="value" :list="plist"
					@confirm="confirmType"></u-select>
			</u-form-item>
			<u-form-item label="问题内容" label-position="top" prop="contentName" required>
				<u-input v-model="form.contentName" type="select" :border="true" @click="contentshow = true" />
				<u-select v-model="contentshow" mode="single-column" value-name="id" label-name="value" :list="list"
					@confirm="confirmContent"></u-select>
			</u-form-item>
			<u-form-item label="位置" label-position="top" required>
				<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>
			<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" @on-progress="onprogress" @on-success="tosuccess" :file-list="filesList" :form-data="otherData" :show-tips="false" @on-uploaded="toupload"
					@on-remove="toremove">
				</u-upload>
			</u-form-item>

			<u-form-item label="反馈科室" label-position="top" required>
				<u-input v-model="form.unitName" placeholder="请选择反馈科室" type="select" :border="true"
					@click="unitshow = true" />
				<u-select v-model="unitshow" mode="single-column" value-name="id" label-name="name" :list="listUnit"
					@confirm="confirmUnit"></u-select>
			</u-form-item>
		</u-form>
		<u-button type="primary" @click="submit">提交</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				otherData: {
					token: ""
				},
				roadName:"",
				unitshow: false,
				typeshow: false,
				contentshow: false,
				action: "",
				location: {},
				plist: [],
				list: [],
				listUnit: [],
				filesList:[],
				infoId:"",
				form: {
					unitName: "",
					ask_type_id: "",
					ask_content_id: "",
					typeName: "",
					contentName: "",
					content: "",
					feedback_department_id: "",
					longitude: "",
					latitude: "",
					files_list: [],
					address: ""
				},
				width: 300,
				height: 300,
				action: "",
				rules: {
					typeName: [{
						required: true,
						message: '请选择类型',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					contentName: [{
						required: true,
						message: '请选择内容',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}]
				}
			}
		},
		onLoad(options) {
			var that = this;
			this.loadType({
				'number': "general_type",
			}, function(res) {
				that.plist = res;
			});
			if(options.id){
				this.infoId = options.id;
				this.showInfo(this.infoId);
			}
			if(options.roadid){
				this.form.road_id = options.roadid
				this.roadName = options.roadname
			}
			this.action = this.util.HOST + "/api/mobile/upload-file";
			this.otherData.token = uni.getStorageSync("userInfo_token").access_token;
			this.loadUnit();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			let that = this;
			uni.getLocation({
				type: "gcj02",
				success(res) {
					that.location = res;
					var loc = null
					console.log(typeof(window.android))
					if (typeof(window.android) != undefined && typeof(window.android) != "undefined") {
						loc = window.android.getLocInfo();
					}
					if (loc) {
						that.form.latitude = JSON.parse(loc).lat;
						that.form.longitude = JSON.parse(loc).lon;
					} else {
						that.form.latitude = res.latitude;
						that.form.longitude = res.longitude;
					}
					const url =
						"https://apis.map.qq.com/ws/geocoder/v1/?key=EUQBZ-MJALU-WZFVR-2HFNW-TIK2K-TNBJI&location=" +
						that.form.latitude + "," + that.form.longitude + "&output=jsonp"
					
					that.$jsonp(
							url
					 ).then(re => {
						that.form.address = re.result.formatted_addresses.recommend
					})
				}
			})
			uni.getSystemInfo({
				complete(res) {
					that.width = res.screenWidth * .8
					that.height = res.screenHeight * .6
				}
			})

		},
		methods: {
			onprogress(res){
				uni.showToast({
					icon: "none",
					title: "上传中",
					duration: 2000
				})
			},
			tosuccess(){
				uni.showToast({
					icon: "none",
					title: "上传成功",
					duration: 2000
				})
			},
			toremove(index, lists, nam) {
				console.log(lists);
				let list = [];
				this.filesList.splice(index,1)
			},
			toupload(lists, name) {
				console.log(lists)
				let list = [];
				// for (var m of lists) {
				// 	if(m.response){
				// 		this.filesList.push(m)
				// 	}
				// }
				 this.filesList = lists;
			},
			confirmUnit(e) {
				var that = this;
				this.form.feedback_department_id = e[0].value
				this.form.unitName = e[0].label
			},
			loadType(data, call) {
				let that = this;
				this.util.request({
					api: '/api/admin/parameter/show',
					data: data,
					utilSuccess: function(res) {
						call(res.detail)
					},
					utilFail: function(res) {
						this.util.alert(res);
					}
				});
			},
			loadUnit() {
				let that = this;
				this.util.request({
					api: '/api/mobile/other/department-list',
					utilSuccess: function(res) {
						that.listUnit = res;
					},
					utilFail: function(res) {
						this.util.alert(res);
					}
				});

			},
			showInfo(id){
				var that = this;
				that.util.request({
					api: '/api/mobile/common-inspection/show',
					method: "get",
					data: {
						id:id
					},
					utilSuccess: function(result) {
						that.form = result;
						that.form.typeName = result.ask_type_detail.value;
						that.form.contentName = result.ask_content_detail.value;
						that.form.unitName = result.feedback_department.name
						that.roadName = result.road?result.road.name:""
						let _files = [];
						for (var mod of result.common_inspection_files) {
						  let m = Object.assign({}, mod);
						  m.url = mod.files.url;
						  m.id = mod.files.id;
						  m.name = mod.files.original_name;
						  _files.push(m);
						}
						that.filesList = _files
						// that.form.files_list = _upfiles;
					},
					utilFail: function(res) {
						that.util.alert(res);
					}
				});
			},
			
			submit() {
				let that = this;
				let list = [];
				for(var mod of that.filesList){
					if( mod.response){
						list.push({
							upload_id: mod.response.id
						})
					}else{
						list.push({
							upload_id:mod.id
						})
					}
				}
				this.form.files_list = list
				// console.log(that.form);
				// return;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						if(that.infoId){
							that.util.request({
								api: '/api/mobile/common-inspection/save',
								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{
							that.util.request({
								api: '/api/mobile/common-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: "../generalList/generalList"
				})
			},
			confirmType(e) {
				var that = this;
				this.form.ask_type_id = e[0].value
				this.form.typeName = e[0].label
				this.loadType({
					pid: e[0].value
				}, function(res) {
					that.list = res;
					that.form.ask_content_id =""
					that.form.contentName =""
				})
			},
			confirmContent(e) {
				this.form.ask_content_id = e[0].value
				this.form.contentName = e[0].label
			},
			
			chooseLocation(e) { //打开地图选择位置
				var that = this;
				uni.chooseLocation({
					longitude : that.form.longitude,
					latitude : that.form.latitude,
					success: res => {
						that.form.address = res.name;
						that.form.longitude = res.longitude;
						that.form.latitude = res.latitude;
					}
				});
			},

		}
	}
</script>

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

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