✨广告管理<SP>: 顶部sku模块弹窗功能完善,api修改

src/views/adManage/sp/advertisedProducts/api.ts

@@ -1,77 +1,76 @@
-import { request } from '/@/utils/service';
-import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
-import XEUtils from 'xe-utils';
+import { request } from '/@/utils/service'
+import { AddReq, DelReq, EditReq, UserPageQuery } from '@fast-crud/fast-crud'
 
-export const apiPrefix = '/api/ad_manage/spads/';
+export const apiPrefix = '/api/ad_manage/spads/'
 export function GetList(query: UserPageQuery) {
-    return request({
-        url: apiPrefix,
-        method: 'get',
-        params: query,
-    })
+  return request({
+    url: apiPrefix + 'list',
+    method: 'post',
+    data: query,
+  })
 }
 export function GetObj(id: any) {
-    return request({
-        url: apiPrefix + id + "/",
-        method: 'get',
-    });
+  return request({
+    url: apiPrefix + id + '/',
+    method: 'post',
+  })
 }
 
 export function AddObj(obj: AddReq) {
-    return request({
-        url: apiPrefix,
-        method: 'post',
-        data: obj,
-    });
+  return request({
+    url: apiPrefix,
+    method: 'post',
+    data: obj,
+  })
 }
 
 export function UpdateObj(obj: EditReq) {
-    return request({
-        url: apiPrefix + obj.id + '/',
-        method: 'put',
-        data: obj,
-    });
+  return request({
+    url: apiPrefix + obj.id + '/',
+    method: 'put',
+    data: obj,
+  })
 }
 
 export function DelObj(id: DelReq) {
-    return request({
-        url: apiPrefix + id + '/',
-        method: 'delete',
-        data: { id },
-    });
+  return request({
+    url: apiPrefix + id + '/',
+    method: 'delete',
+    data: { id },
+  })
 }
 
 export function getCardData(query: UserPageQuery) {
-    return request({
-        url: apiPrefix + "total/",
-        method: 'GET',
-        params: query
-    })
+  return request({
+    url: apiPrefix + 'total',
+    method: 'post',
+    data: query,
+  })
 }
 
 export function getLineData(query: UserPageQuery) {
-    query["dateRangeType"] = "D"
-    return request({
-        url: apiPrefix + "daily/",
-        method: 'GET',
-        params: query
-    })
+  query['dateRangeType'] = 'D'
+  return request({
+    url: apiPrefix + 'daily',
+    method: 'post',
+    data: query,
+  })
 }
 
 export function getLineWeekData(query: UserPageQuery) {
-    query["dateRangeType"] = "W"
-    return request({
-        url: apiPrefix + "daily/",
-        method: 'GET',
-        params: query
-    })
+  query['dateRangeType'] = 'W'
+  return request({
+    url: apiPrefix + 'daily',
+    method: 'post',
+    data: query,
+  })
 }
 
 export function getLineMonthData(query: UserPageQuery) {
-    query["dateRangeType"] = "M"
-    return request({
-        url: apiPrefix + "daily/",
-        method: 'GET',
-        params: query
-    })
+  query['dateRangeType'] = 'M'
+  return request({
+    url: apiPrefix + 'daily',
+    method: 'post',
+    data: query,
+  })
 }

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

@@ -1,14 +1,52 @@
 <script setup lang="ts">
 import { Search } from '@element-plus/icons-vue'
-import { inject, onMounted, Ref, ref } from 'vue'
+import { inject, onBeforeUnmount, onMounted, Ref, ref } from 'vue'
 import { getProductline } from '../api'
 import PopoverFilterTable from './PopoverFilterTable.vue'
 import emitter from '/@/utils/emitter'
 
+// 点击复选框就会触发, 用于处理从 PopoverFilterTable 组件传来的数据
 emitter.on('PopoverFilterTable-tableData', (data: any) => {
-  // console.log('receive:', data)
-  receiveData.value.push(...data)
-  console.log(receiveData.value)
+  // 过滤出 parentAsin 和 sku 都不在 parentAsinsSet 中的数据,避免重复添加
+  const uniqueData = data.filter((item: any) => !parentAsinsSet.value.has(item.parentAsin + item.sku))
+  // 将过滤后的数据添加到 receiveData 中
+  receiveData.value.push(...uniqueData)
+  // 将新添加的 parentAsin 和 sku 添加到 parentAsinsSet 中
+  uniqueData.forEach((item: any) => parentAsinsSet.value.add(item.parentAsin + item.sku))
+})
+
+// 删除指定 parentAsin 的数据
+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 中删除该 parentAsin 和 sku 的组合
+      parentAsinsSet.value.delete(item.parentAsin + item.sku)
+    }
+    return acc
+  }, [])
+})
+
+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 中删除该 parentAsin 和 sku 的组合
+      parentAsinsSet.value.delete(item.parentAsin + item.sku)
+    }
+    return acc
+  }, [])
+})
+
+// 在 TopFilter 组件隐藏时清空 receiveData 和 parentAsinsSet
+emitter.on('TopFilter', (value: any) => {
+  if (!value.isVisible) {
+    resetReceiveData()
+  }
 })
 
 const profile = <Ref>inject('profile')
@@ -17,10 +55,14 @@ const searchInput = ref('')
 const options = <any>ref([])
 const textarea = ref('')
 const productLineSelect = ref('')
+// 用于存储从 PopoverFilterTable 组件传来的数据
 const receiveData = ref([])
+// 用于存储已经添加的 parentAsin,避免重复添加
+const parentAsinsSet = ref(new Set<string>())
 
-function groupByParentAsin(data: any) {
-  return data.reduce((acc: any, item: any) => {
+// 根据 parentAsin 对 receiveData 数据进行分组
+function groupByParentAsin(receiveData: any) {
+  return receiveData.reduce((acc: any, item: any) => {
     if (!acc[item.parentAsin]) {
       acc[item.parentAsin] = []
     }
@@ -29,6 +71,12 @@ function groupByParentAsin(data: any) {
   }, {})
 }
 
+function resetReceiveData() {
+  receiveData.value = []
+  parentAsinsSet.value.clear()
+}
+
+// 获取产品线数据
 async function fetchProductLine() {
   try {
     const response = await getProductline({ profileId: profile.value.profile_id })
@@ -38,9 +86,14 @@ async function fetchProductLine() {
   }
 }
 
+// 在组件挂载时获取产品线数据
 onMounted(() => {
   fetchProductLine()
 })
+
+onBeforeUnmount(() => {
+  emitter.all.clear()
+})
 </script>
 
 <template>
@@ -71,7 +124,10 @@ onMounted(() => {
       </el-tabs>
     </div>
     <div style="flex: 1 1 0">
-      <div class="h-10" style="background-color: #edf0f8">已添加:</div>
+      <div class="h-10 flex justify-between" style="background-color: #edf0f8">
+        <div class="my-auto ml-2">已添加:</div>
+        <el-button link @click="resetReceiveData" class="mr-2" style="color: #3569d6">全部删除</el-button>
+      </div>
       <div class="demo-collapse">
         <el-scrollbar height="550px">
           <el-collapse v-model="activeNames">
@@ -89,13 +145,6 @@ onMounted(() => {
                 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>

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

@@ -72,6 +72,7 @@ async function selectChangeEvent(table: any) {
     }
     // 从gridOptionsRight.data中移除对应的项
     gridOptionsRight.data = gridOptionsRight.data.filter((item: any) => item.parentAsin !== table.row.parentAsin)
+    emitter.emit('PopoverFilterTable-needDelete', table.row.parentAsin)
   }
 }
 
@@ -105,7 +106,11 @@ function handleCellClick(table: any) {
 
 // 右侧表格单选事件
 function selectChangeRight(table: any) {
-  getRightSelectedItem()
+  if (table.checked) {
+    getRightSelectedItem()
+  } else {
+    emitter.emit('PopoverFilterTable-needDeleteBySku', table.row.sku)
+  }
 }
 
 // 获取右侧表格选中的数据

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

@@ -68,7 +68,7 @@ onMounted(() => {
       </div>
       <component :is="currentComponent"></component>
       <div class="flex justify-end mt-2">
-        <el-button>取消</el-button>
+        <el-button @click="handleClose">取消</el-button>
         <el-button type="primary" color="#3c58af">应用</el-button>
       </div>
     </el-popover>

src/views/adManage/sp/keywords/api.ts

@@ -1,85 +1,84 @@
-import { request } from '/@/utils/service';
-import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
-import XEUtils from 'xe-utils';
+import { request } from '/@/utils/service'
+import { AddReq, DelReq, EditReq, UserPageQuery } from '@fast-crud/fast-crud'
 
-export const apiPrefix = '/api/ad_manage/spkeywords/';
+export const apiPrefix = '/api/ad_manage/spkeywords/'
 export function GetList(query: UserPageQuery) {
-    return request({
-        url: apiPrefix,
-        method: 'get',
-        params: query,
-    })
+  return request({
+    url: apiPrefix + 'list',
+    method: 'post',
+    data: query,
+  })
 }
 export function GetObj(id: any) {
-    return request({
-        url: apiPrefix + id + "/",
-        method: 'get',
-    });
+  return request({
+    url: apiPrefix + id + '/',
+    method: 'post',
+  })
 }
 
 export function AddObj(obj: AddReq) {
-    return request({
-        url: apiPrefix,
-        method: 'post',
-        data: obj,
-    });
+  return request({
+    url: apiPrefix,
+    method: 'post',
+    data: obj,
+  })
 }
 
 export function UpdateObj(obj: EditReq) {
-    return request({
-        url: apiPrefix + obj.id + '/',
-        method: 'put',
-        data: obj,
-    });
+  return request({
+    url: apiPrefix + obj.id + '/',
+    method: 'put',
+    data: obj,
+  })
 }
 
 export function DelObj(id: DelReq) {
-    return request({
-        url: apiPrefix + id + '/',
-        method: 'delete',
-        data: { id },
-    });
+  return request({
+    url: apiPrefix + id + '/',
+    method: 'delete',
+    data: { id },
+  })
 }
 
 export function getCardData(query: UserPageQuery) {
-    return request({
-        url: apiPrefix + "total/",
-        method: 'GET',
-        params: query
-    })
+  return request({
+    url: apiPrefix + 'total',
+    method: 'post',
+    data: query,
+  })
 }
 
 export function getLineData(query: UserPageQuery) {
-    query["dateRangeType"] = "D"
-    return request({
-        url: apiPrefix + "daily/",
-        method: 'GET',
-        params: query
-    })
+  query['dateRangeType'] = 'D'
+  return request({
+    url: apiPrefix + 'daily',
+    method: 'post',
+    data: query,
+  })
 }
 
 export function getLineWeekData(query: UserPageQuery) {
-    query["dateRangeType"] = "W"
-    return request({
-        url: apiPrefix + "daily/",
-        method: 'GET',
-        params: query
-    })
+  query['dateRangeType'] = 'W'
+  return request({
+    url: apiPrefix + 'daily',
+    method: 'post',
+    data: query,
+  })
 }
 
 export function getLineMonthData(query: UserPageQuery) {
-    query["dateRangeType"] = "M"
-    return request({
-        url: apiPrefix + "daily/",
-        method: 'GET',
-        params: query
-    })
+  query['dateRangeType'] = 'M'
+  return request({
+    url: apiPrefix + 'daily',
+    method: 'post',
+    data: query,
+  })
 }
 
 export function getAdStructureData(query: UserPageQuery) {
-    return request({
-        url: apiPrefix + "structure/",
-        method: 'GET',
-        params: query
-    })
+  return request({
+    url: apiPrefix + 'structure',
+    method: 'post',
+    data: query,
+  })
 }

src/views/adManage/sp/placement/api.ts

@@ -1,49 +1,49 @@
-import {request} from '/@/utils/service'
-import {AddReq, DelReq, EditReq, UserPageQuery} from '@fast-crud/fast-crud'
+import { request } from '/@/utils/service'
+import { AddReq, DelReq, EditReq, UserPageQuery } from '@fast-crud/fast-crud'
 
-export const apiPrefix = '/api/ad_manage/spplacement/';
+export const apiPrefix = '/api/ad_manage/spplacement/'
 export function GetList(query: UserPageQuery) {
-    return request({
-        url: apiPrefix,
-        method: 'get',
-        params: query,
-    })
+  return request({
+    url: apiPrefix + 'list',
+    method: 'post',
+    data: query,
+  })
 }
 export function GetObj(id: any) {
-    return request({
-        url: apiPrefix + id + "/",
-        method: 'get',
-    });
+  return request({
+    url: apiPrefix + id + '/',
+    method: 'post',
+  })
 }
 
 export function AddObj(obj: AddReq) {
-    return request({
-        url: apiPrefix,
-        method: 'post',
-        data: obj,
-    });
+  return request({
+    url: apiPrefix,
+    method: 'post',
+    data: obj,
+  })
 }
 
 export function UpdateObj(obj: EditReq) {
-    return request({
-        url: apiPrefix + obj.id + '/',
-        method: 'put',
-        data: obj,
-    });
+  return request({
+    url: apiPrefix + obj.id + '/',
+    method: 'put',
+    data: obj,
+  })
 }
 
 export function DelObj(id: DelReq) {
-    return request({
-        url: apiPrefix + id + '/',
-        method: 'delete',
-        data: { id },
-    });
+  return request({
+    url: apiPrefix + id + '/',
+    method: 'delete',
+    data: { id },
+  })
 }
 
 export function getAdStructureData(query: UserPageQuery) {
-    return request({
-        url: apiPrefix + "structure/",
-        method: 'GET',
-        params: query
-    })
+  return request({
+    url: apiPrefix + 'structure',
+    method: 'post',
+    data: query,
+  })
 }

src/views/adManage/sp/purchasedOtherProducts/api.ts

@@ -3,45 +3,44 @@ import { UserPageQuery } from '@fast-crud/fast-crud'
 
 export const apiPrefix = '/api/ad_manage/spotherproducts/'
 export function GetList(query: UserPageQuery) {
-	return request({
-		url: apiPrefix,
-		method: 'get',
-		params: query,
-	})
+  return request({
+    url: apiPrefix + 'list',
+    method: 'post',
+    data: query,
+  })
 }
 
 export function getCardData(query: UserPageQuery) {
   return request({
-      url: apiPrefix + "total/",
-      method: 'GET',
-      params: query
+    url: apiPrefix + 'total',
+    method: 'post',
+    data: query,
   })
 }
 
 export function getLineData(query: UserPageQuery) {
-  query["dateRangeType"] = "D"
+  query['dateRangeType'] = 'D'
   return request({
-      url: apiPrefix + "daily/",
-      method: 'GET',
-      params: query
+    url: apiPrefix + 'daily',
+    method: 'post',
+    data: query,
   })
 }
 
 export function getLineWeekData(query: UserPageQuery) {
-  query["dateRangeType"] = "W"
+  query['dateRangeType'] = 'W'
   return request({
-    url: apiPrefix + "daily/",
-    method: 'GET',
-    params: query
+    url: apiPrefix + 'daily',
+    method: 'post',
+    data: query,
   })
 }
 
 export function getLineMonthData(query: UserPageQuery) {
-  query["dateRangeType"] = "M"
+  query['dateRangeType'] = 'M'
   return request({
-    url: apiPrefix + "daily/",
-    method: 'GET',
-    params: query
+    url: apiPrefix + 'daily',
+    method: 'post',
+    data: query,
   })
 }
-

src/views/adManage/sp/searchTerm/api.ts

@@ -3,44 +3,44 @@ import { UserPageQuery } from '@fast-crud/fast-crud'
 
 export const apiPrefix = '/api/ad_manage/spsearchterms/'
 export function GetList(query: UserPageQuery) {
-	return request({
-		url: apiPrefix,
-		method: 'get',
-		params: query,
-	})
+  return request({
+    url: apiPrefix + 'list',
+    method: 'post',
+    data: query,
+  })
 }
 
 export function getCardData(query: UserPageQuery) {
   return request({
-      url: apiPrefix + "total/",
-      method: 'GET',
-      params: query
+    url: apiPrefix + 'total',
+    method: 'post',
+    data: query,
   })
 }
 
 export function getLineData(query: UserPageQuery) {
-  query["dateRangeType"] = "D"
+  query['dateRangeType'] = 'D'
   return request({
-    url: apiPrefix + "daily/",
-    method: 'GET',
-    params: query
+    url: apiPrefix + 'daily',
+    method: 'post',
+    data: query,
   })
 }
 
 export function getLineWeekData(query: UserPageQuery) {
-  query["dateRangeType"] = "W"
+  query['dateRangeType'] = 'W'
   return request({
-    url: apiPrefix + "daily/",
-    method: 'GET',
-    params: query
+    url: apiPrefix + 'daily',
+    method: 'post',
+    data: query,
   })
 }
 
 export function getLineMonthData(query: UserPageQuery) {
-  query["dateRangeType"] = "M"
+  query['dateRangeType'] = 'M'
   return request({
-    url: apiPrefix + "daily/",
-    method: 'GET',
-    params: query
+    url: apiPrefix + 'daily',
+    method: 'post',
+    data: query,
   })
 }

src/views/adManage/sp/targets/api.ts

@@ -1,85 +1,84 @@
-import { request } from '/@/utils/service';
-import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
-import XEUtils from 'xe-utils';
+import { request } from '/@/utils/service'
+import { AddReq, DelReq, EditReq, UserPageQuery } from '@fast-crud/fast-crud'
 
-export const apiPrefix = '/api/ad_manage/sptargets/';
+export const apiPrefix = '/api/ad_manage/sptargets/'
 export function GetList(query: UserPageQuery) {
-    return request({
-        url: apiPrefix,
-        method: 'get',
-        params: query,
-    })
+  return request({
+    url: apiPrefix + 'list',
+    method: 'post',
+    data: query,
+  })
 }
 export function GetObj(id: any) {
-    return request({
-        url: apiPrefix + id + "/",
-        method: 'get',
-    });
+  return request({
+    url: apiPrefix + id + '/',
+    method: 'post',
+  })
 }
 
 export function AddObj(obj: AddReq) {
-    return request({
-        url: apiPrefix,
-        method: 'post',
-        data: obj,
-    });
+  return request({
+    url: apiPrefix,
+    method: 'post',
+    data: obj,
+  })
 }
 
 export function UpdateObj(obj: EditReq) {
-    return request({
-        url: apiPrefix + obj.id + '/',
-        method: 'put',
-        data: obj,
-    });
+  return request({
+    url: apiPrefix + obj.id + '/',
+    method: 'put',
+    data: obj,
+  })
 }
 
 export function DelObj(id: DelReq) {
-    return request({
-        url: apiPrefix + id + '/',
-        method: 'delete',
-        data: { id },
-    });
+  return request({
+    url: apiPrefix + id + '/',
+    method: 'delete',
+    data: { id },
+  })
 }
 
 export function getCardData(query: UserPageQuery) {
-    return request({
-        url: apiPrefix + "total/",
-        method: 'GET',
-        params: query
-    })
+  return request({
+    url: apiPrefix + 'total',
+    method: 'post',
+    data: query,
+  })
 }
 
 export function getLineData(query: UserPageQuery) {
-    query["dateRangeType"] = "D"
-    return request({
-        url: apiPrefix + "daily/",
-        method: 'GET',
-        params: query
-    })
+  query['dateRangeType'] = 'D'
+  return request({
+    url: apiPrefix + 'daily',
+    method: 'post',
+    data: query,
+  })
 }
 
 export function getLineWeekData(query: UserPageQuery) {
-    query["dateRangeType"] = "W"
-    return request({
-        url: apiPrefix + "daily/",
-        method: 'GET',
-        params: query
-    })
+  query['dateRangeType'] = 'W'
+  return request({
+    url: apiPrefix + 'daily',
+    method: 'post',
+    data: query,
+  })
 }
 
 export function getLineMonthData(query: UserPageQuery) {
-    query["dateRangeType"] = "M"
-    return request({
-        url: apiPrefix + "daily/",
-        method: 'GET',
-        params: query
-    })
+  query['dateRangeType'] = 'M'
+  return request({
+    url: apiPrefix + 'daily',
+    method: 'post',
+    data: query,
+  })
 }
 
 export function getAdStructureData(query: UserPageQuery) {
-    return request({
-        url: apiPrefix + "structure/",
-        method: 'GET',
-        params: query
-    })
+  return request({
+    url: apiPrefix + 'structure',
+    method: 'post',
+    data: query,
+  })
 }