feat: 封装发货hook

src/utils/hooks/usePageList.ts

 import { Ref, onMounted, ref } from 'vue'
 import { showError } from '../ui'
 
-import type { BasePaginationData } from '@/types/api'
+import type { PaginationData } from '@/types/api'
 
 export interface UsePageListOptions<T> {
   query: (
     currentPage: number,
     pageSize: number,
     statusCode?: number,
-  ) => Promise<BasePaginationData<T>>
+  ) => Promise<PaginationData<T>>
   initPageSize?: number
   initLoad?: boolean
 }
@@ -22,14 +22,14 @@ export default function usePageList<T>(options: UsePageListOptions<T>) {
 
   const loadData = async () => {
     const { query } = options
-
     try {
       loading.value = true
+      // Promise 链式调用
       const res = await query(currentPage.value, pageSize.value)
-      total.value = res.data.total
-      currentPage.value = res.data.current
-      pageSize.value = res.data.size
-      data.value = res.data.records
+      total.value = res.total
+      currentPage.value = res.current
+      pageSize.value = res.size
+      data.value = res.records
     } catch (error) {
       showError(error)
     } finally {

src/views/order/hook/useShipment.ts

+import { getOrderBySubOrderNumber, saveOrder } from '@/api/order'
+import { OrderData, ShipmentForm, ShipmentOrderRes } 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: '',
+})
+export default function useShipment(callback?: () => void) {
+  const shipmentFormRef = ref()
+  const productionOrderNumber = ref('')
+  const shipmentVisible = ref(false)
+  const isLock = ref(false)
+  const inputRef = ref()
+  const orderNumber = ref('')
+  const shipmentLoading = ref(false)
+  const searchShipmentByOrderNumber = async () => {
+    const code = productionOrderNumber.value
+    shipmentVisible.value = true
+    if (!code) {
+      isLock.value = false
+      inputRef.value.focus()
+      return ElMessage({
+        message: '请录入生产单号',
+        type: 'warning',
+        offset: window.innerHeight / 2,
+      })
+    }
+    let rowData
+    for (const item of orderList.value) {
+      rowData = item.productList?.find((jj) => jj.subOrderNumber === code)
+      if (rowData) break
+    }
+    if (rowData) {
+      orderNumber.value = code
+      const unShipmentNum = (rowData.num || 0) - (rowData.shipmentNum || 0)
+      if (unShipmentNum > (rowData.count || 0)) {
+        rowData.count || rowData.count === 0
+          ? (rowData.count += 1)
+          : (rowData.count = 0)
+      } else {
+        ElMessage({
+          message: '拣货数不能大于未发数',
+          type: 'warning',
+          offset: window.innerHeight / 2,
+        })
+      }
+      productionOrderNumber.value = ''
+      isLock.value = false
+      inputRef.value.focus()
+    } else {
+      getPackingData(code)
+    }
+  }
+  const getPackingData = async (code: string) => {
+    try {
+      shipmentLoading.value = true
+      const res = await getOrderBySubOrderNumber(code)
+      if (res.data) {
+        for (const item of res.data.productList || []) {
+          if (item.num) {
+            item.count = 0
+          }
+          if (item.subOrderNumber === code) {
+            item.count || item.count === 0
+              ? (item.count += 1)
+              : (item.count = 0)
+          }
+        }
+        const index = orderList.value.findIndex(
+          (item) => item.id === res.data.id,
+        )
+        if (index === -1) {
+          orderList.value.unshift(res.data)
+        }
+      }
+      orderNumber.value = code
+      productionOrderNumber.value = ''
+      isLock.value = false
+      inputRef.value.focus()
+    } catch (e) {
+      productionOrderNumber.value = ''
+      isLock.value = false
+      inputRef.value.focus()
+      showError(e)
+    } finally {
+      shipmentLoading.value = false
+    }
+  }
+  const saveShipment = async () => {
+    if (orderList.value.length === 0) {
+      return ElMessage({
+        message: '请选择订单',
+        type: 'warning',
+        offset: window.innerHeight / 2,
+      })
+    }
+    try {
+      await shipmentFormRef.value?.validate()
+    } catch {
+      return
+    }
+  
+    const isEqual = orderList.value.some(
+      (item) => item.namespace === orderList.value[0].namespace,
+    )
+    if (!isEqual) {
+      ElMessage({
+        message: '请选择同一工厂的订单',
+        type: 'warning',
+        offset: window.innerHeight / 2,
+      })
+      return
+    }
+    const data: ShipmentOrderRes[] = []
+    orderList.value.forEach((item) => {
+      shipmentForm.value.namespace = item.namespace
+      const order = []
+      for (const jj of item.productList || []) {
+        if (jj.count === 0) continue
+        const subOrder = {
+          erpSubOrderNumber: jj.erpSubOrderNumber,
+          subOrderNumber: jj.subOrderNumber,
+          sendOutQuantity: jj.count,
+        }
+        order.push(subOrder)
+      }
+      if (order) {
+        data.push(...order)
+      }
+    })
+    try {
+      const res = await saveOrder(data, shipmentForm.value)
+      ElMessage.success(res.message)
+      shipmentVisible.value = false
+      callback && callback()
+    } catch (e) {
+      showError(e)
+    }
+  }
+  const confirmDelivery = async () => {
+    shipmentVisible.value = true
+    productionOrderNumber.value = ''
+    resetOrderList()
+    resetShipmentForm()
+  }
+  const onShipmentDialogOpened = () => {
+    inputRef.value?.focus()
+    shipmentFormRef.value?.clearValidate()
+  }
+  return {
+    shipmentFormRef,
+    productionOrderNumber,
+    shipmentVisible,
+    inputRef,
+    shipmentForm,
+    orderNumber,
+    shipmentLoading,
+    orderList,
+    searchShipmentByOrderNumber,
+    saveShipment,
+    confirmDelivery,
+    onShipmentDialogOpened
+  }
+}

src/views/order/index.vue

@@ -453,7 +453,6 @@ import type {
   OrderData,
   ShipmentForm,
   LogisticsData,
-  ShipmentOrderRes,
   SendOrderData,
   LogListData,
 } from '@/types/api/order'
@@ -467,8 +466,6 @@ import {
   confirmProductionOrder,
   downloadOrder,
   printOrder,
-  getOrderBySubOrderNumber,
-  saveOrder,
   addInternalTagApi,
   loadSendOutList,
   getLogList,
@@ -485,6 +482,7 @@ import SendOrder from './SendOrder.vue'
 import LogList from '@/components/LogList.vue'
 import OrderDetail from './OrderDetail.vue'
 import { debounce } from 'lodash-es'
+import useShipment from './hook/useShipment'
 
 const [searchForm, resetSearchForm] = useValue<SearchForm>({
   mainSku: '',
@@ -497,22 +495,7 @@ const tabsNav = ref<Tab[]>([])
 
 const statusCode = ref(2)
 const selection = ref<OrderData[]>([])
-const shipmentVisible = ref(false)
-const productionOrderNumber = ref('')
-const orderNumber = ref('')
-const shipmentLoading = ref(false)
-const inputRef = ref()
-const [shipmentForm, resetShipmentForm] = useValue<ShipmentForm>({
-  shippingWay: '',
-  carriageName: '',
-  logisticsTracking: '',
-  carriageAmount: '',
-  namespace: '',
-})
-const [orderList, resetOrderList] = useValue<OrderData[]>([])
-const isLock = ref(false)
 const logisticsCompanyList = ref<LogisticsData[]>([])
-const shipmentFormRef = ref()
 const rules = reactive<FormRules<ShipmentForm>>({
   shippingWay: [
     {
@@ -539,7 +522,7 @@ const rules = reactive<FormRules<ShipmentForm>>({
     },
   ],
 })
-
+// 分页查询
 const {
   loading,
   currentPage,
@@ -555,18 +538,30 @@ const {
       { ...searchForm.value, status: statusCode.value },
       page,
       pageSize,
-    ),
+    ).then((res) => res.data),
 })
 
 const [tableWrapperRef, thOrderDetailWidth] = useElTableColumnWidth(
   'table th.th-order-detail',
 )
-
-const onShipmentDialogOpened = () => {
-  inputRef.value?.focus()
-  shipmentFormRef.value?.clearValidate()
-}
-
+// 发货
+const {
+  shipmentFormRef,
+  productionOrderNumber,
+  shipmentVisible,
+  inputRef,
+  shipmentForm,
+  orderNumber,
+  shipmentLoading,
+  orderList,
+  searchShipmentByOrderNumber,
+  saveShipment,
+  confirmDelivery,
+  onShipmentDialogOpened,
+} = useShipment(() => {
+  loadTabData()
+  search()
+})
 onMounted(() => {
   loadTabData()
 })
@@ -647,140 +642,6 @@ const confirmProduce = async () => {
     showError(e)
   }
 }
-// 发货
-const confirmDelivery = async () => {
-  shipmentVisible.value = true
-  productionOrderNumber.value = ''
-  resetOrderList()
-  resetShipmentForm()
-}
-const searchShipmentByOrderNumber = async () => {
-  const code = productionOrderNumber.value
-  shipmentVisible.value = true
-  if (isLock.value) {
-    productionOrderNumber.value = ''
-    return
-  }
-  productionOrderNumber.value = ''
-  isLock.value = true
-  if (!code) {
-    isLock.value = false
-    inputRef.value.focus()
-    return ElMessage({
-      message: '请录入生产单号',
-      type: 'warning',
-      offset: window.innerHeight / 2,
-    })
-  }
-  let rowData
-  for (const item of orderList.value) {
-    rowData = item.productList?.find((jj) => jj.subOrderNumber === code)
-    if (rowData) break
-  }
-  if (rowData) {
-    orderNumber.value = code
-    const unShipmentNum = (rowData.num || 0) - (rowData.shipmentNum || 0)
-    if (unShipmentNum > (rowData.count || 0)) {
-      rowData.count || rowData.count === 0
-        ? (rowData.count += 1)
-        : (rowData.count = 0)
-    } else {
-      ElMessage({
-        message: '拣货数不能大于未发数',
-        type: 'warning',
-        offset: window.innerHeight / 2,
-      })
-    }
-    productionOrderNumber.value = ''
-    isLock.value = false
-    inputRef.value.focus()
-  } else {
-    getPackingData(code)
-  }
-}
-const getPackingData = async (code: string) => {
-  try {
-    shipmentLoading.value = true
-    const res = await getOrderBySubOrderNumber(code)
-    if (res.data) {
-      for (const item of res.data.productList || []) {
-        if (item.num) {
-          item.count = 0
-        }
-        if (item.subOrderNumber === code) {
-          item.count || item.count === 0 ? (item.count += 1) : (item.count = 0)
-        }
-      }
-      const index = orderList.value.findIndex((item) => item.id === res.data.id)
-      if (index === -1) {
-        orderList.value.unshift(res.data)
-      }
-    }
-    orderNumber.value = code
-    productionOrderNumber.value = ''
-    isLock.value = false
-    inputRef.value.focus()
-  } catch (e) {
-    productionOrderNumber.value = ''
-    isLock.value = false
-    inputRef.value.focus()
-    showError(e)
-  } finally {
-    shipmentLoading.value = false
-  }
-}
-const saveShipment = async () => {
-  if (orderList.value.length === 0) {
-    return ElMessage({
-      message: '请选择订单',
-      type: 'warning',
-      offset: window.innerHeight / 2,
-    })
-  }
-  try {
-    await shipmentFormRef.value?.validate()
-  } catch {
-    return
-  }
-
-  const isEqual = orderList.value.some(
-    (item) => item.namespace === orderList.value[0].namespace,
-  )
-  if (!isEqual) {
-    ElMessage({
-      message: '请选择同一工厂的订单',
-      type: 'warning',
-      offset: window.innerHeight / 2,
-    })
-    return
-  }
-  const data: ShipmentOrderRes[] = []
-  orderList.value.forEach((item) => {
-    shipmentForm.value.namespace = item.namespace
-    const order = []
-    for (const jj of item.productList || []) {
-      if (jj.count === 0) continue
-      const subOrder = {
-        erpSubOrderNumber: jj.erpSubOrderNumber,
-        subOrderNumber: jj.subOrderNumber,
-        sendOutQuantity: jj.count,
-      }
-      order.push(subOrder)
-    }
-    if (order) {
-      data.push(...order)
-    }
-  })
-  try {
-    const res = await saveOrder(data, shipmentForm.value)
-    ElMessage.success(res.message)
-    shipmentVisible.value = false
-    loadTabData()
-    search()
-  } catch (e) {
-    showError(e)
-  }
-}
 // 下载稿件
 const downloadManuscript = async () => {
   if (selection.value.length === 0) {