manage_mobile/pages/massif/add_farming.vue

<style lang="scss">
	.container{
		min-height: 100%;
		background:#f6f6f6;
		padding:30rpx 0;

		&>.type{
			margin:0 30rpx 30rpx;
			.title{
				color:#333;
				margin-bottom:22rpx;
				&:before{
					content:"*";
					color:#EE4949;
				}
			}
			.content{
				display:flex;
				flex-wrap: wrap;
				margin:0 -30rpx -20rpx 0;
				text{
					background:#EEEEEE;
					color:#999;
					height:54rpx;
					line-height: 54rpx;
					border-radius: 50rpx;
					margin:0 30rpx 20rpx 0;
					width:calc(100%/4 - 30rpx);
					text-align: center;
					transition: all 0.3s;
					&.active{
						color:#fff;
						background:#10C176;
					}
				}
			}
		}
		.card{
			margin-top:0;
			.plant-dikuaimianji{
				display: flex;
				align-items: center;
				font-weight: bold;
				&:before{
					font-weight: normal;
					color:#10C176;
					font-size:40rpx;
					margin-right:16rpx;
					transform: translateY(5rpx);
				}
			}
			.plant-batch-add{
				margin-top:20rpx;
				display: flex;
				align-items: center;
				padding:0 30rpx;
				justify-content: space-between;
				flex-direction: row-reverse;
				background:#F7F7F7;
				border-radius: 24rpx;
				height:80rpx;
				&:before{
					color:#10C176;
				}
				&:after{
					content:"添加农资";
					color:#777;
				}
			}
			.info{
				display:flex;
				align-items: center;
				background:rgba(16, 193, 119, 0.1);
				border-radius: 24rpx;
				height:94rpx;
				margin-top:20rpx;
				padding:0 30rpx;
				text{
					&:first-child{
						flex-shrink: 0;
						color:#fff;
						background:#10C176;
						font-size: 20rpx;
						border-radius:4px 40px 4px 40px;
						width:80rpx;
						height:40rpx;
						text-align: center;
						line-height: 40rpx;
						margin-right:20rpx;
					}
					&:nth-child(2){
						flex-grow: 1;
					}
					&:nth-child(3){
						flex-shrink: 0;
						color:#10C176;
						font-weight: bold;
						margin-left:20rpx;
					}
				}
			}
		}
		.u-popup{
			.u-popup__content>input{
				width:100%;
				margin:30rpx;
			}
		}
	}
</style>
<template>
	<view class="container">
		<d-navbar style="--bg:#10C176;--c:#fff;" isBack text="添加农事">
			<button slot="right" class="cu-btn round" @click="submit">提交</button>
		</d-navbar>

		<view class="type">
			<view class="title">农事类型</view>
			<view class="content">
				<text :class="{active:formData.farmingType==v.value}" v-for="(v,k) in typeList" :key="k" @click="formData.farmingType=v.value">{{v.label}}</text>
				<text @click="isShow=true">自定义+</text>
			</view>
		</view>

		<view class="card">
			<view class="plant-dikuaimianji">{{massif.plotName}}</view>
			<view class="plant-batch-add" @click="toCollectList"/>
			<view class="info">
				<text>化肥</text> <text>中量元素水溶肥</text> <text>200kg</text>
			</view>
			<button class="cu-btn round bg-green shadow submit" @click="toCollectList">+继续添加农资</button>
		</view>

		<view class="card">
			<u-form class="inline" :model="formData" :rules="rules" ref="form" labelWidth="auto">
				<d-form
					v-for="(v,k) in fields"
					:key="k"
					v-bind="v"
					:field="k"
					:required="!!rules[k]"
					:value="formData[k]"
					@input="formData[k]=$event"/>
			</u-form>
		</view>
		<u-popup :show="isShow" closeOnClickOverlay @close="isShow=false">
			<input placeholder="请输入" :focus="isShow" confirm-type="done" v-model="tempType" @confirm="addType"/>
		</u-popup>
	</view>
</template>
<script>
import request from '@/common/request'
export default {
	data(){
		return{
			typeList:[],
			fields:{
				principal:{label:"操作人",styleType:"parallel", disabled:true},
				farmingTime:{label:"操作日期",styleType:"parallel",type:"calendar"},
				farmingPlanId:{label:"种植计划",type:"select",columns:[],value:[]},
				images:{label:"农事图片",type:"upImg",num:3},
				farmingRemarks:{label:"产品介绍",type:"textarea"},
			},
			formData:{
				farmingType:"",
				principal: this.$store.getters['userInfo'].realname,
				farmingPlanId:"",
				farmingTime:"",
				images:[],
				farmingRemarks:"",

				plotId:"",
				plantBaseInfoId: this.$store.state.plantBaseInfoId,
			},
			rules:{
				farmingTime:{required:true,message:"操作日期必填！",trigger:'blur'},
				farmingPlanId:{required:true,message:"种植计划必选！",trigger:'blur'},
				images:{required:true,validator(rule,val,call){
					if(!this.fields.images.value)call(new Error("请上传农事图片！"));
					else call()
				},trigger:'blur'},
			},
			massif:{},
			tempType:"",
			isShow:false,
		}
	},
	onLoad(options){
		this.formData.plotId=options.plotId
		this.init()
		this.getMassifDetail()
	},
	methods:{
		async init(){
			var res=await request("/api/plantFarming/listFarmName")
			if(res.statu){
				this.typeList=res.data
			}else{
				uni.showModal({
					title:"提示",
					content:res.msg||"获取农事类型失败！",
					showCancel:false,
				})
			}
			//种植计划下拉选择
			var res=await request("/api/plantFarming/getPlantPlan",{
				params:{plotId: this.formData.plotId}
			})
			if(res.statu){
				this.farmingPlanId.columns=[res.data.map(v=>({}))]
			}else{
				uni.showModal({
					title:"提示",
					content:res.msg||"获取种植计划选项失败！",
					showCancel:false,
				})
			}
		},
		async getMassifDetail(){
			var res=await request("/api/plantPlot/queryById",{
				params:{id:this.formData.plotId}
			})
			if(res.statu){
				this.massif=res.data
			}else{
				uni.showModal({
					title:"提示",
					content:res.msg||"获取地块信息失败！",
					showCancel:false,
				})
			}
		},
		toCollectList(){
			uni.navigateTo({
				url:"/pages/massif/collectList",
				event:{ add:()=>{} }
			})
		},
		submit(){
			this.$refs.form.validoter().then(async valid=>{
				if(valid){
					var res=await request("/api/plantFarming/addOrUpdate",{
						method:"post",
						body:{
							...this.formData,

						}
					})
				}
			})
		},
		async addType(){
			if(this.tempType){
				var res=await request("/api/plantFarming/addFarmType",{
					params:{text: this.tempType}
				})
				if(res.statu){
					this.isShow=false
					this.tempType=''
					this.typeList.push({label:v.itemText, value:v.itemValue})
				}else{
					uni.showModal({
						title:"提示",
						content:res.msg||"添加农资类型失败！",
						showCancel:false,
					})
				}
			}else{
				uni.showToast({title:"请输入内容！",icon:"none"})
			}
		},
	},
}
</script>