<style lang="scss"> .container{ min-height:100%; background:#f6f6f6; padding:30rpx 0; } </style> <template> <view class="container"> <u-form class="card inline" errorType="toast" :model="formData" :rules="rules" ref="form" labelWidth="auto"> <d-form v-for="(v,k) in fields" :key="k" :field="k" v-bind="v" :required="!!rules[k]" :value="/^select$|^checkBox$|^navigate$/.test(v.type)?fields[k].value:formData[k]" @input="formData[k]=$event" @checkBox="fields[k].value=$event;formData[k]=$event.join(',')" @select="formData[k]=$event[0].value;fields[k].value=[formData[k]]" @imgs="fields[k].value=$event"/> </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:{ pestSite:{label:"病虫害部位",type:"checkBox",value:[],columns:[{label:"根",value:"根"},{label:"茎",value:"茎"},{label:"叶",value:"叶"}]}, growthProcess:{label:"作物生长过程",type:"select-tab",dictCode:"growth_process"}, symptom:{label:"显著症状",type:"select-tab",dictCode:"symptom"}, pestType:{label:"病虫害类型",type:"radio",columns:[{label:"病害",value:"病害"},{label:"虫害",value:"虫害"}],value:['虫害']}, pestName:{label:()=>`${this.formData.pestType}名称`,type:"navigate",value:"",btnFun:()=>uni.navigateTo({ url:`/pages/massif/pestType?type=${({"病害":"disease","虫害":"pestis"})[this.formData.pestType]}`, events:{type:e=>{ this.formData.pestName=e this.fields.pestName.value=e.map(v=>v.name).join(",") }}, success:res=>{ res.eventChannel.emit("ids",this.formData.pestName) } })}, medicationArea:{label:"农资作用面积",type:"digit",suffix:"亩"}, pic:{label:"凭证",type:"upImg",value:""}, description:{label:"病虫害描述",type:"textarea"}, }, formData:{ growthProcess:'', pestSite:'', symptom:"", pestType:"虫害", pestName:[], medicationArea:"", pic:[], description:"", }, rules:{ growthProcess:{required:true,message:"请选择作物生长过程!",trigger:['blur','change']}, pestSite:{required:true,message:"请选择病虫害部位!",trigger:['blur','change']}, symptom:{required:true,message:"请选择显著症状!",trigger:['blur','change']}, pestType:{required:true,message:"请选择病虫害类型!",trigger:['blur','change']}, pestName:{required:true,message:"请选择害虫!",type:"array",trigger:['blur','change']}, medicationArea:{required:true,message:"请输入农资作用面积!",type:"number",trigger:['blur','change']}, pic:{required:true,validator:(rule,val,call)=>{ if(!this.fields.pic.value)call(new Error("请选择凭证!")); else call() },trigger:['blur','change']}, }, eventChannel:null, } }, watch:{ "formData.pestType"(){ this.formData.pestName=[] }, }, onLoad(){ this.eventChannel=this.getOpenerEventChannel() this.eventChannel.on("detail",e=>{ this.fields.pic.value=e.pic||'' this.fields.pestSite.value=e?.pestSite?.split?.(",")?.filter?.(v=>v)||[] // this.fields.growthProcess.value=e?.growthProcessLabel||"" // this.fields.symptom.value=e?.symptomLabel||"" this.fields.pestName.value=e?.pestName?.map(v=>v.name).join(',') this.formData=Object.assign(this.formData,{ ...e, pic:e?.pic?.split?.(",")?.filter?.(v=>v)||[] }) }) }, methods:{ sumbit(){ this.$refs.form.validate().then(async valid=>{ if(valid){ this.eventChannel.emit("addPest",{ ...this.formData, pic:this.fields.pic.value, // growthProcessLabel:this.fields.growthProcess.value, // symptomLabel:this.fields.symptom.value, }) uni.navigateBack() } }) }, }, } </script>