🐛广告管理<SP>: 修复点击对应项后数据重复添加的问题

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

@@ -4,7 +4,6 @@ import { getParentAsin, getSearchedItem } from '../api'
 import { Connection, Picture as IconPicture } from '@element-plus/icons-vue'
 import emitter from '/@/utils/emitter'
 
-
 emitter.on('TopFilter', (value: any) => {
   if (value.isVisible?.value) {
     fetchParentAsin()
@@ -20,8 +19,12 @@ 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 selectedParentAsins = ref([])
+const singleSelect = ref([]) // 默认假设有更多数据
+const hasMore = ref(true)
 
 // 父ASIN表格配置
 const gridOptions = <any>reactive({
@@ -50,24 +53,43 @@ const gridOptionsRight = <any>reactive({
 
 // 全选事件
 function selectAllChangeEvent(table: any) {
-  console.log(table.records)
+  console.log('多选:', table)
+  if (table.checked) {
+    fetchSearchedItem(selectedParentAsins.value)
+  } else {
+    // 如果全选被取消，清空右侧数据或执行其他逻辑
+    gridOptionsRight.data = []
+  }
 }
 
 // 单选事件
 function selectChangeEvent(table: any) {
-  // console.log(table.records)
-  // 被选中的所有parentAsin组成的数组
-  const selectedParentAsins = table.records.map((record: any) => record.parentAsin)
-
-  // 保留被选中的parentAsin的对应的右侧表格数据
-  gridOptionsRight.data = gridOptionsRight.data.filter((item: any) => selectedParentAsins.includes(item.parentAsin))
-  // console.log(gridOptionsRight.data)
-  // 如果勾选项的parentAsin在gridOptionsRight.data中，则发送请求获取右侧表格数据
-  if (table.row && selectedParentAsins.includes(table.row.parentAsin)) {
-    fetchSearchedItem([table.row.parentAsin])
+  if (table.checked) {
+    rightPage = 1 // 仅当有新的选中项时重置页码和数据
+    singleSelect.value.splice(0)
+    singleSelect.value.push(table.row.parentAsin)
+    gridOptionsRight.data.splice(0) // 在加载新数据之前清空现有数据
+    fetchSearchedItem(singleSelect.value)
+  } else {
+    // 移除singleSelect.value中对应的parentAsin
+    const index = singleSelect.value.indexOf(table.row.parentAsin)
+    if (index !== -1) {
+      singleSelect.value.splice(index, 1)
+    }
+    // 从gridOptionsRight.data中移除对应的项
+    gridOptionsRight.data = gridOptionsRight.data.filter((item: any) => item.parentAsin !== table.row.parentAsin)
   }
 }
 
+// 单元格点击事件处理函数
+function handleCellClick(table: any) {
+  rightPage = 1
+  singleSelect.value.splice(0)
+  singleSelect.value.push(table.row.parentAsin)
+  gridOptionsRight.data.splice(0)
+  fetchSearchedItem(singleSelect.value)
+}
+
 async function fetchParentAsin() {
   parentLoading.value = true
   const body = {
@@ -92,10 +114,17 @@ async function fetchSearchedItem(parentAsin: Array<string>) {
     profileId: profile.value.profile_id,
     searchType: searchType,
     parentAsin,
+    page: rightPage,
+    limit: 8,
   }
   try {
     const response = await getSearchedItem(body)
-    gridOptionsRight.data.push(...response.data)
+    hasMore.value = rightPage * body.limit < response.total // 计算是否还有更多数据
+    if (rightPage == 1 && response.data.length > 0) {
+      gridOptionsRight.data = response.data
+    } else {
+      gridOptionsRight.data.push(...response.data)
+    }
   } catch (error) {
     console.log('error:', error)
   } finally {
@@ -112,6 +141,14 @@ function handleScroll(event: any) {
   }
 }
 
+function handleRightScroll(event: any) {
+  const target = event.$event.target
+  if (target.scrollHeight - (target.scrollTop + target.clientHeight) < 1 && hasMore.value) {
+    rightPage += 1 // 准备加载下一页
+    fetchSearchedItem(singleSelect.value)
+  }
+}
+
 // 切换搜索类型时，更新右侧表格字段
 function updateGridColumnField() {
   // 直接映射现有的columns，只修改需要改变的部分
@@ -119,11 +156,9 @@ function updateGridColumnField() {
     if (column.field === 'sku' || column.field === 'asin') {
       const newField = searchType === 'sku' ? 'sku' : 'asin'
       const newTitle = searchType === 'sku' ? 'SKU' : 'ASIN'
-
-      // 返回更新后的列配置
-      return { ...column, field: newField, title: newTitle, slots: { default: `${ newField }_default` } }
+      return { ...column, field: newField, title: newTitle, slots: { default: `${newField}_default` } }
     }
-    // 对于不需要更改的列，直接返回原配置
+    // 不需要改变的列配置直接返回
     return column
   })
 }
@@ -144,39 +179,39 @@ onBeforeUnmount(() => {
 <template>
   <div class="flex">
     <vxe-grid
-        v-loading="parentLoading"
-        v-bind="gridOptions"
-        :header-row-style="changeHeaderCellStyle"
-        :header-cell-style="changeHeaderCellStyle"
-        @checkbox-all="selectAllChangeEvent"
-        @checkbox-change="selectChangeEvent"
-        class="ml-2 mb-2 mt-0 border border-r-0 rounded-bl-md rounded-tl-md overflow-hidden"
-        style="flex: 0 1 260px; overflow: auto"
-        @scroll.native="handleScroll">
+      v-loading="parentLoading"
+      v-bind="gridOptions"
+      :header-row-style="changeHeaderCellStyle"
+      :header-cell-style="changeHeaderCellStyle"
+      @checkbox-all="selectAllChangeEvent"
+      @checkbox-change="selectChangeEvent"
+      @cell-click="handleCellClick"
+      class="ml-2 mb-2 mt-0 border border-r-0 rounded-bl-md rounded-tl-md overflow-hidden"
+      style="flex: 0 1 260px; overflow: auto"
+      @scroll.native="handleScroll">
       <template #parentAsin_default="{ row }">
         <div style="display: flex">
-          <el-image class="w-14 h-14 mr-1 border rounded" v-if="row.Image" :src="row.Image" alt="" fit="contain"/>
+          <el-image class="w-14 h-14 mr-1 border rounded" v-if="row.Image" :src="row.Image" alt="" fit="contain" />
           <el-image v-else class="w-12 h-12 mr-1 border rounded">
             <template #error>
               <div class="image-slot">
                 <el-icon>
-                  <icon-picture/>
+                  <icon-picture />
                 </el-icon>
               </div>
             </template>
           </el-image>
-
           <div class="flex flex-col justify-center">
             <div class="font-medium text-black">{{ row.parentAsin }}</div>
             <div>
               ASIN:<span class="text-black">{{ row.asinNum }}</span>
               <el-link
-                  :href="row.amazonUrl"
-                  target="_blank"
-                  :disabled="!row.amazonUrl"
-                  :underline="false"
-                  :icon="Connection"
-                  :style="{ marginLeft: '2px', marginBottom: '2px', color: row.amazonUrl ? '#3a83f7' : '#c0c4cc' }">
+                :href="row.amazonUrl"
+                target="_blank"
+                :disabled="!row.amazonUrl"
+                :underline="false"
+                :icon="Connection"
+                :style="{ marginLeft: '2px', marginBottom: '2px', color: row.amazonUrl ? '#3a83f7' : '#c0c4cc' }">
               </el-link>
               <span class="text-gray-300 mx-1">|</span>
               SKU:<span class="text-black">{{ row.skuNum }}</span>
@@ -185,98 +220,101 @@ onBeforeUnmount(() => {
         </div>
       </template>
     </vxe-grid>
-
+    <!-- 右侧表格 -->
     <vxe-grid
-        v-loading="rightLoading"
-        v-bind="gridOptionsRight"
-        :header-cell-style="changeHeaderCellStyle"
-        class="mr-2 mb-2 mt-0 border rounded-br-md rounded-tr-md overflow-hidden w-0"
-        style="flex: 2 1 0">
+      v-loading="rightLoading"
+      v-bind="gridOptionsRight"
+      :header-cell-style="changeHeaderCellStyle"
+      class="mr-2 mb-2 mt-0 border rounded-br-md rounded-tr-md overflow-hidden w-0"
+      style="flex: 2 1 0; overflow: auto"
+      @scroll.native="handleRightScroll">
       <template v-if="searchType === 'sku'" #sku_default="{ row }">
         <div style="display: flex; align-items: center">
-          <el-image class="w-14 h-14 mr-1 border rounded" style="min-width: 56px; min-height: 56px" v-if="row.Image" :src="row.Image" alt=""
-                    fit="contain"/>
+          <el-image
+            class="w-14 h-14 mr-1 border rounded"
+            style="min-width: 56px; min-height: 56px"
+            v-if="row.Image"
+            :src="row.Image"
+            alt=""
+            fit="contain" />
           <el-image v-else class="w-12 h-12 mr-1 border rounded">
             <template #error>
               <div class="image-slot">
                 <el-icon>
-                  <icon-picture/>
+                  <icon-picture />
                 </el-icon>
               </div>
             </template>
           </el-image>
-          <!--<div class="flex flex-col justify-center">-->
           <div>
-            <el-tooltip
-                class="box-item"
-                effect="dark"
-                :content="row.Title"
-                placement="top-start">
+            <el-tooltip class="box-item" effect="dark" :content="row.Title" placement="top-start">
               <div class="font-medium text-black display-line">{{ row.Title }}</div>
             </el-tooltip>
-
             <div>
               <span class="text-black font-semibold">{{ row.price }}</span>
               <span class="text-gray-300 mx-1">|</span>
               <span>{{ row.quantity }}</span>
             </div>
-            <el-tooltip
-                offset="0"
-                :show-arrow="false"
-                effect="dark"
-                :content="row.sku"
-                placement="top-end">
+            <el-tooltip offset="0" :show-arrow="false" effect="dark" :content="row.sku" placement="top-end">
               <div class="display-line">
-
                 ASIN:<span class="text-black">{{ row.asin }}</span>
                 <el-link
-                    :href="row.amazonUrl"
-                    target="_blank"
-                    :disabled="!row.amazonUrl"
-                    :underline="false"
-                    :icon="Connection"
-                    :style="{ marginLeft: '2px', marginBottom: '2px', color: row.amazonUrl ? '#3a83f7' : '#c0c4cc' }">
+                  :href="row.amazonUrl"
+                  target="_blank"
+                  :disabled="!row.amazonUrl"
+                  :underline="false"
+                  :icon="Connection"
+                  :style="{ marginLeft: '2px', marginBottom: '2px', color: row.amazonUrl ? '#3a83f7' : '#c0c4cc' }">
                 </el-link>
                 <span class="text-gray-300 mx-1">|</span>
-
                 SKU:<span class="text-black">{{ row.sku }}</span>
               </div>
             </el-tooltip>
           </div>
         </div>
       </template>
-
+      <!-- 表格显示ASIN相关-->
       <template v-if="searchType === 'asin'" #asin_default="{ row }">
-        <div style="display: flex">
-          <el-image class="w-14 h-14 mr-1 border rounded" v-if="row.Image" :src="row.Image" alt="" fit="contain"/>
+        <div style="display: flex; align-items: center">
+          <el-image
+            class="w-14 h-14 mr-1 border rounded"
+            style="min-width: 56px; min-height: 56px"
+            v-if="row.Image"
+            :src="row.Image"
+            alt=""
+            fit="contain" />
           <el-image v-else class="w-12 h-12 mr-1 border rounded">
             <template #error>
               <div class="image-slot">
                 <el-icon>
-                  <icon-picture/>
+                  <icon-picture />
                 </el-icon>
               </div>
             </template>
           </el-image>
-          <div class="flex flex-col justify-center">
-            <div class="font-medium text-black">{{ row.Title }}</div>
+          <div>
+            <el-tooltip class="box-item" effect="dark" :content="row.Title" placement="top-start">
+              <div class="font-medium text-black display-line">{{ row.Title }}</div>
+            </el-tooltip>
             <div>
-              <span>{{ row.price }}</span>
-              <span>|</span>
-              <span>{{ row.quantity }}</span>
+              <span class="text-black font-semibold">{{ row.priceMin }} ~ {{ row.priceMax }}</span>
+              <span class="text-gray-300 mx-1">|</span>
+              <span :style="{ color: row.quantity ? '#a26bf7' : '' }">
+                {{ row.quantity ? '有库存' : '无库存' }}
+              </span>
             </div>
-            <div>
+            <div class="display-line">
               ASIN:<span class="text-black">{{ row.asin }}</span>
               <el-link
-                  :href="row.amazonUrl"
-                  target="_blank"
-                  :disabled="!row.amazonUrl"
-                  :underline="false"
-                  :icon="Connection"
-                  :style="{ marginLeft: '2px', marginBottom: '2px', color: row.amazonUrl ? '#3a83f7' : '#c0c4cc' }">
+                :href="row.amazonUrl"
+                target="_blank"
+                :disabled="!row.amazonUrl"
+                :underline="false"
+                :icon="Connection"
+                :style="{ marginLeft: '2px', marginBottom: '2px', color: row.amazonUrl ? '#3a83f7' : '#c0c4cc' }">
               </el-link>
               <span class="text-gray-300 mx-1">|</span>
-              SKU:<span class="text-black">{{ row.sku }}</span>
+              SKU:<span class="text-black">{{ row.skuNum }}</span>
             </div>
           </div>
         </div>

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

@@ -6,9 +6,7 @@ import PopoverFilterParent from './PopoverFilterParent.vue'
 import { getProductSelect } from '../api'
 import emitter from '/@/utils/emitter'
 
-
 const isVisible = ref(false)
-
 const productFilterInput = ref('')
 const productFilterSelect = ref('')
 const productFilterOptions = ref([])
@@ -57,7 +55,7 @@ onMounted(() => {
         <el-input v-model="productFilterInput" @click="handleOpen" style="width: 350px" placeholder="请选择推广商品">
           <template #prepend>
             <el-select v-model="productFilterSelect" placeholder="Select" style="width: 100px">
-              <el-option v-for="item in productFilterOptions" :key="item.value" :label="item.label" :value="item.value"/>
+              <el-option v-for="item in productFilterOptions" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </template>
         </el-input>
@@ -65,7 +63,7 @@ onMounted(() => {
       <div class="flex justify-between">
         <div class="pb-3 font-bold text-slate-950 text-base">搜索</div>
         <el-icon class="cursor-pointer" @click="handleClose">
-          <CloseBold/>
+          <CloseBold />
         </el-icon>
       </div>
       <component :is="currentComponent"></component>