✨ feat: 商品列表: 全局搜索功能

src/views/productCenter/productList/api.ts

@@ -1,6 +1,5 @@
 import { request } from '/@/utils/service'
 import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud'
-import emitter from '/@/utils/emitter'
 
 
 export const apiPrefix = '/api/sellers/home/daily/'

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

@@ -2,15 +2,21 @@
 import { inject, reactive, ref, watch } from 'vue'
 import CustomCell from '../CustomCell/index.vue'
 import CustomFooterCell from '../CustomFooterCell/index.vue'
+import emitter from '/@/utils/emitter'
 import { getTableDataForASIN, getTableDataForParentASIN, getTableDataForProductLine, getTableDataForSKU } from '/@/views/productCenter/productList/api'
 import useProductlineId from '/@/views/productCenter/productList/hooks/useProductlineId'
 import useTableColumns from '/@/views/productCenter/productList/hooks/useTableColumns'
-import { productLineColumns, parentAsinColumns, asinColumns, skuColumns } from '/@/views/productCenter/productList/utils/columns'
+import { asinColumns, parentAsinColumns, productLineColumns, skuColumns } from '/@/views/productCenter/productList/utils/columns'
 
 const profile = <any>inject('profile')
 const dateRange = <any>inject('dateRange')
 const activeButton = <any>inject('activeButton')
 
+const searchItem = ref('')
+emitter.on('TopFilters-searchItem', (value: any) => {
+  searchItem.value = value.searchItem
+})
+
 const isCompare = ref(true)
 const tableLoading = ref(false)
 
@@ -42,6 +48,7 @@ const gridOptions = reactive({
   },
   columns: [],
   data: [],
+  
   footerMethod({ columns }) {
     // return [
     //   columns.map((column, columnIndex) => {
@@ -59,12 +66,7 @@ const gridOptions = reactive({
           let totalValue = totalSummary[column.field]
           let gapField = `gap${column.field.charAt(0).toUpperCase()}${column.field.slice(1)}`
           let gapValue = totalSummary[gapField]
-          // if (isCompare.value) {
-          // return `${totalValue} (${gapValue >= 0 ? '+' : ''}${gapValue}%)`
           return { totalValue, gapValue }
-          // } else {
-          // return totalValue
-          // }
         } else {
           return '-'
         }
@@ -82,6 +84,7 @@ async function fetchTableData(type) {
     productlineId: productlineId.value,
     page: tablePage.currentPage,
     limit: tablePage.pageSize,
+    searchItem: searchItem.value,
   }
 
   // 要用引号扩住key '产品线'
@@ -119,7 +122,7 @@ function handlePageChange({ currentPage, pageSize }) {
   fetchTableData(activeButton.value)
 }
 
-watch([activeButton, productlineId, dateRange], () => {
+watch([activeButton, productlineId, dateRange, searchItem], () => {
   tablePage.currentPage = 1
   isCompare.value = true
   fetchTableData(activeButton.value)

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

@@ -2,7 +2,7 @@
 import DateRangePicker from '/@/components/DateRangePicker/index.vue'
 import { usePublicData } from '/@/stores/publicData'
 import { storeToRefs } from 'pinia'
-import { getProductLineSelect, getCardData } from '/@/views/productCenter/productList/api'
+import { getProductLineSelect } from '/@/views/productCenter/productList/api'
 import { inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import emitter from '/@/utils/emitter'
 
@@ -13,6 +13,8 @@ const profile = <any>inject('profile')
 const selectValue = ref('')
 const options = ref([])
 
+const searchItem = ref('')
+
 async function fetchProductLine() {
   try {
     const resp = await getProductLineSelect({ profileId: profile.value.profile_id })
@@ -23,6 +25,10 @@ async function fetchProductLine() {
   }
 }
 
+function handleSearchChange() {
+  emitter.emit('TopFilters-searchItem', { searchItem: searchItem.value })
+}
+
 emitter.on('ProductSelectCard-cardId', (value: any) => {
   selectValue.value = value.productlineId
 })
@@ -55,7 +61,7 @@ onBeforeUnmount(() => {
 
 <template>
   <div class="filters">
-    <el-input placeholder="ASIN/父ASIN/标题/SKU"></el-input>
+    <el-input v-model="searchItem" @change="handleSearchChange" placeholder="ASIN/父ASIN/标题/SKU"></el-input>
     <el-select v-model="selectValue" class="filter-select">
       <el-option v-for="item in options" :key="item.productlineId" :label="item.productlineName" :value="item.productlineId" />
     </el-select>

src/views/productCenter/productList/index.vue

@@ -20,6 +20,12 @@ emitter.on('TopFilters-selectValue', (value: any) => {
   productlineId.value = value.selectValue
 })
 
+// 接收搜索框的值
+const searchItem = ref('')
+emitter.on('TopFilters-searchItem', (value: any) => {
+  searchItem.value = value.searchItem
+})
+
 // 店铺信息
 const shopInfo = useShopInfo()
 const { profile } = storeToRefs(shopInfo)
@@ -30,6 +36,7 @@ const queryParams = ref({
   profileId: profile.value.profile_id,
   dateRange,
   productlineId,
+  searchItem
 })
 
 provide('dateRange', dateRange)