You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

304 lines
7.7 KiB

<!-- 基于z-paging封装个性化分页组件演示(vue) -->
<template>
<view class="">
<com-blank-view @goScan='openScanPopup' v-if="itemCode==''"></com-blank-view>
<!-- 这里就很整洁了,只要设置ref,绑定query事件,绑定list就可以了 -->
<my-paging v-show="itemCode!=''" ref="paging" v-model="dataList" @query="queryList">
<!-- 需要固定在顶部不滚动的view放在slot="top"的view中,如果需要跟着滚动,则不要设置slot="top" -->
<template #top>
<view v-if="itemDetail!=undefined">
<item-info :itemdetail='itemDetail'></item-info>
<u-line />
<z-tabs :list="tabList" @change="tabChange" />
</view>
</template>
<view class="" style="padding-bottom: 50rpx;">
<comItemDetailCard v-if="tabIndex == 0" :itemList="dataList" :isShowPack="false" style='margin: 10rpx;'>
</comItemDetailCard>
<comItemDetailCard v-if="tabIndex == 1" :itemList="dataList" style='margin: 10rpx;'>
</comItemDetailCard>
<comItemDetailCard v-if="tabIndex == 2" :itemList="dataList" :isShowLocation="false"
:isShowBusiness="true"></comItemDetailCard>
<comItemDetailCard v-if="tabIndex == 3" :itemList="dataList" :isShowLocation="false"
:isShowBusiness="true">
</comItemDetailCard>
</view>
</my-paging>
<win-scan-button @goScan='openScanPopup' v-if="itemCode!=''"></win-scan-button>
<win-scan-item ref="scanPopup" title='物料代码' @getScanCode='getScanCode'>
</win-scan-item>
<comMessage ref="comMessage"></comMessage>
</view>
</template>
<script>
import {
getExpectoutByItemcode,
getExpectinByItemcode,
getBalanceByItemCode,
getBasicItemByCode,
getBalanceSummary
} from '@/api/request2.js';
import {
goHome
} from '@/common/basic.js';
import itemInfo from '@/mycomponents/item/itemInfo.vue'
import comBlankView from '@/mycomponents/common/comBlankView.vue'
import winScanItem from '@/mycomponents/scan/winScanItem.vue'
import winScanButton from '@/mycomponents/scan/winScanButton.vue'
import comItemDetailCard from '@/pages/query/coms/comItemDetailCard.vue'
import comMessage from '@/mycomponents/common/comMessage.vue'
export default {
components: {
itemInfo,
comBlankView,
winScanItem,
winScanButton,
comItemDetailCard,
comMessage
},
data() {
return {
//v-model绑定的这个变量不要在分页请求结束中自己赋值!!!
dataList: [],
tabList: ['汇总', '明细', '预计入', '预计出'],
tabIndex: 0,
itemDetail: undefined,
itemCode: '',
balances: [],
}
},
//返回首页
onNavigationBarButtonTap(e) {
if (e.index === 0) {
goHome();
}
},
mounted() {
this.openScanPopup();
},
methods: {
openScanPopup() {
this.$refs.scanPopup.openScanPopup();
},
closeScanPopup() {
this.$refs.scanPopup.closeScanPopup();
},
getScanCode(code) {
if (code == "") {
this.showMessage('零件号不能为空')
return;
}
this.itemCode = '';
this.getItemInfo(code);
},
getItemInfo(code) {
uni.showLoading({
title: "正在查询零件信息...",
mask: true
});
getBasicItemByCode(code).then(res => {
uni.hideLoading();
if (res.data.list.length > 0) {
this.closeScanPopup();
this.itemCode = res.data.list[0].code;
this.itemDetail = res.data.list[0];
this.tabChange(0)
} else {
this.showMessage('未查找到零件【' + code + '】');
}
}).catch(error => {
uni.hideLoading();
this.itemCode = "";
this.showMessage(error);
})
},
// 汇总
getSummary(pageNo, pageSize) {
uni.showLoading({
title: "加载中...",
mask: true
});
var params = {
itemCode: this.itemCode,
pageNo: pageNo,
pageSize: pageSize
}
console.log("getSummary", pageNo)
getBalanceSummary(params).then(res => {
uni.hideLoading();
if (res.data.list.length > 0) {
this.$refs.paging.complete(res.data.list);
} else {
this.$refs.paging.complete(false);
this.showMessage('未查找到零件【' + this.itemCode + '】');
}
}).catch(error => {
this.$refs.paging.complete(false);
uni.hideLoading();
this.showMessage(error);
})
},
//明细
getDetailList(pageNo, pageSize) {
uni.showLoading({
title: "加载中...",
mask: true
});
var params = {
itemCode: this.itemCode,
pageNo: pageNo,
pageSize: pageSize
}
getBalanceByItemCode(params).then(res => {
uni.hideLoading();
if (res.data.list.length > 0) {
this.$refs.paging.complete(res.data.list);
} else {
this.$refs.paging.complete(false);
this.showMessage('未查找到零件【' + this.itemCode + '】');
}
}).catch(error => {
this.$refs.paging.complete(false);
uni.hideLoading();
this.showMessage(error);
})
},
ontabtap(e) {
let index = e.target.dataset.current || e.currentTarget.dataset.current;
this.tabIndex = index;
this.getContentByTab(index);
},
getContentByTab(index, pageNo, pageSize) {
if (index === 0) this.getSummary(pageNo, pageSize);
else if (index === 1) this.getDetailList(pageNo, pageSize);
else if (index === 2) {
this.getExpectin(pageNo, pageSize);
} else if (index == 3) {
this.getExpectout(pageNo, pageSize);
}
},
//预计入
getExpectin(pageNo, pageSize) {
uni.showLoading({
title: "加载中...",
mask: true
});
var params = {
itemCode: this.itemCode,
pageNo: pageNo,
pageSize: pageSize
}
getExpectinByItemcode(params).then(res => {
uni.hideLoading();
if (res.data.total > 0) {
this.$refs.paging.complete(res.data.list);
} else {
this.showMessage('未查找到零件【' + this.itemCode + '】');
}
}).catch(error => {
this.$refs.paging.complete(false);
uni.hideLoading();
this.showMessage(error);
})
},
//预计出
getExpectout(pageNo, pageSize) {
uni.showLoading({
title: "加载中...",
mask: true
});
var params = {
itemCode: this.itemCode,
pageNo: pageNo,
pageSize: pageSize
}
getExpectoutByItemcode(params).then(res => {
uni.hideLoading();
if (res.data.total > 0) {
this.$refs.paging.complete(res.data.list);
} else {
this.$refs.paging.complete(false);
this.showMessage('未查找到零件【' + this.itemCode + '】');
}
}).catch(error => {
this.$refs.paging.complete(false);
uni.hideLoading();
this.showMessage(error);
})
},
showMessage(message) {
this.$refs.comMessage.showErrorMessage(message, res => {
if (res) {
this.afterCloseMessage()
}
});
},
afterCloseMessage() {
if (this.$refs.scanPopup != undefined) {
this.$refs.scanPopup.getfocus();
}
},
tabChange(index) {
this.tabIndex = index;
this.$refs.paging.reload(true);
},
queryList(pageNo, pageSize) {
console.log("加载", pageNo)
if (this.itemCode != "") {
this.getContentByTab(this.tabIndex, pageNo, pageSize)
}
},
itemClick(item) {
console.log('点击了', item.title);
}
}
}
</script>
<style>
.notice {
background-color: red;
color: white;
display: flex;
flex-direction: column;
padding: 12rpx 20rpx;
font-size: 24rpx;
}
.item {
position: relative;
height: 150rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0rpx 30rpx;
}
.item-detail {
padding: 5rpx 15rpx;
border-radius: 10rpx;
font-size: 28rpx;
color: white;
background-color: #007AFF;
}
.item-line {
position: absolute;
bottom: 0rpx;
left: 0rpx;
height: 1px;
width: 100%;
background-color: #eeeeee;
}
</style>