<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.value.map(v=>v.value);formData[k]=$event.value[0].value" @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.plantBaseInfoId) 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>