✨ 新增PopoverFilter组件根据产品线搜索功能

src/views/adManage/sp/api.ts

@@ -33,3 +33,11 @@ export function getSearchedItem(body: any) {
     data: body,
   })
 }
+
+export function getSearchResult(body: any) {
+  return request({
+    url: apiPrefix + '/pasin',
+    method: 'post',
+    data: body,
+  })
+}

src/views/adManage/sp/components/PopoverFilter.vue

@@ -1,20 +1,25 @@
 <script setup lang="ts">
 import { Connection, Picture as IconPicture, Search } from '@element-plus/icons-vue'
 import { inject, onBeforeUnmount, onMounted, Ref, ref, watch } from 'vue'
-import { getProductline } from '../api'
+import { getProductline, getSearchResult } from '../api'
 import PopoverFilterTable from './PopoverFilterTable.vue'
 import emitter from '/@/utils/emitter'
 import useAddedItem from '../hooks/useAddedItem'
 
 const profile = <Ref>inject('profile')
 const activeName = ref('search')
-const searchInput = ref('')
 const options = ref<{ productlineId: number; productlineName: string }[]>([])
 const textarea = ref('')
 const activeNames = ref([])
-const productLineSelect = ref('')
 const { receiveData, groupByParentAsin, resetReceiveData } = useAddedItem()
 
+const productLineSelect = ref([])
+const searchInput = ref('')
+const searchResult = ref([])
+const searchLoading = ref(false)
+let page = 1
+let limit = 8
+
 // 获取产品线数据
 async function fetchProductLine() {
   try {
@@ -24,6 +29,57 @@ async function fetchProductLine() {
     console.log('error:', error)
   }
 }
+
+// 获取搜索后的结果
+async function fetchSearchResult() {
+  if (searchLoading.value) {
+    return // 如果已经在加载中，则不再发起新的加载
+  }
+  searchLoading.value = true
+  const body = {
+    profileId: profile.value.profile_id,
+    page: page,
+    limit: limit,
+    productLineId: productLineSelect.value,
+    searchInput: searchInput.value,
+  }
+
+  try {
+    const response = await getSearchResult(body)
+    const newData = response.data
+    if (newData.length > 0) {
+      searchResult.value.push(...newData)
+      page += 1
+    } else {
+      emitter.emit('PopoverFilter-noMoreParenAsin')
+    }
+  } catch (error) {
+    console.log('error:', error)
+  } finally {
+    searchLoading.value = false
+  }
+}
+
+function handleSelectChange() {
+  page = 1
+  emitter.emit('PopoverFilter-productLineSelect', productLineSelect)
+  fetchSearchResult()
+}
+
+emitter.on('PopoverFilterTable-sendRequest', () => {
+  console.log('开始发送')
+  fetchSearchResult()
+})
+
+watch(
+  searchResult,
+  () => {
+    emitter.emit('PopoverFilter-searchResult', searchResult)
+    console.log('监听到了searchResult')
+  },
+  { deep: true }
+)
+
 // 在组件挂载时获取产品线数据
 onMounted(() => {
   fetchProductLine()
@@ -36,7 +92,7 @@ onBeforeUnmount(() => {
 
 <template>
   <div class="flex justify-between border border-solid border-inherit rounded-md">
-    <div style="flex: 2 1 0; border-right: 1px solid #e6e6e6">
+    <div style="flex: 2 1 0; border-right: 1px solid #e6e6e6" v-loading="searchLoading">
       <el-tabs v-model="activeName" class="demo-tabs">
         <el-tab-pane label="搜索" name="search">
           <div class="flex gap-1 p-2">
@@ -45,7 +101,7 @@ onBeforeUnmount(() => {
               placeholder="输入产品标题/父ASIN/ASIN查询"
               :prefix-icon="Search"
               style="width: 360px" />
-            <el-select v-model="productLineSelect" multiple collapse-tags>
+            <el-select v-model="productLineSelect" @change="handleSelectChange" multiple collapse-tags>
               <el-option
                 v-for="item in options"
                 :key="item.productlineId"
@@ -104,7 +160,13 @@ onBeforeUnmount(() => {
                       <span class="text-gray-300 mx-1">|</span>
                       <span>{{ item.quantity }}</span>
                     </div>
-                    <el-tooltip offset="0" :show-arrow="false" effect="dark" :disabled="!item.sku" :content="item.sku" placement="top-end">
+                    <el-tooltip
+                      offset="0"
+                      :show-arrow="false"
+                      effect="dark"
+                      :disabled="!item.sku"
+                      :content="item.sku"
+                      placement="top-end">
                       <div class="display-line">
                         ASIN:<span class="text-black">{{ item.asin }}</span>
                         <el-link

src/views/adManage/sp/components/PopoverFilterTable.vue

@@ -8,9 +8,7 @@ import useAddedItem from '../hooks/useAddedItem'
 const profile = <Ref>inject('profile')
 const parentLoading = ref(false)
 const rightLoading = ref(false)
-let page = 1
-let rightPage = 1
-let limit = 15
+
 let searchType = ''
 const vxeRef = ref()
 const vxeRefRight = ref()
@@ -18,6 +16,27 @@ const selectedParentAsins = ref([])
 const hasMore = ref(true)
 const isScrollSelectAll = ref(false)
 const { parentAsinsSet } = useAddedItem()
+const productLineId = ref('')
+const searchResult = ref([])
+let page = 1
+let rightPage = 1
+let limit = 15
+let hasMoreParentAsin = true
+
+emitter.on('PopoverFilter-noMoreParenAsin', () => {
+  hasMoreParentAsin = false
+})
+
+emitter.on('PopoverFilter-productLineSelect', (data: any) => {
+  productLineId.value = data.value
+  gridOptions.data.splice(0)
+})
+
+let isFirstTime = true
+emitter.on('PopoverFilter-searchResult', (data: any) => {
+  gridOptions.data = data.value
+  isFirstTime = false
+})
 
 emitter.on('TopFilter', (value: any) => {
   if (value.isVisible?.value) {
@@ -118,7 +137,7 @@ function handleCellClick(table: any) {
 function checkRightTableRows() {
   const rightData = vxeRefRight.value.getTableData().tableData
 
-  rightData.forEach((row) => {
+  rightData.forEach((row: any) => {
     const concatValue = searchType === 'sku' ? row.parentAsin + row.sku : row.parentAsin + row.asin
     if (parentAsinsSet.value.has(concatValue)) {
       vxeRefRight.value.setCheckboxRow(row, true)
@@ -133,7 +152,7 @@ async function selectChangeRight(table: any) {
     // 新增代码: 查找并选中左侧表格对应的条目
     const parentAsin = table.row.parentAsin
     const leftTableData = vxeRef.value.getTableData().tableData
-    const leftRow = leftTableData.find((row) => row.parentAsin === parentAsin)
+    const leftRow = leftTableData.find((row: any) => row.parentAsin === parentAsin)
     if (leftRow) {
       await vxeRef.value.setCheckboxRow(leftRow, true)
     }
@@ -142,7 +161,7 @@ async function selectChangeRight(table: any) {
     // 新增代码: 查找并取消选中左侧表格对应的条目
     const parentAsin = table.row.parentAsin
     const leftTableData = vxeRef.value.getTableData().tableData
-    const leftRow = leftTableData.find((row) => row.parentAsin === parentAsin)
+    const leftRow = leftTableData.find((row: any) => row.parentAsin === parentAsin)
     if (leftRow && table.records.length === 0) {
       await vxeRef.value.setCheckboxRow(leftRow, false)
     }
@@ -156,7 +175,7 @@ async function selectAllChangeRight(table: any) {
     const rightTableData = vxeRefRight.value.getTableData().tableData
     for (const data of rightTableData) {
       const leftTableData = vxeRef.value.getTableData().tableData
-      const leftRow = leftTableData.find((row) => row.parentAsin === data.parentAsin)
+      const leftRow = leftTableData.find((row: any) => row.parentAsin === data.parentAsin)
       if (leftRow) {
         await vxeRef.value.setCheckboxRow(leftRow, true)
       }
@@ -167,7 +186,7 @@ async function selectAllChangeRight(table: any) {
     const rightTableData = vxeRefRight.value.getTableData().tableData
     for (const data of rightTableData) {
       const leftTableData = vxeRef.value.getTableData().tableData
-      const leftRow = leftTableData.find((row) => row.parentAsin === data.parentAsin)
+      const leftRow = leftTableData.find((row: any) => row.parentAsin === data.parentAsin)
       if (leftRow) {
         await vxeRef.value.setCheckboxRow(leftRow, false)
       }
@@ -229,10 +248,19 @@ async function handleScroll(event: any) {
   const target = event.$event.target
   // 计算是否达到底部：容器高度 + 滚动顶部距离 >= 滚动内容的总高度
   if (target.scrollHeight - (target.scrollTop + target.clientHeight) < 1) {
-    page += 1
-    await fetchParentAsin()
-    if (isScrollSelectAll.value) {
-      await vxeRef.value.setAllCheckboxRow(true)
+    if (hasMoreParentAsin) {
+      // 只有在还有数据时才进行加载
+      page += 1
+      if (productLineId.value.length > 0) {
+        emitter.emit('PopoverFilterTable-sendRequest')
+      } else {
+        await fetchParentAsin()
+      }
+      if (isScrollSelectAll.value) {
+        await vxeRef.value.setAllCheckboxRow(true)
+      }
+    } else {
+      console.log('Reached the bottom, but no more data to load.')
     }
   }
 }