1。用户仓库由于生产环境仓库数据量达到八九千条,所以,仓库不用下拉搜索,设计成模糊搜索,即不能在created 生命周期里调查询所有仓库接口
2。代码片段:
<a-select
v-decorator="['placeId',{ initialValue: selectedPlace.id }]"
placeholder="名称模糊搜索仓库"
show-search
:value="value"
allow-clear
:default-active-first-option="false"
:show-arrow="false"
:filter-option="false"
:not-found-content="null"
@search=""
>
<a-select-option value="-1">请选择</a-select-option>
<template v-for="item in repositoryData">
<a-select-option :key="item.id" :value="item.id">{{
`${item.placeCode + " " + item.placeName}`
}}</a-select-option>
</template>
</a-select>
created() {
//如果在created生命周期拉取的是全量仓库,则不需要写下面这一行代码。
//这时候在 v-decorator="['placeId',{ initialValue: selectedPlace.id }]",即可直接获取到当前地点,并且把编码和名称自动填充到输入框
//所以在没有拉取全量仓库的业务情景下,需要在created生命周期里写下面这一行,意思是在初始化的时候,将selectedPlace的值赋到repositoryData这个里,并...将其展开
//此时在initialValue: selectedPlace.id,在界面展示的时候即展示当前地点
this.repositoryData = [{ ...this.selectedPlace }]
this.firstQuery()
},
methods: {
// 初次渲染调用
firstQuery() {
this.filters = {
placeId: this.selectedPlace.id
}
this.queryrepoPermission(this.filters)
},
// 用名称模糊搜索仓库,不能全量拉取仓库,否则在生产环境就会请求超时。
// 所以在created里把拉取全量仓库的代码 删除,模仿收货单管理。来源地点的写法
handlePlaceNameSearch(value) {
console.log('ddy', value)
this.value = value
api.queryPlaces({
placeName: value,
pageReq: { 'pageNum': 1, 'pageSize': 50 }
})
.then((res) => {
if (res.data) {
this.repositoryData = res.data
}
})
},
}