feat: 已取消状态增加子tab

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',

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(() => {

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
   }
 }

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',