(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>
Umao
是的,我用的3.5版本可以解决,但是在线打包自动用高版本打包的,只能使用离线打包方案,很麻烦
2023-11-02 09:52