feat: 已取消状态增加子tab

5d2b5405 · qinjianhui · 5b734766 · 5d2b5405 · 5d2b5405 · 5d2b5405
Commit 5d2b5405 authored May 13, 2026 by qinjianhui
Showing with 84 additions and 24 deletions

src/api/factoryOrderNew.ts
+19 -0

src/views/order/factoryOrderNew/hooks/useOrderListAndDetail.ts
+4 -0

src/views/order/factoryOrderNew/hooks/useOrderStatusTree.ts
+32 -22

src/views/order/factoryOrderNew/index.vue
+29 -2

No files found.
--- a/src/api/factoryOrderNew.ts
+++ b/src/api/factoryOrderNew.ts
@@ -44,6 +44,7 @@ export function getFactoryOrderNewListApi(
  status?: string,
  subStatus?: number,
  pauseReason?: number,
+  cancelSubType?: number,
 ) {
  const body = normalizePodOrderQueryPayload({ ...data } as Record<
    string,
@@ -58,6 +59,7 @@ export function getFactoryOrderNewListApi(
      status,
      acceptedStatus: subStatus,
      pauseReason,
+      cancelSubType,
    },
  )
 }
@@ -308,6 +310,23 @@ export function getSuspendStatisticsApi(
  )
 }
+/** 已取消列表子 tab 数量统计（与挂起 suspendStatistics 用法一致） */
+export function getCancelledOrderStatisticsApi(
+  data: SearchForm,
+  currentPage: number,
+  pageSize: number,
+  cancelSubType?: number,
+) {
+  const body = normalizePodOrderQueryPayload({ ...data } as Record<
+    string,
+    unknown
+  >)
+  return axios.post<never, BaseRespData<Record<string, number>>>(
+    'factory/podOrder/cancelledStatistics',
+    { ...body, currentPage, pageSize, cancelSubType },
+  )
+}
 export function getSuspendDetailApi(id: number | string) {
  return axios.get<never, BaseRespData<ProductListData[]>>(
    'factory/podOrderPauseControl/get',

--- a/src/views/order/factoryOrderNew/hooks/useOrderListAndDetail.ts
+++ b/src/views/order/factoryOrderNew/hooks/useOrderListAndDetail.ts
@@ -21,6 +21,7 @@ interface UseOrderListAndDetailOptions {
  getQueryPayload: () => Record<string, unknown>
  getListPageAcceptedSubStatus: () => number | undefined
  suspendedSubTab: Ref<number>
+  cancelledSubTab: Ref<number>
 }
 export function useOrderListAndDetail(options: UseOrderListAndDetailOptions) {
@@ -31,6 +32,7 @@ export function useOrderListAndDetail(options: UseOrderListAndDetailOptions) {
    getQueryPayload,
    getListPageAcceptedSubStatus,
    suspendedSubTab,
+    cancelledSubTab,
  } = options
  const subLoading = ref(false)
@@ -70,6 +72,7 @@ export function useOrderListAndDetail(options: UseOrderListAndDetailOptions) {
  } = usePageList<FactoryOrderNewListData>({
    query: (page, size) => {
      const isSuspend = status.value === 'SUSPEND'
+      const isCancelled = status.value === 'CANCELLED'
      return getFactoryOrderNewListApi(
        buildListQueryBody(),
        page,
@@ -77,6 +80,7 @@ export function useOrderListAndDetail(options: UseOrderListAndDetailOptions) {
        status.value === 'ALL' ? undefined : status.value,
        getListPageAcceptedSubStatus(),
        isSuspend ? suspendedSubTab.value : undefined,
+        isCancelled ? cancelledSubTab.value : undefined,
      ).then(async (res) => {
        const records = res.data.records || []
        await nextTick(() => {

--- a/src/views/order/factoryOrderNew/hooks/useOrderStatusTree.ts
+++ b/src/views/order/factoryOrderNew/hooks/useOrderStatusTree.ts
 import { computed, ref, nextTick } from 'vue'
 import {
+  getCancelledOrderStatisticsApi,
  getPodOrderAcceptedStatisticsApi,
  getPodOrderStateGroupListApi,
  getSuspendStatisticsApi,
 } from '@/api/factoryOrderNew'
 import type { StatusTreeNode } from '@/types/api/order/factoryOrderNew'
+import type { SearchForm } from '@/types/api/factoryOrderNew'
 interface UseOrderStatusTreeOptions {
  getQueryPayload: () => Record<string, unknown>
  currentPage: { value: number }
  pageSize: { value: number }
-  onClearTableState: () => void
-  onRefreshCurrentView: () => void
 }
 export function useOrderStatusTree(options: UseOrderStatusTreeOptions) {
@@ -19,8 +19,6 @@ export function useOrderStatusTree(options: UseOrderStatusTreeOptions) {
    getQueryPayload,
    currentPage,
    pageSize,
-    onClearTableState,
-    onRefreshCurrentView,
  } = options
  const cardLayoutStatuses = [
@@ -52,6 +50,13 @@ export function useOrderStatusTree(options: UseOrderStatusTreeOptions) {
    { label: '其他', key: 'otherReasonCount', value: 4, count: 0 },
  ])
  const suspendedSubTab = ref(1)
+  /** 已取消：子 tab 与 list_page 的 cancelSubType 取值 1/2/3 对应 */
+  const cancelledTabs = ref([
+    { label: '客户拦截', key: 'customerInterceptCount', value: 1, count: 0 },
+    { label: '协商取消', key: 'mutualAgreeCancelCount', value: 2, count: 0 },
+    { label: '其他', key: 'otherReasonCount', value: 3, count: 0 },
+  ])
+  const cancelledSubTab = ref(1)
  const treeRef = ref()
  const isCardLayout = computed(() => cardLayoutStatuses.includes(status.value))
@@ -107,6 +112,25 @@ export function useOrderStatusTree(options: UseOrderStatusTreeOptions) {
    }
  }
+  const getCancelledCounts = async () => {
+    try {
+      const res = await getCancelledOrderStatisticsApi(
+        getQueryPayload() as SearchForm,
+        currentPage.value,
+        pageSize.value,
+        cancelledSubTab.value,
+      )
+      if (res.code !== 200 || !res.data) return
+      const data = res.data || {}
+      cancelledTabs.value = cancelledTabs.value.map((tab) => ({
+        ...tab,
+        count: data[String(tab.key)] ?? 0,
+      }))
+    } catch (e) {
+      console.error(e)
+    }
+  }
  const loadStatusTreeCounts = async () => {
    try {
      const res = await getPodOrderStateGroupListApi()
@@ -121,22 +145,6 @@ export function useOrderStatusTree(options: UseOrderStatusTreeOptions) {
    }
  }
-  const handleStatusNodeClick = (node: StatusTreeNode) => {
-    status.value = node.status
-    if (node.status !== 'PENDING_RECEIVE') {
-      pendingAcceptSubTab.value = 'PENDING_RECEIVE'
-    }
-    if (node.status !== 'SUSPEND') {
-      suspendedSubTab.value = 1
-    }
-    onClearTableState()
-    if (!isSpecialLayout.value) {
-      onRefreshCurrentView()
-    }
-    if (node.status === 'SUSPEND') {
-      void getSuspendCounts()
-    }
-  }
  const handlePendingAcceptTabClick = (
    tab: 'PENDING_RECEIVE' | 'ACCEPT_FAIL_OUT_OF_STOCK',
@@ -160,6 +168,8 @@ export function useOrderStatusTree(options: UseOrderStatusTreeOptions) {
    pendingAcceptCounts,
    suspendedTabs,
    suspendedSubTab,
+    cancelledTabs,
+    cancelledSubTab,
    treeRef,
    isCardLayout,
    isSpecialLayout,
@@ -167,9 +177,9 @@ export function useOrderStatusTree(options: UseOrderStatusTreeOptions) {
    getListPageAcceptedSubStatus,
    getPendingReceiveCounts,
    getSuspendCounts,
+    getCancelledCounts,
    loadStatusTreeCounts,
-    handleStatusNodeClick,
    handlePendingAcceptTabClick,
-    toggleExpand,
+    toggleExpand
  }
 }
--- a/src/views/order/factoryOrderNew/index.vue
+++ b/src/views/order/factoryOrderNew/index.vue
@@ -647,6 +647,18 @@
        </div>
      </div>
+      <div v-if="status === 'CANCELLED'" class="status-subtabs">
+        <div
+          v-for="tab in cancelledTabs"
+          :key="tab.value"
+          class="status-subtab"
+          :class="{ active: cancelledSubTab === tab.value }"
+          @click="handleCancelledTabClick(tab.value)"
+        >
+          {{ tab.label }}({{ tab.count || 0 }})
+        </div>
+      </div>
      <div v-if="status === 'PENDING_RECEIVE'" class="status-subtabs">
        <div
          class="status-subtab"
@@ -1142,6 +1154,8 @@ const {
  pendingAcceptCounts,
  suspendedTabs,
  suspendedSubTab,
+  cancelledTabs,
+  cancelledSubTab,
  treeRef,
  isCardLayout,
  isSpecialLayout,
@@ -1149,6 +1163,7 @@ const {
  getListPageAcceptedSubStatus,
  getPendingReceiveCounts,
  getSuspendCounts,
+  getCancelledCounts,
  loadStatusTreeCounts,
  handlePendingAcceptTabClick: handlePendingAcceptTabClickRaw,
  toggleExpand,
@@ -1156,8 +1171,6 @@ const {
  getQueryPayload,
  currentPage: statusCurrentPageRef,
  pageSize: statusPageSizeRef,
-  onClearTableState: () => {},
-  onRefreshCurrentView: () => {},
 })
 getFactoryOrderSearchVisibilityContext = () => ({
  status: status.value,
@@ -1195,6 +1208,7 @@ const {
  getQueryPayload,
  getListPageAcceptedSubStatus,
  suspendedSubTab,
+  cancelledSubTab,
 })
 statusCurrentPageRef.value = currentPage.value
 statusPageSizeRef.value = pageSize.value
@@ -1269,6 +1283,9 @@ const refreshCurrentView = (options?: { isRefreshTree?: boolean }) => {
  if (status.value === 'SUSPEND') {
    void getSuspendCounts()
  }
+  if (status.value === 'CANCELLED') {
+    void getCancelledCounts()
+  }
  refreshTableList()
 }
 refreshCurrentViewProxy.value = () => refreshCurrentView()
@@ -1342,6 +1359,9 @@ const handleStatusNodeClick = (node: { status: string }) => {
  if (node.status !== 'SUSPEND') {
    suspendedSubTab.value = 1
  }
+  if (node.status !== 'CANCELLED') {
+    cancelledSubTab.value = 1
+  }
  clearTableState()
  if (!isSpecialLayout.value) {
    refreshCurrentView()
@@ -1358,6 +1378,13 @@ const handleSuspendTabClick = (value: number) => {
  statusCurrentPageRef.value = 1
  refreshTableList()
 }
+const handleCancelledTabClick = (value: number) => {
+  if (cancelledSubTab.value === value) return
+  cancelledSubTab.value = value
+  currentPage.value = 1
+  statusCurrentPageRef.value = 1
+  refreshTableList()
+}
 const mainColumns = computed(() => [
  {
    prop: 'factoryOrderNumber',