<template>
<view>
<scroll-view :scroll-y="true">
<cu-custom bgColor="bg-gradual-pink" :isBack="true">
<block slot="content">{{$t('采购入库扫描')}}</block>
</cu-custom>
<view class="flex flex-direction">
<u-card :title="$t('采购入库扫描')" :title-size="40" :foot-border-top="false">
<view slot="body">
<u-field v-model="scanStockLoc" :label="$t('库位')+':'" :placeholder="$t('请扫描库位')"
@confirm="scanStockLocEvent" :focus="stockLocFocus">
<u-button size="mini" slot="right" type="success" @click="clearStockLoc">{{$t('清空')}}
</u-button>
</u-field>
<u-field v-model="scanBarcode" :label="$t('条码')+':'" :placeholder="$t('请扫描条码')"
@confirm="scanBarcodeEvent" :focus="barcodeFocus">
<u-button size="mini" slot="right" type="success" @click="clearBarcode">{{$t('清空')}}
</u-button>
</u-field>
<view style="overflow: auto;height: 300px;margin-top: 20px;">
<!-- <u-table>
<u-tr class="u-tr">
<u-th class="u-th" width="130px">{{$t('条码')}}</u-th>
<u-th class="u-th" width="100px">{{$t('数量')}}</u-th>
<u-th class="u-th" width="130px">{{$t('物料编码')}}</u-th>
<u-th class="u-th" width="100px">{{$t('批号')}}</u-th>
</u-tr>
<u-tr class="u-tr" v-for="(item,index) in billBarcodeList" style="height:30px;">
<u-td class="u-td" width="130px">{{item.barcode}}</u-td>
<u-td class="u-td" width="100px">{{item.barcodeQty}}</u-td>
<u-td class="u-td" width="130px">{{item.materialNo}}</u-td>
<u-td class="u-td" width="100px">{{item.lotNoId}}</u-td>
</u-tr>
</u-table> -->
<z-table :tableData="billBarcodeList" :columns="tableColumns" :tableHeight="600">
</z-table>
</view>
<uni-pagination :title="$t('分页')" :total="total" v-model="page" :pageSize="pageSize"
@change="GetEnableByMaterial()">
</uni-pagination>
</view>
</u-card>
</view>
</scroll-view>
<!-- 加载弹窗 -->
<view class="cu-load load-modal" v-if="loading">
<view class="gray-text">{{$t('处理中')}}...</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
loading: false,
barcodeInfo: '', //显示的条码信息
scanStockLoc: '', //当前扫描的库位信息
scanBarcode: '', //当前扫描输入的条码
scanBarcodeList: [], //扫描的所有条码
stockLocFocus: true, //库位聚焦
barcodeFocus: false, //条码聚焦
billBarcodeList: [],
billNo: '',
tableColumns: [{
title: this.$t('条码'),
width: 300,
key: 'barcode',
formatNum: false
},
{
title: this.$t('数量'),
width: 100,
key: 'barcodeQty'
},
{
title: this.$t('物料编码'),
width: 200,
key: 'materialNo',
formatNum: false
},
{
title: this.$t('批号'),
width: 150,
key: 'lotNoId',
formatNum: false
}
],
total: 0,
page: 1,
pageSize: 15,
};
},
mounted: function() {
this.GetEnableByMaterial();
},
methods: {
onLoad: function(option) { //option为object类型,会序列化上个页面传递的参数
this.billNo = option.billNo
},
//根据用户获取待入库条码列表
GetEnableByMaterial() {
this.$http.post('/Pur_ReceiveNotice/GetEnableByMaterial', {
page: this.page,
pageSize: this.pageSize,
billNo: this.billNo
})
.then((res) => {
this.billBarcodeList = res.data.data,
this.total = res.data.total
}).catch(error => {
this.$tip.alert(error.message || error, () => {})
}).finally(() => {})
},
//清除条码
clearBarcode() {
this.scanBarcode = ""
this.barcodeFocus = true
},
//清除库位
clearStockLoc() {
this.scanStockLoc = ""
this.stockLocFocus = true
},
//扫描库位,或者手输库位后,点击完成后,触发该事件
scanStockLocEvent() {
if (!this.scanStockLoc) {
this.$tip.alert(this.$t('库位不能为空'), () => {
this.stockLocFocusMethod()
})
return
}
this.loading = true
this.$http.post('/Pur_ReceiveNotice/CheckScanStockLoc', {
scanStockLoc: this.scanStockLoc
})
.then((res) => {
this.barcodeFocusMethod()
}).catch(error => {
this.$tip.alert(error.message || error, () => {
this.scanStockLoc = ''
this.stockLocFocusMethod()
})
}).finally(() => {
this.loading = false;
})
},
//扫描条码,或者手输条码后,点击完成后,触发该事件
scanBarcodeEvent() {
if (!this.scanBarcode) {
this.$tip.alert(this.$t('条码不能为空'), () => {
this.barcodeFocusMethod()
})
return
}
this.loading = true
this.$http.post('/Pur_ReceiveNotice/ceshi', {
scanBarcode: this.scanBarcode,
scanStockLoc: this.scanStockLoc,
billNo: this.billNo
})
.then((res) => {
this.$tip.success(this.$t('入库成功'))
this.GetEnableByMaterial();
this.$nextTick(function() {
this.scanBarcode = ''
this.$nextTick(function() {
this.barcodeFocusMethod()
})
})
}).catch(error => {
this.$tip.alert(error.message || error, () => {
this.scanBarcode = ''
this.barcodeFocusMethod()
})
}).finally(() => {
this.loading = false;
})
},
//聚焦于条码扫描框
barcodeFocusMethod() {
this.barcodeFocus = false
this.$nextTick(function() {
this.barcodeFocus = true
})
},
//聚焦于库位扫描框
stockLocFocusMethod() {
this.stockLocFocus = false
this.$nextTick(function() {
this.stockLocFocus = true
})
},
//显示条码
ShowBarcodeInfo(barcode) {
let barcodeInfo = this.scanBarcodeList.find(t => t.barcode == barcode);
if (barcodeInfo) {
this.barcodeInfo = this.$t('条码号') + ":" + barcodeInfo.barcode + "</br>" +
this.$t('条码数量') + ":" + barcodeInfo.barcodeQty + "</br>" +
this.$t('物料编码') + ":" + barcodeInfo.materialNo + "</br>" +
this.$t('批号') + ":" + barcodeInfo.lotNo + "</br>" +
this.$t('仓库') + ":" + barcodeInfo.stockName + "</br>"
} else {
this.barcodeInfo = ''
}
},
ResetAllInfo() {
this.barcodeInfo = ''
this.scanStockLoc = ''
this.scanBarcode = ''
this.scanBarcodeList = []
this.cacheBarcodeList = []
this.stockLocFocusMethod()
}
}
};
</script>
q***@qq.com
- 发布:2023-03-29 11:42
- 更新:2023-03-29 11:42
- 阅读:279
0 个回复