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:auto;
						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;
				}
			}
		}
	}
</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="$refs.dPicker.show=true"/>
			</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"/>
			</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;show=false"/>
		
		<d-picker :list="goodsList" ref="dPicker" :value="pickerValue" @select="setGoodsVal"/>
	</view>
</template>
<script>
import request from '@/common/request'
export default{
	data(){
		return{
			purchaseId:'',
			specList:[[]],
			specStr:"",
			show:false,
			formData:{
				goodsName:"",
				goodsSpecification:"",
				num:"",
				purchaseId:"",
				specificationId:"",
				
				detailedType:"",
				detailedParentName:"",
				supplier:"",
			},

			goodsList:[],

			eventChannel:null,
		}
	},
	computed:{
		pickerValue(){
			return this.goodsList.findIndex(v=>v.id==this.purchaseId)
		},
	},
	onLoad(options){
		this.eventChannel=this.getOpenerEventChannel()
		this.formData.specificationId=options.id
		this.init(options.id)
		this.searchGoods()
	},
	methods:{
		async init(id){
			var res=await request("/api/goods/goodsList",{
				params:{id}
			})
			if(res.statu && res.data.records[0]){
				this.setGoodsVal(res.data.records[0])
			}else{
				uni.showModal({
					title:"提示",
					content:res.msg||"获取农资详情失败！",
					showCancel:false,
				})
			}
		},
		async setGoodsVal(val){
			this.purchaseId=val.id
			this.formData.goodsName=val.goodsName
			this.formData.detailedType=val.detailedType
			this.formData.detailedParentName=val.detailedParentName
			this.formData.supplier=val.supplier

			var res=await request("/api/goods/queryGoodsSpecification",{
				params:{goodsName:this.formData.goodsName}
			})
			if(res.statu){
				this.specList=[res.data.map(v=>({label:v.goodsSpecification,value:v.goodsSpecification,id:v.id}))]
				this.formData.goodsSpecification=''
				this.specStr=''
			}else{
				uni.showModal({
					title:"提示",
					content:res.msg||"获取规格选项失败！",
					showCancel:false,
				})
			}
		},
		async searchStock(id){
			var res=await request("/api/goods/stockShow?goodsSpecificationId",{
				params:{goodsSpecificationId:id}
			})
			if(res.statu&&res.data){
				this.specStr=`${res.data.packing}(${res.data.heft})`
			}
		},
		toAdd(){
			uni.navigateTo({
				url:`/pages/purchase/newSpecs?goodsId=${this.purchaseId}`,
				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)
			}
		},
		async searchGoods(){
			var res=await request("/api/goods/goodsList",{
				params: { goodsName:"",pageNo:1,pageSize:30 }
			})
			if(res.statu){
				this.goodsList=res.data.records
			}else{
				uni.showModal({
					title:"提示",
					content:res.msg||"获取农资列表失败！",
					showCancel:false,
				})
			}
		},
	}
}
</script>