manage_mobile/pages/purchase/specs.vue

<style lang="scss">
	.container{
		min-height: 100%;
		background:#F6F6F6;
		padding:30rpx 0;
		.card{
			margin-top:0;
		}
		&>.fertilizer{
			&>.name{
				display:flex;
				align-items: center;
				margin-bottom:14rpx;
				text{
					&:first-child{
						font-size:20rpx;
						color:#fff;
						background:#10C176;
						border-radius: 4rpx 30rpx 4rpx 30rpx;
						padding: 0 6rpx;
						min-width:80rpx;
						text-align: center;
						height:40rpx;
						line-height: 40rpx;
						margin-right:16rpx;
					}
					&:nth-child(3){
						border-radius: 50%;
						background:#10C176;
						color:#fff;
						margin-left:auto;
						width:35rpx;
						height:35rpx;
						text-align: center;
						line-height: 35rpx;
					}
				}
			}
			&>.company{
				display:flex;
				align-items: center;
				text{
					&:first-child{
						flex-shrink: 0;
						font-size:20rpx;
						color:#707070;
					}
					&:nth-child(2){
						margin-left:20rpx;
						font-size:20rpx;
						color:#FBA83C;
					}
				}
			}
		}
		&>.specs{
			.select{
				flex-grow: 1;
				height:80rpx;
				line-height: 80rpx;
				background:#F7F7F7;
				border-radius: 24rpx;
				padding:0 28rpx;
				display:flex;
				text{
					&:first-child{
						flex-grow: 1;
						color:#333;
						&.noData{
							color:#999;
						}
					}
					&:nth-child(2){
						color:#999;
						flex-shrink: 0;
						transform: rotate(90deg);
					}
				}
			}
			.plant-xinjian{
				color:#10C176;
				border-radius: 24rpx;
				margin-left:24rpx;
				background:#E7FCF3;
				height:80rpx;
				line-height: 80rpx;
				width:120rpx;
				text-align: center;
				box-shadow: 6rpx 6rpx 8rpx rgba(16,193,118,0.1);
			}
			.tip{
				color:#FBA83C;
				font-size:24rpx;
				margin-top:12rpx;
			}
		}
		&>.purchase{
			.input{
				display:flex;
				background:#F7F7F7;
				border-radius: 24rpx;
				padding:20rpx;
				input{
					flex-grow: 1;
				}
				text{
					color:#999;
					line-height: 40rpx;
					margin-left:20rpx;
				}
			}
		}

		.purcahse-picker{
			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;
				}
			}
		}
	}
</style>
<template>
	<view class="container">
		<view class="card fertilizer">
			<view class="name">
				<text>{{formData.detailedParentName}}</text>
				<text>{{formData.goodsName}}</text>
				<text class="plant-jiantou_zuoyouqiehuan" @click="$u.route({type:'back'})"/>
			</view>
			<view class="company">
				<text>{{formData.detailedType}}</text>
				<text>{{formData.supplier}}</text>
			</view>
		</view>

		<view class="card specs">
			<view class="title_mast">规格</view>
			<view style="display:flex;">
				<view class="select">
					<text @click="show=true" :class="{noData:!formData.goodsSpecification}">{{formData.goodsSpecification||"请添加规格"}}</text>
					<text class="plant-youbian"/>
				</view>
				<text class="plant-xinjian" @click="toAdd">新建</text>
			</view>
			<view class="tip" v-if="specStr">库存：{{specStr}}</view>
		</view>

		<view class="card purchase">
			<view class="title_mast">采购数量</view>
			<view class="input">
				<input placeholder="请输入采购数量" type="digit" v-model="formData.num"/>
				<text>{{dressingUnit}}</text>
			</view>
		</view>

		<button class="cu-btn round bg-green shadow submit" @click="submit">确定</button>

		<u-picker
			:show="show"
			:columns="specList"
			keyName="label"
			closeOnClickOverlay
			@close="show=false"
			@cancel="show=false"
			@confirm="searchStock($event.value[0].id);formData.goodsSpecification=$event.value[0].value;formData.specificationId=$event.value[0].id;show=false"/>
	</view>
</template>
<script>
import request from '@/common/request'
export default{
	data(){
		return{
			specList:[[]],
			specStr:"",
			dressingUnit:"",
			show:false,
			formData:{
				goodsId:"",
				goodsName:"",
				goodsSpecification:"",
				num:"",
				specificationId:"",
				
				detailedType:"",
				detailedParentName:"",
				supplier:"",
			},

			goodsDetail:{},

			eventChannel:null,
		}
	},
	async onLoad(options){
		this.eventChannel=this.getOpenerEventChannel()
		this.eventChannel.on("detail", detail=>{
			this.formData.goodsName=detail.goodsName
			this.formData.detailedType=detail.detailedType
			this.formData.detailedParentName=detail.detailedParentName
			this.formData.supplier=detail.supplier
		})
		this.formData.goodsId=options.goodsId
		this.setGoodsVal()
	},
	methods:{
		async setGoodsVal(val){
			var res=await request("/api/goods/queryGoodsSpecification",{
				params:{
					goodsName:this.formData.goodsName,
					supplier:this.formData.supplier,
				}
			})
			if(res.statu){
				this.specList=[res.data.map(v=>({label:v.goodsSpecification,value:v.goodsSpecification,id:v.id}))]
				this.formData.goodsSpecification=''
				this.specStr=''
				this.dressingUnit=''
			}else{
				uni.showModal({
					title:"提示",
					content:res.msg||"获取规格选项失败！",
					showCancel:false,
				})
			}
		},
		async searchStock(id){
			var res=await request("/api/goods/stockShow",{
				params:{
					goodsSpecificationId:id,
					plantBaseInfoId:this.$store.state.plantBaseInfoId,
				}
			})
			if(res.data.packing&&res.data.heft){
				this.specStr=`${res.data.packing}(${res.data.heft})`
			}else{this.specStr=''}
			this.dressingUnit=`${res.data.dressingUnit}`
		},
		toAdd(){
			uni.navigateTo({
				url:`/pages/purchase/newSpecs?goodsId=${this.formData.goodsId}`,
				events:{addUnit:e=>{
					this.specList[0].push({label:e.goodsSpecification,value:e.goodsSpecification,id:e.goodsSpecificationId})
					this.searchStock(e.goodsSpecificationId)
					this.formData.goodsSpecification=e.goodsSpecification
				}}
			})
		},
		check(){
			if(!this.formData.goodsSpecification){
				uni.showToast({title:"规格必选！",icon:"none"})
				return false
			}else if(!this.formData.num>0){
				uni.showToast({title:"采购数量必填！",icon:"none"})
				return false
			}
			return true
		},
		async submit(){
			if(this.check()){
				uni.navigateBack()
				this.eventChannel.emit("submit", this.formData)
			}
		},
	}
}
</script>