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

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { Ref, onBeforeMount, provide, ref } from 'vue'
import DateRangePicker from '/@/components/DateRangePicker/index.vue'
import { usePublicData } from '/@/stores/publicData'
import { GetAllPortfolios } from '/@/views/adManage/portfolios/api'
import Audiences from '/@/views/adManage/sd/audiences/index.vue'
import Campaigns from '/@/views/adManage/sd/campaigns/index.vue'
import MatchedDelivery from '/@/views/adManage/sd/matchedDelivery/index.vue'
import PromoteProducts from '/@/views/adManage/sd/promoteProducts/index.vue'
import Targets from '/@/views/adManage/sd/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,
  Targets,
  Audiences,
  MatchedDelivery,
  PromoteProducts,
}
const tabs = [
  { label: '广告活动', name: 'Campaigns' },
  { label: '商品投放', name: 'Targets' },
  { label: '受众', name: 'Audiences' },
  { label: '匹配的投放', name: 'MatchedDelivery' },
  { label: '推广商品', name: 'PromoteProducts' },
]

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: 200px"
        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">
        {{ tab.label }}
      </div>
    </div>
    <component :is="tabsComponents[tabActiveName]"></component>
  </div>
</template>

<style scoped>
::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;
}
</style>