✨ feat: 新增SP全局搜索功能

.env.development

@@ -3,8 +3,8 @@ ENV = 'development'
 
 # 本地环境接口地址
 # VITE_API_URL = 'http://127.0.0.1:8000'
-# VITE_API_URL = 'http://192.168.1.225/'
-VITE_API_URL = 'https://ads.vzzon.com'
+VITE_API_URL = 'http://192.168.1.225/'
+# VITE_API_URL = 'https://ads.vzzon.com'
 
 # 是否启用按钮权限
 VITE_PM_ENABLED = true

src/views/adManage/sp/advertisedProducts/index.vue

@@ -1,28 +1,30 @@
 <script lang="ts" setup>
-import {nextTick, onMounted, ref, watch} from 'vue'
-import {FsPage, useFs} from '@fast-crud/fast-crud'
-import {createCrudOptions} from './crud'
-import {useRoute, useRouter} from 'vue-router'
+import { inject, nextTick, onMounted, ref, watch } from 'vue'
+import { FsPage, useFs } from '@fast-crud/fast-crud'
+import { createCrudOptions } from './crud'
+import { useRoute, useRouter } from 'vue-router'
 import DataTendencyChart from '/@/views/adManage/sp/chartComponents/dataTendency.vue'
-import {useShopInfo} from '/@/stores/shopInfo'
-import {getCardData, getLineData, getLineMonthData, getLineWeekData} from '/@/views/adManage/sp/campaigns/api'
-import {usePublicData} from '/@/stores/publicData'
-import {storeToRefs} from 'pinia'
-import {SbBaseColumn} from '/@/views/adManage/utils/commonTabColumn'
+import { useShopInfo } from '/@/stores/shopInfo'
+import { getCardData, getLineData, getLineMonthData, getLineWeekData } from '/@/views/adManage/sp/campaigns/api'
+import { usePublicData } from '/@/stores/publicData'
+import { storeToRefs } from 'pinia'
+import { SbBaseColumn } from '/@/views/adManage/utils/commonTabColumn'
 import DataCompare from '/@/components/dataCompare/index.vue'
 
+const filterItem = inject('searchItem')
 
 const tabActiveName = ref('dataTendency')
 const shopInfo = useShopInfo()
 const publicData = usePublicData()
-const {dateRange} = storeToRefs(publicData)
-const {profile} = storeToRefs(shopInfo)
+const { dateRange } = storeToRefs(publicData)
+const { profile } = storeToRefs(shopInfo)
 const queryParams = ref({
   profileId: profile.value.profile_id,
-  dateRange
+  dateRange,
+  filterItem,
 })
 
-const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, context: queryParams})
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
 
 const route = useRoute()
 const router = useRouter()
@@ -35,7 +37,6 @@ const jumpGroup = (row: any) => {
   })
 }
 
-
 onMounted(() => {
   crudExpose.doRefresh()
 })
@@ -50,12 +51,15 @@ const changeTab = () => {
     resizeTabChart()
   })
 }
-defineExpose({resizeTabChart})
-
-watch(queryParams, async () => {
-  crudExpose.doRefresh()
-}, { deep: true })
-
+defineExpose({ resizeTabChart })
+
+watch(
+  queryParams,
+  async () => {
+    crudExpose.doRefresh()
+  },
+  { deep: true }
+)
 </script>
 
 <template>
@@ -65,12 +69,12 @@ watch(queryParams, async () => {
         <el-tabs v-model="tabActiveName" class="chart-tabs" type="border-card" @tab-change="changeTab">
           <el-tab-pane label="数据趋势" name="dataTendency">
             <DataTendencyChart
-                v-if="tabActiveName === 'dataTendency'"
-                :query="queryParams"
-                :fetchCard="getCardData"
-                :fetch-line-month="getLineMonthData"
-							  :fetch-line-week="getLineWeekData"
-                :fetchLine="getLineData">
+              v-if="tabActiveName === 'dataTendency'"
+              :query="queryParams"
+              :fetchCard="getCardData"
+              :fetch-line-month="getLineMonthData"
+              :fetch-line-week="getLineWeekData"
+              :fetchLine="getLineData">
             </DataTendencyChart>
           </el-tab-pane>
           <el-tab-pane label="散点视图" name="scatterView" :lazy="true"></el-tab-pane>
@@ -78,21 +82,21 @@ watch(queryParams, async () => {
       </template>
 
       <template #cell_asin="scope">
-        <el-tooltip  effect="dark" :content="scope.row.asin" placement="top">
+        <el-tooltip effect="dark" :content="scope.row.asin" placement="top">
           <el-link :underline="false" @click="jumpGroup(scope.row)">
             <div class="en-text">{{ scope.row.asin }}</div>
           </el-link>
         </el-tooltip>
       </template>
       <template #cell_campaignName="scope">
-        <el-tooltip  effect="dark" :content="scope.row.campaignName" placement="top">
+        <el-tooltip effect="dark" :content="scope.row.campaignName" placement="top">
           <el-link type="primary" :underline="false" @click="jumpGroup(scope.row)">
             <div class="en-text">{{ scope.row.campaignName }}</div>
           </el-link>
         </el-tooltip>
       </template>
       <template #cell_adGroupName="scope">
-        <el-tooltip  effect="dark" :content="scope.row.adGroupName" placement="top">
+        <el-tooltip effect="dark" :content="scope.row.adGroupName" placement="top">
           <el-link type="primary" :underline="false" @click="jumpGroup(scope.row)">
             <div class="en-text">{{ scope.row.adGroupName }}</div>
           </el-link>
@@ -100,12 +104,12 @@ watch(queryParams, async () => {
       </template>
       <template v-for="field of Object.keys(SbBaseColumn)" #[`cell_${field}`]="scope">
         <DataCompare
-            :field="field"
-            :value="scope.row[field]"
-            :prev-val="scope.row[`prev${field}`]"
-            :gap-val="scope.row[`gap${field}`]"
-            :date-range="dateRange"
-            :show-compare="showCompare"/>
+          :field="field"
+          :value="scope.row[field]"
+          :prev-val="scope.row[`prev${field}`]"
+          :gap-val="scope.row[`gap${field}`]"
+          :date-range="dateRange"
+          :show-compare="showCompare" />
       </template>
       <template #toolbar-left>
         <div class="campare-switch">
@@ -125,6 +129,7 @@ watch(queryParams, async () => {
     padding-left: 0 !important;
   }
 }
+
 .campare-switch {
   flex: none;
 }
@@ -145,9 +150,11 @@ watch(queryParams, async () => {
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
 }
+
 ::v-deep(.el-table__footer-wrapper) {
   border: 0;
 }
+
 ::v-deep(.el-table .el-table__footer-wrapper .cell) {
   font-weight: 600;
 }
@@ -155,5 +162,4 @@ watch(queryParams, async () => {
 .text-range {
   color: #808184;
 }
-
 </style>

src/views/adManage/sp/campaigns/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onMounted, ref, watch } from 'vue'
+import { inject, onMounted, ref, watch } from 'vue'
 import { FsPage, useFs } from '@fast-crud/fast-crud'
 import { createCrudOptions } from './crud'
 import { useShopInfo } from '/@/stores/shopInfo'
@@ -13,13 +13,14 @@ import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
 import DataCompare from '/@/components/dataCompare/index.vue'
 import emitter from '../../../../utils/emitter'
 
-
 emitter.on('PopoverFilter-allSkus', (data: any) => {
   searchItem.value = data.allSkus.value
   searchType.value = data.searchType.value
 })
+
 const searchItem = ref([])
 const searchType = ref('')
+const filterItem = inject('searchItem')
 
 const tabActiveName = ref('dataTendency')
 const shopInfo = useShopInfo()
@@ -30,7 +31,8 @@ const queryParams = ref({
   profileId: profile.value.profile_id,
   dateRange,
   searchItem,
-  searchType
+  searchType,
+  filterItem,
 })
 const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
 const router = useRouter()
@@ -53,7 +55,6 @@ watch(
   },
   { deep: true }
 )
-
 </script>
 
 <template>
@@ -91,8 +92,12 @@ watch(
       <template #cell_MissedImpressions="scope">
         {{ scope.row.MissedImpressionsLower ?? '0' }} ~ {{ scope.row.MissedImpressionsUpper ?? '0' }}
       </template>
-      <template #cell_MissedClicks="scope">{{ scope.row.MissedClicksLower ?? '0' }} ~ {{ scope.row.MissedClicksUpper ?? '0' }}</template>
-      <template #cell_MissedSales="scope">{{ scope.row.MissedSalesLower ?? '0' }} ~ {{ scope.row.MissedSalesUpper ?? '0' }}</template>
+      <template #cell_MissedClicks="scope"
+        >{{ scope.row.MissedClicksLower ?? '0' }} ~ {{ scope.row.MissedClicksUpper ?? '0' }}</template
+      >
+      <template #cell_MissedSales="scope"
+        >{{ scope.row.MissedSalesLower ?? '0' }} ~ {{ scope.row.MissedSalesUpper ?? '0' }}</template
+      >
 
       <template v-for="field of Object.keys(BaseColumn)" #[`cell_${field}`]="scope">
         <DataCompare
@@ -125,9 +130,11 @@ watch(
 ::v-deep(.el-table--border .el-table__footer-wrapper) {
   border: none;
 }
+
 ::v-deep(.el-table__footer-wrapper .el-table__footer tr) {
   background-color: #f5f7fa;
 }
+
 .en-text {
   max-width: 100%;
   font-size: 13px;

src/views/adManage/sp/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
-import { Ref, onBeforeMount, provide, ref } from 'vue'
+import { onBeforeMount, provide, Ref, ref } from 'vue'
 import TopFilter from './components/TopFilter.vue'
 import AdvertisedProducts from './advertisedProducts/index.vue'
 import Campaigns from './campaigns/index.vue'
@@ -23,6 +23,8 @@ provide('dateRange', dateRange)
 const shopInfo = useShopInfo()
 const { profile } = storeToRefs(shopInfo)
 provide('profile', profile)
+const searchItem = ref('')
+provide('searchItem', searchItem)
 
 const tabActiveName = ref('Campaigns')
 const tabs = [
@@ -53,6 +55,7 @@ onBeforeMount(async () => {
 <template>
   <div class="asj-container">
     <div class="public-search">
+      <el-input v-model="searchItem" @blur="handleSearchChange" style="width: 500px" placeholder="请输入搜索内容"></el-input>
       <TopFilter></TopFilter>
       <el-select
         v-model="selectedPortfolios"
@@ -69,7 +72,11 @@ onBeforeMount(async () => {
       <DateRangePicker v-model="dateRange"></DateRangePicker>
     </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>
@@ -81,6 +88,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/sp/keywords/index.vue

@@ -1,28 +1,30 @@
 <script lang="ts" setup>
-import {onMounted, ref, watch} from 'vue'
-import {FsPage, useFs} from '@fast-crud/fast-crud'
-import {createCrudOptions} from './crud'
+import { inject, onMounted, ref, watch } from 'vue'
+import { FsPage, useFs } from '@fast-crud/fast-crud'
+import { createCrudOptions } from './crud'
 import DataTendencyChart from '/@/views/adManage/sp/chartComponents/dataTendency.vue'
-import {useShopInfo} from '/@/stores/shopInfo'
+import { useShopInfo } from '/@/stores/shopInfo'
 import AdStructChart from './chartComponents/adStruct.vue'
-import {getCardData, getLineData, getLineMonthData, getLineWeekData} from './api'
-import {usePublicData} from '/@/stores/publicData'
-import {storeToRefs} from 'pinia'
+import { getCardData, getLineData, getLineMonthData, getLineWeekData } from './api'
+import { usePublicData } from '/@/stores/publicData'
+import { storeToRefs } from 'pinia'
 import router from '/@/router'
-import {BaseColumn} from '/@/views/adManage/utils/commonTabColumn'
+import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn'
 import DataCompare from '/@/components/dataCompare/index.vue'
 
+const filterItem = inject('searchItem')
 
 const tabActiveName = ref('dataTendency')
 const shopInfo = useShopInfo()
 const publicData = usePublicData()
-const {dateRange} = storeToRefs(publicData)
-const {profile} = storeToRefs(shopInfo)
+const { dateRange } = storeToRefs(publicData)
+const { profile } = storeToRefs(shopInfo)
 const queryParams = ref({
   profileId: profile.value.profile_id,
-  dateRange
+  dateRange,
+  filterItem,
 })
-const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, context: queryParams})
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
 const showCompare = ref(false)
 const jumpGroup = (row: any) => {
   router.push({
@@ -35,10 +37,13 @@ onMounted(async () => {
   crudExpose.doRefresh()
 })
 
-watch(queryParams, async () => {
-  crudExpose.doRefresh()
-}, { deep: true })
-
+watch(
+  queryParams,
+  async () => {
+    crudExpose.doRefresh()
+  },
+  { deep: true }
+)
 </script>
 
 <template>
@@ -48,37 +53,37 @@ watch(queryParams, async () => {
         <el-tabs v-model="tabActiveName" class="chart-tabs" type="border-card">
           <el-tab-pane label="数据趋势" name="dataTendency">
             <DataTendencyChart
-                v-if="tabActiveName === 'dataTendency'"
-                :query="queryParams"
-                :fetch-line-month="getLineMonthData"
-							  :fetch-line-week="getLineWeekData"
-                :fetchCard="getCardData"
-                :fetchLine="getLineData">
+              v-if="tabActiveName === 'dataTendency'"
+              :query="queryParams"
+              :fetch-line-month="getLineMonthData"
+              :fetch-line-week="getLineWeekData"
+              :fetchCard="getCardData"
+              :fetchLine="getLineData">
             </DataTendencyChart>
           </el-tab-pane>
           <el-tab-pane label="广告结构" name="adStruct">
-            <AdStructChart v-if="tabActiveName === 'adStruct'"/>
+            <AdStructChart v-if="tabActiveName === 'adStruct'" />
           </el-tab-pane>
           <el-tab-pane label="散点视图" name="scatterView"></el-tab-pane>
         </el-tabs>
       </template>
 
       <template #cell_keywordText="scope">
-        <el-tooltip  effect="dark" :content="scope.row.keywordText" placement="top">
-          <el-link  :underline="false" @click="jumpGroup(scope.row)">
+        <el-tooltip effect="dark" :content="scope.row.keywordText" placement="top">
+          <el-link :underline="false" @click="jumpGroup(scope.row)">
             <div class="en-text">{{ scope.row.keywordText }}</div>
           </el-link>
         </el-tooltip>
       </template>
       <template #cell_campaignName="scope">
-        <el-tooltip  effect="dark" :content="scope.row.campaignName" placement="top">
+        <el-tooltip effect="dark" :content="scope.row.campaignName" placement="top">
           <el-link type="primary" :underline="false" @click="jumpGroup(scope.row)">
             <div class="en-text">{{ scope.row.campaignName }}</div>
           </el-link>
         </el-tooltip>
       </template>
       <template #cell_adGroupName="scope">
-        <el-tooltip  effect="dark" :content="scope.row.adGroupName" placement="top">
+        <el-tooltip effect="dark" :content="scope.row.adGroupName" placement="top">
           <el-link type="primary" :underline="false" @click="jumpGroup(scope.row)">
             <div class="en-text">{{ scope.row.adGroupName }}</div>
           </el-link>
@@ -91,16 +96,20 @@ watch(queryParams, async () => {
       <template #cell_MissedImpressions="scope">
         {{ scope.row.MissedImpressionsLower ?? '0' }} ~ {{ scope.row.MissedImpressionsUpper ?? '0' }}
       </template>
-      <template #cell_MissedClicks="scope"> {{ scope.row.MissedClicksLower ?? '0' }} ~ {{ scope.row.MissedClicksUpper ?? '0' }} </template>
-      <template #cell_MissedSales="scope"> {{ scope.row.MissedSalesLower ?? '0' }} ~ {{ scope.row.MissedSalesUpper ?? '0' }} </template>
+      <template #cell_MissedClicks="scope">
+        {{ scope.row.MissedClicksLower ?? '0' }} ~ {{ scope.row.MissedClicksUpper ?? '0' }}</template
+      >
+      <template #cell_MissedSales="scope">
+        {{ scope.row.MissedSalesLower ?? '0' }} ~ {{ scope.row.MissedSalesUpper ?? '0' }}</template
+      >
       <template v-for="field of Object.keys(BaseColumn)" #[`cell_${field}`]="scope">
         <DataCompare
-            :field="field"
-            :value="scope.row[field]"
-            :prev-val="scope.row[`prev${field}`]"
-            :gap-val="scope.row[`gap${field}`]"
-            :date-range="dateRange"
-            :show-compare="showCompare"/>
+          :field="field"
+          :value="scope.row[field]"
+          :prev-val="scope.row[`prev${field}`]"
+          :gap-val="scope.row[`gap${field}`]"
+          :date-range="dateRange"
+          :show-compare="showCompare" />
       </template>
       <template #toolbar-left>
         <div class="campare-switch">
@@ -133,15 +142,19 @@ watch(queryParams, async () => {
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
 }
-::v-deep(.el-table__footer-wrapper td.el-table__cell:nth-child(n+3):nth-child(-n+6) .cell) {
+
+::v-deep(.el-table__footer-wrapper td.el-table__cell:nth-child(n + 3):nth-child(-n + 6) .cell) {
   display: none;
 }
+
 ::v-deep(.el-table--border .el-table__footer-wrapper) {
   border: none;
 }
+
 ::v-deep(.el-table .el-table__footer-wrapper .cell) {
   font-weight: 600;
 }
+
 .text-range {
   color: #808184;
 }

src/views/adManage/sp/placement/index.vue

@@ -1,34 +1,35 @@
 <script lang="ts" setup>
-import {onMounted, ref, watch} from 'vue'
-import {FsPage, useFs} from '@fast-crud/fast-crud'
-import {createCrudOptions} from './crud'
-import {useRouter} from 'vue-router'
+import { inject, onMounted, ref, watch } from 'vue'
+import { FsPage, useFs } from '@fast-crud/fast-crud'
+import { createCrudOptions } from './crud'
+import { useRouter } from 'vue-router'
 import DataTendencyChart from '/@/views/adManage/sp/chartComponents/dataTendency.vue'
-import {useShopInfo} from '/@/stores/shopInfo'
+import { useShopInfo } from '/@/stores/shopInfo'
 import AdStructChart from './chartComponents/adStruct.vue'
-import {getCardData, getLineData, getLineMonthData, getLineWeekData} from '../campaigns/api'
-import {usePublicData} from '/@/stores/publicData'
-import {storeToRefs} from 'pinia'
-import {SbBaseColumn} from '/@/views/adManage/utils/commonTabColumn'
+import { getCardData, getLineData, getLineMonthData, getLineWeekData } from '../campaigns/api'
+import { usePublicData } from '/@/stores/publicData'
+import { storeToRefs } from 'pinia'
+import { SbBaseColumn } from '/@/views/adManage/utils/commonTabColumn'
 import DataCompare from '/@/components/dataCompare/index.vue'
 
-
+const filterItem = inject('searchItem')
 const tabActiveName = ref('dataTendency')
 const shopInfo = useShopInfo()
 const publicData = usePublicData()
-const {dateRange} = storeToRefs(publicData)
-const {profile} = storeToRefs(shopInfo)
+const { dateRange } = storeToRefs(publicData)
+const { profile } = storeToRefs(shopInfo)
 const queryParams = ref({
   profileId: profile.value.profile_id,
-  dateRange
+  dateRange,
+  filterItem,
 })
-const {crudBinding, crudRef, crudExpose} =  useFs({createCrudOptions, context: queryParams})
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
 const router = useRouter()
 const showCompare = ref(false)
 const jumpGroup = (row: any) => {
   router.push({
     name: 'CampaignDetail',
-    query: {id: row.id, campaignId: row.campaignId, tagsViewName: row.campaignName},
+    query: { id: row.id, campaignId: row.campaignId, tagsViewName: row.campaignName },
   })
 }
 
@@ -36,10 +37,13 @@ onMounted(async () => {
   crudExpose.doRefresh()
 })
 
-watch(queryParams, async () => {
-  crudExpose.doRefresh()
-}, { deep: true })
-
+watch(
+  queryParams,
+  async () => {
+    crudExpose.doRefresh()
+  },
+  { deep: true }
+)
 </script>
 
 <template>
@@ -49,22 +53,22 @@ watch(queryParams, async () => {
         <el-tabs v-model="tabActiveName" class="chart-tabs" type="border-card">
           <el-tab-pane label="数据趋势" name="dataTendency">
             <DataTendencyChart
-                v-if="tabActiveName === 'dataTendency'"
-                :query="queryParams"
-                :fetchCard="getCardData"
-                :fetch-line-month="getLineMonthData"
-							  :fetch-line-week="getLineWeekData"
-                :fetchLine="getLineData">
+              v-if="tabActiveName === 'dataTendency'"
+              :query="queryParams"
+              :fetchCard="getCardData"
+              :fetch-line-month="getLineMonthData"
+              :fetch-line-week="getLineWeekData"
+              :fetchLine="getLineData">
             </DataTendencyChart>
           </el-tab-pane>
           <el-tab-pane label="广告结构" name="adStruct">
-            <AdStructChart  v-if="tabActiveName === 'adStruct'"/>
+            <AdStructChart v-if="tabActiveName === 'adStruct'" />
           </el-tab-pane>
           <el-tab-pane label="散点视图" name="scatterView" :lazy="true"></el-tab-pane>
         </el-tabs>
       </template>
       <template #cell_campaignName="scope">
-        <el-tooltip  effect="dark" :content="scope.row.campaignName" placement="top">
+        <el-tooltip effect="dark" :content="scope.row.campaignName" placement="top">
           <el-link type="primary" :underline="false" @click="jumpGroup(scope.row)">
             <div class="en-text">{{ scope.row.campaignName }}</div>
           </el-link>
@@ -82,12 +86,12 @@ watch(queryParams, async () => {
 
       <template v-for="field of Object.keys(SbBaseColumn)" #[`cell_${field}`]="scope">
         <DataCompare
-            :field="field"
-            :value="scope.row[field]"
-            :prev-val="scope.row[`prev${field}`]"
-            :gap-val="scope.row[`gap${field}`]"
-            :date-range="dateRange"
-            :show-compare="showCompare"/>
+          :field="field"
+          :value="scope.row[field]"
+          :prev-val="scope.row[`prev${field}`]"
+          :gap-val="scope.row[`gap${field}`]"
+          :date-range="dateRange"
+          :show-compare="showCompare" />
       </template>
       <template #toolbar-left>
         <div class="campare-switch">
@@ -107,11 +111,12 @@ watch(queryParams, async () => {
     padding-left: 0 !important;
   }
 }
+
 .campare-switch {
   flex: none;
 }
 
-::v-deep(.el-table__footer-wrapper td.el-table__cell:nth-child(n+2):nth-child(-n+4) .cell) {
+::v-deep(.el-table__footer-wrapper td.el-table__cell:nth-child(n + 2):nth-child(-n + 4) .cell) {
   display: none;
 }
 
@@ -127,9 +132,11 @@ watch(queryParams, async () => {
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
 }
+
 ::v-deep(.el-table__footer-wrapper) {
   border: 0;
 }
+
 ::v-deep(.el-table .el-table__footer-wrapper .cell) {
   font-weight: 600;
 }

src/views/adManage/sp/purchasedOtherProducts/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { ref, onMounted, computed, watch } from 'vue'
-import { useFs, FsPage } from '@fast-crud/fast-crud';
+import { inject, onMounted, ref, watch } from 'vue'
+import { FsPage, useFs } from '@fast-crud/fast-crud'
 import { createCrudOptions } from './crud'
 import DataTendencyChart from '/@/views/adManage/sp/chartComponents/dataTendency.vue'
 import { getCardData, getLineData, getLineMonthData, getLineWeekData } from './api'
@@ -12,20 +12,23 @@ import { SpCampaignPuchasedOtherProductsColumn } from '/@/views/adManage/utils/c
 import DataCompare from '/@/components/dataCompare/index.vue'
 import router from '/@/router'
 
-const tabActiveName = ref("dataTendency")
+const filterItem = inject('searchItem')
+
+const tabActiveName = ref('dataTendency')
 const shopInfo = useShopInfo()
 const publicData = usePublicData()
 const { dateRange } = storeToRefs(publicData)
 const { profile } = storeToRefs(shopInfo)
 const initMetric = [
-  {metric: 'TotalPurchasesOtherSKU', color: '#0085ff', 'label': '其它商品订单数'},
-  {metric: 'TotalSalesOtherSKU', color: '#3fd4cf', 'label': '其它商品销售额'},
-  {metric: 'TotalUnitOrderedOtherSKU', color: '#ff9500', 'label': '其它商品销量'},
+  { metric: 'TotalPurchasesOtherSKU', color: '#0085ff', label: '其它商品订单数' },
+  { metric: 'TotalSalesOtherSKU', color: '#3fd4cf', label: '其它商品销售额' },
+  { metric: 'TotalUnitOrderedOtherSKU', color: '#ff9500', label: '其它商品销量' },
 ]
 const showCompare = ref(false)
 const queryParams = ref({
   profileId: profile.value.profile_id,
-  dateRange
+  dateRange,
+  filterItem,
 })
 const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
 const jumpGroup = (row: any) => {
@@ -36,12 +39,15 @@ const jumpGroup = (row: any) => {
 }
 
 onMounted(async () => {
-	crudExpose.doRefresh()
+  crudExpose.doRefresh()
 })
-watch(queryParams, async () => {
-	crudExpose.doRefresh()
-}, { deep: true })
-
+watch(
+  queryParams,
+  async () => {
+    crudExpose.doRefresh()
+  },
+  { deep: true }
+)
 </script>
 
 <template>
@@ -49,8 +55,8 @@ watch(queryParams, async () => {
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <template #header-middle>
         <el-tabs v-model="tabActiveName" class="chart-tabs" type="border-card">
-					<el-tab-pane label="数据趋势" name="dataTendency">
-						<DataTendencyChart
+          <el-tab-pane label="数据趋势" name="dataTendency">
+            <DataTendencyChart
               :query="queryParams"
               :fetchCard="getCardData"
               :fetchLine="getLineData"
@@ -59,8 +65,8 @@ watch(queryParams, async () => {
               :init-metric="initMetric"
               :metric-enum="spCampaignPuchasedOtherProductsMetricsEnum">
             </DataTendencyChart>
-					</el-tab-pane>
-				</el-tabs>
+          </el-tab-pane>
+        </el-tabs>
       </template>
       <template #cell_adProduct="scope">
         <p>{{ scope.row.advertisedAsin }}</p>
@@ -71,14 +77,14 @@ watch(queryParams, async () => {
       </template>
 
       <template #cell_campaignName="scope">
-        <el-tooltip  effect="dark" :content="scope.row.campaignName" placement="top">
+        <el-tooltip effect="dark" :content="scope.row.campaignName" placement="top">
           <el-link type="primary" :underline="false" @click="jumpGroup(scope.row)">
             <div class="en-text">{{ scope.row.campaignName }}</div>
           </el-link>
         </el-tooltip>
       </template>
       <template #cell_adGroupName="scope">
-        <el-tooltip  effect="dark" :content="scope.row.adGroupName" placement="top">
+        <el-tooltip effect="dark" :content="scope.row.adGroupName" placement="top">
           <el-link type="primary" :underline="false" @click="jumpGroup(scope.row)">
             <div class="en-text">{{ scope.row.adGroupName }}</div>
           </el-link>
@@ -91,7 +97,7 @@ watch(queryParams, async () => {
           :prev-val="scope.row[`prev${field}`]"
           :gap-val="scope.row[`gap${field}`]"
           :date-range="dateRange"
-          :show-compare="showCompare"/>
+          :show-compare="showCompare" />
       </template>
       <template #toolbar-left>
         <div class="campare-switch">
@@ -99,8 +105,8 @@ watch(queryParams, async () => {
           <el-switch v-model="showCompare" size="small" />
         </div>
       </template>
-		</fs-crud>
-	</fs-page>
+    </fs-crud>
+  </fs-page>
 </template>
 
 <style scoped>
@@ -108,7 +114,7 @@ watch(queryParams, async () => {
   flex: none;
 }
 
-::v-deep(.el-table__footer-wrapper td.el-table__cell:nth-child(n+3):nth-child(-n+6) .cell) {
+::v-deep(.el-table__footer-wrapper td.el-table__cell:nth-child(n + 3):nth-child(-n + 6) .cell) {
   display: none;
 }
 
@@ -124,9 +130,11 @@ watch(queryParams, async () => {
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
 }
+
 ::v-deep(.el-table__footer-wrapper) {
   border: 0;
 }
+
 ::v-deep(.el-table .el-table__footer-wrapper .cell) {
   font-weight: 600;
 }

src/views/adManage/sp/searchTerm/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { ref, onMounted, watch, computed } from 'vue'
-import { useFs, FsPage } from '@fast-crud/fast-crud';
+import { inject, onMounted, ref, watch } from 'vue'
+import { FsPage, useFs } from '@fast-crud/fast-crud'
 import { createCrudOptions } from './crud'
 import DataTendencyChart from '/@/views/adManage/sp/chartComponents/dataTendency.vue'
 import { getCardData, getLineData, getLineMonthData, getLineWeekData } from './api'
@@ -9,10 +9,10 @@ import { usePublicData } from '/@/stores/publicData'
 import { storeToRefs } from 'pinia'
 import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
 import DataCompare from '/@/components/dataCompare/index.vue'
-import {useRouter} from 'vue-router'
+import { useRouter } from 'vue-router'
 
-
-const tabActiveName = ref("dataTendency")
+const filterItem = inject('searchItem')
+const tabActiveName = ref('dataTendency')
 const shopInfo = useShopInfo()
 const publicData = usePublicData()
 const { dateRange } = storeToRefs(publicData)
@@ -22,26 +22,26 @@ const showCompare = ref(false)
 const jumpGroup = (row: any) => {
   router.push({
     name: 'SpCampaignDetail',
-    query: {campaignId: row.campaignId, tagsViewName: row.campaignName},
+    query: { campaignId: row.campaignId, tagsViewName: row.campaignName },
   })
 }
 const queryParams = ref({
   profileId: profile.value.profile_id,
-  dateRange
+  dateRange,
+  filterItem,
 })
 const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
 
 onMounted(async () => {
-	crudExpose.doRefresh()
+  crudExpose.doRefresh()
 })
 watch(
-	queryParams, 
-	async () => {
-		crudExpose.doRefresh()
-	},
+  queryParams,
+  async () => {
+    crudExpose.doRefresh()
+  },
   { deep: true }
 )
-
 </script>
 
 <template>
@@ -49,20 +49,20 @@ watch(
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <template #header-middle>
         <el-tabs v-model="tabActiveName" class="chart-tabs" type="border-card">
-					<el-tab-pane label="数据趋势" name="dataTendency">
-						<DataTendencyChart
-							v-if="tabActiveName === 'dataTendency'"
+          <el-tab-pane label="数据趋势" name="dataTendency">
+            <DataTendencyChart
+              v-if="tabActiveName === 'dataTendency'"
               :query="queryParams"
-							:fetch-card="getCardData"
-							:fetch-line="getLineData"
-							:fetch-line-month="getLineMonthData"
-							:fetch-line-week="getLineWeekData">
-						</DataTendencyChart>
-					</el-tab-pane>
-					<el-tab-pane label="散点视图" name="scatterView">
-						<div v-if="tabActiveName === 'scatterView'">敬请期待...</div>
-					</el-tab-pane>
-				</el-tabs>
+              :fetch-card="getCardData"
+              :fetch-line="getLineData"
+              :fetch-line-month="getLineMonthData"
+              :fetch-line-week="getLineWeekData">
+            </DataTendencyChart>
+          </el-tab-pane>
+          <el-tab-pane label="散点视图" name="scatterView">
+            <div v-if="tabActiveName === 'scatterView'">敬请期待...</div>
+          </el-tab-pane>
+        </el-tabs>
       </template>
 
       <template #cell_searchTerm="scope">
@@ -86,15 +86,15 @@ watch(
           </el-link>
         </el-tooltip>
       </template>
-      
+
       <template v-for="field of Object.keys(BaseColumn)" #[`cell_${field}`]="scope">
         <DataCompare
-          :field="field" 
+          :field="field"
           :value="scope.row[field]"
           :prev-val="scope.row[`prev${field}`]"
-          :gap-val="scope.row[`gap${field}`]" 
+          :gap-val="scope.row[`gap${field}`]"
           :date-range="dateRange"
-          :show-compare="showCompare"/>
+          :show-compare="showCompare" />
       </template>
       <template #toolbar-left>
         <div class="campare-switch">
@@ -102,8 +102,8 @@ watch(
           <el-switch v-model="showCompare" size="small" />
         </div>
       </template>
-		</fs-crud>
-	</fs-page>
+    </fs-crud>
+  </fs-page>
 </template>
 
 <style scoped>
@@ -119,4 +119,4 @@ watch(
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
 }
-</style>
+</style>

src/views/adManage/sp/targets/index.vue

@@ -1,29 +1,30 @@
 <script lang="ts" setup>
-import {nextTick, onMounted, ref, watch} from 'vue'
-import {FsPage, useFs} from '@fast-crud/fast-crud'
-import {createCrudOptions} from './crud'
-import {useRoute, useRouter} from 'vue-router'
+import { inject, onMounted, ref, watch } from 'vue'
+import { FsPage, useFs } from '@fast-crud/fast-crud'
+import { createCrudOptions } from './crud'
+import { useRoute, useRouter } from 'vue-router'
 import DataTendencyChart from '/@/views/adManage/sp/chartComponents/dataTendency.vue'
-import {useShopInfo} from '/@/stores/shopInfo'
-import {usePublicData} from '/@/stores/publicData'
+import { useShopInfo } from '/@/stores/shopInfo'
+import { usePublicData } from '/@/stores/publicData'
 import AdStructChart from './chartComponents/adStruct.vue'
-import {getCardData, getLineData, getLineMonthData, getLineWeekData} from '/@/views/adManage/sp/targets/api'
-import {storeToRefs} from 'pinia'
-import {SbBaseColumn} from '/@/views/adManage/utils/commonTabColumn'
+import { getCardData, getLineData, getLineMonthData, getLineWeekData } from '/@/views/adManage/sp/targets/api'
+import { storeToRefs } from 'pinia'
+import { SbBaseColumn } from '/@/views/adManage/utils/commonTabColumn'
 import DataCompare from '/@/components/dataCompare/index.vue'
 
-
+const filterItem = inject('searchItem')
 const tabActiveName = ref('dataTendency')
 const shopInfo = useShopInfo()
 const publicData = usePublicData()
-const {dateRange} = storeToRefs(publicData)
-const {profile} = storeToRefs(shopInfo)
+const { dateRange } = storeToRefs(publicData)
+const { profile } = storeToRefs(shopInfo)
 const queryParams = ref({
   profileId: profile.value.profile_id,
-  dateRange
+  dateRange,
+  filterItem,
 })
 
-const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, context: queryParams})
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
 const route = useRoute()
 const router = useRouter()
 const showCompare = ref(false)
@@ -38,10 +39,13 @@ onMounted(() => {
   crudExpose.doRefresh()
 })
 
-watch(queryParams, async () => {
-  crudExpose.doRefresh()
-}, {deep: true})
-
+watch(
+  queryParams,
+  async () => {
+    crudExpose.doRefresh()
+  },
+  { deep: true }
+)
 </script>
 
 <template>
@@ -51,30 +55,30 @@ watch(queryParams, async () => {
         <el-tabs v-model="tabActiveName" class="chart-tabs" type="border-card">
           <el-tab-pane label="数据趋势" name="dataTendency">
             <DataTendencyChart
-                :query="queryParams"
-                v-if="tabActiveName === 'dataTendency'"
-                :fetchCard="getCardData"
-                :fetch-line-month="getLineMonthData"
-							  :fetch-line-week="getLineWeekData"
-                :fetchLine="getLineData">
+              :query="queryParams"
+              v-if="tabActiveName === 'dataTendency'"
+              :fetchCard="getCardData"
+              :fetch-line-month="getLineMonthData"
+              :fetch-line-week="getLineWeekData"
+              :fetchLine="getLineData">
             </DataTendencyChart>
           </el-tab-pane>
           <el-tab-pane label="广告结构" name="adStruct" :lazy="true">
-            <AdStructChart v-if="tabActiveName === 'adStruct'"/>
+            <AdStructChart v-if="tabActiveName === 'adStruct'" />
           </el-tab-pane>
           <el-tab-pane label="散点视图" name="scatterView" :lazy="true"></el-tab-pane>
         </el-tabs>
       </template>
 
       <template #cell_campaignName="scope">
-        <el-tooltip  effect="dark" :content="scope.row.campaignName" placement="top">
+        <el-tooltip effect="dark" :content="scope.row.campaignName" placement="top">
           <el-link type="primary" :underline="false" @click="jumpGroup(scope.row)">
             <div class="en-text">{{ scope.row.campaignName }}</div>
           </el-link>
         </el-tooltip>
       </template>
       <template #cell_adGroupName="scope">
-        <el-tooltip  effect="dark" :content="scope.row.adGroupName" placement="top">
+        <el-tooltip effect="dark" :content="scope.row.adGroupName" placement="top">
           <el-link type="primary" :underline="false" @click="jumpGroup(scope.row)">
             <div class="en-text">{{ scope.row.adGroupName }}</div>
           </el-link>
@@ -86,12 +90,12 @@ watch(queryParams, async () => {
       </template>
       <template v-for="field of Object.keys(SbBaseColumn)" #[`cell_${field}`]="scope">
         <DataCompare
-            :field="field"
-            :value="scope.row[field]"
-            :prev-val="scope.row[`prev${field}`]"
-            :gap-val="scope.row[`gap${field}`]"
-            :date-range="dateRange"
-            :show-compare="showCompare"/>
+          :field="field"
+          :value="scope.row[field]"
+          :prev-val="scope.row[`prev${field}`]"
+          :gap-val="scope.row[`gap${field}`]"
+          :date-range="dateRange"
+          :show-compare="showCompare" />
       </template>
       <template #toolbar-left>
         <div class="campare-switch">
@@ -115,9 +119,11 @@ watch(queryParams, async () => {
 .campare-switch {
   flex: none;
 }
-::v-deep(.el-table__footer-wrapper td.el-table__cell:nth-child(n+3):nth-child(-n+6) .cell) {
+
+::v-deep(.el-table__footer-wrapper td.el-table__cell:nth-child(n + 3):nth-child(-n + 6) .cell) {
   display: none;
 }
+
 .en-text {
   max-width: 100%;
   font-size: 13px;
@@ -130,9 +136,11 @@ watch(queryParams, async () => {
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
 }
+
 ::v-deep(.el-table__footer-wrapper) {
   border: 0;
 }
+
 ::v-deep(.el-table .el-table__footer-wrapper .cell) {
   font-weight: 600;
 }
@@ -140,5 +148,4 @@ watch(queryParams, async () => {
 .text-range {
   color: #808184;
 }
-
 </style>

src/views/demo/index.vue

@@ -36,9 +36,10 @@ function createWXQRCode() {
       login_type: 'CorpApp',
       appid: 'ww467ec1685e8262e6',
       agentid: '1000065',
-      // redirect_uri: 'https://ads.vzzon.com/web/api/system/wechat/login',
-      redirect_uri : "https://ads.vzzon.com/web/api/system/wechat/oauth_callback",
+      redirect_uri: 'https://ads.vzzon.com/api/system/wechat/login/test',
+      // redirect_uri : "https://ads.vzzon.com/web/api/system/wechat/oauth_callback",
       state: 'loginState',
+      scope : "snsapi_privateinfo"
       // redirect_type: 'callback',
     },
     onCheckWeComLogin({ isWeComLogin }) {