|
|
|
@ -27,15 +27,35 @@ |
|
|
|
:placeholder="'请输入'+item.label" |
|
|
|
:clearable="!item.noClear" |
|
|
|
></el-input> |
|
|
|
<!-- 下拉 --> |
|
|
|
<!-- 大数据下拉 --> |
|
|
|
<el-select |
|
|
|
v-if="item.type == 'selectExcess'" |
|
|
|
class="headerSearchExcessSelector" |
|
|
|
v-model="searchForm[item.prop]" |
|
|
|
placeholder="请选择" |
|
|
|
filterable |
|
|
|
clearable |
|
|
|
v-el-select-loadmore:rangeNumber="headerSelectExcessLoadMore(item)" |
|
|
|
@blur="blur(item)" |
|
|
|
@visible-change='(isShow)=>{SelectExcessVisibleChange(isShow,item)}' |
|
|
|
:filter-method="(query)=>{SelectExcessFilterMethod(query,item)}" |
|
|
|
@clear="SelectExcessClearHandle(item)" |
|
|
|
@change="(data)=>{SelectExcessChangeHandle(data,item)}" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="op in item.options.slice(0, item.rangeNumber)" |
|
|
|
:key="op[item.opV] || op.value" |
|
|
|
:label="op[item.opL] || op.label" |
|
|
|
:value="op[item.opV] || op.value" |
|
|
|
></el-option> |
|
|
|
</el-select> |
|
|
|
<!-- 普通下拉 --> |
|
|
|
<el-select |
|
|
|
v-if="item.type == 'select'" |
|
|
|
v-model="searchForm[item.prop]" |
|
|
|
filterable |
|
|
|
:placeholder="'请选择'+item.label" |
|
|
|
:clearable="!item.noClear" |
|
|
|
:loading="item.load" |
|
|
|
@visible-change='(isShow)=>{selectTypeVisibleChange(isShow,item)}' |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="op in item.options" |
|
|
|
@ -78,6 +98,23 @@ |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import Vue from "vue"; |
|
|
|
Vue.directive("el-select-loadmore",{ |
|
|
|
bind(el,binding){ |
|
|
|
//获取element-ui定义好的scroll盒子 |
|
|
|
const SELECTWRAP_DOM = el.querySelector(".headerSearchExcessSelector .el-select-dropdown .el-select-dropdown__wrap") |
|
|
|
SELECTWRAP_DOM.addEventListener("scroll",function(){ |
|
|
|
//scrollHeight 获取元素内容高度 |
|
|
|
//scrollTop 获取或设置元素的偏移值，常用于计算滚动条的位置，当一个元素的容器没有产生垂直方向的滚动条，则默认scrollTop=0. |
|
|
|
//clientHeight 读取元素的可见高度 |
|
|
|
//ele.scrollHeight - ele.scrollTop === ele.clientHeight;如果元素滚到底等式返回true，没有返回false； |
|
|
|
const condition = this.scrollHeight - this.scrollTop <= this.clientHeight |
|
|
|
if(condition){ |
|
|
|
binding.value(); |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
}); |
|
|
|
import columnFilter from "@/components/columnFilter/index" |
|
|
|
import exportExcel from "@/components/exportExcel/index" |
|
|
|
import { |
|
|
|
@ -135,20 +172,61 @@ export default { |
|
|
|
}, |
|
|
|
data () { |
|
|
|
return { |
|
|
|
isShow:false |
|
|
|
}; |
|
|
|
}, |
|
|
|
mounted(){ |
|
|
|
this.initSearchConfig() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
//大数据下拉框搜索 |
|
|
|
SelectExcessFilterMethod(query,item){ |
|
|
|
if(query){ |
|
|
|
item.options = item.optionsTS.filter(i=>{ |
|
|
|
return ((i[item.opL]).toUpperCase()).includes(query.toUpperCase()) |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
//大数据下拉框滚动事件 |
|
|
|
headerSelectExcessLoadMore(item){ |
|
|
|
//每次滚动到底部新增条数，可自定义 |
|
|
|
return ()=>item.rangeNumber += item.rangeSize; |
|
|
|
}, |
|
|
|
//大数据下拉框失去焦点事件 |
|
|
|
blur(item){ |
|
|
|
if(!this.isShow)item.rangeNumber = item.rangeSize; |
|
|
|
}, |
|
|
|
// 大数据下拉显隐操作 |
|
|
|
SelectExcessVisibleChange(isShow,item){ |
|
|
|
this.isShow = isShow |
|
|
|
if(!isShow)return |
|
|
|
if(!this.searchForm[item.prop] || this.searchForm[item.prop].length <= 0){ |
|
|
|
item.options = item.optionsTS |
|
|
|
}else{ |
|
|
|
this.SelectExcessFilterMethod(this.searchForm[item.prop],item) |
|
|
|
} |
|
|
|
}, |
|
|
|
// 大数据下拉清除操作 |
|
|
|
SelectExcessClearHandle(item){ |
|
|
|
item.rangeNumber = item.rangeSize |
|
|
|
}, |
|
|
|
// 大数据下拉更改操作 |
|
|
|
SelectExcessChangeHandle(data,item){ |
|
|
|
item.options = [] |
|
|
|
let _ob = {} |
|
|
|
_ob[item.prop] = data |
|
|
|
item.options.push(_ob) |
|
|
|
}, |
|
|
|
initSearchConfig(){ |
|
|
|
if(!this.searchConfig){return} |
|
|
|
this.searchConfig.forEach(item=>{ |
|
|
|
item.options = [] |
|
|
|
if(item.type == 'select' && item.optionsProc && !item.initNotLoad){ |
|
|
|
// 普通下拉 + 大数据下拉 |
|
|
|
if((item.type == 'select' || item.type == 'selectExcess') && item.optionsProc){ |
|
|
|
// 物料 |
|
|
|
if(item.optionsProc == 'itemCode'){ |
|
|
|
getItemCodeList().then(res=>{ |
|
|
|
if(item.type == 'selectExcess'){item.optionsTS = res} |
|
|
|
item.options = res |
|
|
|
item.opL="ItemCode" |
|
|
|
item.opV="ItemCode" |
|
|
|
@ -157,6 +235,7 @@ export default { |
|
|
|
// 库位 |
|
|
|
if(item.optionsProc == 'LocationCode'){ |
|
|
|
getLocationCodeList().then(res=>{ |
|
|
|
if(item.type == 'selectExcess'){item.optionsTS = res} |
|
|
|
item.options = res |
|
|
|
item.opL="LocationCode" |
|
|
|
item.opV="LocationCode" |
|
|
|
@ -165,6 +244,7 @@ export default { |
|
|
|
// 发货类型 |
|
|
|
if(item.optionsProc == 'DeliverRequestType'){ |
|
|
|
getDeliverRequestType().then(res=>{ |
|
|
|
if(item.type == 'selectExcess'){item.optionsTS = res} |
|
|
|
item.options = res |
|
|
|
item.opL="KEY" |
|
|
|
item.opV="VALUE" |
|
|
|
@ -173,6 +253,7 @@ export default { |
|
|
|
// 供应商 |
|
|
|
if(item.optionsProc == 'SupplierCode'){ |
|
|
|
getSupplierCode().then(res=>{ |
|
|
|
if(item.type == 'selectExcess'){item.optionsTS = res} |
|
|
|
item.options = res |
|
|
|
item.opL="SupplierCode" |
|
|
|
item.opV="SupplierCode" |
|
|
|
@ -181,6 +262,7 @@ export default { |
|
|
|
// ERP库位 |
|
|
|
if(item.optionsProc == 'LocationErpCode'){ |
|
|
|
getLocationErpCode().then(res=>{ |
|
|
|
if(item.type == 'selectExcess'){item.optionsTS = res} |
|
|
|
item.options = res |
|
|
|
item.opL="ErpLocationCode" |
|
|
|
item.opV="ErpLocationCode" |
|
|
|
@ -189,6 +271,7 @@ export default { |
|
|
|
// 领料类别 |
|
|
|
if(item.optionsProc == 'UnplannedIssueType'){ |
|
|
|
getUnplannedIssueType().then(res=>{ |
|
|
|
if(item.type == 'selectExcess'){item.optionsTS = res} |
|
|
|
item.options = res |
|
|
|
item.opL="KEY" |
|
|
|
item.opV="VALUE" |
|
|
|
@ -197,6 +280,7 @@ export default { |
|
|
|
// 退料类别 |
|
|
|
if(item.optionsProc == 'UnplannedReceiptType'){ |
|
|
|
getUnplannedReceiptType().then(res=>{ |
|
|
|
if(item.type == 'selectExcess'){item.optionsTS = res} |
|
|
|
item.options = res |
|
|
|
item.opL="KEY" |
|
|
|
item.opV="VALUE" |
|
|
|
@ -205,6 +289,7 @@ export default { |
|
|
|
// 库存状态 |
|
|
|
if(item.optionsProc == 'InventoryBalanceStatus'){ |
|
|
|
getInventoryBalanceStatus().then(res=>{ |
|
|
|
if(item.type == 'selectExcess'){item.optionsTS = res} |
|
|
|
item.options = res |
|
|
|
item.opL="KEY" |
|
|
|
item.opV="VALUE" |
|
|
|
@ -242,25 +327,6 @@ export default { |
|
|
|
} |
|
|
|
return _title |
|
|
|
}, |
|
|
|
// 下拉显隐操作 |
|
|
|
selectTypeVisibleChange(isShow,option){ |
|
|
|
if(!isShow)return |
|
|
|
if(isShow){ |
|
|
|
if(option.optionsProc == 'itemCode'){ |
|
|
|
option.load = true |
|
|
|
getItemCodeList() |
|
|
|
.then(res=>{ |
|
|
|
option.load = false |
|
|
|
option.options = res |
|
|
|
option.opL="ItemCode" |
|
|
|
option.opV="ItemCode" |
|
|
|
}) |
|
|
|
.catch(err=>{ |
|
|
|
option.load = false |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
