561 lines
17 KiB
Vue
561 lines
17 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: inputVal }" :style="{ 'pointer-events': inputVal ? '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="" style="display: flex;padding: 10rpx 0; margin:0 40rpx;border-bottom: 1rpx solid #E3E5E8; box-sizing: border-box;">
|
||
<view style="border-right: 1rpx solid #E3E5E8;padding-right: 16rpx;">
|
||
<uni-data-select
|
||
v-model="selectValue"
|
||
:localdata="options"
|
||
@change="hanldeSelectChange"
|
||
:clear="false"
|
||
|
||
></uni-data-select>
|
||
</view>
|
||
<view style="display: flex; align-items: center;justify-content: center;">
|
||
<u-input :focus="focusTag==='box'" @clear="handleClear" border="bottom" :style="{width: inputWidth}" style="font-size: 14px; height:32rpx;"clearable v-model="inputVal" @confirm="handleInputConfirm()"
|
||
></u-input>
|
||
</view>
|
||
<view style="display: flex;align-items: center;"@click="scanImg('box')">
|
||
<image src="../../static/img/smico.png" class="searchico" style="margin-left:0;"></image>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view :style="{height:navHeight+formHeight+30+'rpx'}"></view>
|
||
<view style="padding: 20rpx 16rpx 0;background-color: #fff;margin:0 24rpx;border-top-left-radius: 12rpx;border-top-right-radius: 12rpx;">
|
||
<!-- 详情 -->
|
||
<view style="font-size: 14px;padding-left:12rpx;color: #717275;">
|
||
<view v-if="selectValue===1">
|
||
<view style="padding-bottom: 10rpx;">
|
||
<text>查询物料为</text>
|
||
<text style="margin: 0 10rpx;">:</text>
|
||
<text style="color:#222222">{{specifications}}</text>
|
||
</view>
|
||
<view style="padding-bottom: 10rpx; display: flex;">
|
||
<view style="width: 140rpx;text-align-last: justify;">物料编码</view>
|
||
<view style="margin: 0 10rpx;">:</view>
|
||
<view style="color:#222222" >{{materialNumber}}</view>
|
||
</view>
|
||
<view style="padding-bottom: 10rpx; display: flex;">
|
||
<view style="width: 140rpx;text-align-last: justify;">物料名称</view>
|
||
<view style="margin: 0 10rpx;">:</view>
|
||
<view style="color:#222222">{{materialName}}</view>
|
||
</view>
|
||
<view style="padding-bottom: 10rpx; display: flex;">
|
||
<view style="width: 140rpx;text-align-last: justify;">库存总数</view>
|
||
<view style="margin: 0 10rpx;">:</view>
|
||
<view style="color:#222222">{{totalQty}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 箱号详情 -->
|
||
<view v-if="selectValue===2">
|
||
<view style="padding-bottom: 10rpx; display: flex;">
|
||
<view>查询箱号为</view>
|
||
<view style="margin: 0 10rpx;">:</view>
|
||
<view style="color:#4178D5" @click="goInventory()">{{boxBillNo}}</view>
|
||
</view>
|
||
<view style="padding-bottom: 10rpx;display: flex;">
|
||
<view style="width: 140rpx;text-align-last: justify;">所在仓位</view>
|
||
<view style="margin: 0 10rpx;">:</view>
|
||
<view style="color:#222222">{{subStock}}</view>
|
||
</view>
|
||
<view style="padding-bottom: 10rpx;display: flex;">
|
||
<view style="width: 140rpx;text-align-last: justify;">库存总数</view>
|
||
<view style="margin: 0 10rpx;">:</view>
|
||
<view style="color:#222222">{{totalQty}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 仓位详情 -->
|
||
<view v-if="selectValue===3">
|
||
<view style="padding-bottom: 10rpx;display: flex;">
|
||
<view>查询仓位为</view>
|
||
<view style="margin: 0 10rpx;">:</view>
|
||
<view style="color:#222222">{{subStock}}</view>
|
||
</view>
|
||
<view style="padding-bottom: 10rpx;display: flex;">
|
||
<view style="width: 140rpx;text-align-last: justify;">库存总数</view>
|
||
<view style="margin: 0 10rpx;">:</view>
|
||
<view style="color:#222222">{{totalQty}}</view>
|
||
</view>
|
||
</view>
|
||
<view style="font-weight: 900;padding-top: 10rpx;padding-bottom: 12rpx;color:#222222">
|
||
库存详情 :
|
||
</view>
|
||
</view>
|
||
<!-- 库存详情表格 -->
|
||
<!-- 物料 -->
|
||
<view class="th-item" v-if="selectValue===1" >
|
||
<view class="th br" style="width: 210rpx;">箱号</view>
|
||
<view class="th br" style="width: 360rpx;">仓位</view>
|
||
<view class="th" style="width: 80rpx;">数量</view>
|
||
</view>
|
||
<!-- 箱号 -->
|
||
<view class="th-item" v-if="selectValue===2">
|
||
<view class="th br" style="width: 570rpx;">规格型号</view>
|
||
<view class="th" style="width: 80rpx;">数量</view>
|
||
</view>
|
||
<!-- 仓位 -->
|
||
<view class="th-item" v-if="selectValue===3">
|
||
<view class="th br" style="width: 210rpx;">箱号</view>
|
||
<view class="th br" style="width: 360rpx;">规格型号</view>
|
||
<view class="th" style="width: 80rpx;">数量</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<!-- border-bottom-left-radius: 12rpx;border-bottom-right-radius: 12rpx; -->
|
||
<view :class="dataList.length ? 'c-box':'c-box1'">
|
||
<!-- 物料 -->
|
||
<view v-if="selectValue===1">
|
||
<view class="td-item" v-for="(item,index) in dataList" :key="index" >
|
||
<view class="td br wd" style="width: 210rpx;color:#4178D5" @click="goInventory(item)">{{item.boxBillNo}}</view>
|
||
<view class="td br wd" style="width: 360rpx;">{{item.subStock}}</view>
|
||
<view class="td wd" style="width: 80rpx;">{{item.qty}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 箱号 -->
|
||
<view v-if="selectValue===2">
|
||
<view class="td-item" v-for="(item,index) in dataList" :key="index" >
|
||
<view class="td br wd" style="width: 570rpx;">{{item.specifications}}</view>
|
||
<view class="td wd" style="width: 80rpx;">{{item.qty}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 仓位 -->
|
||
<view v-if="selectValue===3">
|
||
<view class="td-item" v-for="(item,index) in dataList" :key="index" >
|
||
<view class="td br wd" style="width: 210rpx;color:#4178D5" @click="goInventory(item)">{{item.boxBillNo}}</view>
|
||
<view class="td br wd" style="width: 360rpx;">{{item.specifications}}</view>
|
||
<view class="td wd" style="width: 80rpx;">{{item.qty}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</z-paging>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
|
||
export default {
|
||
|
||
data() {
|
||
return {
|
||
navHeight:0,
|
||
formHeight:0,
|
||
options:[
|
||
{value:1,text:'物料'},
|
||
{value:2,text:'箱号'},
|
||
{value:3,text:'仓位'}
|
||
],
|
||
selectValue:1,//下拉框值
|
||
materialName:"",//物料名称
|
||
materialNumber:"",//物料编码
|
||
specifications:"",//规格型号
|
||
totalQty:"",//总数量
|
||
subStock:"",//仓位名称
|
||
boxBillNo:"CTN00051426",//箱号
|
||
dataList: [],//列表数据
|
||
focusTag: '', // 判断聚焦
|
||
warehouseName: '', // 选择后的仓库名称
|
||
warehouseCode: '', // 选择后的仓库编码
|
||
warehouseList:[],//仓库列表数据
|
||
inputVal:'',//input输入值
|
||
timer:null,
|
||
inputWidth:"470rpx",
|
||
timer1:null,
|
||
APPdevice: uni.getStorageSync('devicePixelRatio'), // 缓存设备的像素比用来区分普通安卓normalAnroid还是pda
|
||
scanTracker: {
|
||
lastScanTime: 0,
|
||
lastScanCode: null
|
||
} // 源头处理扫码段时间内重复扫
|
||
};
|
||
},
|
||
|
||
onReady() {
|
||
this.getElHeight(".sh_gdInfo",1)
|
||
this.getElHeight(".mianheade",2)
|
||
/* #ifdef H5 */
|
||
this.inputWidth = '470rpx'
|
||
/*#endif*/
|
||
/*#ifdef APP-PLUS*/
|
||
this.inputWidth = '422rpx'
|
||
/*#endif*/
|
||
|
||
},
|
||
onLoad() {
|
||
//获取广播扫码监听
|
||
this.$broadcastScan.init(this.getScancode);
|
||
this.$broadcastScan.start();
|
||
this.stopScanCode();
|
||
this.startScanCode();
|
||
this.getStock()
|
||
// this.$refs.paging.complete([]);
|
||
// this.queryList(1,10);
|
||
|
||
},
|
||
onHide() {
|
||
this.$broadcastScan.stop();
|
||
this.stopScanCode();
|
||
|
||
},
|
||
onShow() {
|
||
this.$broadcastScan.start();
|
||
this.startScanCode();
|
||
},
|
||
onBackPress(e) {
|
||
this.$util.appgoBack(e, 'otherUnderwearIndex');
|
||
return true;
|
||
},
|
||
|
||
watch: {
|
||
inputVal(n) {
|
||
if(!n) {
|
||
this.dataList=[]
|
||
//表格刷新
|
||
this.tableReload()
|
||
return
|
||
}
|
||
},
|
||
|
||
},
|
||
methods: {
|
||
//获取元素高度
|
||
getElHeight(el,type){
|
||
this.$nextTick(()=>{
|
||
uni.createSelectorQuery().select(el).boundingClientRect((data) => {
|
||
if (data) {
|
||
if(type===1) {
|
||
|
||
/* #ifdef H5 */
|
||
this.navHeight = data.height
|
||
/*#endif*/
|
||
/*#ifdef APP-PLUS*/
|
||
this.navHeight = data.height+20
|
||
/*#endif*/
|
||
}else if(type===2) {
|
||
/* #ifdef H5 */
|
||
this.formHeight = data.height
|
||
/*#endif*/
|
||
/*#ifdef APP-PLUS*/
|
||
this.formHeight = data.height+20
|
||
/*#endif*/
|
||
}
|
||
}
|
||
}).exec();
|
||
})
|
||
},
|
||
// 开启广播
|
||
startScanCode() {
|
||
uni.$on('xwscan', (res) => {
|
||
const now = Date.now();
|
||
const timeSinceLastScan = now - this.scanTracker.lastScanTime;
|
||
// 如果扫描的箱码和上次相同，并且时间间隔小于500ms，则不作处理
|
||
if (res.code === this.scanTracker.lastScanCode && timeSinceLastScan < 4000) {
|
||
return;
|
||
} else {
|
||
// 更新扫描跟踪信息
|
||
this.scanTracker.lastScanTime = now;
|
||
this.scanTracker.lastScanCode = res.code;
|
||
this.getScancode(res.code);
|
||
}
|
||
});
|
||
},
|
||
// 关闭广播
|
||
stopScanCode() {
|
||
uni.$off('xwscan');
|
||
},
|
||
// 普通安卓设备碘酒扫描图标扫描
|
||
scanImg(type) {
|
||
if (this.APPdevice == 'normalAnroid') {
|
||
this.$util.doScanQrCode().then((res) => {
|
||
this.focusTag = type;
|
||
this.getScancode(res.result);
|
||
});
|
||
}
|
||
},
|
||
// 获取扫描的值
|
||
getScancode(code, index, wlcode) {
|
||
// 有些PDA会自带换行符，trim函数处理下
|
||
this.inputVal = '';
|
||
this.dataList=[];
|
||
this.inputVal= code.trim();
|
||
//表格刷新
|
||
this.tableReload()
|
||
this.queryList(1,10);
|
||
},
|
||
//仓库
|
||
handleWareHouseChange(e) {
|
||
//仓库名称
|
||
this.warehouseName = e.name;
|
||
//仓库code
|
||
this.warehouseCode = e.code+`_$${e.erpOrgCode}`;
|
||
this.tableReload()
|
||
this.setInputTagBox()
|
||
},
|
||
|
||
//获取仓库数据
|
||
getStock() {
|
||
this.$api.get('/SysConfig/GetUcStock').then((res) => {
|
||
if (res.status == 200) {
|
||
this.warehouseList = res.data;
|
||
}
|
||
});
|
||
},
|
||
//软键盘确认
|
||
handleInputConfirm() {
|
||
this.dataList=[];
|
||
//表格刷新
|
||
this.tableReload()
|
||
this.queryList(1,10);
|
||
},
|
||
//清空获取的值
|
||
clearValue(){
|
||
this.materialName="";//物料名称
|
||
this.materialNumber="";//物料编码
|
||
this.specifications="";//规格型号
|
||
this.totalQty="";//总数量
|
||
this.subStock="";//仓位名称
|
||
this.boxBillNo="";//箱号
|
||
this.inputVal = "";//input输入框
|
||
this.dataList =[];//表格数据
|
||
},
|
||
//表格刷新
|
||
tableReload() {
|
||
this.$refs.paging.reload().catch(() => {});
|
||
},
|
||
//下拉框改变
|
||
hanldeSelectChange(e) {
|
||
this.clearValue();
|
||
//表格刷新
|
||
this.tableReload()
|
||
this.setInputTagBox()
|
||
},
|
||
//设置input聚焦
|
||
setInputTagBox() {
|
||
this.focusTag="";
|
||
setTimeout(()=>{
|
||
this.focusTag="box";
|
||
},200)
|
||
},
|
||
//库存详情赋值
|
||
setDetailsValue(data) {
|
||
const {materialNumber,materialName,specifications,subStock,boxBillNo,totalQty} = data
|
||
console.log(totalQty,'=totalQty=')
|
||
this.totalQty = totalQty ;
|
||
this.materialNumber = materialNumber;
|
||
this.materialName = materialName;
|
||
this.specifications = specifications;
|
||
this.subStock = subStock ;
|
||
this.boxBillNo = boxBillNo;
|
||
},
|
||
//表格數據
|
||
queryList(pageNo, pageSize) {
|
||
//空值直接return
|
||
if(!this.inputVal) {
|
||
return
|
||
}
|
||
clearTimeout(this.timer1);
|
||
//根据不同的this.selectValue值匹配不同的后端接口
|
||
//说明:1为物料 2为箱号 3仓位
|
||
const url = {
|
||
1:"/Inventory/GetPagedListBoxByMaterial",
|
||
2:"/Inventory/GetPagedListBoxByBox",
|
||
3:"/Inventory/GetPagedListBoxBySubStock",
|
||
};
|
||
//根据不同的this.selectValue的值匹配不同的参数传给后端
|
||
const selectValCloneParams = {
|
||
1:'materialNumber',
|
||
2:'boxBillNo',
|
||
3:'subStock'
|
||
};
|
||
//接口基本參數
|
||
const params = {
|
||
pageNo:pageNo,
|
||
pageSize: 10,
|
||
stockCode:this.warehouseCode,//仓库编码
|
||
};
|
||
//选择后的this.selectValue值
|
||
let paramsItem = selectValCloneParams[this.selectValue]
|
||
//将选择后的selectValue和用户输入的input值添加到params中
|
||
params[paramsItem] = this.inputVal;
|
||
this.timer1 = setTimeout(() => {
|
||
this.$api
|
||
.post(url[this.selectValue],params)
|
||
.then((res) => {
|
||
if (res.status == 200) {
|
||
//如果res.data.details是一个空数组直接返回不进行赋值操作
|
||
// if(!res.data.totalCount) {
|
||
// this.$refs.paging.complete(res.data.details);
|
||
// return;
|
||
// }
|
||
this.$refs.paging.complete(res.data.details);
|
||
this.setDetailsValue(res.data)
|
||
} else {
|
||
this.$refs.paging.complete(false);
|
||
this.inputVal=""
|
||
this.setInputTagBox()
|
||
}
|
||
}).catch(res=>{
|
||
this.$refs.paging.complete(false);
|
||
this.inputVal=""
|
||
this.setInputTagBox()
|
||
})
|
||
},1000)
|
||
},
|
||
handleClear() {
|
||
this.clearValue()
|
||
this.setInputTagBox()
|
||
},
|
||
//跳转到盘点
|
||
goInventory(item) {
|
||
let boxBillNo = item && item.boxBillNo ? item.boxBillNo:this.boxBillNo
|
||
//跳转盘点時需要去掉warehouseCodeClone拼接的org，老接口的warehouseCodeClone是没有进行org拼接的.
|
||
let warehouseCodeClone = JSON.stringify(this.warehouseCode)
|
||
let warehouseCode = JSON.parse(warehouseCodeClone).split("_")[0];
|
||
uni.navigateTo({
|
||
url:`/pages/Inventory/index?warehouseName=${this.warehouseName}&warehouseCode=${warehouseCode}&boxBillNo=${boxBillNo}`
|
||
})
|
||
},
|
||
//回退
|
||
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;
|
||
}
|
||
|
||
::v-deep .uni-select {
|
||
border:none !important;
|
||
height:24px;
|
||
width: 100rpx;
|
||
padding-right: 0;
|
||
padding-left: 3rpx;
|
||
text-align: center;
|
||
margin-left: -7rpx;
|
||
}
|
||
.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-item {
|
||
box-sizing: border-box;
|
||
display:flex;
|
||
font-size:13px;
|
||
border: 1rpx solid #E3E5E8;
|
||
border-top-left-radius: 12rpx;
|
||
border-top-right-radius: 12rpx;
|
||
}
|
||
.td-item {
|
||
box-sizing: border-box;
|
||
display:flex;
|
||
font-size:13px;
|
||
border: 1rpx solid #E3E5E8;
|
||
border-top:none;
|
||
}
|
||
.td {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content:center;
|
||
text-align: center;
|
||
min-height: 90rpx;
|
||
background-color: #fff;
|
||
padding: 10rpx;
|
||
}
|
||
.br {
|
||
border-right: 1rpx solid #E3E5E8;
|
||
}
|
||
.wd {
|
||
word-wrap: break-word;
|
||
white-space:normal ;
|
||
word-break: break-all;
|
||
}
|
||
.c-box {
|
||
padding:0rpx 16rpx 20rpx 16rpx;
|
||
background-color: #fff;
|
||
margin:0 24rpx;
|
||
border-bottom-left-radius: 12rpx;
|
||
border-bottom-right-radius: 12rpx;
|
||
}
|
||
.c-box1 {
|
||
padding:0rpx 16rpx 20rpx 16rpx;
|
||
background-color: #fff;
|
||
margin:0 24rpx;
|
||
}
|
||
</style> |