87 lines
1.9 KiB
Vue
87 lines
1.9 KiB
Vue
<template>
|
||
<el-select
|
||
v-model="selectedValue"
|
||
placeholder="请选择或搜索订单"
|
||
clearable
|
||
filterable
|
||
remote
|
||
:remote-method="handleRemoteSearch"
|
||
:loading="loading"
|
||
@change="handleSelectChange"
|
||
style="width: 100%"
|
||
>
|
||
<!-- 下拉选项 -->
|
||
<el-option
|
||
v-for="item in orderList"
|
||
:key="item.orderId"
|
||
:label="item.orderCode"
|
||
:value="item.orderId"
|
||
/>
|
||
|
||
<!-- 无数据提示 -->
|
||
<el-option
|
||
v-if="orderList.length === 0 && !loading"
|
||
value=""
|
||
disabled
|
||
>
|
||
暂无匹配订单
|
||
</el-option>
|
||
</el-select>
|
||
</template>
|
||
|
||
<script>
|
||
import { listOrder } from '@/api/wms/order'
|
||
import { debounce } from 'lodash' // 引入防抖函数
|
||
|
||
export default {
|
||
name: 'OrderSelect',
|
||
data() {
|
||
return {
|
||
orderList: [],
|
||
loading: false,
|
||
queryParams: {
|
||
orderCode: undefined,
|
||
pageNum: 1,
|
||
pageSize: 20
|
||
},
|
||
selectedValue: undefined
|
||
}
|
||
},
|
||
created() {
|
||
// 初始化加载订单列表
|
||
this.getList()
|
||
|
||
// 初始化防抖搜索方法（300ms延迟）
|
||
this.debouncedSearch = debounce(this.getList, 300)
|
||
},
|
||
methods: {
|
||
// 远程搜索方法
|
||
handleRemoteSearch(query) {
|
||
this.queryParams.orderCode = query
|
||
this.queryParams.pageNum = 1 // 重置页码
|
||
this.debouncedSearch() // 使用防抖搜索
|
||
},
|
||
|
||
// 获取订单列表
|
||
getList() {
|
||
this.loading = true
|
||
listOrder(this.queryParams).then(res => {
|
||
this.orderList = res.rows || []
|
||
this.loading = false
|
||
}).catch(() => {
|
||
this.loading = false
|
||
this.orderList = []
|
||
})
|
||
},
|
||
|
||
// 选择变化时触发
|
||
handleSelectChange(orderId) {
|
||
// 找到选中的完整订单项
|
||
const selectedItem = this.orderList.find(item => item.orderId === orderId)
|
||
// 通过onchange事件返回完整订单项
|
||
this.$emit('change', selectedItem)
|
||
}
|
||
}
|
||
}
|
||
</script>
|