manage_mobile/pages/massif/agrSpecs.vue

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

		.card{
			margin-top:0;
			&.info{
				.name{
					display: flex;
					align-items: center;
					margin-bottom: 14rpx;
					text{
						&:first-child{
							flex-shrink: 0;
							color:#fff;
							background:#10C176;
							font-size:20rpx;
							height:40rpx;
							width:80rpx;
							border-radius: 4rpx;
							text-align: center;
							line-height: 40rpx;
							margin-right:16rpx;
						}
						&:nth-child(2){
							flex-grow: 1;
						}
						&:nth-child(3){
							flex-shrink: 0;
							color:#fff;
							background:#10C176;
							border-radius: 50%;
							width:34rpx;
							height:34rpx;
							text-align: center;
							line-height: 34rpx;
						}
					}
				}
				.company{
					text{
						font-size:24rpx;
						&:first-child{
							color:#FBA83C;
							margin-right:16rpx;
						}
						&:nth-child(2){
							color:#999;
						}
					}
				}
			}
		}

		// .u-popup{
		// 	.u-popup__content{
		// 		&>.btns{
		// 			display:flex;
		// 			justify-content: space-between;
		// 			padding:10rpx;
		// 		}
				
		// 		picker-view{
		// 			height:500rpx;
		// 			picker-view-column{
		// 				view.item{
		// 					padding:0 30rpx;
		// 					display:flex;
		// 					flex-direction: column;
		// 					justify-content: space-evenly;
		// 					.name{
		// 						display:flex;
		// 						align-items: center;
		// 						text{
		// 							font-size:16rpx;
		// 							&:first-child{
		// 								color:#fff;
		// 								background:#10C176;
		// 								border-radius:0 20rpx 0 20rpx;
		// 								width:80rpx;
		// 								height:34rpx;
		// 								text-align: center;
		// 								line-height: 34rpx;
		// 								margin-right:16rpx;
		// 							}
		// 							&:nth-child(2){
		// 								font-weight: bold;
		// 								font-size:20rpx;
		// 							}
		// 							&:nth-child(3){
		// 								color:#999;
		// 								margin-left:6rpx;
		// 							}
		// 						}
		// 					}
		// 					.company{
		// 						font-size:16rpx;
		// 						&:before{
		// 							content:attr(data-name);
		// 							color:#FBA83C;
		// 							margin-right:20rpx;
		// 						}
		// 						&:after{
		// 							content:attr(data-company);
		// 							color:#999999;
		// 						}
		// 					}
		// 				}
		// 			}
		// 		}
		// 	}
		// }
		.agr-picker{
			padding:0 30rpx;
			display:flex;
			flex-direction: column;
			justify-content: space-evenly;
			.name{
				display:flex;
				align-items: center;
				text{
					&:first-child{
						flex-shrink: 0;
						color:#fff;
						font-size:20rpx;
						border-radius: 0px 20rpx 0px 20rpx;
						background:#10C176;
						width:80rpx;
						height:40rpx;
						text-align: center;
						line-height: 40rpx;
						margin-right:10rpx;
					}
					&:nth-child(2){
						flex-grow: 1;
						display:flex;
						align-items: center;
						font-weight: bold;
						margin-right:20rpx;
					}
				}
			}
			.company{
				text{
					font-size:24rpx;
					&:first-child{
						color:#FBA83C;
						margin-right:16rpx;
					}
					&:nth-child(2){
						color:#999;
					}
				}
			}
		}
	}
</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="card info">
			<view class="name">
				<text>{{agrDetail.parentName}}</text> <text>{{agrDetail.name}}</text> <text @click="$u.route({type:'navigateBack'})" class="plant-jiantou_zuoyouqiehuan"/>
			</view>
			<view class="company">
				<text>{{agrDetail.typeOne}}</text> <text>{{agrDetail.supplier}}</text>
			</view>
		</view>
		<view class="card">
			<u-form class="inline" labelWidth="auto" ref="form" errorType="toast" :model="formData" :rules="rules">
				<d-form
					v-for="(v,k) in fields"
					:key="k"
					v-bind="v"
					:field="k"
					:required="!!rules[k]"
					@input="formData[k]=$event"
					@select="fields[k].value=$event.value.map(v=>v.value);formData[k]=$event.value[0].value"/>
			</u-form>
		</view>
	</view>
</template>
<script>
import request from '@/common/request.js'
export default {
	data(){
		return{
			fields:{
				specificationId:{label:"规格",tip:"",type:"select",columns:[[]],value:[]},
				inputQuantity:{label:"投入数量",type:"digit",suffix:""},
			},
			formData:{
				specificationId:"",
				inputQuantity:"",
				inventoryId:"",
			},
			rules:{
				specificationId:{required:true,message:"规格必选！"},
				inputQuantity:{required:true,type:"number",message:"投入数量必填！"},
			},
			agrDetail:{},
			eventChannel:null,
		}
	},
	computed:{
		specsVal(){
			var specs=(this.fields.specificationId.columns[0]?.find?.(v=>v.value==this.formData.specificationId)||{}).label||""
			return{
				specs:(specs.match(/(\d+)(.+?)\/(.+?)/)||[]).slice(1,4),
				num:this.formData.inputQuantity
			}
		},
	},
	watch:{
		specsVal(n){
			this.fields.inputQuantity.suffix=n.specs[2]
			if(n.num>0 && n.specs[0]>0){
				this.$set(this.fields.inputQuantity, "tip", `共${parseFloat(n.num)*parseFloat(n.specs[0])}${n.specs[1]}`)
			}else{
				this.$set(this.fields.inputQuantity, "tip", "")
			}
		}
	},
	async onLoad(options){
		this.eventChannel=this.getOpenerEventChannel()
		this.eventChannel.on("detail", e=>this.agrDetail=e)
		this.formData.inventoryId=options.id
		this.init()
	},
	methods:{
		async init(){
			var res=await request("/api/plantFarming/getSpecification",{
				params:{goodsId: this.agrDetail.goodsId}
			})
			if(res.statu){
				this.fields.specificationId.columns=[res.data.listSpec.map(v=>({label:v.goodsSpecification,value:v.id}))]
				this.fields.specificationId.tip=res.data.inventory
			}else{
				uni.showModal({
					title:"提示",
					content:res.msg||"获取规格选项失败！",
					showCancel:false,
				})
			}
		},
		submit(){
			this.$refs.form.validate().then(async valid=>{
				if(valid){
					this.eventChannel.emit("update", {
						...this.formData,
						unit:this.specsVal.specs[1],
						parentName: this.agrDetail.parentName,
						name: this.agrDetail.name,
					})
					uni.navigateBack()
				}
			})
		},
	}
}
</script>