图示
思路
当派工单这个输入框获取到焦点后,弹出弹出层选择数据。
1、定义这个输入框
<view class="cu-form-group">
<view class="title"><text class="text-red">*</text>派工单号: </view>
<input type="text" v-model="DispatchTicketNumber" @focus="xuanzepgd" class="is-required"
placeholder=" 请选择派工单号" />
<uni-popup ref="popup">
<div>
<ul>
<li v-for="(item,index) of DispatchTicketNumberList" :key="index" @click="selectItem(item)">{{item.DocNo }}</li>
</ul>
</div>
</uni-popup>
</view>
2、当获取到焦点时,调用接口获取数据,这里参数我自己写死了
//派工单输入框获取焦点
xuanzepgd() {
console.log('输入框获取到了焦点')
this.$refs['popup'].open(),
//调用接口获取派工单号
uni.request({
url: dtnApi,
method: 'POST',
header: {
'Content-Type': 'application/json'
},
data: {
context: {
CultureName: "zh-CN",
EntCode: "001",
OrgCode: "MK",
UserCode: "admin"
},
inDTO: [
{
Work: '焊接',
Name: 'BP_11/2X6000MM_B80G23B01_HG',
Bm: '焊管一车间',
Mo: ''
}
]
},
success: (res) => {
console.log("结果集");
console.log(res); //res是返回结果集
const DispatchTicketNumberList = res.data.d.map(item => ({
...item,
selected: false, // 在这里添加一个 selected 属性,初始值为 false
}));
this.DispatchTicketNumberList = DispatchTicketNumberList;
},
fail: (res) => {
uni.showToast({
title: res.errMsg,
icon: 'none',
duration: 2000,
})
},
})
},
3、弹出框选择赋值给输入框
/弹出框赋值派工单号
selectItem(item) {
// 更新选中状态
this.DispatchTicketNumberList = this.DispatchTicketNumberList.map(i => {
i.selected = i.DocNo === item;
return i;
});
// 将所选值赋值给文本框
this.DispatchTicketNumber = item.DocNo;
console.log("所选值")
console.log(this.DispatchTicketNumber)
// 关闭弹窗
this.$refs['popup'].close();
},