<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" @click="submitForm"> 出库 <text class="iconfont icon-icon-test43"></text></button> </view> </view> <view> <text>条形码:</text> <view> <input @blur="addQty(true)" style="width: 100%;text-align: left;" class="uni-input" placeholder="扫描或输入条形码" border="surround" v-model="code"> </view> </view> <view> <text>产品编码:</text> <view> <input @blur="addQty(true)" style="width: 100%;text-align: left;" class="uni-input" placeholder="请输入产品编码" border="surround" v-model="productCode"> </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"> <uni-table style="width: 100%;" border emptyText="暂无数据" :loading="loading" > <!-- 表头行 --> <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" :checkedRow="curProduct&&(item.dealerProductEntity.code == curProduct.dealerProductEntity.code)"> <uni-td width="30%" align="center"> <view @click="copyText(item.dealerProductEntity.code)">{{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> </view> <view class="p-footer"> <button size="mini" type="warn" @click="addQty(false)"> <text class="iconfont icon-reduce-btn"> 减 </text></button> <button size="mini" type="primary" @click="addQty(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, baseData: null, showModal: false, msg:{title:'提示',content:''}, detailList:[], code:'', productCode: '', allocationLinkageOutSn: null, salesId: null, curProduct: null }; }, 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.addQty(true) }) }, onUnload() { uni.$off('scancodedate') }, onShow() { this.hideKeyborder() }, methods: { hideKeyborder(){ uni.hideKeyboard() }, // 复制 copyText(text){ clipboard.setText(text); uni.showToast({ icon: 'none', title: '编码已复制成功' }) }, getCurProduct(){ const curProduct = this.detailList.find(item => item.dealerProductEntity.qrCode == this.code || item.dealerProductEntity.code == this.productCode) this.curProduct = curProduct || null return curProduct || null }, addQty(flag){ const curProduct = this.getCurProduct() if(curProduct){ if(curProduct.pickFlag != 1 || !flag){ this.queryProduct((curProduct.pickQty||0)+1*(flag?1:-1)) }else{ uni.$u.toast("此商品已全部拣货") playAudio('warn') } }else{ if(this.code == '' && this.productCode == ''){ uni.$u.toast("请扫描条形码或输入编码") }else{ uni.$u.toast("此商品不存在") } playAudio('warn') } }, //拣货 queryProduct(pickQty){ this.loading = true const params = { allocationLinkageOutSn: this.allocationLinkageOutSn, productQrCode: this.code, productCode: this.productCode, 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{ overflow: auto; flex-grow: 1; height: 50%; } .p-footer{ padding:20upx 30upx; display: flex; > button{ width: 30%; } } } </style>