<template>
|
<view>
|
<u-sticky>
|
<view style="background-color: #ffffff;">
|
<uni-search-bar @confirm="search" v-model="searchValue" @input="handleSearchInput"></uni-search-bar>
|
</view>
|
</u-sticky>
|
|
<!-- 优化：滚动容器高度计算更精准，添加ref用于滚动控制 -->
|
<view ref="scrollContainer" style="height: calc(100vh - 50px); overflow-y: auto; padding-bottom: 20rpx;">
|
<uni-list :border="true">
|
<uni-list-item
|
direction="column"
|
v-for="item in allReceivingOrders"
|
:key="item.orderNo"
|
clickable
|
@click="groupClick(item.orderNo)"
|
link
|
:to="page+item.orderNo"
|
>
|
<template v-slot:body>
|
<uni-group margin-top="20">
|
<view style="line-height: 17px;color: #596671;font-size: 14px;text-align: center;display: flex;justify-content: space-between;">
|
入库单号： {{item.orderNo}}
|
</view>
|
<view style="margin-top: 10rpx;line-height: 17px;color: #596671;font-size: 14px;text-align: center;display: flex;justify-content: space-between;">
|
创建人员： {{item.creater}}
|
</view>
|
<view style="margin-top: 10rpx;line-height: 17px;color: #596671;font-size: 14px;text-align: center;display: flex;justify-content: space-between;">
|
创建日期： {{item.createDate}}
|
</view>
|
<view style="margin-top: 10rpx;line-height: 17px;color: #596671;font-size: 14px;text-align: center;display: flex;justify-content: left;">
|
物料料号：
|
<view class="container">
|
<view v-for="(materielCode, index) in getUniqueMaterielCodes(item.details)" :key="index">
|
{{materielCode}}
|
<u-line color="blue" v-if="index < getUniqueMaterielCodes(item.details).length - 1" />
|
</view>
|
</view>
|
</view>
|
<view style="margin-top: 10rpx;display: flex;align-items: center; ">
|
<view style="text-align: center;line-height: 40rpx;border-radius: 8rpx; width: 238rpx;height: 40rpx;font-size: 22rpx;background-color:rgba(22,127,247,0.18);color: #1F63FF;">
|
订单状态： {{item.InboundOrderStatus}}
|
</view>
|
<view style="text-align: center;line-height: 40rpx;border-radius: 8rpx; width: 158rpx;height: 40rpx;font-size: 22rpx;color: #F56C6C;">
|
总量： {{item.SumQty}}
|
</view>
|
<view style="text-align: center;line-height: 40rpx;border-radius: 8rpx; width: 158rpx;height: 40rpx;font-size: 22rpx;color: #F56C6C;">
|
已入： {{item.OverQty}}
|
</view>
|
</view>
|
</uni-group>
|
</template>
|
</uni-list-item>
|
</uni-list>
|
<!-- 优化：仅当有数据且需要加载更多时显示加载组件 -->
|
<uni-load-more :status="status" v-if="loadVisible && allReceivingOrders.length > 0"></uni-load-more>
|
<!-- 空数据提示 -->
|
<view v-if="allReceivingOrders.length === 0 && !isLoading" style="text-align: center; padding: 100rpx 0; color: #999;">
|
暂无入库订单数据
|
</view>
|
|
<u-back-top :scroll-top="scrollTop" top="400"></u-back-top>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { InboundOrderStatus } from '../../common/config.js'
|
export default {
|
data() {
|
return {
|
page: "/pages/stash/JSraworderboxing?",
|
loadVisible: false,
|
searchValue: "",
|
status: "more", // more:加载更多, noMore:没有更多, loading:加载中
|
allReceivingOrders: [], // 所有数据（全部加载用于前端筛选）
|
originalOrders: [], // 存储原始数据
|
pageNo: 1, // 当前页码
|
pageSize: 100, // 增大每页条数，一次性加载更多数据用于前端筛选
|
scrollTop: 0,
|
warehouseId: "",
|
isLoaded: false, // 是否从详情页返回
|
isLoading: false, // 防止重复请求
|
hasMore: true, // 是否还有更多数据
|
}
|
},
|
onLoad(res) {
|
this.warehouseId = res.warehouseId;
|
this.page = this.page + "warehouseId=" + this.warehouseId + "&orderNo=";
|
// 初始化加载数据
|
this.resetPageData();
|
this.getData();
|
},
|
// 优化：上拉加载下一页（仅当有更多数据且未加载中时触发）
|
onReachBottom() {
|
if (this.hasMore && !this.isLoading && !this.searchValue) {
|
this.pageNo += 1;
|
this.getData();
|
}
|
},
|
// 优化：返回页面时仅刷新数据，不重置分页（保留滚动位置）
|
onShow() {
|
if (this.isLoaded) {
|
// 刷新当前页数据，保留分页和滚动位置
|
this.refreshCurrentPage();
|
this.isLoaded = false; // 重置状态
|
}
|
},
|
onPageScroll(e) {
|
this.scrollTop = e.scrollTop;
|
},
|
methods: {
|
// 物料料号去重（保留原有功能）
|
getUniqueMaterielCodes(details) {
|
if (!details || !Array.isArray(details)) return [];
|
const uniqueCodes = [...new Set(details.map(item => item.materielCode))];
|
return uniqueCodes;
|
},
|
|
// 搜索输入处理
|
handleSearchInput() {
|
// 如果搜索值为空，显示所有数据
|
if (this.searchValue === "") {
|
this.allReceivingOrders = [...this.originalOrders];
|
return;
|
}
|
|
// 模糊查询
|
const searchText = this.searchValue.toLowerCase().trim();
|
|
// 同时匹配入库单号和物料料号
|
this.allReceivingOrders = this.originalOrders.filter(item => {
|
// 1. 匹配入库单号
|
if (item.orderNo && item.orderNo.toLowerCase().includes(searchText)) {
|
return true;
|
}
|
|
// 2. 匹配物料料号
|
if (item.details && item.details.length > 0) {
|
return item.details.some(detail =>
|
detail.materielCode && detail.materielCode.toLowerCase().includes(searchText)
|
);
|
}
|
|
return false;
|
});
|
},
|
|
// 搜索方法（前端筛选）
|
search() {
|
this.handleSearchInput();
|
},
|
|
// 点击列表项（标记为已加载，返回时刷新）
|
groupClick() {
|
this.isLoaded = true;
|
},
|
|
// 重置分页数据（搜索/初始化时调用）
|
resetPageData() {
|
this.pageNo = 1;
|
this.allReceivingOrders = [];
|
this.originalOrders = [];
|
this.hasMore = true;
|
this.status = "more";
|
this.loadVisible = false;
|
},
|
|
// 刷新当前页数据（返回详情页时调用，保留滚动位置）
|
refreshCurrentPage() {
|
const currentPage = this.pageNo;
|
this.resetPageData();
|
this.pageNo = currentPage;
|
this.getData();
|
},
|
|
// 核心：获取数据（前端筛选方案）
|
getData() {
|
// 防止重复请求
|
if (this.isLoading) return;
|
this.isLoading = true;
|
this.status = "loading"; // 显示加载中
|
|
var postData = {
|
MainData: {
|
warehouseId: this.warehouseId,
|
orderNo: "", // 搜索时留空，全部加载
|
pageNo: this.pageNo,
|
pageSize: this.pageSize // 增大每页条数
|
},
|
}
|
|
this.$u.post('/api/InboundOrder/GetInboundOrders', postData).then((res) => {
|
this.isLoading = false; // 重置加载状态
|
|
if (res.status) {
|
const newData = res.data.map(i => ({
|
...i,
|
InboundOrderStatus: InboundOrderStatus.find(item => item.value == i.orderStatus)?.label || "未知状态",
|
SumQty: i.details?.map(item => item.orderQuantity).reduce((prev, next) => prev + next, 0) || 0,
|
OverQty: i.details?.map(item => item.overInQuantity).reduce((prev, next) => prev + next, 0) || 0
|
}));
|
|
// 存储到原始数据
|
this.originalOrders = [...this.originalOrders, ...newData];
|
|
// 如果有搜索值，应用筛选
|
if (this.searchValue) {
|
this.handleSearchInput();
|
} else {
|
// 没有搜索值时显示所有数据
|
this.allReceivingOrders = [...this.originalOrders];
|
}
|
|
// 判断是否还有更多数据
|
if (newData.length < this.pageSize) {
|
this.hasMore = false;
|
this.status = "noMore"; // 显示"没有更多"
|
} else {
|
this.hasMore = true;
|
this.status = "more"; // 显示"加载更多"
|
}
|
|
// 控制加载组件显示（搜索时不显示加载更多）
|
this.loadVisible = this.originalOrders.length > 0 && this.hasMore && !this.searchValue;
|
} else {
|
// 接口请求失败
|
this.status = "noMore";
|
this.loadVisible = false;
|
this.$u.toast("数据加载失败，请重试");
|
}
|
}).catch((err) => {
|
this.isLoading = false;
|
this.status = "noMore";
|
this.loadVisible = false;
|
this.$u.toast("网络异常，请检查网络");
|
})
|
},
|
},
|
}
|
</script>
|
|
<style scoped>
|
/* 优化：物料料号换行显示，防止横向溢出 */
|
.container {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 10rpx;
|
}
|
.container view {
|
white-space: nowrap;
|
}
|
</style>
|
