新购编码入库限制一次最多入50条

src/pages/new-purchase/entry/code-inbound.vue

@@ -56,6 +56,7 @@
                                   borderColor="#409eff"
                                   activeBorderColor="#409eff"
                                   :checked="item.checked"
+                                  :disabled="!item.checked && total >= 50"
                                   style="transform: scale(0.7)"
                               />
                             </label>
@@ -76,9 +77,16 @@
                 </uni-row>
             </view>
         </scroll-view>
-        <view class="outbound-btn" @tap="onHandleOutbound"> 入库 </view>
+      <!-- 将原来的两个独立按钮替换为以下代码 -->
+      <view class="bottom-buttons">
+        <view class="outbound-btn" @tap="onHandleOutbound">入库</view>
         <view class="checked-btn" @tap="checkedAll">
-            <span>全选</span><span>({{ total }})</span>
+          <view class="btn-content">
+            <span>全选</span>
+            <span>({{ total }})</span>
+          </view>
+          <view class="limit-text">(最多勾选50个)</view>
+        </view>
       </view>
     </view>
 </template>
@@ -107,6 +115,9 @@ const scanQrCodeRefBox = ref(null)
 // const taskId = ref('')
 // const maTypeName = ref('')
 // const typeName = ref('')
+const MAX_CHECKED = 50
+const submitting = ref(false)
+
 
 // 编码识别按钮
 const onCodeIdentify = () => {
@@ -329,33 +340,53 @@ const onScrollTolower = () => {
 
 // 复选框事件
 const onChangeChecked = (item) => {
-    item.checked = !item.checked
+  if (item.checked) {
-    let arr = []
+    item.checked = false
-    codeDeviceList.value.forEach((e) => {
+    total.value--
-        if (e.checked == true) {
+  } else {
-            return arr.push(e)
+    item.checked = true
-        }
+    total.value++
-    })
-    console.log(arr)
-    total.value = arr.length
-}
-// 复选框事件
-const checkedAll = () => {
-    if (total.value < codeDeviceList.value.length) {
-        total.value = codeDeviceList.value.length
-        codeDeviceList.value.forEach((e) => {
-            e.checked = true
-        })
-    } else if (total.value == codeDeviceList.value.length) {
-        total.value = 0
-        codeDeviceList.value.forEach((e) => {
-            e.checked = false
-        })
   }
 }
 
+
+// 复选框事件
+const checkedAll = () => {
+  // 当前未全选 → 执行“最多50个”的全选
+  if (total.value < Math.min(codeDeviceList.value.length, MAX_CHECKED)) {
+    let count = 0
+    codeDeviceList.value.forEach((e) => {
+      if (count < MAX_CHECKED) {
+        if (!e.checked) {
+          e.checked = true
+          count++
+        }
+      } else {
+        e.checked = false
+      }
+    })
+    total.value = Math.min(codeDeviceList.value.length, MAX_CHECKED)
+
+    if (codeDeviceList.value.length > MAX_CHECKED) {
+      uni.showToast({
+        title: `全选最多只能勾选${MAX_CHECKED}个`,
+        icon: 'none'
+      })
+    }
+  }
+  // 已经是“50个全选状态” → 取消全选
+  else {
+    codeDeviceList.value.forEach((e) => {
+      e.checked = false
+    })
+    total.value = 0
+  }
+}
+
+
 // 入库按钮
 const onHandleOutbound = async () => {
+  if (submitting.value) return
   const isSelect = codeDeviceList.value.some((e) => e.checked === true)
   if (!isSelect) {
     uni.showToast({
@@ -386,30 +417,52 @@ const onHandleOutbound = async () => {
     title: '提示',
     content: '是否确定入库？',
     success: async (req) => {
-            if (req.confirm) {
+      if (!req.confirm) return
+
+      const paramsList = codeDeviceList.value
+          .filter(e => e.checked)
+          .map(e => ({ maCode: e.maCode }))
+
+      if (paramsList.length === 0) {
+        uni.showToast({
+          title: '请选择需要入库的设备',
+          icon: 'none',
+        })
+        return
+      }
+
+      submitting.value = true
+      uni.showLoading({
+        title: '提交中...',
+        mask: true
+      })
+
       try {
-                    let param = {
+        const param = {
           ...queryParams.value,
-                        // taskId: queryParams.value.taskId,
-                        // typeId: queryParams.value.typeId,
           purchaseId: queryParams.value.id,
           inPutList: paramsList,
         }
         const res = await setInboundCodeAPI(param)
-                    console.log(res, '入库')
         if (res.code === 200) {
           uni.showToast({
             title: '入库成功！',
             icon: 'none',
           })
-                        getCodeDeviceListData()
+          await getCodeDeviceListData()
-                        setTimeout(() => {
+          queryParams.value.inputNum =
-                            queryParams.value.inputNum = Number(queryParams.value.inputNum) + paramsList.length
+              Number(queryParams.value.inputNum) + paramsList.length
-                        }, 800)
+        } else {
+          uni.showToast({
+            title: res.msg || '入库失败',
+            icon: 'none',
+          })
         }
       } catch (error) {
         console.log('🚀 ~ onHandleOutbound ~ error:', error)
-                }
+      } finally {
+        submitting.value = false
+        uni.hideLoading()
       }
     }
   })
@@ -423,7 +476,7 @@ const onHandleOutbound = async () => {
   flex-direction: column;
   background-color: #f7f8fa;
   padding: 24rpx;
-    padding-bottom: 120rpx; // 为底部按钮留出空间
+  padding-bottom: 140rpx; // 为底部按钮留出更多空间
   .card {
     padding: 5px;
     background-color: #fff;
@@ -505,13 +558,22 @@ const onHandleOutbound = async () => {
     }
   }
 
-    // 底部入库按钮
+  // 底部按钮容器
-    .outbound-btn {
+  .bottom-buttons {
     position: fixed;
     bottom: 40rpx;
-        left: 50%;
+    left: 0;
-        transform: translateX(-75%);
+    right: 0;
-        width: 60%;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 24rpx;
+    gap: 20rpx;
+  }
+
+  // 入库按钮
+  .outbound-btn {
+    flex: 1;
+    min-width: 0; // 防止flex项溢出
     height: 88rpx;
     background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
     text-align: center;
@@ -521,36 +583,52 @@ const onHandleOutbound = async () => {
     font-size: 32rpx;
     font-weight: 600;
     box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
-        // transition: all 0.3s ease;
+    white-space: nowrap;
 
-        // &:active {
+    &:active {
-        //     transform: translateX(-50%) scale(0.98);
+      opacity: 0.9;
-        //     opacity: 0.9;
+    }
-        // }
   }
 
-    // 底部全选按钮
+  // 全选按钮
   .checked-btn {
-        position: fixed;
+    flex: 0 0 180rpx; // 固定宽度
-        bottom: 40rpx;
-        left: 70%;
-        // transform: translateX(-1%);
-        width: 25%;
     height: 88rpx;
     background: #fff;
-        text-align: center;
+    display: flex;
-        line-height: 88rpx;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
     color: #000;
     border-radius: 12rpx;
+    box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
+    padding: 10rpx 0;
+
+    .btn-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8rpx;
+      line-height: 1.2;
+
+      span {
         font-size: 28rpx;
         font-weight: 600;
-        box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
+        white-space: nowrap;
-        //     transition: all 0.3s ease;
+      }
+    }
 
-        //     &:active {
+    .limit-text {
-        //         transform: translateX(-50%) scale(0.98);
+      font-size: 20rpx;
-        //         opacity: 0.9;
+      color: #ff0000;
-        //     }
+      line-height: 1.2;
+      margin-top: 4rpx;
+      white-space: nowrap;
+    }
+
+    &:active {
+      background-color: #f5f5f5;
+    }
   }
 }