爱吃鱼的猫猫
爱吃鱼的猫猫
  • 发布:2023-08-25 10:00
  • 更新:2024-07-16 11:45
  • 阅读:1227

使用uni-easyinput接收PDA扫码数据,输入框绑定@confirm事件,在事件处理函数中清空输入框无效

分类:uni-app

(1)操作流程:工位输入框获取焦点并扫码--》标识码获取焦点并扫码,完成后js中控制uni-easyinput清空值,js层生效,渲染层不生效
(2)源代码如下:

<template>  
    <view class="container">  
        <!-- 顶部表单 -->  
        <view class="header">  
            <uni-forms ref="baseForm" :modelValue="baseFormData">  
                <uni-forms-item label="工位" required>  
                    <uni-easyinput @blur="stationBlur" :focus="isStationFocus" trim="both" v-model="baseFormData.StationNO" placeholder="请输入工位" @confirm="stationNoConfirm"/>  
                </uni-forms-item>  
                <uni-forms-item label="标识码" required>  
                    <uni-easyinput ref='nidInput' @blur="nidBlur" :focus="isNIDFocus" trim="both" v-model="baseFormData.NID" placeholder="请输入标识码" @confirm="nidConfirm"/>  
                </uni-forms-item>  
                <uni-forms-item label="数量">  
                    <uni-easyinput :inputBorder="false" :clearable="false" v-model="baseFormData.Count" placeholder="" />  
                </uni-forms-item>  
            </uni-forms>  
        </view>  
        <!-- 中部数据显示区域 -->  
        <view class="content">  
            <view class="up">  
                <u-button type="primary" @click="batchDel" shape="circle" text="批量删除"></u-button>  
            </view>  
            <view class="down">  
                <zb-table  
                    ref="zbTable"  
                    :highlight="true"  
                    :show-header="true"  
                    :columns="column"  
                    :fit="true"  
                    row-key="id"  
                    @rowClick="rowClick"  
                    @toggleRowSelection="toggleRowSelection"  
                    @toggleAllSelection="toggleAllSelection"  
                    :border="true"  
                    @dele="delRow"  
                    :data="data"></zb-table>  
            </view>  
        </view>  
        <!-- 底部按钮 -->  
        <view class="footer">  
            <view class="btn">  
                <u-button @click="commit" type="primary" shape="circle" text="提交"></u-button>  
            </view>  
            <view class="btn">  
                <u-button @click="close" type="success" shape="circle" text="关闭"></u-button>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
import liuzhuanData from './liuzhuanData.js'  
export default {  
    data() {  
        return {  
            isStationFocus: true,  
            isNIDFocus: false,  
            results: [],  
            baseFormData: {  
                StationNO: '',  
                NID: '',  
                Count: 100  
            },  
            column:[  
              { type:'selection', fixed:true,width:40 },  
              { name: 'NID', label: '标识码',align:'center',fixed:true,width:80,emptyString:'-' },  
              { name: 'CurrentStep', label: '当前工序',align:'center'},  
              { name: 'NextStep', label: '下一工序',align:'center'},  
              { name: 'operation', type:'operation',label: '操作',align:'center',renders:[  
                  {  
                    name:'删除',  
                    type:'warn',  
                    class:"del_btn",  
                    func:'dele'  
                  },  
                ]},  
            ],  
            data: []  
        }  
    },  
    onLoad() {  
        this.data = liuzhuanData;  
    },  
    onShow() {  
        setTimeout(()=>{  
            this.autoStationFocus();  
        },100)  
    },  
    methods: {  
        autoStationFocus() {  
            this.isStationFocus = false;  
            this.isNIDFocus = false;  
            this.$nextTick(() => {  
                this.isStationFocus = true;  
            })  
        },  
        autoNIDFocus() {  
            this.isStationFocus = false;  
            this.isNIDFocus = false;  
            this.$nextTick(() => {  
                this.isNIDFocus = true;  
            })  
        },  
        stationBlur() {  
        },  
        nidBlur() {  
        },  
        stationNoConfirm() {  
            var that = this  
            if(!that.baseFormData.StationNO) {  
                that.baseFormData.StationNO = '';//获取焦点前先清空内容  
                this.autoStationFocus();//自动聚焦  
                that.$toast('工位号不能为空',1000)  
            }else {  
                if(that.baseFormData.NID) {  
                    //业务代码:校验标识卡是否存在、是否失效整机、是否已属于成品入库整机  
                    // this.data.push()  
                    this.$nextTick(()=>{  
                        this.baseFormData.NID = ''  
                    })  
                    this.autoNIDFocus();  
                    that.$toast('扫码成功',1000)  
                }else {  
                    this.autoNIDFocus();  
                }  

            }  
        },  
        nidConfirm() {  
            var that = this  
            if(!that.baseFormData.NID) {  
                this.baseFormData.NID = '';//获取焦点前先清空内容  
                this.autoNIDFocus();//自动聚焦  
                that.$toast('标识码不能为空',2000)  
            }else {  
                if(!that.baseFormData.StationNO) {  
                    that.baseFormData.StationNO = '';//获取焦点前先清空内容  
                    this.autoStationFocus();  
                    console.log('工位号获得焦点')  
                }else {  
                    //业务代码:校验标识卡是否存在、是否失效整机、是否已属于成品入库整机  
                    // this.data.push()  
                    this.$nextTick(()=>{  
                        this.$refs.nidInput.onClear()  
                        this.baseFormData.NID = ''  
                        this.autoNIDFocus();  
                        console.log('标识码获得焦点,NID='+this.baseFormData.NID)  
                        that.$toast('扫码成功',1000)  
                    })  
                }  
            }  
        },  
        //提交  
        commit() {  
            this.$toast("点击提交")  
        },  
        //关闭  
        close() {  
            this.$toast("点击关闭")  
        },  
        //删除行  
        delRow(ite,index){  
           uni.showToast({  
             icon:'none',  
             duration:3000,  
             title:'点击删除'  
           })  
           console.log(ite,index)  
         },  
        toggleAllSelection(checked,arr){  
           uni.showToast({  
             icon:'none',  
             duration:3000,  
             title:'点击全选'  
           })  
           console.log('全选',checked,arr)  
         },  
        toggleRowSelection(checked,arr){  
           uni.showToast({  
             icon:'none',  
             duration:3000,  
             title:'点击单选'  
           })  
           console.log('单选',checked,arr)  
         },  
        rowClick(row,index){  
           uni.showToast({  
             icon:'none',  
             duration:3000,  
             title:'单击某行'  
           })  
           console.log('单击某行',row,index)  
         },  
         batchDel() {  

         }  
    }  
}  
</script>  

<style lang="scss" scoped>  
    .container {  
        display: flex;  
        flex-direction: column;  
        padding: 20rpx;  

        .header {  
            height: 150px;  
            flex-shrink: 0;  
        }  
        .content {  
            flex-grow: 1;  
            .up {  
                height: 50px;  
                width: 40%;  
                padding: 40rpx 0;  
            }  
            .down {  
                height: 400px;  
                .operate {  
                    display: fdlex;  
                    align-items: center;  
                }  
            }  
        }  

        .footer {  
            height: 50px;  
            display: flex;  
            justify-content: space-between;  
            position: relative;  
            flex-shrink: 0;  
            padding: 20rpx;  
            margin-top: 20rpx;  
            background: #fbfbfb;  
            .btn {  
                flex: 1;  
                padding: 20rpx;  
            }  
        }  
    }  
</style>
2023-08-25 10:00 负责人:无 分享
已邀请:
AQASLAC

AQASLAC - 暖阳

目前测试 HbuilderX3.6.3 版本及以下应该是好用的,升级版本之后就失效了,可以测测

  • Umao

    是的,我用的3.5版本可以解决,但是在线打包自动用高版本打包的,只能使用离线打包方案,很麻烦

    2023-11-02 09:52

t***@foxmail.com

t***@foxmail.com

建议要是js生效的话打一下this.baseFormData.StationNO看看是不是还有值

Umao

Umao

请问这个问题后续是如何解决的呢

AQASLAC

AQASLAC - 暖阳

楼主解决了吗?

  • 3***@qq.com

    我解决啦需要帮助吗

    2023-11-27 16:23

  • AQASLAC

    回复 3***@qq.com: 感谢,非常需要你的帮助

    2023-11-28 11:59

  • AQASLAC

    15734122472@163.com

    2023-11-28 12:10

  • 1***@qq.com

    回复 3***@qq.com: 怎么解决的啊,求指教

    2024-07-02 08:12

1***@qq.com

1***@qq.com

已解决,方法是通过@foucus在获得焦点的时候,设置v-model绑定的变量为空,这样在confirm事件中,只要设置组件focus,就会自动清空组件的值,PDA已测试有效

要回复问题请先登录注册