ads_web/src/views/adManage/sp/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"
				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>

<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 './campaigns/index.vue'
import Keywords from './keywords/index.vue'
import Targets from './targets/index.vue'
import SearchTerm from './searchTerm/index.vue'
import AdvertisedProducts from './advertisedProducts/index.vue'
import PurchasedOtherProducts from './purchasedOtherProducts/index.vue'
import Placement from './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 tabs = [
	{ label: '广告活动', name: 'Campaigns' },
	{ label: '关键词投放', name: 'Keywords' },
	{ label: '商品投放', name: 'Targets' },
	{ label: '推广商品', name: 'AdvertisedProducts' },
	{ label: '购买的其他商品', name: 'PurchasedOtherProducts' },
	{ label: '搜索词', name: 'SearchTerm' },
	{ label: '广告位', name: 'Placement' }
]
const tabsComponents: any = {
	Campaigns,
	Keywords,
	Targets,
	AdvertisedProducts,
	PurchasedOtherProducts,
	SearchTerm,
	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);
}
::v-deep(.el-table__footer-wrapper .el-table__footer tr) {
  background-color: #f5f7fa;
}
</style>