工厂订单New-前端样式

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

@@ -23,13 +23,13 @@ const CREATE_TIME_SORT_ASC_STATUSES = new Set([
   'PENDING_CREATE_LOGISTICS',
   'PENDING_SCHEDULE',
   'PENDING_DELIVERY',
+  'PICKING',
   'SUSPEND',
 ])
 
 /** 创建时间降序 */
 const CREATE_TIME_SORT_DESC_STATUSES = new Set([
   'ALL',
-  'PICKING',
   'COMPLETED',
   'CANCELLED',
   'ARCHIVE',
@@ -73,7 +73,10 @@ export function useOrderListAndDetail(options: UseOrderListAndDetailOptions) {
   } = options
 
   const subLoading = ref(false)
-  const activeTab = ref<'product' | 'operation' | 'log'>('product')
+  // 配货中默认打开"操作单"tab，其他状态默认"包含商品"tab
+  const activeTab = ref<'product' | 'operation' | 'log'>(
+    status.value === 'PICKING' ? 'operation' : 'product',
+  )
   const productList = ref<ProductListData[]>([])
   const operationOrderList = ref<operateOrderListData[]>([])
   const logList = ref<LogListData[]>([])
@@ -266,6 +269,11 @@ export function useOrderListAndDetail(options: UseOrderListAndDetailOptions) {
     void getOrderDetailsById()
   })
 
+  // 切换状态时重置为对应默认 tab
+  watch(status, (newStatus) => {
+    activeTab.value = newStatus === 'PICKING' ? 'operation' : 'product'
+  })
+
   const handleRowClick = (row: FactoryOrderNewListData) => {
     const isSameRow = currentRow.value?.id === row.id
     currentRow.value = row

src/views/order/factoryOrderNew/index.vue

@@ -2023,6 +2023,19 @@ const showProductInventoryColumns = computed(
     status.value == 'PENDING_RECEIVE' &&
     pendingAcceptSubTab.value !== 'PENDING_RECEIVE',
 )
+
+// 操作单tab表格 - 状态字段：全部、待接单、配货中、待发货、已完成、已取消、已归档 显示
+const showOperationStatusColumn = computed(() =>
+  [
+    'ALL',
+    'PENDING_RECEIVE',
+    'PICKING',
+    'PENDING_DELIVERY',
+    'COMPLETED',
+    'CANCELLED',
+    'ARCHIVE',
+  ].includes(status.value),
+)
 function parseOperationOrderImageAry(
   imageAry?: string | null | unknown,
 ): { url: string; title?: string }[] {
@@ -2055,6 +2068,17 @@ const operationOrderColumns = computed(() => [
     showOverflowTooltip: true,
   },
   {
+    key: 'statusName',
+    prop: 'statusName',
+    label: '状态',
+    minWidth: 100,
+    align: 'center',
+    showColumn: showOperationStatusColumn.value,
+    render: (row: operateOrderListData) => {
+      return <span>{row?.statusName ?? ''}</span>
+    },
+  },
+  {
     key: 'imageAry',
     prop: 'imageAry',
     label: '商品图片',