feat: 订单详情增加「操作单」子表 Tab

src/api/factoryOrderNew.ts

@@ -114,6 +114,14 @@ export function getFactoryOrderNewLogApi(id: number | string) {
     },
   )
 }
+export function getOperationOrderByIdApi(id: number | string) {
+  return axios.get<never, BaseRespData<operateOrderListData[]>>(
+    'factory/podOrder/getOperationOrderById',
+    {
+      params: { id },
+    },
+  )
+}
 
 export function refreshProductInfoApi(data: {
   orderIds?: number | string

src/views/order/factoryOrderNew/hooks/useOrderListAndDetail.ts

@@ -5,6 +5,7 @@ import {
   getFactoryOrderNewDetailApi,
   getFactoryOrderNewListApi,
   getFactoryOrderNewLogApi,
+  getOperationOrderByIdApi,
 } from '@/api/factoryOrderNew'
 import type { SearchForm } from '@/types/api/factoryOrderNew/factoryOrderNew'
 import type {
@@ -36,8 +37,9 @@ export function useOrderListAndDetail(options: UseOrderListAndDetailOptions) {
   } = options
 
   const subLoading = ref(false)
-  const activeTab = ref<'product' | 'log'>('product')
+  const activeTab = ref<'product' | 'operation' | 'log'>('product')
   const productList = ref<ProductListData[]>([])
+  const operationOrderList = ref<operateOrderListData[]>([])
   const logList = ref<LogListData[]>([])
   const tableRef = ref()
   const currentRow = ref<FactoryOrderNewListData | null>(null)
@@ -102,6 +104,7 @@ export function useOrderListAndDetail(options: UseOrderListAndDetailOptions) {
     selectedRows.value = []
     cardSelectList.value = []
     productList.value = []
+    operationOrderList.value = []
     logList.value = []
     currentRow.value = null
     listSortProp.value = null
@@ -137,7 +140,8 @@ export function useOrderListAndDetail(options: UseOrderListAndDetailOptions) {
     ) {
       return
     }
-    const sortProp = LIST_SORT_PROP_BY_COLUMN[prop as keyof typeof LIST_SORT_PROP_BY_COLUMN]
+    const sortProp =
+      LIST_SORT_PROP_BY_COLUMN[prop as keyof typeof LIST_SORT_PROP_BY_COLUMN]
     if (order === 'ascending') {
       listSortProp.value = sortProp
       listSortOrder.value = 'asc'
@@ -160,9 +164,12 @@ export function useOrderListAndDetail(options: UseOrderListAndDetailOptions) {
     cardSelectList.value = items
   }
 
-  const getOrderDetailsById = async (tabName?: 'product' | 'log') => {
+  const getOrderDetailsById = async (
+    tabName?: 'product' | 'operation' | 'log',
+  ) => {
     if (!currentRow.value) {
       productList.value = []
+      operationOrderList.value = []
       logList.value = []
       return
     }
@@ -181,6 +188,11 @@ export function useOrderListAndDetail(options: UseOrderListAndDetailOptions) {
         productList.value = Array.isArray(productRes.data)
           ? productRes.data
           : []
+      } else if (effectiveTab === 'operation') {
+        operationOrderList.value = []
+        const opRes = await getOperationOrderByIdApi(id)
+        if (opRes.code !== 200) return
+        operationOrderList.value = opRes.data
       } else {
         logList.value = []
         // const logRes = isSuspend
@@ -200,6 +212,7 @@ export function useOrderListAndDetail(options: UseOrderListAndDetailOptions) {
   watch(currentRow, (row) => {
     if (!row) {
       productList.value = []
+      operationOrderList.value = []
       logList.value = []
       return
     }
@@ -217,7 +230,7 @@ export function useOrderListAndDetail(options: UseOrderListAndDetailOptions) {
 
   const handleTabClick = (tab: TabsPaneContext) => {
     if (!currentRow.value) return
-    const name = tab?.props?.name as 'product' | 'log' | undefined
+    const name = tab?.props?.name as 'product' | 'operation' | 'log' | undefined
     void getOrderDetailsById(name)
   }
 
@@ -225,6 +238,7 @@ export function useOrderListAndDetail(options: UseOrderListAndDetailOptions) {
     subLoading,
     activeTab,
     productList,
+    operationOrderList,
     logList,
     tableRef,
     currentRow,

src/views/order/factoryOrderNew/index.vue

@@ -803,6 +803,19 @@
                   />
                 </div>
               </el-tab-pane>
+              <el-tab-pane name="operation" label="操作单">
+                <div
+                  v-loading="subLoading"
+                  element-loading-text="加载中..."
+                  class="sub-table-wrapper"
+                >
+                  <TableView
+                    :paginated-data="operationOrderList"
+                    :columns="operationOrderColumns"
+                    serial-numberable
+                  />
+                </div>
+              </el-tab-pane>
               <el-tab-pane name="log" label="操作日志">
                 <div
                   v-loading="subLoading"
@@ -1181,6 +1194,7 @@ const {
   subLoading,
   activeTab,
   productList,
+  operationOrderList,
   logList,
   tableRef,
   selectedRows,
@@ -1525,6 +1539,135 @@ const showProductInventoryColumns = computed(
     status.value == 'PENDING_RECEIVE' &&
     pendingAcceptSubTab.value !== 'PENDING_RECEIVE',
 )
+function parseOperationOrderImageAry(
+  imageAry?: string | null | unknown,
+): { url: string; title?: string }[] {
+  if (typeof imageAry !== 'string' || !imageAry.trim()) return []
+  try {
+    const list = JSON.parse(imageAry) as { url?: string; title?: string }[]
+    if (!Array.isArray(list)) return []
+    return list
+      .filter((x) => x?.url)
+      .map((x) => ({ url: x.url as string, title: x.title }))
+  } catch {
+    return []
+  }
+}
+
+function getOperationOrderMarkLabel(row: operateOrderListData): string {
+  const raw = row['prodcutMark'] ?? row.productMark
+  const mark = typeof raw === 'string' ? raw : ''
+  if (mark === 'custom_normal') return 'CB'
+  if (mark === 'normal') return 'G'
+  return ''
+}
+
+const operationOrderColumns = [
+  {
+    key: 'operationNo',
+    prop: 'operationNo',
+    label: '操作单号',
+    minWidth: 160,
+    align: 'center',
+    showOverflowTooltip: true,
+  },
+  {
+    key: 'imageAry',
+    prop: 'imageAry',
+    label: '商品图片',
+    minWidth: 100,
+    align: 'center' as const,
+    render: (row: operateOrderListData) => {
+      const list = parseOperationOrderImageAry(row.imageAry)
+      if (!list.length) {
+        return <span />
+      }
+      const urls = list.map((i) => i.url)
+      return (
+        <div style="display:flex;flex-wrap:wrap;gap:4px;justify-content:center">
+          {list.map((img, idx) => (
+            <el-image
+              key={idx}
+              src={img.url}
+              previewSrcList={urls}
+              previewTeleported={true}
+              style="width:50px;height:50px"
+              title={img.title ?? ''}
+            />
+          ))}
+        </div>
+      )
+    },
+  },
+  {
+    key: 'productName',
+    prop: 'productName',
+    label: '商品名称',
+    minWidth: 180,
+    align: 'left' as const,
+    showOverflowTooltip: true,
+  },
+  {
+    key: 'variantSku',
+    prop: 'variantSku',
+    label: '变体SKU',
+    minWidth: 140,
+    align: 'center' as const,
+    showOverflowTooltip: true,
+  },
+  {
+    key: 'thirdSkuCode',
+    prop: 'thirdSkuCode',
+    label: '库存SKU',
+    minWidth: 140,
+    align: 'center' as const,
+    showOverflowTooltip: true,
+  },
+  {
+    key: 'productMark',
+    prop: 'productMark',
+    label: '类型',
+    width: 72,
+    align: 'center' as const,
+    render: (row: operateOrderListData) => {
+      const label = getOperationOrderMarkLabel(row)
+      if (!label) return <span />
+      return <ElTag type="info">{label}</ElTag>
+    },
+  },
+  {
+    key: 'statusName',
+    prop: 'statusName',
+    label: '挂起前状态',
+    minWidth: 120,
+    align: 'left' as const,
+    showOverflowTooltip: true,
+  },
+  {
+    key: 'craftName',
+    prop: 'craftName',
+    label: '工艺',
+    minWidth: 100,
+    align: 'center' as const,
+    showOverflowTooltip: true,
+  },
+  {
+    key: 'supplierProductNo',
+    prop: 'supplierProductNo',
+    label: '款号',
+    minWidth: 120,
+    align: 'center' as const,
+    showOverflowTooltip: true,
+  },
+  {
+    key: 'batchArrangeNumber',
+    prop: 'batchArrangeNumber',
+    label: '批次号',
+    minWidth: 120,
+    align: 'center' as const,
+    showOverflowTooltip: true,
+  },
+]
 
 const baseProductColumns = computed(() => [
   {