patrol-gamble-mobile/inspect/inspect.vue

<template>
	<view class="content">
		<u-form :model="form" ref="uForm" :label-width='120'>
			<u-form-item label="片区" prop="area_id">
				<u-input placeholder="请选择片区" label-position="top" v-model="areaName" type="select" :border="false"
					@click="areaShow = true" />
				<u-select v-model="areaShow" mode="single-column" value-name="id" label-name="value" :list="areaList"
					@confirm="confirmArea"></u-select>
			</u-form-item>

			<u-form-item label="河道" prop="river_id">
				<u-input placeholder="请选择河道" label-position="top" v-model="riverName" type="select" :border="false"
					@click="riverShow = true" />
				<u-select v-model="riverShow" mode="single-column" value-name="id" label-name="name" :list="riverList"
					@confirm="confirmRiver"></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="问题类型" prop="ask_type_id">
				<u-input placeholder="请选择问题类型" label-position="top" v-model="askName" type="select" :border="false"
					@click="askShow = true" />
				<!-- <u-select v-model="askShow1" mode="mutil-column-auto" value-name="id" label-name="name" :list="askList"
					@confirm="confirmAsk"></u-select> -->
				<zhilin-cascader v-model="askShow" :options="askList" :fieldNames="fieldNames" :isFullValue="true"
					@confirm="confirmAsk">
				</zhilin-cascader>
			</u-form-item>
			<u-form-item label="扣分条款" prop="dec_score">
				<u-input placeholder="请选择河道" label-position="top" v-model="decName" type="select" :border="false"
					@click="decShow = true" />
				<u-select v-model="decShow" mode="single-column" value-name="id" label-name="name" :list="decList"
					@confirm="confirmDec"></u-select>
				<!-- <u-input placeholder="请输入扣除分数" label-position="top" v-model="form.dec_score" /> -->
			</u-form-item>
			<u-form-item label="问题影像" prop="picFileList">
				<!-- <u-upload ref="uUpload" multiple :maxCount="10" :action="action" upload-text="选择附件"
					:previewFullImage="true" @on-progress="onprogress" @on-success="tosuccess" :file-list="picFileList"
					:form-data="otherData" :show-tips="false"
					@on-uploaded="function(lists, name) {return toupload(lists, name,'picFileList')}"
					@on-remove="function(index, lists, name) {return toremove(index, lists, name,'picFileList')}">
				</u-upload> -->
				<htz-image-upload :max="9" v-model="picFileList" mediaType="image" :chooseNum="9" :sourceType="['album','camera']"
					:compress="false" :quality="80" :formData="otherData" :remove="true" :dataType="1"
					@uploadSuccess="function(res) { return uploadSuccess(res,'pic')}"
					@imgDelete="function(res) { return imgDelete(res,'pic')}"
					@uploadFail="uploadFail"
					:action="action"></htz-image-upload>
			</u-form-item>
			<u-form-item label="问题视频" prop="videoFileList">
				<htz-image-upload :max="9" v-model="videoFileList" mediaType="video" :chooseNum="9" :sourceType="['album','camera']"
					:compress="false" :quality="80" :formData="otherData" :remove="true" :dataType="1"
					@uploadSuccess="function(res) { return uploadSuccess(res,'video')}"
					@imgDelete="function(res) { return imgDelete(res,'video')}"
					@uploadFail="uploadFail"
					:action="action"></htz-image-upload>
				<!-- <u-upload ref="uUpload" multiple :maxCount="10" :action="action" upload-text="选择附件"
					:previewFullImage="true" @on-progress="onprogress" @on-success="tosuccess" :file-list="videoFileList"
					:form-data="otherData" :show-tips="false"
					@on-uploaded="function(lists, name) {return toupload(lists, name,'videoFileList')}"
					@on-remove="function(index, lists, name) {return toremove(index, lists, name,'videoFileList')}">
				</u-upload> -->
			</u-form-item>
			<u-form-item label="问题语音" prop="audioFileList">
				<htz-image-upload :max="9" v-model="audioFileList" mediaType="video" :chooseNum="9" :sourceType="['album','camera']"
					:compress="false" :quality="80" :formData="otherData" :remove="true" :dataType="1"
					@uploadSuccess="function(res) { return uploadSuccess(res,'audio')}"
					@imgDelete="function(res) { return imgDelete(res,'audio')}"
					@uploadFail="uploadFail"
					:action="action"></htz-image-upload>
			</u-form-item>
			<u-form-item label="备注" prop="ask_content">
				<u-input type="textarea" :border="border" placeholder="请输入备注" label-position="top" v-model="form.ask_content" />
			</u-form-item>
		</u-form>
		<u-button type="primary" @click="submit">提交</u-button>

	</view>
</template>

<script>
	import ZhilinCascader from '@/components/zhilin-cascader/zhilin-cascader.vue'
	import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
	export default {
		data() {
			return {
				areaShow: false,
				areaName: "",
				areaList: [],
				riverShow: false,
				riverName: "",
				riverList: [],
				decShow: false,
				decName: "",
				decList: [],
				askShow: false,
				askName: "",
				askList: [],
				fieldNames: {
					label: 'name',
					value: 'id',
					children: 'children'
				},
				action: "",
				otherData: {
					token: ""
				},
				picFileList: [],
				videoFileList:[], // 存储播放url
				audioFileList:[],
				form: {
					area_id: "",
					river_id: "",
					address: "",
					lat: "",
					lng: "",
					ask_type_id: "",
					ask_content:"",
					deal_examine_id:"",
					dec_score:"",
					inspection_file_list:[]
				},

			}
		},
		onReady() {
			var that = this
			that.util.initAddress(function(res) {
				console.log(res)
				that.form.lat = res.latitude
				that.form.lng = res.longitude
				that.form.address = res.address
			})
		},
		onLoad() {
			this.loadArea()
			this.loadRiver()
			this.loadAsk()
			this.loadDec()
			this.action = this.util.HOST + "/api/mobile/upload-file";
			this.otherData.token = uni.getStorageSync("userInfo_token").access_token;
		},


		methods: {
			// 区域
			loadArea() {
				var that = this;
				that.util.request({
					api: '/api/admin/parameter/show',
					method: "get",
					data: {
						number: "area"
					},
					utilSuccess: function(result) {
						that.areaList = result.detail
					},
					utilFail: function(res) {
						that.util.alert(res);
					}
				});
			},
			confirmArea(val) {
				console.log(val)
				this.areaName = val[0].label
				this.form.area_id = val[0].value
			},
			// 河道
			loadRiver() {
				var that = this;
				that.util.request({
					api: '/api/mobile/get-rivers',
					method: "get",
					data: {
						page: 1,
						page_size: 999
					},
					utilSuccess: function(result) {
						that.riverList = result.data
					},
					utilFail: function(res) {
						that.util.alert(res);
					}
				});
			},
			confirmRiver(val) {
				console.log(val)
				this.riverName = val[0].label
				this.form.river_id = val[0].value
			},
			// 地图
			chooseLocation(e) { //打开地图选择位置
				var that = this;
				let _latlog = that.gcoord.transformFromWGSToGCJ(that.form.lat, that.form.lng);
				uni.chooseLocation({
					longitude: _latlog.longitude,
					latitude: _latlog.latitude,
					success: res => {
						that.form.address = res.name;
						that.form.lng = res.longitude;
						that.form.lat = res.latitude;
					}
				});
			},
			// 问题类型
			loadAsk() {
				var that = this;
				that.util.request({
					api: '/api/mobile/get-ask_type',
					method: "get",
					data: {},
					utilSuccess: function(res) {
						// console.log(res)
						// that.mapArr(res)
						that.askList = res
					},
					utilFail: function(res) {
						that.util.alert(res);
					}
				});
			},
			confirmAsk(val, copy) {
				this.form.ask_type_id_top_pid = val[0]
				this.form.ask_type_id = val[val.length - 1]
				this.askName = copy.join("/")
				console.log(this.form.ask_type_id, this.askName)
			},
			// 扣分条款
			loadDec() {
				var that = this;
				that.util.request({
					api: '/api/mobile/get-examine',
					method: "get",
					data: {
						page: 1,
						page_size: 999
					},
					utilSuccess: function(res) {
						// console.log(res)
						// that.mapArr(res)
						for(var m of res.data){
							m.extra = m.score
						}
						that.decList = res.data
					},
					utilFail: function(res) {
						that.util.alert(res);
					}
				});
			},
			confirmDec(val) {
				console.log('dec',val)
				this.decName = val[0].extra
				this.form.dec_score = val[0].extra
				this.form.deal_examine_id = val[0].value
			},
			
			// 文件上传
			uploadSuccess(res,type){
				console.log(type)
				uni.showLoading({
					title:"上传成功"
				})
				let obj = {}
				let data = JSON.parse(res.data)
				obj.id = data.id
				obj.url = data.url
				if(type=="pic"){
					obj.type=0
				}else{
					obj.type=1
				}
				
				switch (type){
					case 'video':
						this.videoFileList.push(obj)
						break;
					case 'audio':
						this.audioFileList.push(obj)
						break;
					case 'pic':
						this.picFileList.push(obj)
						break;
					default:
						break;
				}
			},
			imgDelete(res,type){
				console.log("imgDelete",res)
				let list = []
				list = res.tempFilePaths
				switch (type){
					case 'video':
						this.videoFileList = list
						break;
					case 'audio':
						this.audioFileList= list
						break;
					case 'pic':
						this.picFileList= list
						break;
					default:
						break;
				}
			},
			uploadFail(res){
				console.log("uploadFail",res)
			},
			submit(){
				var that = this;
				let pic = []
				let fileListObj = {
					pics:{
						arr:this.picFileList,
						type:1
					},
					videos:{
						arr:this.videoFileList,
						type:2
					},
					audios:{
						arr:this.audioFileList,
						type:3
					}
				}
				for(var m in fileListObj){
					for(var k of fileListObj[m]['arr']){
						pic.push({
							upload_id:k.id,
							type:fileListObj[m]['type']
						})
					}
				}
				this.form.inspection_file_list = pic
				this.$refs.uForm.validate(valid => {
					if (valid) {
						that.util.request({
							api: "/api/mobile/inspection/store",
							method: "POST",
							data: that.form,
							utilSuccess: function(res) {
								uni.showToast({
									icon: "none",
									title: "提交成功",
									complete() {
										that.afterSubmit(res);
									},
									duration: 2000
								})
							},
							utilFail: function(res) {
								that.util.alert(res);
							}
						});
					}else{
						console.log('验证失败');
					}
				})
				
			},
			afterSubmit(){
				uni.redirectTo({
					url: "../inspect/list"
				})
			},
			

		}
	}
</script>

<style scoped>
	.content {
		padding: 20rpx
	}
</style>