manage_mobile/pages/massif/info.vue

<style lang="scss" scoped>
	.container{
		background:#F6F6F6;
		padding:14px 0;
		min-height:100%;
	}
</style>
<template>
	<view class="container">
		<u-form class="card inline" errorType="toast" :model="formData" ref="form" :rules="rules" labelWidth="auto">
			<d-form
				v-for="(v,k) in fields"
				:key="k"
				v-bind="v"
				:required="!!rules[k]"
				:field="k"
				:value="(/^dateRange$|^select$|^map$/.test(v.type)?fields[k].value:formData[k])"
				ref="dForm"
				@input="formData[k]=$event"
				@selectRDate="selectDate"
				@select="fields[k].value=$event.map(v=>v.value);formData[k]=fields[k].value[0]"
				@imgs="fields[k].value=$event"
				@editorMap="editorMap"/>
		</u-form>
		<button class="cu-btn round bg-green shadow submit" @click="sumbit">保存</button>
	</view>
</template>
<script>
import request from '@/common/request'
	export default{
		data(){
			return{
				fields:{
					plantBaseInfoId:{label:"基地名称",type:"select",columns:[[]],value:[],disabled:this.$store.getters['userInfo'].roleCode=="baseAdmin"},
					plotNumber:{label:"地块编号"},
					plotName:{label:"地块名称"},
					drawArea:{label:"地块面积(亩)",type:'digit'},
					realityArea:{label:"实际面积",type:'digit'},
					image:{label:"地块图片",type:"upImg",num:3,value:''},
					date:{label:"使用日期",type:"dateRange",value:[]},
					longitude:{label:"经/纬度",type:"map",value:[]},
					address:{label:"详细地址",type:"textarea"},
				},
				formData:{
					plantBaseInfoId:"",
					plotNumber:"",
					plotName:"",
					drawArea:'',
					realityArea:'',
					image:[],
					beginTime:"",
					endTime:"",
					longitude:"",
					latitude:"",
					address:"",
				},
				rules:{
					plantBaseInfoId:{required:true, message:"基地名称必填！", trigger:"change"},
					plotNumber:{required:true, message:"地块编号必填！", trigger:"blur"},
					plotName:{required:true, message:"地块名称必填！", trigger:"blur"},
					drawArea:{required:true, type:'number', message:"地块面积必填！", trigger:"blur"},
					realityArea:{required:true, type:'number', message:"实际面积必填！", trigger:"blur"},
					image:{required:true, type:"array", min:1, validator:(rule,val,call)=>{
						if(this.fields.image.value.length<=0)call(new Error('地块图片必选！'));
						else call()
					}, trigger:"change"},
					date:{required:true,validator:(rule,val,call)=>{
						if(!this.fields.date.value[0])call(new Error('请选择开始时间！'));
						else if(!this.fields.date.value[1])call(new Error('请选择结束时间！'));
						else call()
					}, trigger:"change"}
				},
				eventChannel:null,
			}
		},
		async onLoad(options){
			await this.init()
			if(options.id){
				this.getDetail(options.id)
			}else if(this.$store.getters['userInfo'].roleCode=="baseAdmin"){
				var baseVal=this.fields.plantBaseInfoId.columns[0].find(v=>v.value==this.$store.state.baseInfo.id)
				if(baseVal){
					this.formData.plantBaseInfoId=baseVal.value
					this.fields.plantBaseInfoId.value=[baseVal.value]
				}
			}
			this.eventChannel=this.getOpenerEventChannel()
		},
		methods:{
			async init(){
				var res=await request("/api/plantPlot/getAllPlantBaseInfo",{
					params:{companyId:this.$store.getters.userInfo.companyId}
				})
				if(res.statu){
					this.fields.plantBaseInfoId.columns = [res.data.map(v=>({label:v.baseName,value:v.id}))]
				}else{
					uni.showModal({
						title:"提示",
						content:res.msg||"获取基地名称下拉选项失败！",
						showCancel:false,
					})
				}
			},
			selectDate(e){
				switch(e.type){
					case "start":this.fields.date.value[0]=e.value;break;
					case 'end':this.fields.date.value[1]=e.value;break;
				}
			},
			sumbit(){
				this.$refs.form.validate().then(async valid=>{
					if(valid){
						var res=await request("/api/plantPlot/addOrUpdate",{
							method:"post",
							body:{
								...this.formData,
								image:this.fields.image.value,
								beginTime:this.fields.date.value[0],
								endTime:this.fields.date.value[1],
							}
						})
						if(res.statu){
							this.eventChannel.emit("update")
							uni.navigateBack()
							//新增数据，首页刷新
							if(!this.formData.id){
								this.$provise.emit("updateMassif")
							}
						}else{
							uni.showModal({
								title:"提示",
								content:res.msg||"地块基地信息保存失败！",
								showCancel:false,
							})
						}
					}
				})
			},
			async getDetail(id){
				var res=await request('/api/plantPlot/queryById',{
					params:{id}
				})
				if(res.statu){
					this.formData=res.data
					this.fields.date.value=[res.data.beginTime, res.data.endTime]
					this.fields.plantBaseInfoId.value=[res.data.plantBaseInfoId]
					this.fields.image.value=res.data.image.join(',')
					this.fields.longitude.value=this.formData.longitude.split("|").map(v=>{
						var point=v.split(",")
						if(point.length==2){
							return {longitude:point[0],latitude:point[1]}
						}
						return null
					}).filter(v=>v)
				}else{
					uni.showModal({
						title:"提示",
						content:res.msg||"获取详情失败！",
						showCancel:false,
					})
				}
			},
			editorMap(e){
				this.fields.longitude.value=e
				this.formData.longitude=e.map(v=>`${v.longitude},${v.latitude}`).join('|')
			},
		},
		onBackPress(e){
			var dForm=this.$refs.dForm.find(v=>v.field=='longitude')
			if(dForm?.showMap){//是否开启地图
				dForm.showMap=false
				return true
			}else{
				return false
			}
		},
	}
</script>