feat: 配货分拣/配货打单 支持筛选平台 #1009989

src/views/order/podUs/PodMakeOrder.vue

@@ -124,8 +124,8 @@
             <span></span>
           </div> -->
           <div class="basic-info-item">
-            <span>发货备注：</span>
-            <span>{{ podOrderDetailsData?.remark }}</span>
+            <span>客户发货备注：</span>
+            <span>{{ podOrderDetailsData?.shipmentsNote }}</span>
           </div>
           <div class="basic-info-item">
             <span>订单号：</span>
@@ -176,6 +176,31 @@
               ?.warehouseName || '')
           }}
         </div>
+        <div class="platform-filter">
+          <span>平台</span>
+          <ElSelect
+            v-model="platform"
+            placeholder="请选择"
+            clearable
+            filterable
+            style="width: 250px"
+          >
+            <ElOption
+              v-for="(item, index) in platformList"
+              :key="index"
+              :label="item.type"
+              :value="item.type"
+            >
+              <img
+                :src="`/images/icon/${item.icon.split('/').pop()}`"
+                style="height: 20px; margin: 5px 10px 0 0"
+              />
+              <span :title="item.type">{{ item.type }}</span>
+            </ElOption>
+          </ElSelect>
+          <ElButton type="primary" @click="handlePlatformChange">查询</ElButton>
+          <ElButton @click="resetPlatform">重置</ElButton>
+        </div>
         <div class="flex right-panel-body">
           <div class="middle-content">
             <div class="box-top">
@@ -282,6 +307,10 @@
                 :class="{
                   active: item.box && boxIndex == item.box,
                   isNull: !item.data,
+                  'platform-matched':
+                    platformMatchedBoxes &&
+                    item.box &&
+                    platformMatchedBoxes.includes(item.box),
                 }"
                 @click="handleBoxClick(item)"
               >
@@ -343,6 +372,7 @@ import { ElButton, ElIcon, ElTag } from 'element-plus'
 import { BaseRespData } from '@/types/api'
 import type { SortingList } from '@/types/api/order'
 import { showError } from '@/utils/ui.ts'
+import platformJson from '../../../json/platform.json'
 
 const { getCLodop } = useLodop()
 
@@ -539,6 +569,7 @@ watch(visible, async (value: boolean) => {
   if (value) {
     podOrderDetailsData.value = {}
     currentCode = ''
+    resetPlatform()
     if (props.wallType === 'sort') {
       await getSortingAreaList()
     }
@@ -865,6 +896,7 @@ const initPrintDevice = () => {
 //   }
 // }
 const handleSearch = () => {
+  resetPlatform()
   const code = productionOrder.value
   if (!code) {
     ElMessage.warning('请输入生产单号')
@@ -1609,6 +1641,36 @@ const getSortingAreaList = async () => {
   if (res.code !== 200) return
   sortingAreaList.value = res.data.records
 }
+
+// 筛选查询平台
+const platformList = computed(
+  () => platformJson.filter((item) => item.type === 'TIKTOK'),
+  // platformJson,
+)
+const platform = ref<string>('')
+const queriedPlatform = ref<string>('')
+const platformMatchedBoxes = computed(() => {
+  if (!queriedPlatform.value) return null
+  return (podBoxList.value || [])
+    .filter(
+      (item) =>
+        item.data?.platform?.toUpperCase() ===
+        queriedPlatform.value.toUpperCase(),
+    )
+    .map((item) => item.box)
+    .filter((box): box is number => box != null && box !== 0)
+})
+const handlePlatformChange = () => {
+  if (!platform.value) {
+    ElMessage.warning('请选择平台')
+    return
+  }
+  queriedPlatform.value = platform.value
+}
+const resetPlatform = () => {
+  platform.value = ''
+  queriedPlatform.value = ''
+}
 </script>
 
 <style scoped lang="scss">
@@ -1654,11 +1716,21 @@ const getSortingAreaList = async () => {
   flex: 1;
   min-height: 0;
   overflow: hidden;
+
+  .platform-filter {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    margin-bottom: 5px;
+  }
+
+  .right-panel-body {
+    min-height: 0;
+    overflow: hidden;
+  }
 }
-.right-panel-body {
-  min-height: 0;
-  overflow: hidden;
-}
+
 .sorting-area-content {
   border: 2px solid #666;
   padding: 10px;
@@ -1791,6 +1863,10 @@ const getSortingAreaList = async () => {
     background: #ff9900;
     color: #fff;
   }
+  &.platform-matched {
+    background: rgb(177, 19, 19);
+    color: #fff;
+  }
 
   &.badge::after {
     position: absolute;