移库-样式美化

src/views/inventory/transfer/index.vue

@@ -85,12 +85,12 @@
             <template #label>
               <div class="selected-product-details">
                 <div class="detail-auto-grid">
-                  <span class="detail-text" v-if="selectedProducts.lotAtt01">生产日期: {{ selectedProducts.lotAtt01 }}</span>
-                  <span class="detail-text" v-if="selectedProducts.lotAtt02">失效日期: {{ selectedProducts.lotAtt02 }}</span>
-                  <span class="detail-text" v-if="selectedProducts.lotAtt05">属性仓：{{ selectedProducts.lotAtt05 }}</span>
-                  <span class="detail-text" v-if="selectedProducts.lotAtt08">质量状态: {{ selectedProducts.lotAtt08}}</span>
-                  <span class="detail-text" v-if="selectedProducts.lotNumber">批次号: {{ selectedProducts.lotNumber }}</span>
-                  <span class="detail-text" v-if="selectedProducts.lotAtt04">生产批号: {{ selectedProducts.lotAtt04 }}</span>
+                  <span class="detail-text" v-if="selectedProducts.lotAtt01">生产日期:{{ selectedProducts.lotAtt01 }}</span>
+                  <span class="detail-text" v-if="selectedProducts.lotAtt02">失效日期:{{ selectedProducts.lotAtt02 }}</span>
+                  <span class="detail-text" v-if="selectedProducts.lotAtt05">属性仓:{{ selectedProducts.lotAtt05 }}</span>
+                  <span class="detail-text" v-if="selectedProducts.lotAtt08">质量状态:{{ selectedProducts.lotAtt08 }}</span>
+                  <span class="detail-text" v-if="selectedProducts.lotNumber">批次号:{{ selectedProducts.lotNumber }}</span>
+                  <span class="detail-text" v-if="selectedProducts.lotAtt04">生产批号:{{ selectedProducts.lotAtt04 }}</span>
                 </div>
               </div>
             </template>
@@ -129,10 +129,10 @@
                   @click="onProductSelect(product)"
                   class="clickable-row"
               >
-                <td 
+                <td
                   v-if="shouldShowOwner(product, index)"
                   :rowspan="getOwnerRowspan(product, index)"
-                  class="owner-cell" 
+                  class="owner-cell"
                   style="width: 40px"
                 >
                   {{ shouldShowOwnerText(product, index) ? product.owner : '' }}
@@ -206,21 +206,21 @@ const targetLocation = ref('')
 const productList = ref([])
 const selectedProducts = ref({})
 const oldProductBarcode = ref('')
-const countRef=ref(null)
-const targetLocationRef=ref(null)
-const productBarcodeRef=ref(null)
-const sourceLocationRef=ref(null)
+const countRef = ref(null)
+const targetLocationRef = ref(null)
+const productBarcodeRef = ref(null)
+const sourceLocationRef = ref(null)
 // 扫描类型控制焦点高亮
 const scanType = ref(2) // 1: 来源库位, 2: 商品条码, 3: 移库数量, 4: 目标库位
 const tips = ref('请扫描商品条码/来源库位')
 
 // 扫描条码监听
 const _handlerScan = (code) => {
-  if(!code) return
+  if (!code) return
   if (scanType.value == 2 || scanType.value == 1) {
     if (scanType.value == 2) {
       productBarcode.value = code
-      oldProductBarcode.value=code
+      oldProductBarcode.value = code
     } else if (scanType.value == 1) {
       sourceLocation.value = code
     }
@@ -253,7 +253,7 @@ const _handlerScan = (code) => {
             return orderA - orderB
           }
           // locationUsage相同时，再按location排序
-          return b.location.localeCompare(a.location)
+          return a.location.localeCompare(b.location)
         })
         productList.value = res.data
         // 查找第一个可用数量大于0的商品进行选中
@@ -286,16 +286,16 @@ const _handlerScan = (code) => {
       tips.value = err.message || '系统异常,请联系技术支持'
       reset()
     })
-  }else if (scanType.value == 3) {
+  } else if (scanType.value == 3) {
     countRef.value?.blur()
     scanSuccess()
-    if(targetLocation.value){
+    if (targetLocation.value) {
       tips.value = '请手动进行移库操作'
-    }else {
+    } else {
       tips.value = '请扫描目标库位'
       scanType.value = 4
     }
-  }else if (scanType.value == 4) {
+  } else if (scanType.value == 4) {
     scanSuccess()
     targetLocation.value = code
     onConfirm()
@@ -304,81 +304,82 @@ const _handlerScan = (code) => {
   productBarcodeRef.value?.blur()
   sourceLocationRef.value?.blur()
 }
-const onConfirm=()=>{
-  if(!selectedProducts.value.id){
+const onConfirm = () => {
+  if (!selectedProducts.value.id) {
     tips.value = '请先查询库存信息'
-    scanType.value=2
+    scanType.value = 2
     showNotify({ type: 'warning', duration: 3000, message: `请先查询库存信息` })
     return
   }
-  if(!productBarcode.value){
+  if (!productBarcode.value) {
     scanError()
     tips.value = '请先扫描商品条码'
-    scanType.value=2
+    scanType.value = 2
     showNotify({ type: 'warning', duration: 3000, message: `请先扫描商品条码` })
     return
   }
-  if(!transferQuantity.value){
+  if (!transferQuantity.value) {
     scanError()
     tips.value = '请先输入移库数量'
     countRef.value?.focus()
     showNotify({ type: 'warning', duration: 3000, message: `请先输入移库数量` })
     return
   }
-  if(transferQuantity.value<=0 || transferQuantity.value>selectedProducts.value.quantityAvailable){
+  if (transferQuantity.value <= 0 || transferQuantity.value > selectedProducts.value.quantityAvailable) {
     scanError()
     countRef.value?.focus()
     tips.value = '请先输入正确的移库数量'
     showNotify({ type: 'warning', duration: 3000, message: `请先输入正确的移库数量` })
     return
   }
-  if(!targetLocation.value){
+  if (!targetLocation.value) {
     scanError()
     tips.value = '请先扫描目标库位'
-    scanType.value=4
+    scanType.value = 4
     showNotify({ type: 'warning', duration: 3000, message: `请先扫描目标库位` })
     return
   }
   showConfirmDialog({
     title: '移库确认',
     message:
-      `${productBarcode.value}从"${sourceLocation.value}"移动至"${targetLocation.value}"共：${transferQuantity.value}件`
+      `${productBarcode.value}从"${sourceLocation.value}"移动至"${targetLocation.value}"共：${transferQuantity.value}件`,
   })
     .then(() => {
-      const {traceId,lotNumber,ownerCode,sku}=selectedProducts.value
-      const data={
-        fmLocation:sourceLocation.value,
-        fmContainer:traceId,
-        owner:ownerCode,
+      const { traceId, lotNumber, ownerCode, sku } = selectedProducts.value
+      const data = {
+        fmLocation: sourceLocation.value,
+        fmContainer: traceId,
+        owner: ownerCode,
         sku,
-        lotNum:lotNumber,
+        lotNum: lotNumber,
         warehouse,
-        quantity:transferQuantity.value,
-        toLocation:targetLocation.value
+        quantity: transferQuantity.value,
+        toLocation: targetLocation.value,
       }
       showLoading()
-      inventoryMovement(data).then(()=>{
+      inventoryMovement(data).then(() => {
         closeLoading()
         scanSuccess()
         showNotify({ type: 'success', duration: 3000, message: `操作成功，请继续扫描商品条码` })
         tips.value = '操作成功，请继续扫描商品条码'
         scanType.value = 2
-        productBarcode.value=''
+        productBarcode.value = ''
         reset()
-      }).catch(err=>{
+      }).catch(err => {
         scanError()
         closeLoading()
         tips.value = err.message || '系统异常,请联系技术支持'
       })
     })
-    .catch(() => {});
+    .catch(() => {
+    })
 }
 const onAsnCancel = () => {
   if (productBarcode.value === '' || (oldProductBarcode.value.length != productBarcode.value.length && oldProductBarcode.value != '')) {
     productList.value = []
     transferQuantity.value = ''
     selectedProducts.value = {}
-    scanType.value=2
+    scanType.value = 2
   }
 }
 const reset = () => {
@@ -386,7 +387,7 @@ const reset = () => {
   sourceLocation.value = ''
   targetLocation.value = ''
   transferQuantity.value = ''
-  oldProductBarcode.value=''
+  oldProductBarcode.value = ''
   selectedProducts.value = {}
 }
 const topRef = ref(null)
@@ -416,7 +417,7 @@ const onProductSelect = (product) => {
   // 选择商品时自动赋值移库数量
   transferQuantity.value = product.quantityAvailable
   sourceLocation.value = product.location
-  scanType.value=4
+  scanType.value = 4
   // 重新计算表格高度
   calculateTableHeight()
 }
@@ -432,13 +433,13 @@ const getRowStyle = (product) => {
     'CS': 'white',
     'EA': 'white',
     'RS': 'rgb(255, 250, 250)', // Snow
-    'ST': 'lightgray'
+    'ST': 'lightgray',
   }
 
   const backgroundColor = locationUsageColors[product.locationUsage] || 'white'
 
   return {
-    backgroundColor
+    backgroundColor,
   }
 }
 
@@ -448,11 +449,11 @@ const shouldShowOwner = (product, index: number) => {
   if (isSelected(product)) {
     return true
   }
-  
+
   // 检查同一货主组中是否有选中的行
   const sameOwnerProducts = productList.value.filter(p => p.owner === product.owner)
   const hasSelectedInGroup = sameOwnerProducts.some(p => isSelected(p))
-  
+
   // 如果同一货主组中有选中的行，则其他未选中行显示空单元格
   if (hasSelectedInGroup) {
     // 检查当前行是否为未选中的连续组的第一行
@@ -461,7 +462,7 @@ const shouldShowOwner = (product, index: number) => {
     }
     return false
   }
-  
+
   // 如果同一货主组中没有选中的行，则在第一行显示单元格
   return isFirstInOwnerGroup(product, index)
 }
@@ -472,16 +473,16 @@ const shouldShowOwnerText = (product, index: number) => {
   if (isSelected(product)) {
     return true
   }
-  
+
   // 检查同一货主组中是否有选中的行
   const sameOwnerProducts = productList.value.filter(p => p.owner === product.owner)
   const hasSelectedInGroup = sameOwnerProducts.some(p => isSelected(p))
-  
+
   // 如果同一货主组中有选中的行，则其他未选中行不显示文字
   if (hasSelectedInGroup) {
     return false
   }
-  
+
   // 如果同一货主组中没有选中的行，则在第一行显示文字
   return isFirstInOwnerGroup(product, index)
 }
@@ -498,11 +499,11 @@ const getOwnerRowspan = (product, index: number) => {
   if (isSelected(product)) {
     return 1
   }
-  
+
   // 检查同一货主组中是否有选中的行
   const sameOwnerProducts = productList.value.filter(p => p.owner === product.owner)
   const hasSelectedInGroup = sameOwnerProducts.some(p => isSelected(p))
-  
+
   // 如果同一货主组中有选中的行，则计算未选中行的rowspan
   if (hasSelectedInGroup) {
     let rowspan = 1
@@ -516,7 +517,7 @@ const getOwnerRowspan = (product, index: number) => {
     }
     return rowspan
   }
-  
+
   // 计算正常的rowspan（没有选中行的情况）
   let rowspan = 1
   for (let i = index + 1; i < productList.value.length; i++) {
@@ -800,6 +801,7 @@ onUnmounted(() => {
 .body-table td:nth-child(6) {
   width: 12%;
 }
+
 .table-title {
   font-size: 14px;
   font-weight: 600;
@@ -846,10 +848,12 @@ onUnmounted(() => {
 .checkbox-cell {
   width: 25px;
 }
-::v-deep(.checkbox-cell .van-checkbox){
+
+::v-deep(.checkbox-cell .van-checkbox) {
   justify-content: center;
 }
-::v-deep(.checkbox-cell .van-checkbox__icon){
+
+::v-deep(.checkbox-cell .van-checkbox__icon) {
   background: #fff;
   border-radius: 50%;
 }