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
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>
|
|
|