<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) }, }, async onLoad(options){ this.eventChannel=this.getOpenerEventChannel() this.formData.specificationId=options.id await this.searchGoods() this.goodsList.forEach(v=>{ if(v.id==options.id){ this.setGoodsVal(v) } }) }, methods:{ 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:50 } }) if(res.statu){ this.goodsList=res.data.records }else{ uni.showModal({ title:"提示", content:res.msg||"获取农资列表失败!", showCancel:false, }) } }, } } </script>