ads_web/src/views/adManage/sd/index.vue

<template>
  <div class="asj-container">
    <div class="public-search">
      <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"
      >
        <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">
        {{ tab.label }}
      </div>
    </div>
    <component :is="tabsComponents[tabActiveName]"></component>
  </div>
</template>

<script lang="ts" setup>
import { ref, onBeforeMount, Ref, watch, provide } from 'vue'
import { useShopInfo } from '/@/stores/shopInfo'
import { usePublicData } from '/@/stores/publicData'
import { storeToRefs } from 'pinia'
import { GetAllPortfolios } from '/@/views/adManage/portfolios/api'
import DateRangePicker from '/@/components/DateRangePicker/index.vue'
import Campaigns from '/@/views/adManage/sd/campaigns/index.vue'
import Audiences from '/@/views/adManage/sd/audiences/index.vue'
import Targets from '/@/views/adManage/sd/targets/index.vue'
import MatchedDelivery from '/@/views/adManage/sd/matchedDelivery/index.vue'
import PromoteProducts from '/@/views/adManage/sd/promoteProducts/index.vue'
import PurchasedOtherProducts from './purchasedOtherProducts/index.vue'
import Placement from '/@/views/adManage/sb/placement/index.vue'

// const shopInfo = useShopInfo()
const publicData = usePublicData()
const selectedPortfolios: Ref<string[]> = ref([])
const portfolios: Ref<Portfolio[]> = ref([])
const { dateRange } = storeToRefs(publicData)
const tabActiveName = ref('Campaigns')
const tabsComponents: any = {
  Campaigns,
  Targets,
  Audiences,
  MatchedDelivery,
  PromoteProducts,
  // PurchasedOtherProducts,
  
  // Placement
}
const tabs = [
  { label: '广告活动', name: 'Campaigns' },
  { label: '商品投放', name: 'Targets' },
  { label: '受众', name: 'Audiences' },
  { label: '匹配的投放', name: 'MatchedDelivery' },
  { label: '推广商品', name: 'PromoteProducts' },
  // { label: '购买的其他商品', name: 'PurchasedOtherProducts' },

  // { label: '广告位', name: 'Placement' }
]

provide('dateRange', dateRange)

onBeforeMount(async () => {
  const resp: APIResponseData = await GetAllPortfolios()
  portfolios.value = resp.data
})

</script>

<style scoped>
::v-deep(.el-table .el-table__header-wrapper .cell) {
  border-right: 1px solid rgb(218, 221, 223);
}
</style>