✨广告管理<SP>: 顶部sku模块弹窗勾选父ASIN可以添加数据到已添加表格

.prettierrc.js

@@ -2,7 +2,7 @@ module.exports = {
   singleAttributePerLine: false,
   htmlWhitespaceSensitivity: 'ignore',
   // 一行最多多少个字符
-  printWidth: 150,
+  printWidth: 130,
   // 指定每个缩进级别的空格数
   tabWidth: 2,
   // 使用制表符而不是空格缩进行

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

@@ -1,16 +1,33 @@
 <script setup lang="ts">
 import { Search } from '@element-plus/icons-vue'
-import { Ref, inject, onMounted, ref } from 'vue'
+import { inject, onMounted, Ref, ref } from 'vue'
 import { getProductline } from '../api'
 import PopoverFilterTable from './PopoverFilterTable.vue'
+import emitter from '/@/utils/emitter'
 
-const profile = <Ref>inject('profile')
+emitter.on('PopoverFilterTable-tableData', (data: any) => {
+  // console.log('receive:', data)
+  receiveData.value.push(...data)
+  console.log(receiveData.value)
+})
 
+const profile = <Ref>inject('profile')
 const activeName = ref('search')
 const searchInput = ref('')
 const options = <any>ref([])
 const textarea = ref('')
 const productLineSelect = ref('')
+const receiveData = ref([])
+
+function groupByParentAsin(data: any) {
+  return data.reduce((acc: any, item: any) => {
+    if (!acc[item.parentAsin]) {
+      acc[item.parentAsin] = []
+    }
+    acc[item.parentAsin].push(item)
+    return acc
+  }, {})
+}
 
 async function fetchProductLine() {
   try {
@@ -32,9 +49,17 @@ onMounted(() => {
       <el-tabs v-model="activeName" class="demo-tabs">
         <el-tab-pane label="搜索" name="search">
           <div class="flex gap-1 p-2">
-            <el-input v-model="searchInput" placeholder="输入产品标题/父ASIN/ASIN查询" :prefix-icon="Search" style="width: 360px" />
+            <el-input
+              v-model="searchInput"
+              placeholder="输入产品标题/父ASIN/ASIN查询"
+              :prefix-icon="Search"
+              style="width: 360px" />
             <el-select v-model="productLineSelect" multiple collapse-tags>
-              <el-option v-for="item in options" :key="item.productlineId" :label="item.productlineName" :value="item.productlineId" />
+              <el-option
+                v-for="item in options"
+                :key="item.productlineId"
+                :label="item.productlineName"
+                :value="item.productlineId" />
             </el-select>
             <el-select></el-select>
           </div>
@@ -47,6 +72,33 @@ onMounted(() => {
     </div>
     <div style="flex: 1 1 0">
       <div class="h-10" style="background-color: #edf0f8">已添加:</div>
+      <div class="demo-collapse">
+        <el-scrollbar height="550px">
+          <el-collapse v-model="activeNames">
+            <el-collapse-item
+              v-for="(items, parentAsin) in groupByParentAsin(receiveData)"
+              :key="parentAsin"
+              :title="parentAsin"
+              :name="parentAsin">
+              <template #title>
+                <span>{{ parentAsin }}</span>
+              </template>
+              <div v-for="item in items" :key="item.asin">
+                ASIN: {{ item.asin }}
+                <br />
+                SKU: {{ item.sku }}
+              </div>
+            </el-collapse-item>
+            <el-collapse-item title="Feedback" name="2">
+              <div>
+                Operation feedback: enable the users to clearly perceive their operations by style updates and interactive
+                effects;
+              </div>
+              <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
+            </el-collapse-item>
+          </el-collapse>
+        </el-scrollbar>
+      </div>
     </div>
   </div>
 </template>

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

@@ -22,9 +22,11 @@ let page = 1
 let rightPage = 1
 let limit = 15
 let searchType = ''
+const vxeRef = ref()
+const vxeRefRight = ref()
 const selectedParentAsins = ref([])
-const singleSelect = ref([]) // 默认假设有更多数据
 const hasMore = ref(true)
+const isScrollSelectAll = ref(false)
 
 // 父ASIN表格配置
 const gridOptions = <any>reactive({
@@ -51,45 +53,69 @@ const gridOptionsRight = <any>reactive({
   data: [],
 })
 
-// 全选事件
-function selectAllChangeEvent(table: any) {
-  console.log('多选:', table)
-  if (table.checked) {
-    fetchSearchedItem(selectedParentAsins.value)
-  } else {
-    // 如果全选被取消，清空右侧数据或执行其他逻辑
-    gridOptionsRight.data = []
-  }
-}
-
-// 单选事件
-function selectChangeEvent(table: any) {
+// 左侧单选事件
+async function selectChangeEvent(table: any) {
   if (table.checked) {
     rightPage = 1 // 仅当有新的选中项时重置页码和数据
-    singleSelect.value.splice(0)
-    singleSelect.value.push(table.row.parentAsin)
+    selectedParentAsins.value.splice(0) // 移除旧的选中项
+    selectedParentAsins.value.push(table.row.parentAsin)
     gridOptionsRight.data.splice(0) // 在加载新数据之前清空现有数据
-    fetchSearchedItem(singleSelect.value)
+    await fetchSearchedItem(selectedParentAsins.value)
+    await vxeRefRight.value.setAllCheckboxRow(true)
+    // const data = vxeRefRight.value.getTableData()
+    getRightSelectedItem()
   } else {
     // 移除singleSelect.value中对应的parentAsin
-    const index = singleSelect.value.indexOf(table.row.parentAsin)
+    const index = selectedParentAsins.value.indexOf(table.row.parentAsin)
     if (index !== -1) {
-      singleSelect.value.splice(index, 1)
+      selectedParentAsins.value.splice(index, 1)
     }
     // 从gridOptionsRight.data中移除对应的项
     gridOptionsRight.data = gridOptionsRight.data.filter((item: any) => item.parentAsin !== table.row.parentAsin)
   }
 }
 
-// 单元格点击事件处理函数
+// 左侧全选事件
+async function selectAllChangeEvent(table: any) {
+  // console.log('多选:', table)
+  if (table.checked) {
+    table.records.forEach((record: any) => {
+      selectedParentAsins.value.push(record.parentAsin)
+      isScrollSelectAll.value = true // 是否滚动全选
+    })
+    await fetchSearchedItem(selectedParentAsins.value)
+    await vxeRefRight.value.setAllCheckboxRow(true)
+    // const data = vxeRefRight.value.getTableData()
+    getRightSelectedItem()
+  } else {
+    // 如果全选被取消，清空右侧数据或执行其他逻辑
+    selectedParentAsins.value.splice(0)
+    gridOptionsRight.data.splice(0)
+  }
+}
+
+// 单元格点击事件
 function handleCellClick(table: any) {
   rightPage = 1
-  singleSelect.value.splice(0)
-  singleSelect.value.push(table.row.parentAsin)
+  selectedParentAsins.value.splice(0)
+  selectedParentAsins.value.push(table.row.parentAsin)
   gridOptionsRight.data.splice(0)
-  fetchSearchedItem(singleSelect.value)
+  fetchSearchedItem(selectedParentAsins.value)
+}
+
+// 右侧表格单选事件
+function selectChangeRight(table: any) {
+  getRightSelectedItem()
 }
 
+// 获取右侧表格选中的数据
+function getRightSelectedItem() {
+  const selectedData = vxeRefRight.value.getCheckboxRecords() // 获取右侧表格选中的数据
+  // console.log('selectedData', selectedData)
+  emitter.emit('PopoverFilterTable-tableData', selectedData)
+}
+
+// 获取父ASIN数据
 async function fetchParentAsin() {
   parentLoading.value = true
   const body = {
@@ -132,20 +158,27 @@ async function fetchSearchedItem(parentAsin: Array<string>) {
   }
 }
 
-function handleScroll(event: any) {
+async function handleScroll(event: any) {
   const target = event.$event.target
   // 计算是否达到底部：容器高度 + 滚动顶部距离 >= 滚动内容的总高度
   if (target.scrollHeight - (target.scrollTop + target.clientHeight) < 1) {
     page += 1
-    fetchParentAsin()
+    await fetchParentAsin()
+    if (isScrollSelectAll.value) {
+      await vxeRef.value.setAllCheckboxRow(true)
+    }
   }
 }
 
-function handleRightScroll(event: any) {
+async function handleRightScroll(event: any) {
   const target = event.$event.target
   if (target.scrollHeight - (target.scrollTop + target.clientHeight) < 1 && hasMore.value) {
     rightPage += 1 // 准备加载下一页
-    fetchSearchedItem(singleSelect.value)
+    await fetchSearchedItem(selectedParentAsins.value)
+    await vxeRefRight.value.setAllCheckboxRow(true)
+    getRightSelectedItem()
+    // const data = vxeRef.value.getTableData()
+    // getRightSelectedItem(data)
   }
 }
 
@@ -166,7 +199,6 @@ function updateGridColumnField() {
 // 更改表头样式
 function changeHeaderCellStyle() {
   return {
-    // backgroundColor: '#eef0f7',
     padding: '3px',
   }
 }
@@ -179,6 +211,7 @@ onBeforeUnmount(() => {
 <template>
   <div class="flex">
     <vxe-grid
+      ref="vxeRef"
       v-loading="parentLoading"
       v-bind="gridOptions"
       :header-row-style="changeHeaderCellStyle"
@@ -222,9 +255,11 @@ onBeforeUnmount(() => {
     </vxe-grid>
     <!-- 右侧表格 -->
     <vxe-grid
+      ref="vxeRefRight"
       v-loading="rightLoading"
       v-bind="gridOptionsRight"
       :header-cell-style="changeHeaderCellStyle"
+      @checkbox-change="selectChangeRight"
       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">