✨ feat: 新增广告管理<SP>filter功能; <SB,SD>filter输入框

src/views/adManage/sb/index.vue

@@ -10,60 +10,67 @@ import Placement from '/@/views/adManage/sb/placement/index.vue'
 import SearchTerm from '/@/views/adManage/sb/searchTerm/index.vue'
 import Targets from '/@/views/adManage/sb/targets/index.vue'
 
-// const shopInfo = useShopInfo()
 const publicData = usePublicData()
 const selectedPortfolios: Ref<string[]> = ref([])
 const portfolios: Ref<Portfolio[]> = ref([])
 const { dateRange } = storeToRefs(publicData)
+provide('dateRange', dateRange)
+
 const tabActiveName = ref('Campaigns')
 const tabsComponents: any = {
   Campaigns,
   Keywords,
   Targets,
-  // AdvertisedProducts,
-  // PurchasedOtherProducts,
   SearchTerm,
-  Placement
+  Placement,
 }
 const tabs = [
   { label: '广告活动', name: 'Campaigns' },
   { label: '关键词', name: 'Keywords' },
   { label: '商品投放', name: 'Targets' },
-  // { label: '推广商品', name: 'AdvertisedProducts' },
-  // { label: '购买的其他商品', name: 'PurchasedOtherProducts' },
   { label: '搜索词', name: 'SearchTerm' },
-  { label: '广告位', name: 'Placement' }
+  { label: '广告位', name: 'Placement' },
 ]
 
-provide('dateRange', dateRange)
+const searchItem = ref('')
+const filterItem = ref('')
+provide('searchItem', searchItem)
+
+// 防止搜索框内容变化时，搜索框内容不更新
+function handleSearchChange() {
+  searchItem.value = filterItem.value
+}
 
 onBeforeMount(async () => {
   const resp: APIResponseData = await GetAllPortfolios()
   portfolios.value = resp.data
 })
-
 </script>
 
 <template>
   <div class="asj-container">
     <div class="public-search">
+      <el-input v-model="filterItem" @change="handleSearchChange" style="width: 500px" placeholder="请输入搜索内容"></el-input>
       <DateRangePicker v-model="dateRange"></DateRangePicker>
       <el-select
-          v-model="selectedPortfolios"
-          placeholder="广告组合"
-          clearable
-          multiple
-          style="width: 400px"
-          collapse-tags
-          collapse-tags-tooltip
-          :max-collapse-tags="3"
-          disabled="true"
-      >
+        v-model="selectedPortfolios"
+        placeholder="广告组合"
+        clearable
+        multiple
+        style="width: 400px"
+        collapse-tags
+        collapse-tags-tooltip
+        :max-collapse-tags="3"
+        disabled="true">
         <el-option v-for="info of portfolios" :label="info.name" :value="info.portfolioId"></el-option>
       </el-select>
     </div>
     <div class="asj-tabs">
-      <div v-for="tab of tabs" :key="tab.name" :class="['asj-tab', { active: tabActiveName === tab.name }]" @click="tabActiveName = tab.name">
+      <div
+        v-for="tab of tabs"
+        :key="tab.name"
+        :class="['asj-tab', { active: tabActiveName === tab.name }]"
+        @click="tabActiveName = tab.name">
         {{ tab.label }}
       </div>
     </div>
@@ -75,6 +82,7 @@ onBeforeMount(async () => {
 ::v-deep(.el-table .el-table__header-wrapper .cell) {
   border-right: 1px solid rgb(218, 221, 223);
 }
+
 ::v-deep(.el-table__footer-wrapper .el-table__footer tr) {
   background-color: #f5f7fa;
 }

src/views/adManage/sd/index.vue

@@ -15,6 +15,8 @@ const publicData = usePublicData()
 const selectedPortfolios: Ref<string[]> = ref([])
 const portfolios: Ref<Portfolio[]> = ref([])
 const { dateRange } = storeToRefs(publicData)
+provide('dateRange', dateRange)
+
 const tabActiveName = ref('Campaigns')
 const tabsComponents: any = {
   Campaigns,
@@ -22,9 +24,6 @@ const tabsComponents: any = {
   Audiences,
   MatchedDelivery,
   PromoteProducts,
-  // PurchasedOtherProducts,
-
-  // Placement
 }
 const tabs = [
   { label: '广告活动', name: 'Campaigns' },
@@ -32,12 +31,16 @@ const tabs = [
   { label: '受众', name: 'Audiences' },
   { label: '匹配的投放', name: 'MatchedDelivery' },
   { label: '推广商品', name: 'PromoteProducts' },
-  // { label: '购买的其他商品', name: 'PurchasedOtherProducts' },
-
-  // { label: '广告位', name: 'Placement' }
 ]
 
-provide('dateRange', dateRange)
+const searchItem = ref('')
+const filterItem = ref('')
+provide('searchItem', searchItem)
+
+// 防止搜索框内容变化时，搜索框内容不更新
+function handleSearchChange() {
+  searchItem.value = filterItem.value
+}
 
 onBeforeMount(async () => {
   const resp: APIResponseData = await GetAllPortfolios()
@@ -48,13 +51,14 @@ onBeforeMount(async () => {
 <template>
   <div class="asj-container">
     <div class="public-search">
+      <el-input v-model="filterItem" @change="handleSearchChange" style="width: 500px" placeholder="请输入搜索内容"></el-input>
       <DateRangePicker v-model="dateRange"></DateRangePicker>
       <el-select
         v-model="selectedPortfolios"
         placeholder="广告组合"
         clearable
         multiple
-        style="width: 400px"
+        style="width: 200px"
         collapse-tags
         collapse-tags-tooltip
         :max-collapse-tags="3"

src/views/adManage/sp/index.vue

@@ -61,7 +61,7 @@ onBeforeMount(async () => {
 <template>
   <div class="asj-container">
     <div class="public-search">
-      <el-input v-model="filterItem" @blur="handleSearchChange" style="width: 500px" placeholder="请输入搜索内容"></el-input>
+      <el-input v-model="filterItem" @change="handleSearchChange" style="width: 500px" placeholder="请输入搜索内容"></el-input>
       <TopFilter></TopFilter>
       <el-select
         v-model="selectedPortfolios"