feat: POD US 异常单加待分派，处理中，已处理状态

auto-imports.d.ts

@@ -6,6 +6,7 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
+  const ElInput: typeof import('element-plus/es')['ElInput']
   const ElLoading: typeof import('element-plus/es')['ElLoading']
   const ElMessage: typeof import('element-plus/es')['ElMessage']
   const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']

components.d.ts

@@ -32,7 +32,6 @@ declare module 'vue' {
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
-    ElLink: typeof import('element-plus/es')['ElLink']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
@@ -51,7 +50,6 @@ declare module 'vue' {
     ElTag: typeof import('element-plus/es')['ElTag']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
-    ElUpload: typeof import('element-plus/es')['ElUpload']
     Icon: typeof import('./src/components/Icon.vue')['default']
     ImageView: typeof import('./src/components/ImageView.vue')['default']
     LogList: typeof import('./src/components/LogList.vue')['default']

src/api/podUsOrder.ts

@@ -37,6 +37,12 @@ export function getOrderList(
     },
   )
 }
+export function handleExceptionOrderApi(orderIds: number[]) {
+  return axios.post<never, BaseRespData<never>>(
+    'factory/podJomallOrderUs/processExceptionOrders',
+    orderIds,
+  )
+}
 export function getCardOrderList(
   params: SearchForm,
   currentPage: number,
@@ -80,14 +86,17 @@ export function updateExceptionOrderApi(data: number[]) {
     },
   )
 }
-export function changeExceptionOrderApi(ids: number[], value: string) {
-  return axios.post<never, BaseRespData<never>>(
-    'factory/podJomallOrderUs/exceptionOrders',
-    {
+export function changeExceptionOrderApi(
+  url: string,
+  ids: number[],
+  type: string,
+  value: string,
+) {
+  return axios.post<never, BaseRespData<never>>(url, {
     orderIds: ids,
+    exceptionType: type,
     exceptionReason: value,
-    },
-  )
+  })
 }
 export function cancelOrderApi(ids: number[], value: string) {
   return axios.post<never, BaseRespData<never>>(

src/types/api/podUsOrder.ts

@@ -16,6 +16,7 @@ export interface SearchForm {
   customizedQuantity: string
   startTime: string | null
   endTime: string | null
+  exceptionHandling: number | undefined
 }
 export interface PodUsOrderListData {
   id: number

src/views/order/podUs/index.vue

@@ -35,7 +35,7 @@
             v-model="searchForm.userMark"
             clearable
             filterable
-            style="width: 180px"
+            style="width: 100px"
             placeholder="客户"
           >
             <el-option
@@ -46,12 +46,23 @@
             ></el-option>
           </el-select>
         </ElFormItem>
+        <ElFormItem label="定制类型">
+          <ElSelect
+            v-model="searchForm.customizedQuantity"
+            placeholder="定制类型"
+            clearable
+            style="width: 100px"
+          >
+            <ElOption label="单面" value="single" />
+            <ElOption label="多面" value="multiple" />
+          </ElSelect>
+        </ElFormItem>
         <ElFormItem label="SKU">
           <ElInput
             v-model.trim="searchForm.sku"
             placeholder=" SKU"
             clearable
-            style="width: 180px"
+            style="width: 150px"
           ></ElInput>
         </ElFormItem>
         <ElFormItem label="Base SKU">
@@ -59,7 +70,7 @@
             v-model.trim="searchForm.baseSku"
             placeholder=" Base SKU"
             clearable
-            style="width: 180px"
+            style="width: 150px"
           ></ElInput>
         </ElFormItem>
         <ElFormItem label="物流跟踪号">
@@ -67,7 +78,7 @@
             v-model.trim="searchForm.logisticsTracking"
             placeholder="物流跟踪号"
             clearable
-            style="width: 180px"
+            style="width: 150px"
           ></ElInput>
         </ElFormItem>
         <ElFormItem label="生产单号">
@@ -75,7 +86,7 @@
             v-model="searchForm.factorySubOrderNumber"
             placeholder="生产单号"
             clearable
-            style="width: 180px"
+            style="width: 150px"
           />
         </ElFormItem>
         <ElFormItem label="订单号">
@@ -83,7 +94,7 @@
             v-model="searchForm.factoryOrderNumber"
             placeholder="订单号"
             clearable
-            style="width: 180px"
+            style="width: 150px"
           />
         </ElFormItem>
         <ElFormItem label="店铺单号">
@@ -91,20 +102,10 @@
             v-model="searchForm.shopNumber"
             placeholder="店铺单号"
             clearable
-            style="width: 180px"
+            style="width: 150px"
           />
         </ElFormItem>
-        <ElFormItem label="定制类型">
-          <ElSelect
-            v-model="searchForm.customizedQuantity"
-            placeholder="定制类型"
-            clearable
-            style="width: 180px"
-          >
-            <ElOption label="单面" value="single" />
-            <ElOption label="多面" value="multiple" />
-          </ElSelect>
-        </ElFormItem>
+        
         <ElFormItem>
           <ElButton type="primary" @click="search">查询</ElButton>
         </ElFormItem>
@@ -120,11 +121,74 @@
           @click="changeTab(item)"
         >
           <span class="tabs-node_label">{{ item.statusName }}</span>
-          <span class="tabs-node_count">{{ `(${item.quantity})` }}</span>
+          <span
+            class="tabs-node_count"
+            :class="{
+              blue: item.quantity && item.quantity > 0,
+              red: item.status === 'EXCEPTION_ORDER',
+            }"
+            >{{ item.quantity }}</span
+          >
         </div>
+        <!-- <div
+            v-if="item.status === 'EXCEPTION_ORDER'"
+            :key="item.status"
+            class="tabs-node"
+          >
+            <el-dropdown @command="handleExceptionCommand">
+              <div>
+                <span
+                  class="tabs-node_label"
+                  style="color: #000; font-weight: 500"
+                >
+                  异常单
+                </span>
+                <span
+                  class="tabs-node_count"
+                  :class="{
+                    blue: item.quantity && item.quantity > 0,
+                    red: item.status === 'EXCEPTION_ORDER',
+                  }"
+                  >{{ item.quantity }}</span
+                >
+                <el-icon class="el-icon--right"><arrow-down /></el-icon>
+              </div>
+
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item command="1">待分派</el-dropdown-item>
+                  <el-dropdown-item command="2">待处理</el-dropdown-item>
+                  <el-dropdown-item command="3">已处理</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div> -->
       </div>
     </div>
     <div class="order-content flex-1 flex-column overflow-hidden mt-10">
+      <div v-if="status === 'EXCEPTION_ORDER'" class="sub-status mb-10">
+        <div
+          class="sub-status-item"
+          :class="exceptionStatus === 1 ? 'sub-active' : ''"
+          @click="handleExceptionCommand(1)"
+        >
+          <span class="sub-status-item-label">待分派</span>
+        </div>
+        <div
+          class="sub-status-item"
+          :class="exceptionStatus === 2 ? 'sub-active' : ''"
+          @click="handleExceptionCommand(2)"
+        >
+          <span class="sub-status-item-label">待处理</span>
+        </div>
+        <div
+          class="sub-status-item"
+          :class="exceptionStatus === 3 ? 'sub-active' : ''"
+          @click="handleExceptionCommand(3)"
+        >
+          <span class="sub-status-item-label">已处理</span>
+        </div>
+      </div>
       <div class="operation-box mb-10">
         <span v-if="status === 'TO_BE_CONFIRMED'" class="item">
           <ElButton type="success" @click="confirmOrder"> 确认 </ElButton>
@@ -132,6 +196,20 @@
         <span v-if="status === 'EXCEPTION_ORDER'" class="item">
           <ElButton type="success" @click="updateOrder"> 转至待确认 </ElButton>
         </span>
+        <span
+          v-if="status === 'EXCEPTION_ORDER' && exceptionStatus === 1"
+          class="item"
+        >
+          <ElButton type="warning" @click="assignOrder"> 分派 </ElButton>
+        </span>
+        <span
+          v-if="status === 'EXCEPTION_ORDER' && exceptionStatus === 2"
+          class="item"
+        >
+          <ElButton type="warning" @click="handleExceptionOrder">
+            处理异常
+          </ElButton>
+        </span>
         <span v-if="status === 'PICKING'" class="item">
           <ElButton type="primary" @click="printProductionOrder">
             打印生产单
@@ -1004,7 +1082,7 @@
     @open="handleExceptionDialogOpen"
   >
     <ElForm ref="exceptionFormRef" :model="exceptionForm" label-width="100px">
-      <!-- <ElFormItem
+      <ElFormItem
         label="异常类型"
         prop="exceptionType"
         :rules="{ required: true, message: '请选择异常类型' }"
@@ -1013,6 +1091,7 @@
           v-model="exceptionForm.exceptionType"
           style="width: 100%"
           placeholder="请选择异常类型"
+          clearable
         >
           <ElOption
             v-for="type in exceptionTypes"
@@ -1021,12 +1100,8 @@
             :value="type.value"
           />
         </ElSelect>
-      </ElFormItem> -->
-      <ElFormItem
-        label="异常原因"
-        prop="exceptionReason"
-        :rules="{ required: true, message: '请输入异常原因' }"
-      >
+      </ElFormItem>
+      <ElFormItem label="异常原因" prop="exceptionReason">
         <ElInput
           v-model="exceptionForm.exceptionReason"
           style="width: 100%"
@@ -1079,6 +1154,7 @@ import {
   createLogisticsOrderApi,
   updateLogisticsToPickingApi,
   createLogisticsOrdersApi,
+  handleExceptionOrderApi,
 } from '@/api/podUsOrder'
 import { BaseRespData } from '@/types/api'
 
@@ -1145,7 +1221,9 @@ const [searchForm] = useValue<SearchForm>({
   customizedQuantity: '',
   startTime: null,
   endTime: null,
+  exceptionHandling: undefined,
 })
+const exceptionStatus = ref(1)
 const userMarkList = ref<string[]>([])
 const selection = ref<PodUsOrderListData[]>([])
 const pickerOptions = {
@@ -1335,6 +1413,10 @@ const {
               ? timeRange.value[1]
               : null,
           status: status.value,
+          exceptionHandling:
+            status.value === 'EXCEPTION_ORDER'
+              ? exceptionStatus.value || undefined
+              : undefined,
         },
         page,
         pageSize,
@@ -1511,6 +1593,44 @@ const updateOrder = async () => {
     loading.close()
   }
 }
+const assignOrder = async () => {
+  if (selection.value.length === 0) {
+    return ElMessage.warning('请选择数据')
+  }
+  currentOrderIds.value = selection.value.map((item) => item.id)
+  exceptionDialogVisible.value = true
+}
+const handleExceptionOrder = async () => {
+  if (selection.value.length === 0) {
+    return ElMessage.warning('请选择数据')
+  }
+  try {
+    await showConfirm('确定处理异常吗?', {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+  } catch {
+    return
+  }
+  const orderIds = selection.value.map((item) => item.id)
+  const loading = ElLoading.service({
+    fullscreen: true,
+    text: '操作中...',
+    background: 'rgba(0, 0, 0, 0.3)',
+  })
+  try {
+    const res = await handleExceptionOrderApi(orderIds)
+    if (res.code !== 200) return
+    ElMessage.success('操作成功')
+    search()
+    loadTabData()
+  } catch (e) {
+    console.error(e)
+  } finally {
+    loading.close()
+  }
+}
 const printProductionOrder = async () => {
   if (selection.value.length === 0) {
     return ElMessage.warning('请选择数据')
@@ -1584,12 +1704,10 @@ const pickingComplete = async () => {
     loading.close()
   }
 }
-const exceptionType = ref('')
-const exceptionReason = ref('')
-// const exceptionTypes = [
-//   { value: '1', label: '客户' },
-//   { value: '2', label: '工厂' },
-// ]
+const exceptionTypes = [
+  { value: '1', label: '客户' },
+  { value: '2', label: '工厂' },
+]
 const exceptionDialogVisible = ref(false)
 const currentOrderIds = ref<number[]>([])
 const exceptionForm = ref({
@@ -1602,10 +1720,6 @@ const changeExceptionOrder = async () => {
     return ElMessage.warning('请选择数据')
   }
   currentOrderIds.value = selection.value.map((item) => item.id)
-
-  // 重置状态
-  exceptionType.value = ''
-  exceptionReason.value = ''
   exceptionDialogVisible.value = true
 }
 
@@ -1621,10 +1735,15 @@ const handleExceptionConfirm = async () => {
     text: '操作中...',
     background: 'rgba(0, 0, 0, 0.3)',
   })
+  const url =
+    status.value === 'EXCEPTION_ORDER'
+      ? 'factory/podJomallOrderUs/distributionExceptionOrders'
+      : 'factory/podJomallOrderUs/exceptionOrders'
   try {
     const res = await changeExceptionOrderApi(
+      url,
       currentOrderIds.value,
-      // exceptionForm.value.exceptionType,
+      exceptionForm.value.exceptionType,
       exceptionForm.value.exceptionReason,
     )
     if (res.code !== 200) return
@@ -2304,6 +2423,11 @@ onMounted(() => {
   loadProductionClient()
   loadWarehouseList()
 })
+
+const handleExceptionCommand = (command: number) => {
+  exceptionStatus.value = command
+  search()
+}
 </script>
 <style lang="scss" scoped>
 .header-filter-form {
@@ -2326,6 +2450,7 @@ onMounted(() => {
     color: #000;
     cursor: pointer;
     height: 40px;
+    font-weight: 500;
   }
 
   .tabs-node:hover {
@@ -2394,6 +2519,29 @@ onMounted(() => {
   height: 100%;
   overflow-y: auto;
 }
+.tabs-node_count {
+  display: inline-block;
+  min-width: 20px;
+  height: 20px;
+  line-height: 20px;
+  border-radius: 50%;
+  font-size: 14px;
+  text-align: center;
+  margin-left: 4px;
+  background: #f2f3f5; // 默认灰色
+  color: #666;
+  font-weight: 500;
+}
+
+.tabs-node_count.blue {
+  background: rgb(219, 234, 254);
+  color: rgb(30, 64, 175);
+}
+
+.tabs-node_count.red {
+  background: rgb(254 226 226);
+  color: rgb(153 27 27);
+}
 
 .empty {
   height: 100%;
@@ -2462,4 +2610,31 @@ onMounted(() => {
     }
   }
 }
+.sub-status {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #e5e6eb;
+  background: #fff;
+  .sub-status-item {
+    position: relative;
+    font-size: 16px;
+    cursor: pointer;
+    padding: 6px 24px 6px 24px;
+    border: 1px solid #e5e6eb;
+    background: #f7f8fa;
+    color: #606266;
+    margin-bottom: -1px;
+    transition: background 0.2s, color 0.2s;
+    &:not(:last-child) {
+      border-right: none;
+    }
+    &.sub-active {
+      background: #fff;
+      color: #1d2129;
+      font-weight: 600;
+      border-bottom: 1px solid transparent;
+      z-index: 2;
+    }
+  }
+}
 </style>