feat: 代码优化

788c413a · qinjianhui · f7899557 · 788c413a · 788c413a · 788c413a
Commit 788c413a authored Mar 20, 2026 by qinjianhui
7 changed files
--- a/.cursor/rules/factory-rule.mdc
+++ b/.cursor/rules/factory-rule.mdc
@@ -10,21 +10,21 @@ Vue3 + Element Plus + Pinia + Axios + TypeScript + Vite
 ## UI 相关编码要求
-- 当有上下两个子表时，使用 `src/components/splitDiv/splitDiv.vue` 组件，使用时注意传递对应的 props 和插槽
+- 当有上下两个子表时，使用 `src/components/splitDiv/splitDiv.vue` 组件，使用时注意传递对应的 props 和插槽
-- 表格相关布局时，使用 `src/components/TableView.vue` 组件，使用时注意传递对应的 props 和插槽
+- 表格相关布局时，使用 `src/components/TableView.vue` 组件，使用时注意传递对应的 props 和插槽
-- `ElDialog`组件中`footer`插槽都放在中间位置
+- `ElDialog`组件中`footer`插槽都放在中间位置
 ## 接口相关
-- 所有接口统一放在 `src/api/`目录下，当模块多时，可按模块创建子目录，例如 `src/api/factoryOrderNew/xxx1`、`src/api/factoryOrderNew/xxx2`、`src/api/factoryOrderNew/xxx3`
+- 所有接口统一放在 `src/api/`目录下，当模块多时，可按模块创建子目录，例如 `src/api/factoryOrderNew/xxx1`、`src/api/factoryOrderNew/xxx2`、`src/api/factoryOrderNew/xxx3`
 ## TS 类型定义相关
-- 所有类型定义统一放在 `src/types/`目录下，当模块多时，可按模块创建子目录，例如 `src/types/factoryOrderNew/xxx1`、`src/types/factoryOrderNew/xxx2`、`src/types/factoryOrderNew/xxx3`
+- 所有类型定义统一放在 `src/types/`目录下，当模块多时，可按模块创建子目录，例如 `src/types/factoryOrderNew/xxx1`、`src/types/factoryOrderNew/xxx2`、`src/types/factoryOrderNew/xxx3`
 ## 代码编写原则
-- 只编写解决问题所需的最少代码
+- 只编写解决问题所需的最少代码
-- 避免冗余实现和过渡设计
+- 避免冗余实现和过渡设计
-- 实现一个复杂功能时，需要合理拆分组件，使每个文件的代码更易维护
+- 实现一个复杂功能时，需要合理拆分组件，使每个文件的代码更易维护
-- 封装组件时，要考虑组件的复用性
+- 封装组件时，要考虑组件的复用性
--- a/src/api/factoryOrderNew.ts
+++ b/src/api/factoryOrderNew.ts
@@ -36,7 +36,7 @@ export function getFactoryOrderNewListApi(
 export function getFactoryOrderNewDetailApi(id: number | string) {
  return axios.get<never, BaseRespData<ProductListData[]>>(
-    'factory/orderNew/detail',
+    'factory/podOrder/get',
    {
      params: { id },
    },
@@ -45,7 +45,7 @@ export function getFactoryOrderNewDetailApi(id: number | string) {
 export function getFactoryOrderNewLogApi(id: number | string) {
  return axios.get<never, BaseRespData<LogListData[]>>(
-    'factory/orderNew/log',
+    'factory/podOrder/getLog',
    {
      params: { id },
    },
@@ -167,13 +167,51 @@ export function pickFailApi(ids: (number | string)[]) {
  )
 }
-export function getRestockListApi(params: {
+export function getCardLayoutListApi(
-  stockSku?: string
+  data: Record<string, unknown>,
-  styleNo?: string
+  currentPage: number,
-}) {
+  pageSize: number,
-  return axios.get<never, BaseRespData<RestockData[]>>(
+) {
-    'factory/orderNew/restockList',
+  return axios.post<never, BasePaginationData<FactoryOrderNewListData>>(
-    { params },
+    'factory/podOrderBatchDownload/list_page',
+    { ...data, currentPage, pageSize },
+  )
+}
+export function getSuspendListApi(
+  data: SearchForm,
+  currentPage: number,
+  pageSize: number,
+  statusCode?: string,
+) {
+  return axios.post<never, BasePaginationData<FactoryOrderNewListData>>(
+    'factory/podOrderPauseControl/list_page',
+    { ...data, currentPage, pageSize, statusCode },
+  )
+}
+export function getSuspendDetailApi(id: number | string) {
+  return axios.get<never, BaseRespData<ProductListData[]>>(
+    'factory/podOrderPauseControl/get',
+    { params: { id } },
+  )
+}
+export function getSuspendLogApi(id: number | string) {
+  return axios.get<never, BaseRespData<LogListData[]>>(
+    'factory/podOrderPauseControl/getLog',
+    { params: { id } },
+  )
+}
+export function getRestockListApi(
+  data: Record<string, unknown>,
+  currentPage: number,
+  pageSize: number,
+) {
+  return axios.post<never, BasePaginationData<RestockData>>(
+    'factory/podOrderBatchDownload/list_page',
+    { ...data, currentPage, pageSize },
  )
 }
@@ -183,7 +221,7 @@ export function getBatchManageListApi(
  pageSize: number,
 ) {
  return axios.post<never, BasePaginationData<BatchManageData>>(
-    'factory/orderNew/batchManage/list_page',
+    'factory/podOrderBatchDownload/list_page',
    { ...data, currentPage, pageSize },
  )
 }

--- a/src/types/api/factoryOrderNew.ts
+++ b/src/types/api/factoryOrderNew.ts
@@ -8,13 +8,13 @@ export interface StatusTreeNode {
 export interface SearchForm {
  platform?: string
  craftCode?: string | string[]
-  stockSku?: string
+  thirdSkuCode?: string
-  styleNo?: string
+  supplierProductNo?: string
-  batchNo?: string
+  batchArrangeNumber?: string
  orderNumber?: string
  customerOrderNumber?: string
  shopOrderNumber?: string
-  productType?: string | number | (string | number)[]
+  productMark?: string | number | (string | number)[]
  multi?: boolean | null
  timeType?: number | null
  startTime?: string | null
@@ -28,11 +28,10 @@ export interface SearchForm {
  replaceShipment?: number | string
  shipmentType?: number | string
  tagsIdArr?: string[]
-  productMark?: string
  source?: string
  size?: string
  logisticsCompanyCode?: string
-  blocking?: boolean
+  interceptStatus?: boolean
  standardDesignImage?: number
 }

--- a/src/views/order/factoryOrderNew/component/BatchManageTable.vue
+++ b/src/views/order/factoryOrderNew/component/BatchManageTable.vue
@@ -14,7 +14,7 @@
        </ElFormItem>
        <ElFormItem label="创建人">
          <ElSelect
-            v-model="filterForm.creator"
+            v-model="filterForm.employeeId"
            placeholder="请选择"
            clearable
            filterable
@@ -24,7 +24,7 @@
              v-for="item in employeeList"
              :key="item.id"
              :label="item.account"
-              :value="item.account"
+              :value="item.id"
            />
          </ElSelect>
        </ElFormItem>
@@ -50,35 +50,35 @@
            clearable
            style="width: 120px"
          >
-            <ElOption label="未下载" value="NOT_DOWNLOADED" />
+            <ElOption label="未下载" :value="0" />
-            <ElOption label="已下载" value="DOWNLOADED" />
+            <ElOption label="已下载" :value="1" />
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="排版状态">
          <ElSelect
-            v-model="filterForm.layoutStatus"
+            v-model="filterForm.syntheticStatus"
            placeholder="请选择"
            clearable
            style="width: 120px"
          >
-            <ElOption label="未排版" value="NOT_LAYOUT" />
+            <ElOption label="否" :value="0" />
-            <ElOption label="已排版" value="LAYOUT" />
+            <ElOption label="是" :value="1" />
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="自动排版">
          <ElSelect
-            v-model="filterForm.autoLayout"
+            v-model="filterForm.automaticComposing"
            placeholder="请选择"
            clearable
            style="width: 120px"
          >
-            <ElOption label="是" :value="true" />
+            <ElOption label="是" :value="1" />
-            <ElOption label="否" :value="false" />
+            <ElOption label="否" :value="0" />
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="批次号">
          <ElInput
-            v-model="filterForm.batchNo"
+            v-model="filterForm.batchArrangeNumber"
            placeholder="批次号"
            clearable
            style="width: 140px"
@@ -161,7 +161,6 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { getBatchManageListApi, batchDeleteApi } from '@/api/factoryOrderNew'
 import type { BatchManageData } from '@/types/api/factoryOrderNew'
 import type { PaginationData } from '@/types/api'
-import type { CustomColumn } from '@/types/table'
 import TableView from '@/components/TableView.vue'
 import ArrangeDialog from './ArrangeDialog.vue'
 import { getEmployeeListApi } from '@/api/common'
@@ -205,165 +204,158 @@ const getStandardDesignImageText = (value: number): string => {
  const map: Record<number, string> = { 0: '否', 1: '是', 2: '混合' }
  return map[value] ?? '-'
 }
-const columns: CustomColumn<BatchManageData>[] = [
+const columns = [
-  [
+  {
-    {
+    label: '批次号',
-      label: '批次号',
+    prop: 'batchArrangeNum',
-      prop: 'batchArrangeNum',
+    width: 120,
-      width: 120,
+    align: 'center',
-      align: 'center',
+  },
-    },
+  {
-    {
+    label: '下载状态',
-      label: '下载状态',
+    slot: 'downloadStatus',
-      slot: 'downloadStatus',
+    width: 90,
-      width: 90,
+    align: 'center',
-      align: 'center',
+    render: ({ row }: { row: BatchManageData; index: number }) => {
-      render: (item: BatchManageData) => {
+      return (
-        return (
+        <div>
-          <div>
+          <el-tag type={row?.downloadStatus ? 'success' : 'danger'}>
-            <el-tag type={item.downloadStatus ? 'success' : 'danger'}>
+            {row?.downloadStatus ? '已下载' : '未下载'}
-              {item.downloadStatus ? '已下载' : '未下载'}
+          </el-tag>
-            </el-tag>
+        </div>
-          </div>
+      )
-        )
-      },
-    },
-    {
-      label: '订单数量',
-      prop: 'productNum',
-      width: 85,
-      align: 'center',
-    },
-    {
-      label: '素材数量',
-      width: 85,
-      prop: 'materialNum',
-      align: 'center',
-    },
-    {
-      label: '创建人',
-      width: 85,
-      prop: 'employeeAccount',
-      align: 'center',
    },
-    {
+  },
-      label: '工艺类型',
+  {
-      width: 150,
+    label: '订单数量',
-      prop: 'craftType',
+    prop: 'productNum',
-      align: 'center',
+    width: 85,
-      render: (item: BatchManageData) => {
+    align: 'center',
-        if (!item.craftType) {
+  },
-          return (
+  {
-            <div>
+    label: '素材数量',
-              <span>-</span>
+    width: 85,
-            </div>
+    prop: 'materialNum',
-          )
+    align: 'center',
-        }
+  },
-        const labels = item.craftType
+  {
-          .split(',')
+    label: '创建人',
-          .map((type) => type.trim())
+    width: 85,
-          .map(
+    prop: 'employeeAccount',
-            (type) =>
+    align: 'center',
-              processType.value.find((e: ProcessTypeData) => e.value === type)
+  },
-                ?.label || type,
+  {
-          )
+    label: '工艺类型',
-          .filter(Boolean)
+    width: 150,
+    prop: 'craftType',
+    align: 'center',
+    render: ({ row }: { row: BatchManageData; index: number }) => {
+      if (row && !row.craftType) {
        return (
          <div>
-            <span>{labels.join(',')}</span>
+            <span>-</span>
          </div>
        )
-      },
+      }
-    },
+      const labels: string[] = row?.craftType?.split(',') ?? []
-    {
+        .map((type: string) => type.trim())
-      label: '规范素材',
+        .map((type: string) =>
-      minWidth: 180,
+          processType.value.find((e: ProcessTypeData) => e.value === type)
-      prop: 'standardDesignImage',
+            ?.label || type,
-      align: 'center',
-      render: (item: BatchManageData) => {
-        return (
-          <div>
-            <span>
-              {getStandardDesignImageText(item.standardDesignImage ?? 0)}
-            </span>
-          </div>
        )
-      },
+        .filter((type: string | undefined) => type !== undefined)
-    },
-    {
+      return (
-      label: '失败原因',
+        <div>
-      minWidth: 250,
+          <span>{labels.join(',')}</span>
-      prop: 'failReason',
+        </div>
-      align: 'left',
+      )
-      render: (item: BatchManageData) => {
-        return (
-          <div>
-            <span v-html={item.failReason}></span>
-          </div>
-        )
-      },
-    },
-    {
-      label: '创建时间',
-      width: 180,
-      prop: 'createTime',
-      align: 'center',
    },
-    {
+  },
-      label: '完成时间',
+  {
-      width: 180,
+    label: '规范素材',
-      prop: 'finishTime',
+    minWidth: 180,
-      align: 'center',
+    prop: 'standardDesignImage',
+    align: 'center',
+    render: ({ row }: { row: BatchManageData; index: number }) => {
+      return (
+        <div>
+          <span>
+            {getStandardDesignImageText(row?.standardDesignImage ?? 0)}
+          </span>
+        </div>
+      )
    },
-    {
+  },
-      label: '自动排版',
+  {
-      width: 85,
+    label: '失败原因',
-      prop: 'automaticComposing',
+    minWidth: 250,
-      align: 'center',
+    prop: 'failReason',
-      render: (item: BatchManageData) => {
+    align: 'left',
-        return (
+    render: ({ row }: { row: BatchManageData; index: number }) => {
-          <div>
+      return (
-            <span>{item.automaticComposing ? '是' : '否'}</span>
+        <div>
-          </div>
+          <span v-html={row?.failReason}></span>
-        )
+        </div>
-      },
+      )
    },
-    {
+  },
-      label: '排版参数',
+  {
-      width: 140,
+    label: '创建时间',
-      prop: 'composingParam',
+    width: 180,
-      align: 'center',
+    prop: 'createTime',
-      render: (item: BatchManageData) => {
+    align: 'center',
-        return (
+  },
-          <div>
+  {
-            <span>{item.composingParam?.split(';').join('\n')}</span>
+    label: '完成时间',
-          </div>
+    width: 180,
-        )
+    prop: 'finishTime',
-      },
+    align: 'center',
+  },
+  {
+    label: '自动排版',
+    width: 85,
+    prop: 'automaticComposing',
+    align: 'center',
+    render: ({ row }: { row: BatchManageData; index: number }) => {
+      return (
+        <div>
+          <span>{row?.automaticComposing ? '是' : '否'}</span>
+        </div>
+      )
    },
-    {
+  },
-      label: '操作',
+  {
-      slot: 'operate',
+    label: '排版参数',
-      width: 260,
+    width: 140,
-      align: 'center',
+    prop: 'composingParam',
-      fixed: 'right',
+    align: 'center',
-      prop: 'operate',
+    render: ({ row }: { row: BatchManageData; index: number }) => {
+      return (
+        <div>
+          <span>{row?.composingParam?.split(';').join('\n')}</span>
+        </div>
+      )
    },
-  ],
+  },
+  {
+    label: '操作',
+    slot: 'operate',
+    width: 260,
+    align: 'center',
+    fixed: 'right',
+    prop: 'operate',
+  },
 ]
 const filterForm = reactive({
  createTimeRange: [] as string[],
-  startTimeRange: [] as string[],
+  employeeId: '' as string | number,
-  finishTimeRange: [] as string[],
-  creator: '',
-  arrangeGroup: '',
  craftType: '',
-  downloadStatus: '',
+  downloadStatus: '' as string | number,
-  layoutStatus: '',
+  syntheticStatus: '' as string | number,
-  autoLayout: '' as string | boolean,
+  automaticComposing: '' as string | number,
-  batchNo: '',
+  batchArrangeNumber: '',
 })
 const {
@@ -378,7 +370,13 @@ const {
 } = usePageList<BatchManageData>({
  initPageSize: 50,
  query: async (current, size) => {
-    const res = await getBatchManageListApi({ ...filterForm }, current, size)
+    const { createTimeRange, ...rest } = filterForm
+    const params: Record<string, unknown> = { ...rest }
+    if (createTimeRange?.length === 2) {
+      params.startTime = createTimeRange[0]
+      params.endTime = createTimeRange[1]
+    }
+    const res = await getBatchManageListApi(params, current, size)
    return (res.data || {
      total: 0,
      size,

--- a/src/views/order/factoryOrderNew/component/CardLayout.vue
+++ b/src/views/order/factoryOrderNew/component/CardLayout.vue
 <template>
-  <div class="card-layout">
+  <div v-loading="loading" class="card-layout">
-    <div v-if="data.length > 0" class="card-grid">
+    <div v-if="cardData.length > 0" class="card-grid">
      <div
-        v-for="item in data"
+        v-for="item in cardData"
        :key="item.id"
        class="card-grid-item"
        @click="handleCardClick(item)"
@@ -115,23 +115,26 @@
        条数据
      </div>
      <ElPagination
-        v-model:current-page="currentPageModel"
+        :current-page="currentPage"
-        v-model:page-size="pageSizeModel"
+        :page-size="pageSize"
        :page-sizes="[50, 100, 200, 300]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin: 0 auto"
-        @size-change="$emit('page-size-change', $event)"
+        @size-change="onPageSizeChange"
-        @current-change="$emit('current-page-change', $event)"
+        @current-change="onCurrentPageChange"
      />
    </div>
  </div>
 </template>
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import { ElMessage } from 'element-plus'
+import { getCardLayoutListApi } from '@/api/factoryOrderNew'
+import type { PaginationData } from '@/types/api'
+import usePageList from '@/utils/hooks/usePageList'
 interface CardItem {
  id: number | string
@@ -139,29 +142,38 @@ interface CardItem {
 }
 const props = defineProps<{
-  data: CardItem[]
+  status: string
-  total: number
+  queryPayload: Record<string, unknown>
-  currentPage: number
+  initPageSize?: number
-  pageSize: number
 }>()
 const emit = defineEmits<{
-  'page-size-change': [size: number]
-  'current-page-change': [page: number]
  'selection-change': [items: CardItem[]]
 }>()
-const selectedItems = ref<CardItem[]>([])
+const {
+  loading,
-const currentPageModel = computed({
+  currentPage,
-  get: () => props.currentPage,
+  pageSize,
-  set: (val) => emit('current-page-change', val),
+  total,
-})
+  data: cardData,
-const pageSizeModel = computed({
+  onCurrentPageChange,
-  get: () => props.pageSize,
+  onPageSizeChange,
-  set: (val) => emit('page-size-change', val),
+  refresh,
+} = usePageList<CardItem>({
+  initPageSize: props.initPageSize || 100,
+  query: async (current, size) => {
+    const payload = {
+      ...props.queryPayload,
+      statusCode: props.status === 'ALL' ? undefined : props.status,
+    }
+    const res = await getCardLayoutListApi(payload, current, size)
+    return res.data as unknown as PaginationData<CardItem>
+  },
 })
+const selectedItems = ref<CardItem[]>([])
 const isSelected = (item: CardItem) =>
  selectedItems.value.some((s) => s.id === item.id)
@@ -187,7 +199,7 @@ const clearSelection = () => {
 const getSelectedIds = () => selectedItems.value.map((i) => i.id)
-defineExpose({ clearSelection, getSelectedIds })
+defineExpose({ clearSelection, getSelectedIds, refresh })
 </script>
 <style scoped lang="scss">

--- a/src/views/order/factoryOrderNew/component/WaitingRestockTable.vue
+++ b/src/views/order/factoryOrderNew/component/WaitingRestockTable.vue
@@ -77,7 +77,6 @@ import { reactive } from 'vue'
 import { ElMessage } from 'element-plus'
 import { getRestockListApi, restockCheckApi } from '@/api/factoryOrderNew'
 import type { RestockData } from '@/types/api/factoryOrderNew'
-import type { PaginationData } from '@/types/api'
 import type { CustomColumn } from '@/types/table'
 import TableView from '@/components/TableView.vue'
 import usePageList from '@/utils/hooks/usePageList'
@@ -99,18 +98,15 @@ const {
 } = usePageList<RestockData>({
  initPageSize: 50,
  query: async (current, size) => {
-    const res = await getRestockListApi({
+    const res = await getRestockListApi(
-      stockSku: filterForm.stockSku || undefined,
+      {
-      styleNo: filterForm.styleNo || undefined,
+        stockSku: filterForm.stockSku || undefined,
-    })
+        styleNo: filterForm.styleNo || undefined,
-    const records = res.data || []
+      },
-    const start = (current - 1) * size
-    return {
-      total: records.length,
-      size,
      current,
-      records: records.slice(start, start + size),
+      size,
-    } as PaginationData<RestockData>
+    )
+    return res.data
  },
 })

--- a/src/views/order/factoryOrderNew/index.vue
+++ b/src/views/order/factoryOrderNew/index.vue
@@ -86,7 +86,7 @@
            <ElFormItem label="库存SKU">
              <ElInput
-                v-model.trim="searchForm.stockSku"
+                v-model.trim="searchForm.thirdSkuCode"
                placeholder="库存SKU"
                clearable
                style="width: 140px"
@@ -95,7 +95,7 @@
            <ElFormItem label="款号">
              <ElInput
-                v-model.trim="searchForm.styleNo"
+                v-model.trim="searchForm.supplierProductNo"
                placeholder="款号"
                clearable
                style="width: 140px"
@@ -104,7 +104,7 @@
            <ElFormItem label="批次号">
              <ElInput
-                v-model.trim="searchForm.batchNo"
+                v-model.trim="searchForm.batchArrangeNumber"
                placeholder="批次号"
                clearable
                style="width: 140px"
@@ -122,7 +122,7 @@
            <ElFormItem label="商品类型">
              <ProductTypeFilter
-                v-model="searchForm.productType"
+                v-model="searchForm.productMark"
                :options="productTypeGroups"
                :multiple="false"
                placeholder="请选择商品类型"
@@ -366,7 +366,7 @@
                  </ElFormItem>
                  <ElFormItem v-if="status !== 'CANCELLED'" label="拦截订单">
                    <ElSelect
-                      v-model="searchForm.blocking"
+                      v-model="searchForm.interceptStatus"
                      placeholder="请选择"
                      clearable
                      filterable
@@ -667,7 +667,6 @@
        <div
          class="status-subtab"
          :class="{ active: pendingAcceptSubTab === 'PENDING_RECEIVE' }"
-          @click="pendingAcceptSubTab = 'PENDING_RECEIVE'"
        >
          待接单<span> (0) </span>
        </div>
@@ -676,7 +675,6 @@
          :class="{
            active: pendingAcceptSubTab === 'ACCEPT_FAIL_OUT_OF_STOCK',
          }"
-          @click="pendingAcceptSubTab = 'ACCEPT_FAIL_OUT_OF_STOCK'"
        >
          接单失败-缺货<span> (0) </span>
        </div>
@@ -694,13 +692,9 @@
      <div v-if="isCardLayout" class="card-content">
        <CardLayout
          ref="cardLayoutRef"
-          :data="(tableData as { id: number | string; [key: string]: unknown }[])"
+          :status="status"
-          :total="total"
+          :query-payload="getQueryPayload()"
-          :current-page="currentPage"
-          :page-size="pageSize"
          @selection-change="handleCardSelectionChange"
-          @page-size-change="handlePageSizeChange"
-          @current-page-change="handleCurrentPageChange"
        />
      </div>
@@ -727,12 +721,16 @@
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              style="margin: 10px auto 0"
-              @size-change="handlePageSizeChange"
+              @size-change="onPageSizeChange"
-              @current-change="handleCurrentPageChange"
+              @current-change="onCurrentPageChange"
            />
          </template>
          <template #bottom>
-            <el-tabs v-model="activeTab" class="tabs-wrapper">
+            <el-tabs
+              v-model="activeTab"
+              class="tabs-wrapper"
+              @tab-click="handleSubTabClick"
+            >
              <el-tab-pane name="product" label="包含商品">
                <div class="sub-table-wrapper">
                  <TableView
@@ -801,7 +799,7 @@ import {
  CaretTop,
  CaretBottom,
 } from '@element-plus/icons-vue'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import {
  ElForm,
  ElFormItem,
@@ -825,6 +823,9 @@ import {
  getFactoryOrderNewDetailApi,
  getFactoryOrderNewListApi,
  getFactoryOrderNewLogApi,
+  getSuspendListApi,
+  getSuspendDetailApi,
+  getSuspendLogApi,
  getPodOrderStateGroupListApi,
  refreshProductInfoApi,
  transferOldFlowApi,
@@ -1154,7 +1155,7 @@ const mainColumns: CustomColumn<FactoryOrderNewListData>[] = [
  },
 ]
-const productColumns: CustomColumn<ProductListData>[] = [
+const productColumns = [
  {
    key: 'productImage',
    prop: 'productImage',
@@ -1222,6 +1223,12 @@ const productColumns: CustomColumn<ProductListData>[] = [
  { key: 'remark', prop: 'remark', label: '备注', width: 160 },
 ]
+const getQueryPayload = () => ({
+  ...searchForm.value,
+  startTime: dateRange.value?.[0] || null,
+  endTime: dateRange.value?.[1] || null,
+})
 const {
  loading,
  currentPage,
@@ -1230,30 +1237,28 @@ const {
  data: tableData,
  onCurrentPageChange,
  onPageSizeChange,
-  refresh,
+  refresh: refreshTableList,
 } = usePageList<FactoryOrderNewListData>({
-  query: (page, size) =>
+  query: (page, size) => {
-    getFactoryOrderNewListApi(
+    if (status.value === 'SUSPEND') {
-      {
+      return getSuspendListApi(
-        ...searchForm.value,
+        getQueryPayload(),
-        startTime: dateRange.value?.[0] || null,
+        page,
-        endTime: dateRange.value?.[1] || null,
+        size,
-      },
+        status.value,
+      ).then((res) => res.data)
+    }
+    return getFactoryOrderNewListApi(
+      getQueryPayload(),
      page,
      size,
-      getStatusCodeForQuery(),
+      status.value === 'ALL' ? undefined : status.value,
-    ).then((res) => res.data),
+    ).then((res) => res.data)
+  },
 })
-const getStatusCodeForQuery = () => {
-  if (status.value === 'ALL') return undefined
-  if (status.value === 'PENDING_RECEIVE') return pendingAcceptSubTab.value
-  if (status.value === 'SUSPEND') return `SUSPEND_${suspendedSubTab.value}`
-  return status.value
-}
 const search = () => {
-  refresh()
+  refreshCurrentView()
 }
 const reset = () => {
@@ -1292,8 +1297,12 @@ const refreshCurrentView = () => {
    if (status.value === 'AWAITING_RESTOCK') waitingRestockRef.value?.refresh()
    return
  }
-  refresh()
+  if (isCardLayout.value) {
-  if (isCardLayout.value) cardLayoutRef.value?.clearSelection()
+    cardLayoutRef.value?.clearSelection()
+    cardLayoutRef.value?.refresh(true)
+    return
+  }
+  refreshTableList()
 }
 const handleStatusNodeClick = (node: StatusTreeNode) => {
  if (status.value === node.status) return
@@ -1307,11 +1316,10 @@ const handleStatusNodeClick = (node: StatusTreeNode) => {
  selectedRowIds.value = []
  selectedRows.value = []
  cardSelectedIds.value = []
-  currentRow.value = null
  productList.value = []
  logList.value = []
  if (!isSpecialLayout.value) {
-    refresh()
+    refreshCurrentView()
  }
 }
 const toggleExpand = (node: { expanded?: boolean }) => {
@@ -1320,20 +1328,16 @@ const toggleExpand = (node: { expanded?: boolean }) => {
 const loadStatusTreeCounts = async () => {
  try {
    const res = await getPodOrderStateGroupListApi()
    statusTree.value = [
      { status: 'ALL', statusName: '全部', quantity: 0, children: res.data },
    ]
+    nextTick(() => {
+      treeRef.value?.setCurrentKey(status.value, true)
+    })
  } catch (e) {
    console.error(e)
  }
 }
-const handlePageSizeChange = (size: number) => {
-  onPageSizeChange(size)
-}
-const handleCurrentPageChange = (page: number) => {
-  onCurrentPageChange(page)
-}
 const handleMainSelectionChange = (rows: FactoryOrderNewListData[]) => {
  selectedRowIds.value = rows.map((row) => row.id)
  selectedRows.value = rows
@@ -1347,21 +1351,40 @@ const loadSubTables = async () => {
    logList.value = []
    return
  }
+  const id = currentRow.value.id
+  const isSuspend = status.value === 'SUSPEND'
  try {
-    const [productRes, logRes] = await Promise.all([
+    if (activeTab.value === 'product') {
-      getFactoryOrderNewDetailApi(currentRow.value.id),
+      productList.value = []
-      getFactoryOrderNewLogApi(currentRow.value.id),
+      const productRes = isSuspend
-    ])
+        ? await getSuspendDetailApi(id)
-    productList.value = productRes.data || []
+        : await getFactoryOrderNewDetailApi(id)
-    logList.value = logRes.data || []
+      productList.value = productRes.data || []
+      return
+    } else {
+      logList.value = []
+      const logRes = isSuspend
+        ? await getSuspendLogApi(id)
+        : await getFactoryOrderNewLogApi(id)
+      logList.value = logRes.data || []
+    }
  } catch (e) {
    console.error(e)
  }
 }
 const handleMainRowClick = (row: FactoryOrderNewListData) => {
  currentRow.value = row
+  productList.value = []
+  logList.value = []
  loadSubTables()
 }
+const handleSubTabClick = () => {
+  if (currentRow.value) {
+    void loadSubTables()
+  }
+}
 const handleConfirmOrder = () => {
  if (!ensureSelection()) return
  confirmOrderDialogRef.value?.open(getSelectedIds())
@@ -1375,7 +1398,7 @@ const handleRefreshProductInfo = async () => {
  try {
    await refreshProductInfoApi(getSelectedIds())
    ElMessage.success('刷新商品信息成功')
-    refresh()
+    refreshCurrentView()
  } catch (e: unknown) {
    ElMessage.error((e as Error)?.message || '刷新商品信息失败')
  }
@@ -1386,7 +1409,7 @@ const handleTransferOldFlow = async () => {
  try {
    await transferOldFlowApi(getSelectedIds())
    ElMessage.success('转旧流程成功')
-    refresh()
+    refreshCurrentView()
  } catch (e: unknown) {
    ElMessage.error((e as Error)?.message || '转旧流程失败')
  }
@@ -1422,7 +1445,7 @@ const handleLogisticsCommand = async (command: string) => {
      window.open(filePath + res.message, '_blank')
    }
    ElMessage.success(`${labelMap[command]}成功`)
-    refresh()
+    refreshCurrentView()
  } catch (e: unknown) {
    ElMessage.error((e as Error)?.message || `${labelMap[command]}失败`)
  }
@@ -1716,7 +1739,7 @@ const handleArchiveOrder = async () => {
  try {
    await archiveOrderApi(getSelectedIds())
    ElMessage.success('订单归档成功')
-    refresh()
+    refreshCurrentView()
  } catch (e: unknown) {
    ElMessageBox.alert(
      (e as Error)?.message || '订单归档失败',
@@ -1730,7 +1753,7 @@ const handleCancelSuspend = async () => {
  try {
    await cancelSuspendApi(getSelectedIds())
    ElMessage.success('取消挂起成功')
-    refresh()
+    refreshCurrentView()
  } catch (e: unknown) {
    ElMessage.error((e as Error)?.message || '取消挂起失败')
  }
@@ -1741,7 +1764,7 @@ const handleSyncAddress = async () => {
  try {
    await syncReceiverAddress(getSelectedIds() as number[])
    ElMessage.success('同步收货地址成功')
-    refresh()
+    refreshCurrentView()
  } catch (e: unknown) {
    ElMessage.error((e as Error)?.message || '同步收货地址失败')
  }
@@ -1777,34 +1800,7 @@ const handleStatusPush = () => {
  if (!ensureSelection()) return
  ElMessage.info('状态推送功能待集成')
 }
-watch(
-  () => pendingAcceptSubTab.value,
-  () => {
-    if (status.value === 'PENDING_RECEIVE') {
-      refresh()
-    }
-  },
-)
-watch(
-  () => suspendedSubTab.value,
-  () => {
-    if (status.value === 'SUSPEND') {
-      refresh()
-    }
-  },
-)
-watch(
-  () => activeTab.value,
-  () => {
-    if (currentRow.value) {
-      loadSubTables()
-    }
-  },
-)
 onMounted(() => {
-  if (treeRef.value) {
-    treeRef.value.setCurrentKey(status.value, true)
-  }
  loadStatusTreeCounts()
  loadCraftList()
  getUserMark()