✨ feat: 卡片和下拉框联动

src/views/productCenter/productList/components/ProductDialog/ProductList.vue

@@ -25,7 +25,7 @@
                     <el-checkbox v-model="item.checked" @click.stop="" @change="checkAll(item, item.checked)" :disabled="item.allChildrenExist">
                       {{ item.parentAsin }}
                     </el-checkbox>
-                    <p style="margin-left: 10px;">111---{{ item.allChildrenExist }}</p>
+                    <p style="margin-left: 10px">111---{{ item.allChildrenExist }}</p>
                     <el-tag style="margin-left: 8px" effect="plain" size="small" round
                       >{{ item.num }}
                       <span v-if="item.num == '1'">ASIN</span>
@@ -333,11 +333,12 @@ emitter.on('ProductLineDialog-sendDetailData', (value: any) => {
 })
 
 emitter.on('ProductLineDialog-reloading', (value: any) => {
-  if(value.reloading) {
+  if (value.reloading) {
     data.value.splice(0)
     currentPage = 1
     fetchAllProduct()
     removeAllItems()
+    emitter.emit('ProductList-updateCardData', { isUpdate: true })
   }
 })
 
@@ -348,8 +349,6 @@ onMounted(() => {
       removeAllItems()
     }
   })
-
-  
 })
 
 onBeforeUnmount(() => {

src/views/productCenter/productList/components/ProductSelectCard/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 100%; padding: 5px 12px 0 12px">
+  <div class="out-container">
     <el-scrollbar>
       <div class="scrollbar-flex-content">
         <el-card
@@ -34,7 +34,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, inject, ref } from 'vue'
+import { onMounted, inject, ref, onBeforeUnmount } from 'vue'
 import { getProductCardData } from '/@/views/productCenter/productList/api'
 import * as echarts from 'echarts'
 import { Edit, Delete } from '@element-plus/icons-vue'
@@ -115,19 +115,44 @@ function initChart() {
 
 function selectCard(index: number, item: any) {
   selectedCardIndex.value = index
+  const productlineId = item.productlineId
+  emitter.emit('ProductSelectCard-cardId', { productlineId: productlineId })
 }
 
 function editCard(item) {
   emitter.emit('ProductTab-editProductCard', { isVisible: true, data: item })
 }
 
+emitter.on('ProductList-updateCardData', (value: any) => {
+  if (value.isUpdate) {
+    cardData.value.splice(0)
+    fetchProductCardData()
+  }
+})
+
+emitter.on('TopFilters-selectValue', (value: any) => {
+  console.log('value.selectValue', value.selectValue)
+  const newIndex = cardData.value.findIndex((item) => item.productlineId === value.selectValue)
+  if (newIndex !== -1) {
+    selectedCardIndex.value = newIndex
+  }
+})
+
 onMounted(async () => {
   await fetchProductCardData()
   initChart()
 })
+
+onBeforeUnmount(() => {
+  emitter.all.clear()
+})
 </script>
 
 <style scoped>
+.out-container {
+  width: 100%;
+  padding: 5px 12px 0 12px;
+}
 .scrollbar-flex-content {
   display: flex;
 }

src/views/productCenter/productList/components/TopFilters/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="filters">
     <el-input placeholder="ASIN/父ASIN/标题/SKU"></el-input>
-    <el-select v-model="value" style="width: 300px">
-      <el-option v-for="item in options" :key="item.productlineId" :label="item.productlinename" :value="item.productlineId" />
+    <el-select v-model="selectValue" style="width: 300px">
+      <el-option v-for="(item, index) in options" :key="item.productlineId" :label="item.productlinename" :value="item.productlineId" />
     </el-select>
     <DateRangePicker v-model="dateRange"></DateRangePicker>
   </div>
@@ -13,27 +13,41 @@ import DateRangePicker from '/@/components/DateRangePicker/index.vue'
 import { usePublicData } from '/@/stores/publicData'
 import { storeToRefs } from 'pinia'
 import { getProductLineSelect } from '/@/views/productCenter/productList/api'
-import { inject, onMounted, ref } from 'vue'
+import { inject, onBeforeUnmount, onMounted, ref,watch } from 'vue'
+import emitter from '/@/utils/emitter'
 
 const publicData = usePublicData()
 const { dateRange } = storeToRefs(publicData)
 const profile = <any>inject('profile')
 
-const value = ref('')
+const selectValue = ref('')
 const options = ref([])
 
 async function fetchProductLine() {
   try {
     const resp = await getProductLineSelect({ profileId: profile.value.profile_id })
     options.value = resp.data
+    selectValue.value = options.value[0].productlineId
   } catch (error) {
     console.log('error:', error)
   }
 }
 
+emitter.on('ProductSelectCard-cardId', (value: any) => {
+  selectValue.value = value.productlineId
+})
+
+watch(selectValue, ()=> {
+  emitter.emit('TopFilters-selectValue', { selectValue: selectValue.value })
+})
+
 onMounted(() => {
   fetchProductLine()
 })
+
+onBeforeUnmount(() => {
+  emitter.all.clear()
+})
 </script>
 
 <style scoped>