✨ feat: 广告管理<SP>: Popover关闭后清空父ASIN表格数据

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

@@ -1,9 +1,18 @@
 <script setup lang="ts">
-import { Ref, inject, onMounted, reactive } from 'vue'
+import { Ref, inject, onMounted, reactive, ref } from 'vue'
 import { getParentAsin } from '../api'
 import { Connection, Picture as IconPicture } from '@element-plus/icons-vue'
+import emitter from '/@/utils/emitter'
 
+emitter.on('TopFilter', (value: any) => {
+  if (value) {
+    fetchParentAsin()
+  } else {
+    gridOptions.data = []
+  }
+})
 const profile = <Ref>inject('profile')
+const parentLoaing = ref(false)
 
 const gridOptions = <any>reactive({
   height: 500,
@@ -34,12 +43,15 @@ const gridOptionsRight = <any>reactive({
 })
 
 async function fetchParentAsin() {
+  parentLoaing.value = true
   const body = { profileId: profile.value.profile_id }
   try {
     const response = await getParentAsin(body)
     gridOptions.data = response.data
   } catch (error) {
     console.log('error:', error)
+  } finally {
+    parentLoaing.value = false
   }
 }
 
@@ -50,14 +62,15 @@ function changeheaderCellStyle(value) {
   }
 }
 
-onMounted(() => {
-  fetchParentAsin()
-})
+// onMounted(() => {
+//   fetchParentAsin()
+// })
 </script>
 
 <template>
   <div class="flex">
     <vxe-grid
+      v-loading="parentLoaing"
       v-bind="gridOptions"
       :header-row-style="changeheaderCellStyle"
       :header-cell-style="changeheaderCellStyle"

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

@@ -4,6 +4,7 @@ import { computed, onMounted, ref } from 'vue'
 import PopoverFilter from './PopoverFilter.vue'
 import PopoverFilterParent from './PopoverFilterParent.vue'
 import { getProductSelect } from '../api'
+import emitter from '/@/utils/emitter'
 
 const isVisible = ref(false)
 
@@ -21,6 +22,15 @@ async function fetchProductSelect() {
   }
 }
 
+function handleOpen() {
+  isVisible.value = true
+  emitter.emit('TopFilter', isVisible)
+}
+function handleClose() {
+  isVisible.value = false
+  emitter.emit('TopFilter', isVisible)
+}
+
 const currentComponent = computed(() => {
   switch (productFilterSelect.value) {
     case 'PASIN':
@@ -42,7 +52,7 @@ onMounted(() => {
   <div style="max-width: 350px">
     <el-popover :visible="isVisible" placement="bottom-start" :width="1200">
       <template #reference>
-        <el-input v-model="productFilterInput" @click="isVisible = true" style="width: 350px" placeholder="请选择推广商品">
+        <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" />
@@ -52,7 +62,7 @@ onMounted(() => {
       </template>
       <div class="flex justify-between">
         <div class="pb-3 font-bold text-slate-950 text-base">搜索</div>
-        <el-icon class="cursor-pointer" @click="isVisible = false">
+        <el-icon class="cursor-pointer" @click="handleClose">
           <CloseBold />
         </el-icon>
       </div>