1
wankeda
2026-03-31 36edb698388e79272608312820d869ab6f7cb304
¼ª°²PDA/pages/stash/inboundorder.vue
@@ -1,193 +1,216 @@
<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>
   <view>
      <u-sticky>
         <view style="background-color: #ffffff;">
            <uni-search-bar @confirm="search" v-model="searchValue"></uni-search-bar>
         </view>
      </u-sticky>
      <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="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 :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 }}
            </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;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-list>
      <uni-load-more :status="status" v-if="loadVisible"></uni-load-more>
    <!-- ç§»é™¤åŠ è½½æ›´å¤šç»„ä»¶ï¼Œå› ä¸ºä¸åˆ†é¡µäº† -->
    <!-- <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>
      <u-back-top :scroll-top="scrollTop" top="400"></u-back-top>
   </view>
</template>
<script>
import { InboundOrderStatus } from '../../common/config.js';
   import { InboundOrderStatus } from '../../common/config.js'
   export default {
      data() {
         return {
            page: "/pages/stash/raworderboxing?",
            loadVisible: false,
            searchValue: "",
            status: "more",
            allReceivingOrders: [],
            pageNo: 1,
            scrollTop: 0,
            warehouseId: "",
            isLoaded:false
         }
      },
      onLoad(res) {
         this.warehouseId = res.warehouseId;
         this.page = this.page + "warehouseId=" + this.warehouseId + "&orderNo=";
         this.getData();
      },
      onReachBottom() {
         this.pageNo += 1;
         this.getData();
         this.isLoaded=true;
      },
      onShow() {
         if (this.isLoaded) {
            // ä»Žå…¶ä»–页面返回时刷新
            this.getData();
         }
      },
      onPageScroll(e) {
         this.scrollTop = e.scrollTop;
      },
      methods: {
         search(res) {
            this.getData();
         },
         groupClick() {
export default {
  data() {
    return {
      page: '/pages/stash/raworderboxing?',
      searchValue: '',
      allReceivingOrders: [], // æ˜¾ç¤ºåœ¨å‰ç«¯çš„æ•°æ®ï¼ˆå¯èƒ½è¢«æœç´¢è¿‡æ»¤ï¼‰
      originalOrders: [], // å­˜å‚¨æ‰€æœ‰åŽŸå§‹æ•°æ®
      scrollTop: 0,
      warehouseId: '',
      isLoaded: false, // æ˜¯å¦ä»Žè¯¦æƒ…页返回
      isLoading: false, // é˜²æ­¢é‡å¤è¯·æ±‚
    };
  },
  onLoad(res) {
    this.warehouseId = res.warehouseId;
    this.page = this.page + 'warehouseId=' + this.warehouseId + '&orderNo=';
    // ç›´æŽ¥åŠ è½½å…¨éƒ¨æ•°æ®ï¼ˆä¸åˆ†é¡µï¼‰
    this.getAllData();
  },
  onShow() {
    // ä»Žè¯¦æƒ…页返回时,如果数据已被修改,可以重新加载
    if (this.isLoaded) {
      this.getAllData();
      this.isLoaded = false;
    }
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  methods: {
    // ç‰©æ–™æ–™å·åŽ»é‡
    getUniqueMaterielCodes(details) {
      if (!details || !Array.isArray(details)) return [];
      return [...new Set(details.map(item => item.materielCode))];
    },
    // æœç´¢è¾“入处理(前端筛选)
    handleSearchInput() {
      if (this.searchValue === '') {
        this.allReceivingOrders = [...this.originalOrders];
        return;
      }
      const searchText = this.searchValue.toLowerCase().trim();
      this.allReceivingOrders = this.originalOrders.filter(item => {
        if (item.orderNo && item.orderNo.toLowerCase().includes(searchText)) {
          return true;
        }
        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;
    },
    // ä¸€æ¬¡æ€§èŽ·å–æ‰€æœ‰æ•°æ®ï¼ˆä¸åˆ†é¡µï¼‰
    getAllData() {
      if (this.isLoading) return;
      this.isLoading = true;
      // è®¾ç½®ä¸€ä¸ªè¶³å¤Ÿå¤§çš„ pageSize æ¥èŽ·å–æ‰€æœ‰æ•°æ®ï¼ˆæ ¹æ®æŽ¥å£æœ€å¤§é™åˆ¶è°ƒæ•´ï¼‰
      const postData = {
        MainData: {
          warehouseId: this.warehouseId,
          orderNo: '',
          pageNo: 1,
          pageSize: 9999, // å‡è®¾æŽ¥å£æ”¯æŒè¿™ä¹ˆå¤§çš„分页
        },
      };
      this.$u
        .post('/api/InboundOrder/GetInboundOrders', postData)
        .then(res => {
          this.isLoading = false;
          if (res.status) {
         console.log(res.data);
            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 = newData; // ç›´æŽ¥æ›¿æ¢ï¼Œä¸åˆ†é¡µè¿½åŠ 
            // æ ¹æ®æœç´¢è¯è¿‡æ»¤æ˜¾ç¤º
            if (this.searchValue) {
              this.handleSearchInput();
            } else {
              this.allReceivingOrders = [...this.originalOrders];
            }
          } else {
            this.$u.toast('数据加载失败,请重试');
          }
        })
        .catch(err => {
          this.isLoading = false;
          this.$u.toast('网络异常,请检查网络');
        });
    },
  },
};
         },
         getData() {
            var postData = {
               MainData: {
                  warehouseId: this.warehouseId,
                  orderNo: this.searchValue,
                  pageNo: this.pageNo
               },
            }
            this.$u.post('/api/InboundOrder/GetInboundOrders', postData).then((res) => {
               if (res.status) {
                  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.status = 'noMore';
                     //this.allReceivingOrders = [];
                     this.loadVisible = true;
                  }
               }
            })
         }
      }
   }
</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>