<template> <view class="p-content"> <view class="p-head" v-if="baseData"> <view> <view> <text>连锁调出单号:</text> <text style="color: crimson;">{{baseData.allocationLinkageOutNo}}</text> </view> <view> <button :disabled="loading" size="mini" type="primary" style="padding:0 10px;height: 28px;line-height: 28px;" @click="submitForm"> 出库 <text class="iconfont icon-icon-test43"></text></button> </view> </view> <view> <view> <view>条形码:</view> <view> <input @change="curProductIndex = 0" style="width: 100%;text-align: left;" class="uni-input" placeholder="扫描或输入条形码" border="surround" v-model="code"> </view> </view> <view> <button size="mini" @click="resetForm" :style="{padding:'2px 5px',color:'#aa0000'}">重置</button> </view> </view> <view> <view> <view>产品编码:</view> <view> <input @change="curProductIndex = 0" style="width: 100%;text-align: left;" class="uni-input" placeholder="请输入产品编码" border="surround" v-model="productCode"> </view> </view> <view> <button size="mini" @click="pickFun(true)" :style="{padding:'2px 5px',color:'#00aaff'}">查询</button> </view> </view> <view style="justify-content: flex-start;flex-wrap: wrap;"> <view>已拣款数: <text style="color: red;">{{baseData.pickCategory||0}}</text>/{{baseData.productTotalCategory}}</view> <view>已拣数量: <text style="color: red;">{{baseData.pickQty||0}}</text>/{{baseData.productTotalQty}}</view> </view> </view> <view class="p-body"> <scroll-view :scroll-top="scrollTop" :scroll-y="true" class="scrollView"> <uni-table style="width: 100%;" border emptyText="暂无数据" :loading="loading1" > <!-- 表头行 --> <uni-tr> <uni-td align="center">产品编码</uni-td> <uni-td align="center">产品分类</uni-td> <uni-td align="center">已拣/总数</uni-td> <uni-td align="center">拣货</uni-td> </uni-tr> <!-- 表格数据行 --> <uni-tr v-for="item in detailList" :key="item.id" @click="selRow(item)" :checkedRow="hasCheck(item)" > <uni-td width="30%" align="center"> <view>{{item.dealerProductEntity.code}}</view> </uni-td> <uni-td width="30%" align="center">{{item.dealerProductEntity.productTypeName3||'--'}}</uni-td> <uni-td width="25%" align="center"><text style="color: red;">{{item.pickQty||0}}</text>/{{item.outQty}}</uni-td> <uni-td width="15%" align="center"> <view style="display: flex;justify-content: center;"> <u-icon v-if="item.pickFlag==0" name="close-circle-fill" color="red" size="22"></u-icon> <u-icon v-if="item.pickFlag==1" name="checkmark-circle-fill" color="green" size="22"></u-icon> <u-icon v-if="item.pickFlag==2" name="info-circle-fill" color="#ffaa00" size="22"></u-icon> </view> </uni-td> </uni-tr> </uni-table> </scroll-view> </view> <view class="p-footer"> <button :disabled="loading" size="mini" type="warn" @click="pickFun(false)"> <text class="iconfont icon-reduce-btn"> 减 </text></button> <button :disabled="loading" size="mini" type="primary" @click="pickFun(true)"> <text class="iconfont icon-add-btn"> 加 </text></button> </view> <scanCode></scanCode> <u-modal :show="showModal" :title="msg.title" :confirmText="msg.confirmText" showCancelButton :content='msg.content' @cancel="showModal=false" @confirm="confirmModal"></u-modal> </view> </template> <script> import scanCode from '@/libs/scan-code.vue'; import { allocLinkageOutDetail, allocLinkageOutDetailList, allocLinkageOutPick, allocLinkageOutStock } from '@/config/api.js' import { playAudio } from '@/libs/tools.js' import clipboard from "@/js_sdk/dc-clipboard/clipboard.js" export default { components: { scanCode }, data() { return { loading: false, loading1: false, baseData: null, showModal: false, msg:{title:'提示',content:''}, detailList:[], code:'', productCode: '', allocationLinkageOutSn: null, salesId: null, curProductIndex: 0, curProductArr: [], scrollTop: 0 }; }, onLoad(opts) { var _this = this this.allocationLinkageOutSn = opts.allocationLinkageOutSn this.salesId = opts.id this.getDetail() this.getDetailList() uni.$on('scancodedate', function(content) { console.log("扫描到的内容为:", content) _this.code = content||'' _this.curProductIndex = 0 _this.pickFun(true) }) }, onUnload() { uni.$off('scancodedate') }, onShow() { this.hideKeyborder() }, methods: { hideKeyborder(){ uni.hideKeyboard() }, // 复制 copyText(text){ clipboard.setText(text); uni.showToast({ icon: 'none', title: '编码已复制成功' }) }, hasCheck(item){ const curProduct = this.curProductArr[this.curProductIndex] return curProduct&&(item.dealerProductEntity.code == curProduct.dealerProductEntity.code) }, getCurProduct(flag){ const curProduct = this.detailList.filter(item => item.dealerProductEntity.qrCode == this.code || item.dealerProductEntity.code == this.productCode) this.curProductArr = curProduct || [] // 滚动到指定位置 if(this.curProductArr.length&&!flag){ const cur = this.curProductArr[0] this.scrollToRow(cur) } }, // 选择行 selRow(item){ this.code = item.dealerProductEntity&&item.dealerProductEntity.qrCode||'' this.productCode = item.dealerProductEntity&&item.dealerProductEntity.code||'' this.getCurProduct(true) const idx = this.curProductArr.findIndex(k => k.id == item.id) this.curProductIndex = idx || 0 }, pickFun(flag){ this.getCurProduct() this.addQty(flag) }, resetForm(){ this.curProductIndex = 0 this.code = '' this.productCode = '' this.curProductArr = [] this.scrollTop = 0 }, // 滚动到指定行 scrollToRow(cur){ const idx = this.detailList.findIndex(item => item.id == cur.id) this.scrollTop = idx * 30 }, addQty(flag){ console.log(this.curProductArr, this.curProductIndex) const curProduct = this.curProductArr[this.curProductIndex] console.log(curProduct) if(curProduct){ this.loading = true // 加 if(flag){ // 如果不是拣货完成 if(curProduct.pickFlag != 1){ this.queryProduct((curProduct.pickQty||0)+1,curProduct) }else{ // 当前商品拣货完,判断是否有其它仓库同样商品 // 切换到下一个商品 if(this.curProductIndex<this.curProductArr.length-1){ this.curProductIndex = this.curProductIndex + 1 this.pickFun(flag) }else{ this.loading = false uni.$u.toast("此商品已全部拣货") playAudio('warn') } } }else{ // 减 // 如果状态不是未拣货 if(curProduct.pickFlag != 0){ this.queryProduct((curProduct.pickQty||0)-1,curProduct) }else{ // 判断是否有它仓库同样商品 // 切换到上一个商品 if(this.curProductIndex){ this.curProductIndex = this.curProductIndex - 1 this.pickFun(flag) }else{ this.loading = false uni.$u.toast("没有可以减的商品了") playAudio('warn') } } } }else{ this.curProductIndex = 0 if(this.code == '' && this.productCode == ''){ uni.$u.toast("请扫描条形码或输入编码") }else{ uni.$u.toast("此商品不存在") } playAudio('warn') } }, //拣货 queryProduct(pickQty, curProduct){ console.log(pickQty) this.loading = true const params = { allocationLinkageOutSn: this.allocationLinkageOutSn, id: curProduct.id, pickQty: pickQty } // console.log(params) allocLinkageOutPick(params).then(res => { console.log(res) if(res.status == 200){ if(res.data){ this.getDetail() this.getDetailList() }else{ uni.$u.toast("此商品不存在") playAudio('error') } } this.loading = false }) }, // 详情 getDetail(){ allocLinkageOutDetail({sn: this.allocationLinkageOutSn}).then(res => { // console.log(res,'详情') if(res.status == 200){ this.baseData = res.data } }) }, // 产品明细列表 getDetailList(){ allocLinkageOutDetailList({pageNo:1,pageSize:1000,allocationLinkageOutSn:this.allocationLinkageOutSn}).then(res => { console.log(res,'产品明细列表') if(res.status == 200){ this.detailList = res.data.list this.getCurProduct() } }) }, confirmModal(e){ this.toOut() }, // 提交 submitForm(){ if(this.baseData.pickQty != this.baseData.productTotalQty){ this.showModal = true this.msg = { title: '提示', content: '确定未完成拣货出库吗?', confirmText: '确定出库' } }else{ this.toOut() } }, // 出库 async toOut(){ const ret = await allocLinkageOutStock({sn: this.allocationLinkageOutSn}) if(ret.status == 200){ this.$store.state.vuex_isRefash = true uni.navigateBack() } } }, } </script> <style lang="scss"> .p-content{ .p-head{ font-size: 32upx; color: $uni-text-color; >view{ display: flex; align-items: center; padding: 10upx 20upx; border-bottom: 1px solid #eee; > view{ display: flex; padding: 0 10upx; align-items: center; } } .uni-input{ border: 1px solid #eee; width: 150upx; text-align: center; padding: 8upx; } } .p-body{ flex-grow: 1; height: calc(100vh - 205px); .scrollView{ height: 100%; } } .p-footer{ padding: 20upx 30upx; display: flex; > button{ width: 40%; height: 32px; line-height: 32px; } } } </style>