库存并库init

src/views/robot/merge/index.vue

@@ -1,5 +1,124 @@
+<template>
+  <div class="merge-container">
+    <!-- 扫描输入框 -->
+    <div class="scan-section">
+      <van-field
+        v-model="boxCode"
+        placeholder="请扫描料箱号"
+        clearable
+      />
+    </div>
+
+    <!-- 信息展示表格 -->
+    <div class="info-table">
+      <div class="table-row">
+        <div class="cell label">目标库位</div>
+        <div class="cell value">{{ productInfo.targetLocation }}</div>
+        <div class="cell label">库存数量</div>
+        <div class="cell value">{{ productInfo.stockQty }}</div>
+      </div>
+      <div class="table-row">
+        <div class="cell label">商品名称</div>
+        <div class="cell value span-2">{{ productInfo.productName }}</div>
+      </div>
+      <div class="table-row">
+        <div class="cell label">商品条码</div>
+        <div class="cell value span-2">{{ productInfo.barcode }}</div>
+      </div>
+      <div class="table-row row-small">
+        <div class="cell label">质量状态</div>
+        <div class="cell value">{{ productInfo.qualityStatus }}</div>
+        <div class="cell label">属性仓</div>
+        <div class="cell value">{{ productInfo.warehouseType }}</div>
+        <div class="cell label">批号</div>
+        <div class="cell value"></div>
+      </div>
+      <div class="table-row">
+        <div class="cell label">生产日期</div>
+        <div class="cell value">{{ productInfo.productionDate }}</div>
+        <div class="cell label">失效日期</div>
+        <div class="cell value">{{ productInfo.expiryDate }}</div>
+      </div>
+      <div class="table-row">
+        <div class="cell label">目标库位</div>
+        <div class="cell value">{{ productInfo.targetLocationNew }}</div>
+        <div class="cell label">移库数量</div>
+        <div class="cell value editable" @dblclick="editMoveQty">
+          <template v-if="isEditingMoveQty">
+            <van-field
+              v-model="productInfo.moveQty"
+              type="number"
+              autofocus
+              @blur="confirmMoveQty"
+              @keyup.enter="confirmMoveQty"
+            />
+          </template>
+          <template v-else>
+            <span>{{ productInfo.moveQty }}</span>
+            <span v-if="!productInfo.moveQty" class="placeholder">双击编辑</span>
+          </template>
+        </div>
+      </div>
+    </div>
+
+    <!-- 料箱选择区域 -->
+    <div class="grid-section">
+      <div class="grid-container">
+        <div
+          v-for="box in boxList"
+          :key="box.id"
+          class="box-wrapper"
+        >
+          <!-- 序号在料箱上方 -->
+          <div class="box-number">{{ box.id }}</div>
+          <div
+            class="box-item"
+            :class="{
+              'box-filled': box.status === 'filled' && !box.splitCount,
+              'box-empty-box': box.status === 'emptyBox',
+              'box-waiting': box.status === 'waiting',
+              'box-selected': selectedBox === box.id,
+              'box-split': box.splitCount
+            }"
+            @click="!box.splitCount && selectBox(box)"
+          >
+            <!-- 分割的料箱 -->
+            <template v-if="box.splitCount && box.subLocations">
+              <div class="sub-grid" :style="getSubGridStyle(box.splitCount)">
+                <div
+                  v-for="sub in box.subLocations"
+                  :key="sub.id"
+                  class="sub-location"
+                  :class="{
+                    'sub-filled': sub.status === 'filled',
+                    'sub-selected': selectedBox === sub.id
+                  }"
+                  @click.stop="selectSubLocation(box, sub)"
+                ></div>
+              </div>
+            </template>
+            <!-- 普通料箱 -->
+            <template v-else>
+              <span v-if="box.label" class="box-label">{{ box.label }}</span>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部按钮 -->
+    <div class="footer-buttons">
+      <van-button class="btn-robot" size="small" @click="callRobot">呼唤机器人</van-button>
+      <div class="btn-right">
+        <van-button type="primary" class="btn-reset" size="small" @click="resetInput">重新输入</van-button>
+        <van-button class="btn-submit" size="small" @click="submitMove">提交移库</van-button>
+      </div>
+    </div>
+  </div>
+</template>
+
 <script setup lang="ts">
-import { ref, reactive, computed } from 'vue'
+import { ref, reactive } from 'vue'
 import { showToast } from 'vant'
 
 // 扫描料箱号
@@ -138,125 +257,6 @@ const submitMove = () => {
 }
 </script>
 
-<template>
-  <div class="merge-container">
-    <!-- 扫描输入框 -->
-    <div class="scan-section">
-      <van-field
-        v-model="boxCode"
-        placeholder="请扫描料箱号"
-        clearable
-      />
-    </div>
-
-    <!-- 信息展示表格 -->
-    <div class="info-table">
-      <div class="table-row">
-        <div class="cell label">目标库位</div>
-        <div class="cell value">{{ productInfo.targetLocation }}</div>
-        <div class="cell label">库存数量</div>
-        <div class="cell value">{{ productInfo.stockQty }}</div>
-      </div>
-      <div class="table-row">
-        <div class="cell label">商品名称</div>
-        <div class="cell value span-2">{{ productInfo.productName }}</div>
-      </div>
-      <div class="table-row">
-        <div class="cell label">商品条码</div>
-        <div class="cell value span-2">{{ productInfo.barcode }}</div>
-      </div>
-      <div class="table-row">
-        <div class="cell label">质量状态</div>
-        <div class="cell value">{{ productInfo.qualityStatus }}</div>
-        <div class="cell label">属性仓</div>
-        <div class="cell value">{{ productInfo.warehouseType }}</div>
-        <div class="cell label">批号</div>
-        <div class="cell value"></div>
-      </div>
-      <div class="table-row">
-        <div class="cell label">生产日期</div>
-        <div class="cell value">{{ productInfo.productionDate }}</div>
-        <div class="cell label">失效日期</div>
-        <div class="cell value">{{ productInfo.expiryDate }}</div>
-      </div>
-      <div class="table-row">
-        <div class="cell label">目标库位</div>
-        <div class="cell value">{{ productInfo.targetLocationNew }}</div>
-        <div class="cell label">移库数量</div>
-        <div class="cell value editable" @dblclick="editMoveQty">
-          <template v-if="isEditingMoveQty">
-            <van-field
-              v-model="productInfo.moveQty"
-              type="number"
-              autofocus
-              @blur="confirmMoveQty"
-              @keyup.enter="confirmMoveQty"
-            />
-          </template>
-          <template v-else>
-            <span>{{ productInfo.moveQty }}</span>
-            <span v-if="!productInfo.moveQty" class="placeholder">双击编辑</span>
-          </template>
-        </div>
-      </div>
-    </div>
-
-    <!-- 料箱选择区域 -->
-    <div class="grid-section">
-      <div class="grid-container">
-        <div
-          v-for="box in boxList"
-          :key="box.id"
-          class="box-wrapper"
-        >
-          <!-- 序号在料箱上方 -->
-          <div class="box-number">{{ box.id }}</div>
-          <div
-            class="box-item"
-            :class="{
-              'box-filled': box.status === 'filled' && !box.splitCount,
-              'box-empty-box': box.status === 'emptyBox',
-              'box-waiting': box.status === 'waiting',
-              'box-selected': selectedBox === box.id,
-              'box-split': box.splitCount
-            }"
-            @click="!box.splitCount && selectBox(box)"
-          >
-            <!-- 分割的料箱 -->
-            <template v-if="box.splitCount && box.subLocations">
-              <div class="sub-grid" :style="getSubGridStyle(box.splitCount)">
-                <div
-                  v-for="sub in box.subLocations"
-                  :key="sub.id"
-                  class="sub-location"
-                  :class="{
-                    'sub-filled': sub.status === 'filled',
-                    'sub-selected': selectedBox === sub.id
-                  }"
-                  @click.stop="selectSubLocation(box, sub)"
-                ></div>
-              </div>
-            </template>
-            <!-- 普通料箱 -->
-            <template v-else>
-              <span v-if="box.label" class="box-label">{{ box.label }}</span>
-            </template>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 底部按钮 -->
-    <div class="footer-buttons">
-      <van-button class="btn-robot" size="small" @click="callRobot">呼唤机器人</van-button>
-      <div class="btn-right">
-        <van-button type="primary" class="btn-reset" size="small" @click="resetInput">重新输入</van-button>
-        <van-button class="btn-submit" size="small" @click="submitMove">提交移库</van-button>
-      </div>
-    </div>
-  </div>
-</template>
-
 <style scoped lang="scss">
 .merge-container {
   min-height: 100vh;
@@ -285,6 +285,11 @@ const submitMove = () => {
     &:last-child {
       border-bottom: none;
     }
+
+    &.row-small .cell {
+      font-size: 11px;
+      padding: 6px 4px;
+    }
   }
 
   .cell {
@@ -302,7 +307,7 @@ const submitMove = () => {
     &.label {
       background: #f9f9f9;
       color: #666;
-      flex: 0 0 70px;
+      flex: 0 0 55px;
     }
 
     &.value {