效果
如下图,需要当批号的下拉栏位存在数据的时候,才会展示下拉框,现在即使数据为空也会展示下拉框
修改后的效果,只出现提示,不展示下拉框
代码
1、页面展示
- 设置picker下拉框的外层点击事件,点击事件出现提示信息(onchange是选择之后才会执行的,这里不展示下拉框也没有数据,所以不会执行此方法)
- 设置picker的禁用事件,如果数据为空就禁止,部不为空就启用
<view class="position_all2">
<view class="scan2">
<view class="position_line2_1">
<view class="line2_1_title">
批号:
</view>
<view class="right" @click="onPickerClick">
<picker mode="selector" :disabled="!selectDatas3 || selectDatas3.length == 0" :range="selectDatas3" @change="onLotNumChange">
<view class="picker">
{{selectedLotNum?selectedLotNum:'请选择'}} >
</view>
</picker>
</view>
</view>
</view>
</view>
2、data数据
selectDatas3:存放下拉列表中的数据,这里是全部的批次号
selectedLotNum:从下拉列表中选中的数据,这里是选中的批次号
data() {
return {
selectDatas3: [], //下拉列表批号的信息
selectedLotNum: '', //选择批次号
}
},
3、js
①获取批次号信息get_lotnum
②点击事件判断是否进行不存在提示onPickerClick
③选择事件对下拉列表中数据进行选择执行的方法onLotNumChange
//点击批号出现的效果
onPickerClick() {
if (!this.selectDatas3 || this.selectDatas3.length === 0) {
uni.showToast({
title: '请选择制令单/确认制令单是否存在批号',
icon: 'none'
});
return false; // 阻止默认行为
}
},
//选择批号
onLotNumChange(event) {
if (!this.selectDatas3) {
uni.showToast({
title: '请选择批次号',
icon: 'none'
})
} else {
this.selectedLotNum = this.selectDatas3[event.detail.value];
}
},
// 获取批号
get_lotnum: function(e) {
var order_number = this.mip_name;
if (order_number) {
//查询单号对应的信息
uni.request({
url: getApp().globalData.position + 'Produce/select_mip_lotnum',
data: {
order_number: order_number,
username: getApp().globalData.username
},
method: 'POST',
dataType: 'json',
success: res => {
let selectDatas3 = []
//拼接新数组工序号-工序名
console.log(res)
this.selectDatas3 = res.data.lot_num;
},
fail(res) {
console.log("查询失败")
}
})
}
},