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$/.test(v.type)?fields[k].value:formData[k])"
				@input="formData[k]=$event"
				@selectRDate="selectDate"
				@select="fields[k].value=$event;formData[k]=fields[k].columns[0][$event].value"
				@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'
import dForm from '@/components/form.vue'
	export default{
		components:{dForm},
		data(){
			return{
				fields:{
					plantBaseName:{label:"基地名称",type:"select",columns:[],value:''},
					plotNumber:{label:"地块编号"},
					plotName:{label:"地块名称"},
					drawArea:{label:"地块面积(亩)",type:'digit'},
					realityArea:{label:"实际面积",type:'digit'},
					image:{label:"地块图片",type:"upImg",num:3,value:[]},
					date:{label:"使用日期",type:"dateRange",value:[]},
					jw:{label:"经/纬度"},
					address:{label:"详细地址",type:"textarea"},
				},
				formData:{
					plantBaseName:"",
					plotNumber:"",
					plotName:"",
					drawArea:'',
					realityArea:'',
					image:[],
					beginTime:"",
					endTime:"",
					longitude:"",
					latitude:"",
					address:"",
				},
				rules:{
					plantBaseName:{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"}
				},
			}
		},
		onLoad(){
			this.init()
		},
		methods:{
			async init(){
				var res=await request("/api/plantPlot/getAllPlantBaseInfo",{
					params:{companyId:this.$store.getters.userInfo.companyId}
				})
				if(res.statu){
					this.$set(this.fields.plantBaseName, "columns", [res.data.map(v=>({label:v,value:v}))])
				}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],
							}
						})
						console.log(res,'----------res------------')
					}
				})
			}
		},
	}
</script>