1

yangpeixing

2026-04-01 f1bf3ef09713182d434e22dfd8623ea73e02d6d3

 ¼ª°²PDA/pages/stash/FLinboundorder.vue

@@ -2,66 +2,43 @@
   <view>
      <u-sticky>
         <view style="background-color: #ffffff;">
            <uni-search-bar @confirm="search" v-model="searchValue" @input="handleSearchInput"></uni-search-bar>
            <uni-search-bar @confirm="search" v-model="searchValue"></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;">
                        å…¥åº“单号：&nbsp;&nbsp;{{item.orderNo}} 
      <uni-list :border="true">
         <uni-list-item direction="column" clickable @click="groupClick(item.orderNo)" link
            :to="page+item.orderNo" v-for="item in allReceivingOrders" :key="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;">
                     å…¥åº“单号&nbsp;&nbsp;{{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;">
                     åˆ›å»ºäººå‘˜&nbsp;&nbsp;{{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;">
                     åˆ›å»ºæ—¥æœŸ&nbsp;&nbsp;{{item.createDate}} 
                  </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;">
                        è®¢å•çŠ¶æ€&nbsp;&nbsp;{{item.InboundOrderStatus}}
                     </view>
                     <view style="margin-top: 10rpx;line-height: 17px;color: #596671;font-size: 14px;text-align: center;display: flex;justify-content: space-between;">
                        åˆ›å»ºäººå‘˜ï¼š&nbsp;&nbsp;{{item.creater}} 
                     <view style="text-align: center;line-height: 40rpx;border-radius: 8rpx; width: 158rpx;height: 40rpx;font-size: 22rpx;color: #F56C6C;">
                        æ€»é‡&nbsp;&nbsp;{{item.SumQty}}
                     </view>
                     <view style="margin-top: 10rpx;line-height: 17px;color: #596671;font-size: 14px;text-align: center;display: flex;justify-content: space-between;">
                        åˆ›å»ºæ—¥æœŸï¼š&nbsp;&nbsp;{{item.createDate}} 
                     <view style="text-align: center;line-height: 40rpx;border-radius: 8rpx; width: 158rpx;height: 40rpx;font-size: 22rpx;color: #F56C6C;">
                        å·²å…¥&nbsp;&nbsp;{{item.OverQty}}
                     </view>
                     <view  style="margin-top: 10rpx;line-height: 17px;color: #596671;font-size: 14px;text-align: center;display: flex;justify-content: left;">
                        ç‰©æ–™æ–™å·ï¼š&nbsp;&nbsp;
                        <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;">
                           è®¢å•çŠ¶æ€ï¼š&nbsp;&nbsp;{{item.InboundOrderStatus}}
                        </view>
                        <view style="text-align: center;line-height: 40rpx;border-radius: 8rpx; width: 158rpx;height: 40rpx;font-size: 22rpx;color: #F56C6C;">
                           æ€»é‡ï¼š&nbsp;&nbsp;{{item.SumQty}}
                        </view>
                        <view style="text-align: center;line-height: 40rpx;border-radius: 8rpx; width: 158rpx;height: 40rpx;font-size: 22rpx;color: #F56C6C;">
                           å·²å…¥ï¼š&nbsp;&nbsp;{{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>
                  </view>
               </uni-group>
            </template>
         </uni-list-item>

         <u-back-top :scroll-top="scrollTop" top="400"></u-back-top>
      </view>
      </uni-list>
      <uni-load-more :status="status" v-if="loadVisible"></uni-load-more>

      <u-back-top :scroll-top="scrollTop" top="400"></u-back-top>
   </view>
</template>

@@ -73,182 +50,167 @@
            page: "/pages/stash/FLraworderboxing?",
            loadVisible: false,
            searchValue: "",
            status: "more", // more:加载更多, noMore:没有更多, loading:加载中
            allReceivingOrders: [], // æ‰€æœ‰æ•°æ®ï¼ˆå…¨éƒ¨åŠ è½½ç”¨äºŽå‰ç«¯ç­›é€‰ï¼‰
            originalOrders: [], // å­˜å‚¨åŽŸå§‹æ•°æ®
            pageNo: 1, // å½“前页码
            pageSize: 100, // å¢žå¤§æ¯é¡µæ¡æ•°ï¼Œä¸€æ¬¡æ€§åŠ è½½æ›´å¤šæ•°æ®ç”¨äºŽå‰ç«¯ç­›é€‰
            status: "more",
            allReceivingOrders: [],
            pageNo: 1,
            scrollTop: 0,
            warehouseId: "",
            isLoaded: false, // æ˜¯å¦ä»Žè¯¦æƒ…页返回
            isLoading: false, // é˜²æ­¢é‡å¤è¯·æ±‚
            hasMore: true, // æ˜¯å¦è¿˜æœ‰æ›´å¤šæ•°æ®
            isLoaded:false
         }
      },
      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();
         }
         this.pageNo += 1;
         this.getData();
         this.isLoaded=true;
      },
      // ä¼˜åŒ–：返回页面时仅刷新数据，不重置分页（保留滚动位置）
      onShow() {
         if (this.isLoaded) {
            // åˆ·æ–°å½“前页数据，保留分页和滚动位置
            this.refreshCurrentPage();
            this.isLoaded = false; // é‡ç½®çŠ¶æ€
            // ä»Žå…¶ä»–页面返回时刷新
            this.getData();
         }
      },
      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;
         search(res) {
            this.getData();
         },
			
         // æ ¸å¿ƒï¼šèŽ·å–数据（前端筛选方案）
         groupClick() {

         },
         getData() {
            // é˜²æ­¢é‡å¤è¯·æ±‚
            if (this.isLoading) return;
            this.isLoading = true;
            this.status = "loading"; // æ˜¾ç¤ºåŠ è½½ä¸­
				
            var postData = {
               MainData: {
                  warehouseId: this.warehouseId,
                  orderNo: "", // æœç´¢æ—¶ç•™ç©ºï¼Œå…¨éƒ¨åŠ è½½
                  pageNo: this.pageNo,
                  pageSize: this.pageSize // å¢žå¤§æ¯é¡µæ¡æ•°
                  orderNo: this.searchValue,
                  pageNo: this.pageNo
               },
            }
				
            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();
                  if (res.data.length > 0) {
                     if (this.searchValue == '') {
                        this.allReceivingOrders = 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),
                           OverQty: i.details.map(item => item.overInQuantity).reduce((prev, next) => prev + next, 0)
                        }));
                        // this.allReceivingOrders = res.data;
                        if (this.allReceivingOrders.length > 3) {
                           this.loadVisible = true;
                        } else {
                           this.loadVisible = false;
                        }
                     } else {
                        this.allReceivingOrders = 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),
                           OverQty: i.details.map(item => item.overInQuantity).reduce((prev, next) => prev + next, 0)
                        }));
                        if (this.allReceivingOrders.length > 3) {
                           this.loadVisible = true;
                        } else {
                           this.loadVisible = false;
                        }
                     }
                  } else {
                     // æ²¡æœ‰æœç´¢å€¼æ—¶æ˜¾ç¤ºæ‰€æœ‰æ•°æ®
                     this.allReceivingOrders = [...this.originalOrders];
                     this.status = 'noMore';
                     //this.allReceivingOrders = [];
                     this.loadVisible = true;
                  }
						
                  // åˆ¤æ–­æ˜¯å¦è¿˜æœ‰æ›´å¤šæ•°æ®
                  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 lang="scss">
   @import '@/common/uni-ui.scss';

   page {
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      background-color: #efeff4;
      min-height: 100%;
      height: auto;
   }

   .tips {
      color: #67c23a;
      font-size: 14px;
      line-height: 40px;
      text-align: center;
      background-color: #f0f9eb;
      height: 0;
      opacity: 0;
      transform: translateY(-100%);
      transition: all 0.3s;
   }

   .tips-ani {
      transform: translateY(0);
      height: 40px;
      opacity: 1;
   }

   .content {
      width: 100%;
      display: flex;
   }

   .list-picture {
      width: 100%;
      height: 145px;
   }

   .thumb-image {
      width: 100%;
      height: 100%;
   }

   .ellipsis {
      display: flex;
      overflow: hidden;
   }

   .uni-ellipsis-1 {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
   }

   .uni-ellipsis-2 {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
   }

   .customcss {
      display: flex;
      position: fixed;
      width: 100%;
      top: 10px;
      text-align: center;
      z-index: 999;
      left: 30px;
      height: 20%;
   }

   .footer {
      padding-top: 50%;
   }
</style>