<template>
|
<view class="has-foot">
|
<form>
|
<view class="cu-form-group" v-show="!isconfirm">
|
<view class="title">容器码</view>
|
<input placeholder="请扫描容器码" v-model="barcode" focus @input="onBarcodeInput"></input>
|
<text class='cuIcon-close text-gray margin-right-xs' v-show="barcode!==''" @click="clearCode"></text>
|
</view>
|
|
</form>
|
<!-- <view class="cu-form-group" v-show="isClickItem">
|
<view class="title">QR码</view>
|
<input placeholder="请扫描QR码" v-model="QRbarcode" ></input>
|
|
</view> -->
|
|
|
<view class="cu-list det menu sm-border padding">
|
<block v-for="(item, index) in list" :key="index">
|
<view :style="clickItem === index ?itemStyle : {}" class="cu-list det menu " >
|
|
|
<view class="cu-bar bg-white solid-bottom margin-top-sm">
|
<view class="action">
|
<view class="index">
|
{{index+1}}
|
</view>
|
</view>
|
</view>
|
|
<view class="cu-item">
|
<view class="content">
|
<text class="text-gray">编码:<text class="text-black ">{{item.matnrCode}}</text></text>
|
</view>
|
</view>
|
<view class="cu-item">
|
<view class="content">
|
<text class="text-gray">出库单:<text class="text-black ">{{item.sourceCode}}</text></text>
|
</view>
|
</view>
|
<view class="cu-item">
|
<view class="content">
|
<text class="text-gray">批次:<text class="text-black ">{{item.batch}}</text></text>
|
</view>
|
</view>
|
<view class="cu-item">
|
<view class="content">
|
<text class="text-gray">库存单位:<text class="text-black ">{{item.unit}}</text></text>
|
</view>
|
|
</view>
|
|
|
<view class="cu-item">
|
|
<view class="content">
|
<text class="text-gray">计划分拣数量:<text class="text-black ">{{item.anfme}}</text></text>
|
</view>
|
</view>
|
<view class="cu-item">
|
<view class="content2">
|
<text class="text-gray">本次分拣数量:</text>
|
<input type="number" v-model="item.anfme" disabled=""></input>
|
</view>
|
|
</view>
|
</view>
|
</block>
|
</view>
|
|
|
|
|
|
|
<view class="cu-bar btn-group foot" >
|
<button class="cu-btn text-blue line-blue shadow" @click="clear">清空</button>
|
<button class="cu-btn bg-blue shadow-blur" :disabled="repeatClick" @click="complete">提交确认</button>
|
</view>
|
|
|
|
</view>
|
</template>
|
|
<script>
|
import {
|
request
|
} from '../../common/request.js'
|
import {
|
mapState,
|
mapMutations,
|
mapActions,
|
mapGetters
|
} from 'vuex';
|
export default {
|
data() {
|
return {
|
isClickItem:false,
|
clickItem:'',
|
QRbarcode:null,
|
barcode: null,
|
whAreaId: '',
|
list: [],
|
range: [],
|
isconfirm: false,
|
itemStyle: {
|
backgroundColor: '#42b983',
|
borderColor: '#42b983'
|
},
|
repeatClick: false,
|
searchTimer: null, // 防抖定时器
|
isClearing: false // 标记是否正在清空
|
}
|
},
|
computed: {
|
...mapState('user', ['dynamicFields']),
|
allCount() {
|
return this.list.reduce((acc, row) => +row.receiptQty + acc, 0)
|
}
|
},
|
watch: {
|
// 监听容器码变化，自动查询
|
barcode(newVal, oldVal) {
|
// 如果正在清空，不触发查询
|
if (this.isClearing) {
|
return;
|
}
|
// 清除之前的定时器
|
if (this.searchTimer) {
|
clearTimeout(this.searchTimer);
|
}
|
// 如果容器码不为空，延迟300ms后自动查询（防抖处理）
|
if (newVal && newVal.trim() !== '') {
|
this.searchTimer = setTimeout(() => {
|
this.search();
|
}, 300);
|
} else {
|
// 容器码为空时，清空列表
|
this.list = [];
|
}
|
}
|
},
|
mounted() {
|
// 移除自动查询，改为监听输入自动查询
|
},
|
methods: {
|
clickTaskItem(index){
|
if (index === this.clickItem){
|
|
return ;
|
}
|
this.isClickItem = true
|
this.clickItem = index
|
},
|
typeChange(e){
|
this.typeSelect = e.value
|
this.search()
|
},
|
onBarcodeInput(e) {
|
// 输入事件由watch处理，这里可以添加额外逻辑
|
},
|
async search() {
|
this.list = []
|
if(this.barcode === '' || this.barcode ===null || this.barcode.trim() === ''){
|
return ;
|
}
|
const {
|
code,
|
data,
|
msg
|
} = await request('/outStockTaskItem/'+this.barcode,{}, 'get')
|
if (code === 200) {
|
if (Object.keys(data).length === 0){
|
uni.showToast({
|
title: "该标签未查询到数据",
|
icon: "none",
|
position: 'top'
|
})
|
}
|
this.list.push(...data)
|
|
}else if(code == 401){
|
setTimeout(() => {
|
uni.removeStorageSync('token');
|
uni.reLaunch({
|
url: "/pages/login/login"
|
});
|
}, 1000);
|
}else {
|
uni.showToast({
|
title: msg,
|
icon: "none",
|
position: 'top'
|
})
|
}
|
|
|
},
|
async complete() {
|
let that = this
|
if(that.barcode === '' || that.barcode === null){
|
uni.showToast({
|
title: "容器号为空",
|
icon: "error",
|
})
|
return ;
|
}
|
if(that.list === [] || that.list.length === 0){
|
uni.showToast({
|
title: "拣货明细为空",
|
icon: "error",
|
})
|
return ;
|
}
|
that.repeatClick = true
|
const {
|
code,
|
data,
|
msg
|
} = await request('/saveOutTaskSts/'+that.barcode,{}, 'get')
|
if (code === 200) {
|
uni.showToast({
|
title: msg,
|
icon: "success"
|
})
|
// 确认后清空，支持再次扫描
|
that.clear()
|
|
}else if(code == 401){
|
setTimeout(() => {
|
uni.removeStorageSync('token');
|
uni.reLaunch({
|
url: "/pages/login/login"
|
});
|
}, 1000);
|
}else {
|
uni.showToast({
|
title: msg,
|
icon: "none",
|
position: 'top'
|
})
|
}
|
that.repeatClick = false
|
|
},
|
clearCode() {
|
this.isClearing = true;
|
this.barcode = '';
|
this.list = [];
|
// 清空后重置标记，允许下次扫描
|
this.$nextTick(() => {
|
this.isClearing = false;
|
});
|
},
|
remove(index) {
|
this.list.splice(index, 1);
|
},
|
clear() {
|
this.isClearing = true;
|
this.list = [];
|
this.barcode = '';
|
// 清空后重置标记，允许下次扫描
|
this.$nextTick(() => {
|
this.isClearing = false;
|
});
|
},
|
next() {
|
if (this.list.length) {
|
this.isconfirm = true
|
} else {
|
uni.showToast({
|
icon: "none",
|
title: '未选物料标签'
|
})
|
}
|
},
|
prev() {
|
this.isconfirm = false
|
},
|
selChange(val) {
|
uni.setStorageSync('whAreaId', val)
|
},
|
async confirm() {
|
const newArr = this.list.map(item => {
|
return {
|
...item,
|
receiptQty: item.receiptQty === null ? 0 : +item.receiptQty
|
};
|
});
|
if (this.whAreaId === '') {
|
uni.showToast({
|
icon: "none",
|
title: '请选择收货区'
|
})
|
} else {
|
const {
|
code,
|
data,
|
msg
|
} = await request('/orders/confirm', {
|
receipts: newArr,
|
whAreaId: this.whAreaId
|
})
|
if (code === 200) {
|
uni.showToast({
|
title: '收货成功'
|
})
|
this.list = []
|
this.barcode = ''
|
this.isconfirm = false
|
} else {
|
uni.showToast({
|
title: msg,
|
icon: "none",
|
position: 'top'
|
})
|
}
|
|
}
|
},
|
|
DateChange(e, item) {
|
item.prodTime = e.detail.value
|
}
|
},
|
beforeDestroy() {
|
// 组件销毁前清除定时器
|
if (this.searchTimer) {
|
clearTimeout(this.searchTimer);
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.index {
|
border: 1px solid #e54d42;
|
color: #e54d42;
|
border-radius: 50%;
|
display: block;
|
width: 50rpx;
|
height: 50rpx;
|
line-height: 48rpx;
|
text-align: center;
|
margin-right: 20rpx;
|
font-size: 30rpx;
|
}
|
|
.text-blue {
|
color: #0081ff !important;
|
|
}
|
|
.item {
|
position: relative;
|
display: flex;
|
min-height: 80upx;
|
align-items: center;
|
}
|
.content2 {
|
/* background-color: coral; */
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
color: #0081ff;
|
}
|
</style>
|
