<template> <view class="content flex flex_column"> <view class="searchBar"> <view class="p-title flex align_center"> <text></text> <view class="shelfName"> <view>{{nowData.shelfName}}</view> </view> <view class="btns" @click="showTab = true">筛选<u-icon size="20" name="arrow-down"></u-icon></view> </view> <view class="search flex align_center"> <view class="input"> <u-search v-model="queryWord" @custom="getpartList" @search="getpartList" @clear="clearSearch" @input="$u.debounce(changeSearch, 800)" bg-color="#fff" :show-action="false" placeholder="请输入产品编码或名称搜索"></u-search> </view> <view class="icon" @click="toScan"> <u-icon name="scan"></u-icon> </view> </view> </view> <view class="check-list"> <productList ref="productList" noDataText="暂无产品" @allChecked="allCheckedCallback"></productList> </view> <!-- 底部栏 --> <view class="footer-bar flex align_center"> <view class="f-left"> <u-checkbox size="40" @change="allCheckeChange" v-model="allChecked" shape="circle">{{allChecked?'取消全选':'全选'}}</u-checkbox> </view> <view class="f-mid flex align_center" @click="openCart"> <view> 已选<text>{{totalCategory}}</text>款/<text>{{totalQty}}</text>件 </view> <view> 查看明细 <u-icon name="arrow-up"></u-icon> </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> <!-- 已选配件 购物车 --> <div class="cpb_cart-mask" v-if="showCart"> <div class="cpb_cart-box"> <div class="cpb_close flex align-center justify_center" @click="showCart=false"> <u-icon name="close"></u-icon> </div> <div class="cpb_cart-tit"> <view>已选配件</view> <view class="cpb_heji flex align_center justify_between"> <text @click="clearDetail">清空列表</text> </view> </div> <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-11 flex"> <view class="uni-col-2"> <u-image :src="item.productImageUrl?item.productImageUrl:`../../static/${$config('themePath')}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image> </view> <view class="item-info uni-col-9"> <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" @minus="cartChangeNums" @plus="cartChangeNums" @blur="cartChangeNums" :index="'cart_'+item.id" :min="1" :max="999999"></u-number-box> </view> </view> </view> </view> </view> </view> </div> </div> </div> <!-- 筛选项 --> <u-popup v-model="showTab" mode="right" width="70%"> <view class="tabBox flex flex_column"> <view class="tabs"> <u-checkbox-group wrap @change="checkboxGroupChange"> <u-checkbox v-model="item.checked" v-for="(item, index) in queryKeys" :key="index" :name="item.code" >{{item.name}}</u-checkbox> </u-checkbox-group> </view> <view class="btns"> <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" @click="handleClear">重置</u-button> <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" :custom-style="customBtnStyle" @click="clearSearch">查询</u-button> </view> </view> </u-popup> </view> </template> <script> import { queryProductListForReplenish } from '@/api/shelf' import { saveMainAndDetail } from '@/api/shelfReplenish' import productList from './productList.vue' import { clzConfirm } from '@/libs/tools' export default { components: { productList }, data() { return { queryWord: '', nowData:null, detail:null, pageNo:1, pageSize: 20, total: 0, // 列表总数 noDataText: '暂无产品', status: 'loading', partList: [], allChecked: false, showTab: false, customBtnStyle: { // 自定义按钮样式 borderColor: this.$config('primaryColor'), backgroundColor: this.$config('primaryColor'), color: '#fff' }, orderTotal: 0, showCart: false, chooseList: [], tempData: null, queryKeys: [ { name: '库存充足', code: 'stockEnough', checked: false }, { name: '部分缺货', code: 'portionStockout', checked: false }, { name: '全部缺货', code: 'allStockout', checked: false } ], stockStateList:[] } }, onNavigationBarButtonTap(e) { if(e.index == 0){ uni.navigateTo({ url: '/pages/stockCheck/checkRecord?shelfSn='+this.nowData.shelfSn }) } }, onBackPress(e) { if(this.showTab||this.showCart) { this.showTab = false; this.showCart = false; return true; } }, onLoad(opts) { this.nowData = JSON.parse(decodeURIComponent(opts.data)); this.getpartList() }, computed: { totalCategory () { return this.chooseList.length }, totalQty () { let ret = 0 this.chooseList.map(item => { ret = ret + item.replenishQty }) return ret } }, methods: { checkboxGroupChange(e) { console.log(e); this.stockStateList = e }, // 全选 allCheckeChange(e){ this.$refs.productList.allSelect(e.value) this.chooseList = this.$refs.productList.getAllChecked() }, allCheckedCallback(val){ this.allChecked = val this.chooseList = this.$refs.productList.getAllChecked() }, // 创建补货单 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() } }) }, // 打开购物车 openCart(){ if(this.totalCategory){ this.chooseList = this.$refs.productList.getAllChecked() this.showCart = !this.showCart }else{ uni.showToast({ icon: 'none', title: '请先添加产品' }) } }, // 删除购物车产品 delDetail(item,i){ console.log(item.id,i) this.$refs.productList.setChecked(item.id,false) 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 = [] this.showCart = false this.allChecked = false this.$refs.productList.allSelect(false) }, // 修改数量 cartChangeNums(v){ this.$refs.productList.changeNums(v.index.split('_')[1],v.value) }, handleClear(){ this.stockStateList = [] this.queryKeys.map(item => item.checked = false) this.clearSearch() }, clearSearch(){ this.queryWord = '' this.changeSearch() }, changeSearch(){ this.pageNo = 1 this.partList = [] this.getpartList() }, // 获取数字货架列表 getpartList(){ const _this = this let params = { shelfSn: this.nowData.shelfSn, queryWord: this.queryWord, stockStateList: this.stockStateList } _this.status = 'loading' uni.showLoading({ mask:true, title:"正在加载..." }) queryProductListForReplenish(params).then(res => { uni.hideLoading() if(res.status == 200){ let list = res.data if (list && list.length){ _this.partList = list } else { _this.partList = list || [] } }else{ _this.partList = [] } this.showTab = false this.$refs.productList.setData(_this.partList) }) }, // 提交 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.navigateBack() } uni.hideLoading() }) }, // 扫描 toScan(){ this.mpaasScanModule = uni.requireNativePlugin("wss-scan") this.mpaasScanModule.scan( { "scanMode":"Customized", "scanStyle":{ "scanFrameSizePlus":{"width":250,"height":250}, "scanFrameSize":200, "scanLight":"visible", "scanText":"对准条形码/二维码进行识别", "scanTitle":"扫码搜索货位产品", } }, (result) => { if(result.scanStatus == 1){ this.scanResult(result) } }) }, // 扫描结果 scanResult(data){ // 二维码 if(data.scanType == 'QRCODE'){ const ret = data.scanValue.split("&") this.queryWord = ret[1] // 产品编码 }else{ this.queryWord = data.scanValue } this.stockStateList = [] this.getpartList() } } } </script> <style lang="less"> .content{ height: 100vh; width: 100%; background: #fff; .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; } } .search{ margin-top: 15upx; padding: 0.1rem; border-radius: 50rpx; border:1rpx solid #eee; .input{ flex-grow: 1; padding: 4rpx; } .icon{ width: 13%; text-align: center; font-size: 46rpx; color: #999; } } } .check-list{ padding: 0 0.8rem; flex-grow: 1; overflow: auto; } .footer-bar{ background-color: #f8f8f8; padding: 20upx; .f-left{ color: #fff; } .active{ background-color: #0485F6; } .f-mid{ flex-grow: 1; font-size: 0.8rem; color: #666; > view{ padding: 0 5upx; &:first-child{ text{ color: red; } } } } .f-btns{ button{ width: 200upx; } } } // 筛选 .tabBox{ height: 100vh; .tabs{ overflow: auto; padding: 20rpx; > view{ flex-wrap: wrap; justify-content: space-between; > view{ width: 98%; border: 1rpx solid #eee; padding: 15rpx; border-radius: 50rpx; text-align: center; margin-bottom: 15rpx; /deep/ .u-checkbox__label{ flex-grow: 1; } } &:first-child{ > view{ width: 100%; } } } } .btns{ display: flex; padding: 40upx 20upx 20upx; justify-content: space-between; .handle-btn { font-size: 28upx; } } } // 购物车 .cpb_cart-mask{ position: fixed; width: 100%; background: rgba(0,0,0,0.5); z-index: 900; bottom: 100rpx; top: 0; } .cpb_cart-box{ background-color: #fff; position: absolute; width: 100%; z-index: 1000; bottom: 0; border-radius: 30rpx 30rpx 0 0; max-height: 70vh; display: flex; flex-direction: column; .cpb_close{ position: absolute; top: 10rpx; right: 20rpx; width: 70rpx; height: 70rpx; font-size: 32rpx; color: #999; } .cpb_cart-tit{ text-align: center; padding: 20rpx; font-size: 32rpx; border-bottom: 2rpx solid #eee; .cpb_heji{ padding-top: 20rpx; font-size: 26upx; > text{ color: #00aaff; } > view{ color: #999; > text{ color: #333; &:first-child{ margin-right: 20upx; } } } } } .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: 26rpx; text{ background: rgba(3, 54, 146, 0.15); color: #1c588a; border-radius: 1em; font-size: 0.8em; padding: 0 0.5em; margin-right: 10upx; } margin-top: 10upx; } .item-info{ flex-grow: 1; padding-left: 0.8em; } .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>