q***@qq.com
q***@qq.com
  • 发布:2023-03-29 11:42
  • 更新:2023-03-29 11:42
  • 阅读:175

关于uniapp扫描光标成功后,光标不能自动聚焦输入框

分类:HBuilderX
<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>  
2023-03-29 11:42 负责人:无 分享
已邀请:

要回复问题请先登录注册