✨ 新增保留添加记录和取消勾选后移除对应项

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

@@ -4,6 +4,7 @@ import { inject, onBeforeUnmount, onMounted, Ref, ref, watch } from 'vue'
 import { getProductline } 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')
@@ -12,88 +13,7 @@ const options = ref<{ productlineId: number; productlineName: string }[]>([])
 const textarea = ref('')
 const activeNames = ref([])
 const productLineSelect = ref('')
-// 用于存储从 PopoverFilterTable 组件传来的数据
-const receiveData = ref([])
-// 用于存储已经添加的 parentAsin,避免重复添加
-const parentAsinsSet = ref(new Set<string>())
-const allSkus = ref<string[]>([])
-const searchType = ref('')
-
-// 点击复选框就会触发, 用于处理从 PopoverFilterTable 组件传来的数据
-emitter.on('PopoverFilterTable-tableData', (data: any) => {
-  // 过滤出 parentAsin 和 sku 都不在 parentAsinsSet 和 allSkus 中的数据,避免重复添加
-  const uniqueData = data.filter(
-    (item: any) => !parentAsinsSet.value.has(item.parentAsin + item.sku) && !allSkus.value.includes(item.sku)
-  )
-  // 将过滤后的数据添加到 receiveData 中
-  receiveData.value.push(...uniqueData)
-  // 将新添加的 parentAsin 和 sku 添加到 parentAsinsSet 和 allSkus 中
-  uniqueData.forEach((item: any) => {
-    parentAsinsSet.value.add(item.parentAsin + item.sku)
-    allSkus.value.push(item.sku)
-  })
-})
-
-emitter.on('PopoverFilterTable-needDeleteBySku', (skuToDelete: string) => {
-  // 遍历 receiveData,找到 sku 匹配的项
-  receiveData.value = receiveData.value.reduce((acc: any[], item: any) => {
-    if (item.sku !== skuToDelete) {
-      acc.push(item)
-    } else {
-      // 从 parentAsinsSet 和 allSkus 中删除该 parentAsin 和 sku 的组合
-      parentAsinsSet.value.delete(item.parentAsin + item.sku)
-      allSkus.value = allSkus.value.filter((sku) => sku !== item.sku)
-    }
-    return acc
-  }, [])
-})
-
-emitter.on('PopoverFilterTable-needDelete', (parentAsinToDelete: string) => {
-  // 遍历 receiveData,找到 parentAsin 匹配的项
-  receiveData.value = receiveData.value.reduce((acc: any[], item: any) => {
-    if (item.parentAsin !== parentAsinToDelete) {
-      acc.push(item)
-    } else {
-      // 从 parentAsinsSet 和 allSkus 中删除该 parentAsin 和 sku 的组合
-      parentAsinsSet.value.delete(item.parentAsin + item.sku)
-      allSkus.value = allSkus.value.filter((sku) => sku !== item.sku)
-    }
-    return acc
-  }, [])
-})
-
-// 在 TopFilter 组件隐藏时清空 receiveData 和 parentAsinsSet
-emitter.on('TopFilter', (value: any) => {
-  if (!value.isVisible) {
-    resetReceiveData()
-  }
-  console.log(value.productFilterSelect)
-  searchType.value = value.productFilterSelect?.value
-})
-
-emitter.on('TopFilter-confirm', (value: any) => {
-  value.confirm && emitter.emit('PopoverFilter-allSkus', { allSkus, searchType });
-  emitter.emit('PopoverFilter-sendSearchItem', allSkus)
-  resetReceiveData()
-})
-
-// 根据 parentAsin 对 receiveData 数据进行分组
-function groupByParentAsin(receiveData: { parentAsin: string; asin: string; sku: string }[]) {
-  return receiveData.reduce((acc: Record<string, { parentAsin: string; asin: string; sku: string }[]>, item) => {
-    // acc初始化为空对象, 遍历每一项, 如果不存在 parentAsin的值, 则初始化一个空数组, 然后将parentAsin的值作为key, 添加到数组中
-    if (!acc[item.parentAsin]) {
-      acc[item.parentAsin] = []
-    }
-    acc[item.parentAsin].push(item)
-    return acc
-  }, {})
-}
-
-function resetReceiveData() {
-  receiveData.value = []
-  parentAsinsSet.value.clear()
-  allSkus.value = []
-}
+const { receiveData, groupByParentAsin, resetReceiveData } = useAddedItem()
 
 // 获取产品线数据
 async function fetchProductLine() {
@@ -104,7 +24,6 @@ async function fetchProductLine() {
     console.log('error:', error)
   }
 }
-
 // 在组件挂载时获取产品线数据
 onMounted(() => {
   fetchProductLine()

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

@@ -3,6 +3,22 @@ import { inject, onBeforeUnmount, reactive, Ref, ref } from 'vue'
 import { getParentAsin, getSearchedItem } from '../api'
 import { Connection, Picture as IconPicture } from '@element-plus/icons-vue'
 import emitter from '/@/utils/emitter'
+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()
+const selectedParentAsins = ref([])
+const hasMore = ref(true)
+const isScrollSelectAll = ref(false)
+const { parentAsinsSet } = useAddedItem()
+
 
 emitter.on('TopFilter', (value: any) => {
   if (value.isVisible?.value) {
@@ -18,19 +34,6 @@ emitter.on('TopFilter-confirm', () => {
   resetSelected()
 })
 
-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()
-const selectedParentAsins = ref([])
-const hasMore = ref(true)
-const isScrollSelectAll = ref(false)
-
 // 父ASIN表格配置
 const gridOptions = <any>reactive({
   height: 500,
@@ -100,25 +103,82 @@ async function selectAllChangeEvent(table: any) {
 
 // 单元格点击事件
 function handleCellClick(table: any) {
+  console.log(vxeRefRight.value.getTableData().tableData)
+  console.log('parentAsinsSet', parentAsinsSet.value)
   rightPage = 1
   selectedParentAsins.value.splice(0)
   selectedParentAsins.value.push(table.row.parentAsin)
   gridOptionsRight.data.splice(0)
-  fetchSearchedItem(selectedParentAsins.value)
+  fetchSearchedItem(selectedParentAsins.value).then(() => {
+    // 重新加载完右侧数据后，进行勾选
+    checkRightTableRows();
+  });
+}
+
+// 这个函数用来勾选右侧表格的行
+function checkRightTableRows() {
+  const rightData = vxeRefRight.value.getTableData().tableData;
+
+  rightData.forEach(row => {
+    const concatValue = row.parentAsin + row.sku;
+    if (parentAsinsSet.value.has(concatValue)) {
+      vxeRefRight.value.setCheckboxRow(row, true);
+    }
+  });
 }
 
 // 右侧表格单选事件
-function selectChangeRight(table: any) {
+async function selectChangeRight(table: any) {
   if (table.checked) {
     getRightSelectedItem()
+    // 新增代码: 查找并选中左侧表格对应的条目
+    const parentAsin = table.row.parentAsin
+    const leftTableData = vxeRef.value.getTableData().tableData
+    const leftRow = leftTableData.find((row) => row.parentAsin === parentAsin)
+    if (leftRow) {
+      await vxeRef.value.setCheckboxRow(leftRow, true)
+    }
   } else {
     emitter.emit('PopoverFilterTable-needDeleteBySku', table.row.sku)
+    // 新增代码: 查找并取消选中左侧表格对应的条目
+    const parentAsin = table.row.parentAsin
+    const leftTableData = vxeRef.value.getTableData().tableData
+    const leftRow = leftTableData.find((row) => row.parentAsin === parentAsin)
+    if (leftRow && table.records.length === 0) {
+      await vxeRef.value.setCheckboxRow(leftRow, false)
+    }
+  }
+}
+
+// 右侧表格全选事件
+async function selectAllChangeRight(table: any) {
+  if (table.checked) {
+    getRightSelectedItem()
+    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)
+      if (leftRow) {
+        await vxeRef.value.setCheckboxRow(leftRow, true)
+      }
+    }
+  } else {
+    // console.log('table.tableData', vxeRefRight.value.getTableData().tableData[0].parentAsin)
+    emitter.emit('PopoverFilterTable-needDelete', vxeRefRight.value.getTableData().tableData[0].parentAsin)
+    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)
+      if (leftRow) {
+        await vxeRef.value.setCheckboxRow(leftRow, false)
+      }
+    }
   }
 }
 
 // 获取右侧表格选中的数据
 function getRightSelectedItem() {
-  const selectedData = vxeRefRight.value.getCheckboxRecords() // 获取右侧表格选中的数据
+  const selectedData = vxeRefRight.value.getCheckboxRecords()
   // console.log('selectedData', selectedData)
   emitter.emit('PopoverFilterTable-tableData', selectedData)
 }
@@ -272,6 +332,7 @@ onBeforeUnmount(() => {
       v-loading="rightLoading"
       v-bind="gridOptionsRight"
       :header-cell-style="changeHeaderCellStyle"
+      @checkbox-all="selectAllChangeRight"
       @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"

src/views/adManage/sp/hooks/useAddedItem.ts

@@ -0,0 +1,90 @@
+import { ref } from 'vue'
+import emitter from '/@/utils/emitter'
+
+
+export default function useAddedItem() {
+  // 用于存储从 PopoverFilterTable 组件传来的数据
+  const receiveData = ref([])
+  // 用于存储已经添加的 parentAsin,避免重复添加
+  const parentAsinsSet = ref(new Set<string>())
+  const allSkus = ref<string[]>([])
+  const searchType = ref('')
+
+  // 点击复选框就会触发, 用于处理从 PopoverFilterTable 组件传来的数据
+  emitter.on('PopoverFilterTable-tableData', (data: any) => {
+    // 过滤出 parentAsin 和 sku 都不在 parentAsinsSet 和 allSkus 中的数据,避免重复添加
+    const uniqueData = data.filter(
+      (item: any) => !parentAsinsSet.value.has(item.parentAsin + item.sku) && !allSkus.value.includes(item.sku)
+    )
+    // 将过滤后的数据添加到 receiveData 中
+    receiveData.value.push(...uniqueData)
+    // 将新添加的 parentAsin 和 sku 添加到 parentAsinsSet 和 allSkus 中
+    uniqueData.forEach((item: any) => {
+      parentAsinsSet.value.add(item.parentAsin + item.sku)
+      allSkus.value.push(item.sku)
+    })
+  })
+
+  emitter.on('PopoverFilterTable-needDeleteBySku', (skuToDelete: string) => {
+    // 遍历 receiveData,找到 sku 匹配的项
+    receiveData.value = receiveData.value.reduce((acc: any[], item: any) => {
+      if (item.sku !== skuToDelete) {
+        acc.push(item)
+      } else {
+        // 从 parentAsinsSet 和 allSkus 中删除该 parentAsin 和 sku 的组合
+        parentAsinsSet.value.delete(item.parentAsin + item.sku)
+        allSkus.value = allSkus.value.filter((sku) => sku !== item.sku)
+      }
+      return acc
+    }, [])
+  })
+
+  emitter.on('PopoverFilterTable-needDelete', (parentAsinToDelete: string) => {
+    // 遍历 receiveData,找到 parentAsin 匹配的项
+    receiveData.value = receiveData.value.reduce((acc: any[], item: any) => {
+      if (item.parentAsin !== parentAsinToDelete) {
+        acc.push(item)
+      } else {
+        // 从 parentAsinsSet 和 allSkus 中删除该 parentAsin 和 sku 的组合
+        parentAsinsSet.value.delete(item.parentAsin + item.sku)
+        allSkus.value = allSkus.value.filter((sku) => sku !== item.sku)
+      }
+      return acc
+    }, [])
+  })
+
+  // 在 TopFilter 组件隐藏时清空 receiveData 和 parentAsinsSet
+  emitter.on('TopFilter', (value: any) => {
+    if (!value.isVisible) {
+      resetReceiveData()
+    }
+    searchType.value = value.productFilterSelect?.value
+  })
+
+  // 点击应用后清空 receiveData 和 parentAsinsSet, 并将 allSkus 发送给 TopFilter 组件
+  emitter.on('TopFilter-confirm', (value: any) => {
+    value.confirm && emitter.emit('PopoverFilter-allSkus', { allSkus, searchType })
+    emitter.emit('PopoverFilter-sendSearchItem', allSkus)
+    resetReceiveData()
+  })
+
+  // 根据 parentAsin 对 receiveData 数据进行分组
+  function groupByParentAsin(receiveData: { parentAsin: string; asin: string; sku: string }[]) {
+    return receiveData.reduce((acc: Record<string, { parentAsin: string; asin: string; sku: string }[]>, item) => {
+      // acc初始化为空对象, 遍历每一项, 如果不存在 parentAsin的值, 则初始化一个空数组, 然后将parentAsin的值作为key, 添加到数组中
+      if (!acc[item.parentAsin]) {
+        acc[item.parentAsin] = []
+      }
+      acc[item.parentAsin].push(item)
+      return acc
+    }, {})
+  }
+
+  function resetReceiveData() {
+    receiveData.value = []
+    parentAsinsSet.value.clear()
+    allSkus.value = []
+  }
+
+  return { receiveData, parentAsinsSet, groupByParentAsin, resetReceiveData }
+}