✨ feat: 商品分析: 切换商品模块模糊查询功能

src/views/productCenter/productAnalysis/components/DataTable/index.vue

@@ -1,15 +1,16 @@
 <template>
-  <div style="overflow: hidden; width: 100%; height: 800px" v-loading="tableLoading">
-    <vxe-grid v-bind="gridOptions">
-      <template v-for="col in universalColumns" #[`${col.field}_default`]="{ row }">
-        <div>
-          {{ row[col.field] ? row[col.field] : '-'}}
-        </div>
-      </template>
-      <!-- <template v-for="col in dynamicCols" #[`${col.field}_footer`]="{ items, _columnIndex }">
+  <el-card body-style="padding-top: 0;" style="margin-top: 10px;">
+    <div style="overflow: hidden; width: 100%; height: 800px" v-loading="tableLoading">
+      <vxe-grid v-bind="gridOptions">
+        <template v-for="col in universalColumns" #[`${col.field}_default`]="{ row }">
+          <div>
+            {{ row[col.field] ? row[col.field] : '-' }}
+          </div>
+        </template>
+        <!-- <template v-for="col in dynamicCols" #[`${col.field}_footer`]="{ items, _columnIndex }">
         <CustomFooterCell :totalValue="items[_columnIndex].totalValue" :gapValue="items[_columnIndex].gapValue" :isCompare="isCompare" :columnIndex="_columnIndex" />
       </template> -->
-      <!-- <template #pager>
+        <!-- <template #pager>
         <vxe-pager
           :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
           v-model:current-page="tablePage.currentPage"
@@ -18,8 +19,9 @@
           @page-change="handlePageChange">
         </vxe-pager>
       </template> -->
-    </vxe-grid>
-  </div>
+      </vxe-grid>
+    </div>
+  </el-card>
 </template>
 
 <script setup lang="ts">

src/views/productCenter/productAnalysis/components/TopParentAsin/ExchangeProduct.vue

@@ -11,7 +11,7 @@
       <el-icon @click="visible = false" style="cursor: pointer"><CloseBold /></el-icon>
     </div>
     <div class="filter-bar">
-      <el-input v-model="searchInp" style="max-width: 600px" placeholder="请输入标题/父ASIN/ASIN/SKU查询商品">
+      <el-input v-model="searchInp" style="max-width: 600px" @change="handleChange"  placeholder="请输入标题/父ASIN/ASIN/SKU查询商品">
         <template #prepend>
           <el-select v-model="filterSelect" style="width: 80px">
             <el-option label="模糊" value="vague" />
@@ -19,7 +19,7 @@
           </el-select>
         </template>
         <template #append>
-          <el-button :icon="Search" />
+          <el-button :icon="Search" @click="searchClick" />
         </template>
       </el-input>
       <el-select v-if="filterSelect == 'vague'" v-model="productSelect" class="filter-select">
@@ -30,7 +30,7 @@
       <div class="asin-selector__part" v-loading="parentloading">
         <div class="part-title">父ASIN</div>
         <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
-          <li v-for="(item, index) in allData" :key="index" class="infinite-list-item" @click="selectPaAsin(index)" :class="{ selected: index === selectedIndex }">
+          <li v-for="(item, index) in allData" :key="index" class="infinite-list-item" @click="selectPaAsin(index)" :class="{ selectedItem: index === selectedIndex }">
             <el-button color="#3c58af" size="small" class="view-btn" @click.stop="clickParentAsinBtn(index)">查看</el-button>
             <div class="list-content">
               <img :src="item.Image" class="list-item-image" />
@@ -64,7 +64,7 @@
       <div class="asin-selector__part">
         <div class="part-title">ASIN</div>
         <el-scrollbar height="450px">
-          <li v-for="(item, index) in asinData" :key="index" class="infinite-list-item" @click="selectAsin(index)" :class="{ selected: index === selectedAsinIndex }">
+          <li v-for="(item, index) in asinData" :key="index" class="infinite-list-item" @click="selectAsin(index)" :class="{ selectedItem: index === selectedAsinIndex }">
             <div class="list-content">
               <img :src="item.Image" class="asin-list-item-image" />
               <div>
@@ -97,7 +97,7 @@
       <div class="asin-selector__part sku">
         <div class="part-title">SKU</div>
         <el-scrollbar height="450px">
-          <li v-for="(item, index) in skuData" :key="index" class="sku-list-item" @click="selectSku(index)" :class="{ selected: index === selectedSkuIndex }">
+          <li v-for="(item, index) in skuData" :key="index" class="sku-list-item" @click="selectSku(index)" :class="{ selectedItem: index === selectedSkuIndex }">
             <div>{{ item.sku ? item.sku : '--' }}</div>
           </li>
         </el-scrollbar>
@@ -109,7 +109,7 @@
 <script setup lang="ts">
 import { Search } from '@element-plus/icons-vue'
 import { inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { getProductLineSelect } from '../../api'
+import { getProductLineSelect, getProduct } from '../../api'
 import emitter from '/@/utils/emitter'
 import useSelectItem from '../../hooks/useSelectItem'
 import useInfiniteScroll from '../../hooks/useInfiniteScroll'
@@ -136,17 +136,46 @@ async function fetchProductLine() {
   }
 }
 
-// 若产品选择改变则 重置分页并清空其他的数据
-watch(
-  productSelect,
-  (value) => {
-    emitter.emit('ExchangeProduct-productSelect', value)
+async function handleChange() {
+  parentloading.value = true
+  const query = {
+    profileId: profile.value.profile_id,
+    productlineId: productSelect.value,
+    searchItem: searchInp.value
+  }
+  if (searchInp.value) {
+    const res = await getProduct(query)
+    allData.value = res.data
+    emitter.emit('ExchangeProduct-allData', allData)  // 让useSelectItem()中的allData得到正确更新, 否则无法正确选择parentAsin
+  }
+  parentloading.value = false
+}
+
+function searchClick() {
+  console.log(123)
+}
 
-    currentPage.value = 1
+function resetProductList() {
+  currentPage.value = 1
     fetchProduct()
     asinData.value = []
     skuData.value = []
     selectedIndex.value = -1
+}
+
+watch (searchInp, () => {
+  emitter.emit('ExchangeProduct-searchInp', searchInp)
+  if (searchInp.value === '') {
+    resetProductList()
+  }
+})
+
+// 若产品选择改变则 重置分页并清空其他的数据
+watch(
+  productSelect,
+  (value) => {
+    emitter.emit('ExchangeProduct-productSelect', value)
+    resetProductList()
   },
   { immediate: true }
 )
@@ -157,7 +186,6 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   emitter.all.clear()
-  console.log('cleared')
 })
 </script>
 
@@ -257,7 +285,7 @@ onBeforeUnmount(() => {
 .li-label {
   color: #6b7785;
 }
-.selected {
+.selectedItem {
   border: 1px solid #409eff;
   background-color: #ecf5ff;
 }

src/views/productCenter/productAnalysis/hooks/useInfiniteScroll.ts

@@ -11,11 +11,17 @@ export default function useInfiniteScroll() {
     productSelect.value = value
   })
 
+  const searchInp = ref('')
+  emitter.on('ExchangeProduct-searchInp', (value: any) => {
+    searchInp.value = value.value
+  })
+
   const allData = ref([])
   let currentPage = ref(1)
   let total = 0
   let limit = 10
 
+
   function load() {
     if (currentPage.value * limit < total) {
       currentPage.value++
@@ -30,6 +36,7 @@ export default function useInfiniteScroll() {
       productlineId: productSelect.value,
       page: currentPage.value,
       limit: limit,
+      searchItem: searchInp.value,
     }
     try {
       const res = await getProduct(query)

src/views/productCenter/productAnalysis/index.vue

@@ -14,6 +14,8 @@
     </div>
     <div>
       <el-tabs v-model="activeName" type="border-card" class="chart-tabs">
+      <!-- <DateRangePicker v-model="dateRange" style="position: absolute; right: 0px; top: -10px;"></DateRangePicker> -->
+
         <el-tab-pane label="趋势总览" name="trendOverview">
           <TrendOverview @updateList="handleUpdate"></TrendOverview>
           <DataTable></DataTable>