401 lines
11 KiB
Vue
401 lines
11 KiB
Vue
<!-- 出库箱查询 -->
|
|
<template>
|
|
<view class="shpage gx_zxpage">
|
|
<z-paging ref="paging" v-model="dataList" @query="queryList">
|
|
<template #top>
|
|
<!-- 标题 -->
|
|
<view class="mianheade mianheade2" @click="goback()">
|
|
<image src="../../static/img/n_baiback.png" class="blacBackico"></image>
|
|
<text class="pagetitle">出库箱信息</text>
|
|
</view>
|
|
<!-- 仓库&出库箱信息 -->
|
|
<view class="sh_gdInfo">
|
|
<view class="item" :class="{ itembg2: outboundOrderNumber }" :style="{ 'pointer-events': outboundOrderNumber ? 'none' : '' }">
|
|
<view class="it">
|
|
<text class="t1">
|
|
<text class="redtag">*</text>
|
|
仓库:
|
|
</text>
|
|
<w-select
|
|
class="wwselectit"
|
|
v-model.trim="warehouseName"
|
|
defaultValue="请选择"
|
|
:list="warehouseList"
|
|
valueName="name"
|
|
keyName="name"
|
|
@change="handleWareHouseChange"
|
|
@focus="inputfocus($event, 'ck')"
|
|
ref="wselectck"
|
|
></w-select>
|
|
</view>
|
|
</view>
|
|
<!-- 出库单号 -->
|
|
<view class="item" :class="{ itembg2: !warehouseName }" :style="{ 'pointer-events': !warehouseName ? 'none' : '' }">
|
|
<view class="it itsp">
|
|
<text class="t1">
|
|
<text class="redtag">*</text>
|
|
出库单号:
|
|
</text>
|
|
<w-select
|
|
style="margin-left: 20rpx; flex: 1"
|
|
v-model.trim="outboundOrderNumber"
|
|
defaultValue="模糊搜索"
|
|
:list="outboundOrderList"
|
|
valueName="billNo"
|
|
keyName="billNo"
|
|
@change="handleOutboundOrderChange"
|
|
:showClose="true"
|
|
:focus="focusInput == 'outboundOrderNumber'"
|
|
@focus="focusInput = 'outboundOrderNumber'"
|
|
:filterable="filterable"
|
|
:pagingSet="isPagingSet"
|
|
:wselectTotal="total"
|
|
@onBottomPage="onBottomPage"
|
|
:pageNo="pageNo"
|
|
:loadingFlag="loadingFlag"
|
|
@clearnFn="clearnFn"
|
|
selectTag="ckfsWselect"
|
|
></w-select>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 分割 -->
|
|
<view :style="{height:navHeight+formHeight+30+'rpx'}"></view>
|
|
<view class="th-box" >
|
|
<view class="th-item" style="" >
|
|
<view class="th br" style="width: 80rpx;">序号</view>
|
|
<view class="th br" style="width: 250rpx;">箱号</view>
|
|
<view class="th " style="width: 330rpx;">规格型号</view>
|
|
<!-- <view class="th" style="width: 140rpx;">出库数量</view> -->
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<!-- border-bttom-radius: 12rpx; -->
|
|
<view :class="dataList.length ? 'td-box1' :'td-box'">
|
|
<view class="td-item" style="" v-for="(item,index) in dataList" :key="index" >
|
|
<view class="td br wd" style="width: 80rpx;">{{item.indexNumber}}</view>
|
|
<view class="td br wd" style="width: 250rpx;">{{item.boxBillNo}}</view>
|
|
<view class="td wd" style="width: 330rpx;">{{item.specifications}}({{item.qty}})</view>
|
|
<!-- <view class="td wd" style="width: 140rpx;">{{item.qty}}</view> -->
|
|
</view>
|
|
</view>
|
|
</z-paging>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
navHeight:0,
|
|
formHeight:0,
|
|
dataList:[],
|
|
focusInput: '', //自动聚焦
|
|
outboundOrderList:[],//出库单号列表
|
|
outboundOrderNumber:'',//出库单号
|
|
isPagingSet: true, // 是否开启出库单下拉分页
|
|
warehouseName: '', // 选择后的仓库名称
|
|
warehouseCode: '', // 选择后的仓库编码
|
|
warehouseList:[],//仓库列表数据
|
|
loadingFlag: 0, //分頁提示
|
|
pageNo: 1,//分页
|
|
filterable: true,
|
|
total:0,//出库单号列表数量
|
|
timer:null,
|
|
timer1:null,
|
|
};
|
|
},
|
|
|
|
onReady() {
|
|
this.getElHeight(".sh_gdInfo",1)
|
|
this.getElHeight(".mianheade",2)
|
|
},
|
|
onLoad() {
|
|
this.getStock();
|
|
},
|
|
onBackPress(e) {
|
|
//物理设备返回按钮,otherUnderwearIndex是返回当前/otherUnderwear/index下
|
|
this.$util.appgoBack(e, 'otherUnderwearIndex');
|
|
return true;
|
|
},
|
|
|
|
watch: {
|
|
outboundOrderNumber(n) {
|
|
if(!n) {
|
|
this.tableReload()
|
|
return
|
|
}
|
|
this.pageNo = 1;
|
|
this.outboundOrderList=[]
|
|
this.getOutboundOrderData(n)
|
|
},
|
|
},
|
|
methods: {
|
|
//获取元素高度
|
|
getElHeight(el,type){
|
|
this.$nextTick(()=>{
|
|
uni.createSelectorQuery().select(el).boundingClientRect((data) => {
|
|
if(type===1) {
|
|
|
|
/* #ifdef H5 */
|
|
this.navHeight = data.height
|
|
/*#endif*/
|
|
/*#ifdef APP-PLUS*/
|
|
this.navHeight = data.height+14
|
|
/*#endif*/
|
|
}else if(type===2) {
|
|
/* #ifdef H5 */
|
|
this.formHeight = data.height
|
|
/*#endif*/
|
|
/*#ifdef APP-PLUS*/
|
|
this.formHeight = data.height+14
|
|
/*#endif*/
|
|
}
|
|
}).exec();
|
|
})
|
|
},
|
|
//根据出库单号获取对应的下拉数据
|
|
getOutboundOrderData(val) {
|
|
// this.outboundOrderList=[]
|
|
clearTimeout(this.timer);
|
|
this.isPagingSet = false;
|
|
if (this.outboundOrderList.length >= this.total && this.pageNo >= 2) {
|
|
this.loadingFlag = 2;
|
|
return;
|
|
}
|
|
this.timer = setTimeout(() => {
|
|
this.$api
|
|
.post('/OutStockTask/GetOutStockTaskNosByNoBox', {
|
|
billNo: val,
|
|
pageSize: 10,
|
|
pageNo: this.pageNo,
|
|
stockCode: this.warehouseCode
|
|
})
|
|
.then((res) => {
|
|
if (res.status == 200) {
|
|
this.total = res.totalCount;
|
|
let newarr = res.data.map((item) => {
|
|
return {
|
|
billNo: item
|
|
};
|
|
});
|
|
// this.outboundOrderList.concat(newarr);
|
|
this.outboundOrderList = [...this.outboundOrderList,...newarr]
|
|
this.isPagingSet = true;
|
|
this.loadingFlag = 1;
|
|
} else {
|
|
this.isPagingSet = true;
|
|
this.total = res.totalCount;
|
|
console.log('走到了这里吗')
|
|
this.outboundOrderList=[]
|
|
}
|
|
}).catch(err=>{
|
|
this.outboundOrderList=[]
|
|
})
|
|
}, 1000);
|
|
},
|
|
//仓库
|
|
handleWareHouseChange(e) {
|
|
this.warehouseName = e.name;
|
|
this.warehouseCode = e.code+`_$${e.erpOrgCode}`;
|
|
this.outboundOrderList=[]
|
|
// this.$refs.paging.complete([]);
|
|
this.tableReload()
|
|
this.getOutboundOrderData(this.outboundOrderNumber);
|
|
this.focusInput=""
|
|
//选择仓库后获取该仓库的出库单号
|
|
setTimeout(()=>{
|
|
this.focusInput="outboundOrderNumber"
|
|
},300)
|
|
|
|
},
|
|
//出库单号改变
|
|
handleOutboundOrderChange(e){
|
|
console.log(this.outboundOrderNumber,'=outboundOrderNumber=')
|
|
this.queryList(1,10)
|
|
},
|
|
//表格刷新
|
|
tableReload() {
|
|
this.$refs.paging.reload().catch(() => {});
|
|
},
|
|
//清空出库单号值
|
|
clearnFn(val) {
|
|
this.outboundOrderNumber=''
|
|
this.outboundOrderList=[]
|
|
// this.$refs.paging.complete([]);
|
|
this.tableReload()
|
|
this.focusInput=""
|
|
//选择仓库后获取该仓库的出库单号
|
|
setTimeout(()=>{
|
|
this.focusInput="outboundOrderNumber"
|
|
},300)
|
|
this.getOutboundOrderData(this.outboundOrderNumber);
|
|
|
|
},
|
|
// 出库订单号查询分页
|
|
onBottomPage(val) {
|
|
this.pageNo = val;
|
|
this.loadingFlag = 1;
|
|
this.getOutboundOrderData(this.outboundOrderNumber);
|
|
},
|
|
//获取仓库数据
|
|
getStock() {
|
|
this.$api.get('/SysConfig/GetUcStock').then((res) => {
|
|
if (res.status == 200) {
|
|
this.warehouseList = res.data;
|
|
}
|
|
});
|
|
},
|
|
//请求时非200情况下z-paging组件设置和本地数据重置
|
|
setRefsPagingComplete() {
|
|
this.$refs.paging.complete(false);
|
|
this.outboundOrderNumber=""
|
|
this.focusInput="outboundOrderNumber"
|
|
},
|
|
//获取单号下的数据
|
|
queryList(pageNo, pageSize) {
|
|
if(!this.outboundOrderNumber) {
|
|
return
|
|
}
|
|
clearTimeout(this.timer1);
|
|
const params = {
|
|
pageNo:pageNo || 1,
|
|
pageSize: 10,
|
|
billNo:this.outboundOrderNumber,
|
|
};
|
|
this.timer1 = setTimeout(() => {
|
|
this.$api
|
|
.post(`/OutStockTask/GetInfoByNo`,params)
|
|
.then((res) => {
|
|
if (res.status == 200) {
|
|
this.$refs.paging.complete(res.data.details);
|
|
} else {
|
|
this.$refs.paging.complete(false);
|
|
this.setRefsPagingComplete()
|
|
}
|
|
}).catch(res=>{
|
|
this.setRefsPagingComplete()
|
|
})
|
|
},1000)
|
|
|
|
},
|
|
//回退
|
|
goback() {
|
|
uni.navigateTo({
|
|
url: '/pages/otherUnderwear/index'
|
|
});
|
|
},
|
|
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "@/static/public.scss";
|
|
|
|
.mianheade2 {
|
|
.pagetitle {
|
|
margin-left: 30%;
|
|
}
|
|
}
|
|
.item1 {
|
|
position: relative;
|
|
height: 150rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0rpx 30rpx;
|
|
}
|
|
|
|
.item1-detail {
|
|
padding: 5rpx 15rpx;
|
|
border-radius: 10rpx;
|
|
font-size: 28rpx;
|
|
color: white;
|
|
background-color: #007AFF;
|
|
}
|
|
|
|
.item1-line {
|
|
position: absolute;
|
|
bottom: 0rpx;
|
|
left: 0rpx;
|
|
height: 1px;
|
|
width: 100%;
|
|
background-color: #eeeeee;
|
|
}
|
|
.table--border {
|
|
// border:1rpx solid red
|
|
}
|
|
|
|
.th {
|
|
color: #505050;
|
|
// border-right: 1rpx solid #E3E5E8;
|
|
background-color:#F0F2F5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 10rpx;
|
|
font-weight: 900;
|
|
height: 44rpx;
|
|
}
|
|
.th-box {
|
|
margin: 0 24rpx;
|
|
padding:20rpx 20rpx 0 20rpx;
|
|
background-color: #fff;
|
|
border-top-left-radius: 12rpx;
|
|
border-top-right-radius: 12rpx;
|
|
}
|
|
.th-item {
|
|
box-sizing: border-box;
|
|
display:flex;
|
|
font-size:13px;
|
|
border: 1rpx solid #E3E5E8;
|
|
border-top: 1rpx solid #E3E5E8;
|
|
border-top-left-radius: 12rpx;
|
|
border-top-right-radius: 12rpx;
|
|
}
|
|
.td-box {
|
|
margin: 0 24rpx;
|
|
padding:0 20rpx 20rpx 20rpx;
|
|
background-color: #fff;
|
|
// border-bottom-left-radius: 12rpx;
|
|
// border-bottom-right-radius: 12rpx;
|
|
}
|
|
.td-box1 {
|
|
margin: 0 24rpx;
|
|
padding:0 20rpx 20rpx 20rpx;
|
|
background-color: #fff;
|
|
border-bottom-left-radius: 12rpx;
|
|
border-bottom-right-radius: 12rpx;
|
|
}
|
|
.td-item {
|
|
box-sizing: border-box;
|
|
display:flex;
|
|
font-size:13px;
|
|
border: 1rpx solid #E3E5E8;
|
|
border-top:none;
|
|
border-bottom-left-radius: 12rpx;
|
|
border-bottom-right-radius: 12rpx;
|
|
}
|
|
.td {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content:center;
|
|
text-align: center;
|
|
min-height: 140rpx;
|
|
background-color: #fff;
|
|
padding: 10rpx;
|
|
// border-right: 1rpx solid #E3E5E8;
|
|
// border-left: 1rpx solid #E3E5E8;
|
|
}
|
|
.br {
|
|
border-right: 1rpx solid #E3E5E8;
|
|
}
|
|
.wd {
|
|
word-wrap: break-word;
|
|
white-space:normal ;
|
|
word-break: break-all;
|
|
|
|
}
|
|
</style> |