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:fields.date.value})[v.type||'text']||formData[k]"
				@input="formData[k]=$event"
				@selectRDate="selectDate"
				@imgs="fields[k].value=$event"/>
		</u-form>
		<button class="cu-btn round bg-green shadow submit" @click="sumbit">保存</button>
	</view>
</template>
<script>
import dForm from '@/components/form.vue'
	export default{
		components:{dForm},
		data(){
			return{
				fields:{
					plantBaseName:{label:"基地名称"},
					plotNumber:{label:"地块编号"},
					plotName:{label:"地块名称"},
					drawArea:{label:"地块面积(亩)",type:'digit'},
					realityArea:{label:"实际面积",type:'digit'},
					image:{label:"地块图片",type:"upImg",num:3},
					date:{label:"使用日期",type:"dateRange",value:[]},
					jw:{label:"经/纬度"},
					address:{label:"详细地址",type:"textarea"},
				},
				formData:{
					plantBaseName:"",
					plotNumber:"",
					plotName:"",
					drawArea:0,
					realityArea:0,
					image:[],
					beginTime:"",
					endTime:"",
					longitude:"",
					latitude:"",
					address:"",
				},
				rules:{
					plantBaseName:{required:true, message:"基地名称必填！", trigger:"blue"},
					plotNumber:{required:true, message:"地块编号必填！", trigger:"blue"},
					plotName:{required:true, message:"地块名称必填！", trigger:"blue"},
					drawArea:{required:true, message:"地块面积必填！", trigger:"blue"},
					realityArea:{required:true, message:"实际面积必填！", trigger:"blue"},
					image:{required:true, type:"array",min:1, message:"地块图片必填！", trigger:"blue"},
					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:"blue"}
				},
			}
		},
		methods:{
			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){

					}
				})
			}
		},
	}
</script>