feat(putaway): 添加骨架屏加载效果

- 新增骨架屏样式，包含渐变动画效果和按钮占位样式
- 在列表加载时显示骨架屏，提升用户体验
- 添加loading状态控制，确保骨架屏仅在首次加载且无数据时显示
- 优化列表显示逻辑，使用v-else-if避免骨架屏与列表同时显示

assets/css/putaway/index.scss

@@ -63,6 +63,37 @@
         padding-bottom: 150rpx;
         flex-wrap: wrap;
 
+        // 骨架屏样式
+        .skeleton-box {
+            .skeleton-item {
+                background: linear-gradient(90deg, #f0f0f2 25%, #e8e8e8 50%, #f0f0f2 75%);
+                background-size: 200% 100%;
+                animation: skeleton-loading 1.5s infinite;
+                border-radius: 6rpx;
+            }
+
+            .skeleton-btn {
+                width: 68rpx;
+                height: 30rpx;
+                background: linear-gradient(90deg, #f0f0f2 25%, #e8e8e8 50%, #f0f0f2 75%);
+                background-size: 200% 100%;
+                animation: skeleton-loading 1.5s infinite;
+                border-radius: 8rpx;
+                position: absolute;
+                right: 17rpx;
+                bottom: 13rpx;
+            }
+        }
+
+        @keyframes skeleton-loading {
+            0% {
+                background-position: 200% 0;
+            }
+            100% {
+                background-position: -200% 0;
+            }
+        }
+
         .box {
             position: relative;
             padding: 15rpx 17rpx 17rpx 17rpx;

pages/putaway/index.vue

@@ -33,8 +33,23 @@
                 <text style="font-size: 18rpx;white-space: nowrap;">批量扫描</text>
             </view>
         </view>
+        <!-- 骨架屏 -->
+        <view class="list row bothSide" v-if="loading && list.length === 0">
+            <view class="box box-width skeleton-box" v-for="i in 4" :key="'skeleton-' + i">
+                <view class="skeleton-item" style="width: 70%; height: 32rpx; margin-bottom: 20rpx;"></view>
+                <view class="skeleton-item" style="width: 50%; height: 32rpx; margin-bottom: 20rpx;"></view>
+                <view class="skeleton-item" style="width: 60%; height: 32rpx; margin-bottom: 20rpx;"></view>
+                <view class="bor row"></view>
+                <view class="skeleton-item" style="width: 65%; height: 28rpx; margin-bottom: 16rpx;"></view>
+                <view class="skeleton-item" style="width: 55%; height: 28rpx; margin-bottom: 16rpx;"></view>
+                <view class="skeleton-item" style="width: 45%; height: 28rpx; margin-bottom: 16rpx;"></view>
+                <view class="skeleton-item" style="width: 50%; height: 28rpx; margin-bottom: 16rpx;"></view>
+                <view class="skeleton-item" style="width: 40%; height: 28rpx; margin-bottom: 16rpx;"></view>
+                <view class="skeleton-btn"></view>
+            </view>
+        </view>
         <!-- 列表数据 -->
-        <view class="list row bothSide" v-if="list.length > 0">
+        <view class="list row bothSide" v-else-if="list.length > 0">
             <view class="box box-width" v-for="(item, index) in list" :key="index" :class="{ curr: filter_list[index] }">
                 <view class="check-box-icon" @click="filterChange(index)"></view>
                 <view class="text-item row verCenter">
@@ -179,6 +194,7 @@
                 index: 0,
                 array: ['入库批次号', '全量搜索'],
                 list: [],
+                loading: true, //加载状态
                 position: [], //库位
                 filter_list: [], //筛选已选中的列表
                 filter_id: [], //过滤处理的id
@@ -515,6 +531,7 @@
              * 获取列表数据
              */
             getData(callback) {
+                this.loading = true;
                 this.request(API.getPendingShelfByBatchSn, 'POST', { page: this.page, limit: this.limit, ...this.searchParams }, true).then(res => {
                     if (res.code === 0) {
                         if (res.data.total > 0) {
@@ -533,6 +550,7 @@
                             icon: 'error'
                         });
                     }
+                    this.loading = false;
                 });
             },
             /**