<template> <view class="content flex flex_column"> <view class="product-list flex" v-if="placeTab.length"> <scroll-view scroll-y class="leftTabs"> <view class="tabbox"> <view v-for="item in placeTab" :key="item" :class="curTab==item?'active':''" @click="curTab = item">{{item}}层</view> </view> </scroll-view> <scroll-view scroll-y class="rightCons" v-if="shelfPlaceList"> <view class="partList-list-box" v-for="item in shelfPlaceList[curTab]" :key="item.shelfCartSn" > <view class="flex align_center flex_1" @click="editRow(item)"> <view class="pimgs"> <u-image :src="item.product&&item.product.images?item.product.images:`../../static/${$config('themePath')}/def_img@2x.png`" width="120" height="120" border-radius="10"></u-image> </view> <view class="pinfo"> <view class="ptxt"> <text>{{item.shelfPlaceCode}}</text> {{item.productCode}} </view> <view class="pname"> {{item.product.productName}} </view> </view> </view> <view class="ptools flex align_center justify_between"> <view></view> <view class="pcurnums flex align_center"> <view class="u-ninput"> <u-number-box :long-press="false" :index="item.id" :input-height="60" @blur="updateNums" @plus="updateNums" @minus="updateNums" color="#000" bg-color="#fff" v-model="item.qty" :min="0"></u-number-box> </view> </view> </view> </view> </scroll-view> </view> <view class="product-list" v-else> <view style="padding: 200upx 0 0;"> <u-empty :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="150" text="暂无货位产品,请录入" img-width="150" mode="list"></u-empty> </view> <view style="text-align: center;margin-top: 50upx;" v-if="!loading"> <u-button @click="showLayer=true" type='primary' shape="circle" size="medium">点击录入产品</u-button> </view> </view> <view class="footer-bar flex align_center justify_between" v-if="placeTab.length"> <view class="heji flex align_center" @click="showPop=!showPop"> 所有层合计款数:<text>{{totalKs}}</text>;数量:<text>{{totalNums}}</text>; <u-icon name="arrow-up"></u-icon> </view> <view class="btns"> <u-button @click="showLayer=true" type='primary' shape="circle" size="medium">继续录入产品</u-button> </view> </view> <!-- 合计弹框 --> <u-popup mode="bottom" closeable v-model="showPop" :z-index="100"> <view class="heji-content"> <view style="color: red;margin-top: -35rpx;margin-bottom: 15rpx;"> <text @click="showDelLay=true"><u-icon name="trash"></u-icon>批量删除</text> </view> <scroll-view scroll-y="true" style="height: 400rpx;"> <view class="heji-con-list"> <view class="flex align_center" v-for="item in countData" :key="item.shelfTierCode"> <view>{{item.shelfTierCode}}层</view> <view class="flex align_center"> <text>款数:{{item.category}}</text> <text>数量:{{item.qty}}</text> </view> </view> </view> </scroll-view> </view> </u-popup> <!-- 选中层 --> <u-popup mode="center" width="80%" :mask-close-able="false" closeable @close="curLayer=''" v-model="showLayer" border-radius="15"> <view class="layer-content"> <view class="tits">请选择产品的货架层号</view> <view class="tagbox flex"> <view> <view class="tag" :class="curLayer==item?'active':''" v-for="item in layerList" :key="item" @click="curLayer=curLayer==item?'':item"> {{item}}层 </view> </view> </view> <view class="newbtn flex justify_between" v-if="curLayer"> <u-button shape="circle" @click="searchProduct()" size="medium">按产品编码搜索</u-button> <u-button @click="scanProduct()" type='primary' shape="circle" size="medium">扫描条形码匹配</u-button> </view> </view> </u-popup> <!-- 选择层删除 --> <u-popup mode="center" width="80%" :duration="0" :mask-close-able="false" closeable @close="delLayer=[]" v-model="showDelLay" border-radius="15"> <view class="layer-content"> <view class="tits"> <view>请选择需要删除的层</view> <view>删除后,该层所有已录入的产品都会删除</view> </view> <view class="tagbox flex"> <view> <view class="tag" :class="delLayer.indexOf(item)>=0?'active':''" v-for="item in countData" :key="item.shelfTierCode" @click="chooseDelLay(item)"> {{item.shelfTierCode}}层 </view> </view> </view> <view class="newbtn flex justify_between"> <u-button shape="circle" @click="showDelLay=false" size="medium">取消</u-button> <u-button type='primary' @click="confirmDel" shape="circle" size="medium">确定删除</u-button> </view> </view> </u-popup> <!-- 上架确认 --> <choose-type-modal v-if="chooseModal" :totalKs="totalKs" :totalNums="totalNums" :openModal="chooseModal" @confirm="confirmPut" @close="chooseModal = false" /> <printStickerModal v-if="showPrintModal" :layer="curTab" :openModal="showPrintModal" @confirm="confirmPrint" @close="showPrintModal = false"></printStickerModal> </view> </template> <script> import { clzConfirm, numberToFixed } from '@/libs/tools'; import {queryMapList, queryCountList, shelfCartSave, shelfCartDelete, queryEmptyCostList, shelfCartConfirm,deleteBatch} from '@/api/shelfCart.js' import chooseTypeModal from './chooseTypeModal' import printStickerModal from './printStickerModal' export default { components: { chooseTypeModal, printStickerModal }, data() { return { loading: false, showPop: false, chooseModal: false, showPrintModal: false, shelfSn: '', shelfName: '', shelfPlaceList: null, placeTab: [], curTab: '', totalKs: 0, totalNums: 0, countData: [], layerList: [], showLayer: false, showDelLay: false, curLayer: '', delLayer: [] } }, onShow() { this.curLayer = '' this.pageInit() }, onLoad(opts) { this.layerList = 'A、B、C、D、E、F、G、H、I、J、K、L、M、N、O、P、Q、R、S、T、U、V、W、X、Y、Z'.split('、'); this.shelfSn = opts.shelfSn this.shelfName = opts.shelfName this.customerSn = opts.customerSn uni.$on("setCostOk",()=>{ this.chooseModal = true }) }, onBackPress(e) { console.log(e) if(e.from == "backbutton"){ if(this.showLayer || this.showDelLay||this.chooseModal||this.showPrintModal){ this.showLayer = false this.showDelLay = false this.chooseModal = false this.showPrintModal = false return true } if(this.showPop){ this.showPop = false return true } } }, onNavigationBarButtonTap(e) { console.log(e) if(this.placeTab.length){ // 上架入库 if(e.index == 0){ this.toPutaway() } // 打印贴签 if(e.index == 1){ this.showPrintModal = true } }else{ uni.showToast({ icon: 'none', title: '还未录入产品,不能操作', duration: 4000 }) } }, methods: { pageInit(flag){ this.placeTab = [] this.shelfPlaceList = null this.countData = [] this.getList(flag) this.getCount() }, scanProduct(){ this.showLayer = false uni.navigateTo({ url: "/pages/batchShelves/scanProduct?shelfSn="+this.shelfSn+'&layer='+this.curLayer+'&shelfName='+this.shelfName+'&customerSn='+this.customerSn+'&from=cartList' }) }, searchProduct(){ this.showLayer = false uni.navigateTo({ url: "/pages/batchShelves/searchProduct?shelfSn="+this.shelfSn+'&layer='+this.curLayer+'&shelfName='+this.shelfName+'&customerSn='+this.customerSn+'&from=cartList' }) }, // 上架入库 toPutaway(){ uni.showLoading({ title: '正在查询...', mask: true }) queryEmptyCostList({shelfSn: this.shelfSn}).then(res => { console.log(res) uni.hideLoading() if(res.data&&res.data.length){ this.$store.state.vuex_tempData = res.data // 去设置价格 uni.navigateTo({ url: "/pages/batchShelves/setProductCost?shelfSn="+this.shelfSn+'&shelfName='+this.shelfName+'&customerSn='+this.customerSn }) }else{ this.chooseModal = true } }) }, //确认上架 confirmPut(data){ uni.showLoading({ mask: true, title: '正在上架...' }) shelfCartConfirm({ shelfSn: this.shelfSn, ...data }).then(res => { console.log(res) uni.hideLoading() if(res.status == 200){ uni.navigateBack() } }) }, // 打印 confirmPrint(type){ this.showPrintModal = false const shelfInfo = { shelfSn: this.shelfSn, shelfName: this.shelfName, layer: this.curTab } // 打印当前层 if(type == 'manual'){ const list = this.shelfPlaceList[this.curTab] this.$store.state.vuex_tempPrintList = list if(shelfInfo&&list.length){ uni.navigateTo({ url: "/pages/batchShelves/batchPrint/batchPrint?type=manual&data="+encodeURIComponent(JSON.stringify(shelfInfo)) }) }else{ uni.showToast({ icon: 'none', title: '没有可打印的产品', duration: 5000 }) } }else{ // 搜索打印 this.$store.state.vuex_tempPrintList = this.shelfPlaceList uni.navigateTo({ url: "/pages/batchShelves/batchPrint/batchPrint?type=search&data="+encodeURIComponent(JSON.stringify(shelfInfo)) }) } }, // 编辑 editRow(item){ this.$store.state.vuex_tempData = item uni.navigateTo({ url: "/pages/batchShelves/editShelfHw?shelfSn="+this.shelfSn+'&shelfName='+this.shelfName+'&customerSn='+this.customerSn }) }, // 获取产品列表 getList(flag){ uni.showLoading({ mask: true, title: '正在加载...' }) this.loading = true queryMapList({ shelfSn: this.shelfSn }).then(res => { console.log(res.data) uni.hideLoading() this.loading = false if (res.status == 200 && res.data) { this.shelfPlaceList = JSON.stringify(res.data) == '{}' ? null : res.data // 获取层 for(let a in res.data){ this.placeTab.push(a) } this.placeTab.sort(function(a,b){ return (a+'').localeCompare(b+'');}); console.log(this.placeTab) if(!this.curTab&&this.placeTab.length){ this.curTab = this.placeTab[0] }else{ if(!this.shelfPlaceList[this.curTab]){ this.curTab = this.placeTab[0] } } if(this.placeTab.length == 0){ this.shelfPlaceList = null this.curTab = '' } } else { this.shelfPlaceList = null this.placeTab = [] this.curTab = '' } }) }, // 获取统计数据 getCount(){ this.totalKs = 0 this.totalNums = 0 queryCountList({shelfSn: this.shelfSn}).then(res => { if(res.status == 200){ this.countData = res.data // 计算合计 this.countData.map(item => { this.totalKs += item.category||0 this.totalNums += item.qty||0 }) if(res.data.length==0){ this.showPop = false } } }) }, // 删除 shelfCartDelete(row){ const _this = this clzConfirm({ title: '提示', content: '确认删除此货位和产品吗?', success (ret) { if (ret.confirm || ret.index == 0) { uni.showLoading({ mask: true, title: '正在删除...' }) shelfCartDelete({ shelfCartSn: row.shelfCartSn }).then(res => { if (res.status == 200) { _this.toashMsg(res.message) _this.pageInit(true) } uni.hideLoading() }) }else{ _this.pageInit(true) } } }) }, // 批量删除选择 chooseDelLay(val){ const i = this.delLayer.findIndex(item => item == val) if(i>=0){ this.delLayer.splice(i,1) }else{ this.delLayer.push(val) } }, //确定批量删除 confirmDel(){ console.log(this.delLayer) if(this.delLayer.length){ let delLayerArr = []; this.delLayer.map(item=>{ delLayerArr.push(item.shelfTierCode); }) uni.showLoading({ mask: true, title: '正在删除...' }) this.showDelLay =false deleteBatch({ shelfSn: this.shelfSn, shelfTierCodeList:delLayerArr }).then(res => { if (res.status == 200) { this.toashMsg(res.message) this.pageInit(true) } uni.hideLoading() }) }else{ this.toashMsg("请选择层号") } }, // 修改数量 updateNums(e){ console.log(e) const row = this.shelfPlaceList[this.curTab].find(item => item.id == e.index) const nums = e.value // 如果小于1,提示是否删除 if(nums<1){ this.shelfCartDelete(row) return } // 继续修改数量 uni.showLoading({ mask: true, title: '正在保存...' }) const params = { shelfSn: row.shelfSn, shelfName: this.shelfName, shelfTierCode: row.shelfTierCode, shelfPlaceSn: row.shelfPlaceSn||undefined, shelfPlaceCode: row.shelfPlaceCode, productSn: row.productSn, productCode: row.productCode, qty: nums, price: row.price, cost: row.terminalPrice, shelfCartSn: row.shelfCartSn } console.log(params) shelfCartSave(params).then(res => { if(res.status == 200){ this.toashMsg(res.message) this.getCount() } uni.hideLoading() }) }, } } </script> <style lang="less"> .content{ width: 100%; height: 100vh; overflow: hidden; .product-list{ flex-grow: 1; .leftTabs{ width: 20%; height: calc(100vh - 110rpx); .tabbox{ > view{ padding: 0.8rem 0.5rem; border-left: 0.2rem solid #f8f8f8; text-align: center; } .active{ border-color: rgb(47, 126, 209); background-color: #fff; color: rgb(47, 126, 209); } } } .rightCons{ width: 80%; background-color: #fff; position: relative; padding: 0 20upx; height: calc(100vh - 110rpx); .partList-list-box{ padding: 10px 0; border-bottom: 2rpx solid #f5f5f5; .pinfo{ flex-grow: 1; padding-left: 20rpx; .ptxt{ color: #666; font-size: 26rpx; text{ font-weight: normal; margin-right: 10rpx; padding: 0 10rpx; background: rgba(3, 54, 146, 0.15); border-radius: 30rpx; color: #033692; font-size: 24rpx; } margin-bottom: 15upx; } .pname{ color: #666; font-size: 30rpx; font-weight: bold; } } .ptools{ color: #666; font-size: 26rpx; margin-top: 20rpx; .u-ninput{ border: 2rpx solid #eee; border-radius: 50rpx; padding: 0 6rpx; } /deep/ .u-icon-disabled{ background: #fff!important; } /deep/ .u-number-input{ margin: 0 0; border: 2rpx solid #eee; border-top: 0; border-bottom: 0; } /deep/ .u-icon-plus, /deep/ .u-icon-minus{ border-radius: 50rpx; } } } } } .footer-bar{ padding: 20rpx; position: relative; z-index: 200; background-color: #fff; .heji{ flex-grow: 1; color: #999; text{ color: #333; } font-size: 26rpx; padding-right: 30upx; } .btns{ button{ width: 200rpx; background-color: rgb(51, 95, 182); color: #fff; } } } .heji-content{ padding: 60upx 30upx 100upx; } .heji-con-list{ > view{ display: flex; align-items: center; border-bottom: 2rpx solid #eee; padding: 18rpx 0; > view{ &:first-child{ font-weight: normal; padding: 4rpx 15rpx; background: rgba(3, 54, 146, 0.15); border-radius: 10rpx; color: #033692; font-size: 24rpx; margin-right: 30upx; } &:last-child{ flex-grow: 1; text{ margin-right: 20upx; } } } } } .layer-content{ padding: 30upx; .tits{ padding: 10upx 0 20upx; text-align: center; } .tagbox{ flex-grow: 1; > view{ margin: 0 auto; overflow: hidden; width: 100%; .tag{ width: 16%; background-color: #fff; border:1rpx solid #aeaeae; box-shadow: 2rpx 4rpx 6rpx #eee; border-radius: 15rpx; text-align: center; padding: 10rpx 0; float: left; margin: 10rpx 2%; } .active{ background-color: #55aaff; border-color: #55aaff; color: #fff; } } } .newbtn{ padding: 40upx 0 10upx; button{ width: 45%; } } } } </style>