<template> <view class="content flex flex_column"> <u-navbar back-text="待补货产品" :border-bottom="false"> <view slot='right' style="padding: 0 30upx;" v-if="chooseList.length" @click="toChooseProduct"> <u-icon name="chuangjiandingdan" custom-prefix="iscm-icon"></u-icon> <text style="margin-left: 6rpx;">选择产品</text> </view> </u-navbar> <view class="searchBar"> <view class="p-title flex align_center"> <text></text> <view class="shelfName"> <view>{{nowData.shelfName}}</view> </view> </view> </view> <!-- 已选配件 购物车 --> <div class="cpb_cart-box"> <div class="cpb_cart-list"> <view v-for="(item, index) in chooseList" :key="'cpb_'+item.id" > <view class="nav-right-item flex align_center"> <view class="uni-col-1" @click="delDetail(item,index)"> <u-icon name="close-circle" color="#999" size="35"></u-icon> </view> <view class="uni-col-9 flex"> <view class="item-imgs"> <u-image :src="item.productImageUrl?item.productImageUrl:`../../static/${$config('themePath')}/def_img@2x.png`" width="120" height="120" border-radius="10"></u-image> </view> <view class="item-info"> <view class="item-name"> <text>{{item.shelfPlaceCode}}</text> {{item.productCode}} </view> <view class="item-name"> {{item.productName}} </view> <view class="item-detail"> <view class="item-detail-info align_center flex justify_between"> <view></view> <view class="flex justify_end"> <view class="item-detail-text"> 最大库容:<text class="pnums">{{item.maxQty||0}}</text> 货架库存:<text class="pnums">{{item.qty||0}}</text> 门店库存:<text class="pnums">{{item.qplsStockQty||0}}</text> </view> </view> </view> </view> </view> </view> </view> <view class="nav-right-item"> <view class="item-detail"> <view class="item-detail-info"> <view class="flex justify_between"> <view class="item-detail-text flex"> <view v-if="item.replenishBillQty">补货在途:<text class="pnums1">{{item.replenishBillQty||0}}</text></view> <view v-if="item.recallBillQty">调回在途:<text class="pnums1">{{item.recallBillQty||0}}</text></view> </view> <view class="item-detail-text"> 补货数量: <u-number-box v-model="item.replenishQty" :index="'cart_'+item.id" :min="1" @change="numsChange(item)" :max="999999"></u-number-box> </view> </view> </view> </view> </view> </view> <view v-if="chooseList.length==0"> <view class="nodata"> 暂无产品,请点击 <view> <text @click="toChooseProduct">选择产品</text> </view> </view> </view> </div> </div> <!-- 底部栏 --> <view class="footer-bar flex align_center justify_between"> <view class="f-left flex align_center"> <view> 已选<text>{{totalCategory}}</text>款/<text>{{totalQty}}</text>件 </view> <view v-if="chooseList.length" style="padding-left: 20upx;"> <text @click="clearDetail">清空列表</text> </view> </view> <view class="f-btns"> <u-button size="medium" @click="submitOrder" :custom-style="customBtnStyle" shape="circle" type="primary" hover-class="none" >创建补货单</u-button> </view> </view> </view> </template> <script> import { queryProductListForReplenish } from '@/api/shelf' import { saveMainAndDetail } from '@/api/shelfReplenish' import { clzConfirm } from '@/libs/tools' export default { data() { return { nowData:null, detail:null, customBtnStyle: { // 自定义按钮样式 borderColor: this.$config('primaryColor'), backgroundColor: this.$config('primaryColor'), color: '#fff' }, chooseList: [], tempData: null, } }, onNavigationBarButtonTap(e) { if(e.index == 0){ this.toChooseProduct() } }, onLoad(opts) { const _this = this this.nowData = JSON.parse(decodeURIComponent(opts.data)); uni.$on("chooseDbhProduct",function(data){ _this.chooseList = _this.chooseList.concat(data).sort(function(a,b){ return (a.shelfPlaceCode+'').localeCompare(b.shelfPlaceCode+''); }); }) }, computed: { totalCategory () { return this.chooseList.length }, totalQty () { let ret = 0 this.chooseList.map(item => { ret = ret + item.replenishQty }) return ret }, chooseKey(){ let ret = [] this.chooseList.map(item => { ret.push(item.id) }) return ret } }, methods: { toChooseProduct(){ this.nowData.chooseKey = this.chooseKey uni.navigateTo({ url: "/pages/soldOut/chooseProduct?data="+encodeURIComponent(JSON.stringify(this.nowData)) }) }, // 创建补货单 creatOrder(data){ uni.showLoading({ title:"正在保存.." }) stockCheckSave({ shelfSn: this.nowData.shelfSn, totalCategory: this.nowData.totalCategory, totalStockQty: this.nowData.totalStockQty, totalFreezeQty: this.nowData.totalFreezeQty }).then(res => { if(res.status == 200){ this.detail = res.data || null this.stockCheckSn = res.data.stockCheckSn }else{ uni.hideLoading() } }) }, numsChange(item){ this.chooseList.splice() }, // 删除购物车产品 delDetail(item,i){ console.log(item.id,i) const index = this.chooseList.findIndex(k => k.id == item.id) this.chooseList.splice(index,1) // 全部清空 if(this.chooseList.length==0){ this.clearChoose() } }, // 空列表 clearDetail(){ const _this = this clzConfirm({ title: '提示', content: '确认要清空列表吗?', success (ret) { if (ret.confirm || ret.index == 0) { _this.clearChoose() } } }) }, // 清空已选数据 clearChoose(){ this.chooseList = [] }, // 提交 submitOrder(){ if(this.totalCategory){ this.handleSave() }else{ uni.showToast({ icon: 'none', title: '请先添加产品' }) } }, handleSave () { const data = this.chooseList const dataList = [] data.map(item => { dataList.push({ shelfPlaceSn: item.shelfPlaceSn, shelfPlaceCode: item.shelfPlaceCode, productSn: item.productSn, productCode: item.productCode, qty: item.replenishQty }) }) this.showLoading("正在提交...") // 开始提交 saveMainAndDetail({ shelfSn: this.nowData.shelfSn, dealerSn: this.nowData.dealerSn, detailList: dataList }).then(res => { if (res.status == 200) { this.toashMsg(res.message) uni.redirectTo({ url: "/pages/replenishmentManage/outWarehousing?sn="+res.data.replenishBillSn }) } uni.hideLoading() }) }, } } </script> <style lang="less"> .content{ height: 100vh; width: 100%; background: #fff; .footer-bar{ background-color: #f8f8f8; padding: 20upx; .active{ background-color: #0485F6; } .f-left{ color: #666; flex-grow: 1; > view{ text{ color: red; margin: 0 5rpx; } } } .f-btns{ button{ width: 200upx; } } } .nodata{ padding: 100rpx 50rpx; text-align: center; display: flex; justify-content: center; color: #999; > view{ position: relative; text{ color: #00aaff; margin-left: 10rpx; } } } .searchBar{ padding: 0 0.8rem 0.3rem; .p-title{ padding: 0 15rpx; display: flex; align-items: center; color: #222; font-size: 30rpx; > text{ display: block; height: 30rpx; width: 6rpx; background: #0485F6; margin-right: 10rpx; border-radius: 10rpx; } .shelfName{ flex-grow: 1; font-weight: bold; width: 80%; > view{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } .btns{ width:100rpx; text-align: right; font-size: 28rpx; color: #0485F6; } } } // 购物车 .cpb_cart-box{ flex-grow: 1; width: 100%; overflow: auto; .cpb_cart-list{ padding: 20rpx 0; overflow: auto; flex-grow: 1; > view{ margin-bottom: 20rpx; } .nav-right-item{ padding: 0 30upx; &:last-child{ border-bottom:2rpx solid #eee; } } .item-name{ font-size: 28rpx; text{ background: rgba(3, 54, 146, 0.15); color: #1c588a; border-radius: 1em; font-size: 26rpx; padding: 0 0.5em; margin-right: 10upx; } margin-top: 10upx; } .item-info{ padding-left: 0.8em; flex-grow: 1; } .item-detail{ .item-detail-info{ padding: 10upx 0 4upx; font-size: 24upx; .pnums{ margin-right: 10rpx; color: #333; } .pnums1{ margin-right: 10rpx; color: red; } > view{ padding-bottom: 10rpx; align-items: center; .item-detail-text{ color: #999; margin-left: 20upx; } } } } } } } </style>