库位合并

src/views/robot/merge/index.vue

@@ -109,60 +109,103 @@
       </div>
     </div>
 
-    <!-- 站点类型选择 -->
-    <div class="station-type-selector">
-      <van-radio-group v-model="selectedStationType" @change="handleStationTypeChange" direction="horizontal">
-        <van-radio name="shelf">上架站点</van-radio>
-        <van-radio name="return">退货缓存站点</van-radio>
-      </van-radio-group>
-    </div>
-
-    <!-- 料箱选择区域 -->
-    <div class="grid-section">
-      <div class="grid-container">
-        <div
-          v-for="station in stationList"
-          :key="station.id"
-          class="box-wrapper"
-        >
-          <!-- 站台序号在上方 -->
-          <div class="box-number">{{ station.displayNumber }}</div>
-          <div
-            class="box-item"
-            :class="{
-              'box-filled': station.status === 'filled' && !station.splitCount,
-              'box-empty-box': station.status === 'emptyBox',
-              'box-waiting': station.status === 'waiting',
-              'box-error': station.status === 'error',
-              'box-selected': selectedBox === station.stationCode,
-              'box-split': station.splitCount && station.status !== 'error' && station.status !== 'waiting'
-            }"
-                        @click="handleStationClick(station)"
-          >
-                      <!-- 分割的料箱（异常/等待调箱状态不渲染分割） -->
-            <template v-if="station.splitCount && station.subLocations && station.status !== 'error' && station.status !== 'waiting'">
-              <div class="sub-grid" :style="getSubGridStyle(station.splitCount)">
-                <div
-                  v-for="sub in station.subLocations"
-                  :key="sub.id"
-                  class="sub-location"
-                  :class="{
-                    'sub-filled': sub.status === 'filled',
-                    'sub-selected': selectedBox === sub.locationCode,
-                    'sub-disabled': !isLocationClickable(sub.locationCode)
-                  }"
-                  @click.stop="isLocationClickable(sub.locationCode) && selectSubLocation(station, sub)"
-                ></div>
+    <!-- 站点类型选择和料箱选择区域 -->
+    <van-tabs v-model:active="selectedStationType" @change="handleStationTypeChange" class="station-tabs">
+      <van-tab title="上架站点" name="shelf">
+        <div class="grid-section">
+          <div class="grid-container">
+            <div
+              v-for="station in stationList"
+              :key="station.id"
+              class="box-wrapper"
+            >
+              <!-- 站台序号在上方 -->
+              <div class="box-number">{{ station.displayNumber }}</div>
+              <div
+                class="box-item"
+                :class="{
+                  'box-filled': station.status === 'filled' && !station.splitCount,
+                  'box-empty-box': station.status === 'emptyBox',
+                  'box-waiting': station.status === 'waiting',
+                  'box-error': station.status === 'error',
+                  'box-selected': selectedBox === station.stationCode,
+                  'box-split': station.splitCount && station.status !== 'error' && station.status !== 'waiting'
+                }"
+                @click="handleStationClick(station)"
+              >
+                <!-- 分割的料箱（异常/等待调箱状态不渲染分割） -->
+                <template v-if="station.splitCount && station.subLocations && station.status !== 'error' && station.status !== 'waiting'">
+                  <div class="sub-grid" :style="getSubGridStyle(station.splitCount)">
+                    <div
+                      v-for="sub in station.subLocations"
+                      :key="sub.id"
+                      class="sub-location"
+                      :class="{
+                        'sub-filled': sub.status === 'filled',
+                        'sub-selected': selectedBox === sub.locationCode,
+                        'sub-disabled': !isLocationClickable(sub.locationCode)
+                      }"
+                      @click.stop="isLocationClickable(sub.locationCode) && selectSubLocation(station, sub)"
+                    ></div>
+                  </div>
+                </template>
+                <!-- 普通站台或异常状态 -->
+                <template v-else>
+                  <span v-if="station.label" class="box-label">{{ station.label }}</span>
+                </template>
               </div>
-            </template>
-            <!-- 普通站台或异常状态 -->
-            <template v-else>
-              <span v-if="station.label" class="box-label">{{ station.label }}</span>
-            </template>
+            </div>
           </div>
         </div>
-      </div>
-    </div>
+      </van-tab>
+      <van-tab title="退货缓存站点" name="return">
+        <div class="grid-section">
+          <div class="grid-container">
+            <div
+              v-for="station in stationList"
+              :key="station.id"
+              class="box-wrapper"
+            >
+              <!-- 站台序号在上方 -->
+              <div class="box-number">{{ station.displayNumber }}</div>
+              <div
+                class="box-item"
+                :class="{
+                  'box-filled': station.status === 'filled' && !station.splitCount,
+                  'box-empty-box': station.status === 'emptyBox',
+                  'box-waiting': station.status === 'waiting',
+                  'box-error': station.status === 'error',
+                  'box-selected': selectedBox === station.stationCode,
+                  'box-split': station.splitCount && station.status !== 'error' && station.status !== 'waiting'
+                }"
+                @click="handleStationClick(station)"
+              >
+                <!-- 分割的料箱（异常/等待调箱状态不渲染分割） -->
+                <template v-if="station.splitCount && station.subLocations && station.status !== 'error' && station.status !== 'waiting'">
+                  <div class="sub-grid" :style="getSubGridStyle(station.splitCount)">
+                    <div
+                      v-for="sub in station.subLocations"
+                      :key="sub.id"
+                      class="sub-location"
+                      :class="{
+                        'sub-filled': sub.status === 'filled',
+                        'sub-selected': selectedBox === sub.locationCode,
+                        'sub-disabled': !isLocationClickable(sub.locationCode)
+                      }"
+                      @click.stop="isLocationClickable(sub.locationCode) && selectSubLocation(station, sub)"
+                    ></div>
+                  </div>
+                </template>
+                <!-- 普通站台或异常状态 -->
+                <template v-else>
+                  <span v-if="station.label" class="box-label">{{ station.label }}</span>
+                </template>
+              </div>
+            </div>
+          </div>
+        </div>
+      </van-tab>
+    </van-tabs>
 
     <!-- 底部按钮 -->
     <div class="footer-buttons">
@@ -1377,24 +1420,19 @@ const submitMove = () => {
   }
 }
 
-.station-type-selector {
+.station-tabs {
   margin-bottom: 12px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 13px;
-  padding: 8px 12px;
   background: #fff;
   border-radius: 4px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
-  .van-radio-group {
-    display: flex;
-    gap: 13px;
+  :deep(.van-tabs__nav) {
+    background: transparent;
   }
 
-  .van-button {
-    flex-shrink: 0;
+  :deep(.van-tab) {
+    font-size: 14px;
+    font-weight: 500;
   }
 }
 
@@ -1508,7 +1546,7 @@ const submitMove = () => {
 .grid-section {
   background: #fff;
   padding: 12px;
-  margin-bottom: 80px;
+  margin-bottom: 12px;
   border-radius: 4px;
 
   .grid-container {