feat: 清空拣货数量、滚动至当前扫码的sku

src/views/order/Shipment.vue

 <template>
   <div v-if="orderList.length" class="shipment-order">
-    <div ref="shipmentOrderRef" class="shipment-info">
+    <div ref="listRef" class="shipment-info">
       <div v-for="o in orderList" :key="o.id" class="shipment-info-item">
         <div class="shipment-info-item-header">
           <div class="shipment-info-item-header--title">
@@ -70,10 +70,20 @@
             </div>
             <div
               class="shipment-info-item-content-item--info"
-              style="width: 90px; flex: none"
+              style="width: 100px; flex: none"
             >
               <span class="label">拣货数:</span>
               <span class="value">{{ item.count }}</span>
+              <span
+                v-if="item.subOrderNumber === currentRow.subOrderNumber"
+                title="清空拣货数量"
+                style="margin: 6px; cursor: pointer; display: flex"
+                @click.stop="onShipment(item)"
+              >
+                <el-icon style="vertical-align: middle"
+                  ><CircleCloseFilled
+                /></el-icon>
+              </span>
             </div>
           </div>
         </div>
@@ -112,8 +122,9 @@
 
 <script setup lang="ts">
 import { OrderData, ProductList } from '@/types/api/order'
-import { PropType } from 'vue'
-import useShipment from './hook/useShipment'
+import { PropType, ref } from 'vue'
+import { CircleCloseFilled } from '@element-plus/icons-vue'
+import { showConfirm } from '@/utils/ui'
 const emit = defineEmits<{
   (e: 'changeCurrentRow', v: ProductList): void
 }>()
@@ -127,10 +138,34 @@ defineProps({
     default: () => {},
   },
 })
-const { shipmentOrderRef } = useShipment()
+
+const listRef = ref<HTMLDivElement>()
+
+export interface ShipmentType {
+  listRef: HTMLDivElement | undefined
+}
+
+defineExpose<ShipmentType>({
+  get listRef() {
+    return listRef.value
+  },
+})
+
 const onRowClick = (item: ProductList) => {
   emit('changeCurrentRow', item)
 }
+const onShipment = async (item: ProductList) => {
+  try {
+    await showConfirm('是否确认清空拣货数量', {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+  } catch {
+    return
+  }
+  item.count = 0
+}
 </script>
 <style lang="scss" scoped>
 .shipment-order {

src/views/order/hook/useShipment.ts

@@ -7,16 +7,17 @@ import {
 } from '@/types/api/order'
 import { useValue } from '@/utils/hooks/useValue'
 import { showError } from '@/utils/ui'
-import { ref } from 'vue'
-const [orderList, resetOrderList] = useValue<OrderData[]>([])
-const [shipmentForm, resetShipmentForm] = useValue<ShipmentForm>({
-  shippingWay: '',
-  carriageName: '',
-  logisticsTracking: '',
-  carriageAmount: '',
-  namespace: '',
-})
+import { nextTick, ref } from 'vue'
+import { ShipmentType } from '../Shipment.vue'
 export default function useShipment(callback?: () => void) {
+  const [orderList, resetOrderList] = useValue<OrderData[]>([])
+  const [shipmentForm, resetShipmentForm] = useValue<ShipmentForm>({
+    shippingWay: '',
+    carriageName: '',
+    logisticsTracking: '',
+    carriageAmount: '',
+    namespace: '',
+  })
   const shipmentFormRef = ref()
   const productionOrderNumber = ref('')
   const shipmentVisible = ref(false)
@@ -24,7 +25,7 @@ export default function useShipment(callback?: () => void) {
   const inputRef = ref()
   const currentRow = ref<ProductList>()
   const shipmentLoading = ref(false)
-  const shipmentOrderRef = ref()
+  const shipmentOrderRef = ref<ShipmentType>()
   const searchShipmentByOrderNumber = async () => {
     const code = productionOrderNumber.value
     shipmentVisible.value = true
@@ -67,9 +68,9 @@ export default function useShipment(callback?: () => void) {
       inputRef.value.focus()
       productionOrderNumber.value = ''
       isLock.value = false
-
+      await nextTick()
       if (shipmentOrderRef.value) {
-        const rowEl = shipmentOrderRef.value.querySelector(
+        const rowEl = shipmentOrderRef.value.listRef?.querySelector(
           `div[data-id="${rowData.id}"]`,
         )
         if (!rowEl) return
@@ -103,14 +104,6 @@ export default function useShipment(callback?: () => void) {
               ).catch(() => {})
             }
             currentRow.value = item
-            if (shipmentOrderRef.value) {
-              const rowEl = shipmentOrderRef.value.querySelector(
-                `div[data-id="${item.id}"]`,
-              )
-              if (!rowEl) return
-
-              rowEl.scrollIntoView()
-            }
           }
         }
         const index = orderList.value.findIndex(
@@ -119,6 +112,15 @@ export default function useShipment(callback?: () => void) {
         if (index === -1) {
           orderList.value.unshift(res.data)
         }
+        await nextTick()
+        if (shipmentOrderRef.value) {
+          const rowEl = shipmentOrderRef.value.listRef?.querySelector(
+            `div[data-id="${currentRow.value?.id}"]`,
+          )
+          if (!rowEl) return
+
+          rowEl.scrollIntoView()
+        }
       }
       inputRef.value.focus()
       productionOrderNumber.value = ''

src/views/order/index.vue

@@ -397,6 +397,7 @@
       </el-button>
     </div>
     <Shipment
+      ref="shipmentOrderRef"
       v-loading="shipmentLoading"
       :order-list="orderList"
       :current-row="currentRow"
@@ -644,6 +645,7 @@ const {
   currentRow,
   shipmentLoading,
   orderList,
+  shipmentOrderRef,
   searchShipmentByOrderNumber,
   saveShipment,
   confirmDelivery,