ads_web/src/views/adManage/sp/campaigns/campaignDetail/automation/index.vue

<template>
  <el-tabs tab-position="left" v-model="activeTab" @tab-change="changeTab">
    <el-tab-pane label="分时调价" :name="1">
      <template #label>
        <div class="tab-label">
          <el-switch size="small" v-model="RuleStatusButton['1']" :disabled="RuleStatusButton['1'] === '-'"></el-switch>
          <span>分时调价</span>
        </div>
      </template>
      <TimerBid :data="baseData" :RuleStatusButton="RuleStatusButton" @refresh="refresh(1)" v-if="activeTab === 1" />
    </el-tab-pane>
    <el-tab-pane label="分时预算" :name="2">
      <template #label>
        <div class="tab-label">
          <el-switch size="small" v-model="RuleStatusButton['2']" :disabled="RuleStatusButton['2'] === '-'"></el-switch>
          <span>分时预算</span>
        </div>
      </template>
      <TimerBudget :data="baseData" :RuleStatusButton="RuleStatusButton" @refresh="refresh(2)" v-if="activeTab === 2" />
    </el-tab-pane>
    <el-tab-pane label="广告活动" :name="3">
      <template #label>
        <div class="tab-label">
          <el-switch size="small" v-model="RuleStatusButton['3']" :disabled="RuleStatusButton['3'] === '-'"></el-switch>
          <span>广告活动</span>
        </div>
      </template>
      <SwitchCampaign :data="baseData" :RuleStatusButton="RuleStatusButton" @refresh="refresh(3)" v-if="activeTab === 3" />
    </el-tab-pane>
    <el-tab-pane label="定向规则" :name="4">
      <template #label>
        <div class="tab-label">
          <el-switch size="small" v-model="RuleStatusButton['4']" :disabled="RuleStatusButton['4'] === '-'"></el-switch>
          <span>定向规则</span>
        </div>
      </template>
      <TargetRule :data="baseData" :RuleStatusButton="RuleStatusButton" @refresh="refresh(4)" v-if="activeTab === 4"></TargetRule>
    </el-tab-pane>
    <el-tab-pane label="添加搜索词" :name="5">
      <template #label>
        <div class="tab-label">
          <el-switch size="small" v-model="RuleStatusButton['5']" :disabled="RuleStatusButton['5'] === '-'"></el-switch>
          <span>添加搜索词</span>
        </div>
      </template>
      <SearchTermRule :data="baseData" :RuleStatusButton="RuleStatusButton" @refresh="refresh(5)" v-if="activeTab === 5"></SearchTermRule>
    </el-tab-pane>
    <el-tab-pane label="添加否定词" :name="6">
      <template #label>
        <div class="tab-label">
          <el-switch size="small" v-model="RuleStatusButton['6']" :disabled="RuleStatusButton['6'] === '-'"></el-switch>
          <span>添加否定词</span>
        </div>
      </template>
      <NegKeywordRule :data="baseData" :RuleStatusButton="RuleStatusButton" @refresh="refresh(6)" v-if="activeTab === 6"></NegKeywordRule>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { ref, Ref, computed, onMounted, nextTick } from 'vue'
import TimerBid from '/@/views/components/auto/auto-campaigns/timer-bid.vue'
import TimerBudget from '/@/views/components/auto/auto-campaigns/timer-budget.vue'
import SwitchCampaign from '/@/views/components/auto/auto-campaigns/switch-campaign.vue'
import TargetRule from '/@/views/components/auto/auto-campaigns/target-rule.vue'
import SearchTermRule from '/@/views/components/auto/auto-campaigns/search-term.vue'
import NegKeywordRule from '/@/views/components/auto/auto-campaigns/neg-keyword.vue'
import * as api from './api'
import XEUtils from 'xe-utils'

interface Props {
  campaignId: string
  profileId: string
}
const props = defineProps<Props>()
const campaignType = 'sp'
const activeTab = ref(1)
const RuleStatusButton = ref({
  '1': '-',
  '2': '-',
  '3': '-',
  '4': '-',
  '5': '-',
  '6': '-',
})
// const height = ref(800)
// const campaignRuleStatus = ref({
//   campaignId: props.campaignId,
//   campaignType: campaignType,
//   profileId: props.profileId,
//   ruleType: activeTab.value,
//   templateName: '',
//   useTmpl: false,
//   template: null,
//   rule: {
//     type: activeTab.value,
//     campaignType: campaignType,
//     campaignAd: [],
//     action: {},
//     activeModel: '',
//     setTime: '',
//     weekdays: [],
//     conditions: [],
//   },
//   RuleStatusButton: RuleStatusButton,
// })
const baseData = ref({
  campaignId: props.campaignId,
  campaignType: campaignType,
  profileId: props.profileId,
  ruleType: activeTab,
})

const initData = async () => {
  const resp = await api.getCampaignRuleInfo(baseData.value)
  const info = resp.data[0]
  if (info) {
    for (const i of ['1', '2', '3', '4', '5', '6']) {
      RuleStatusButton.value[i] = info.RuleStatusButton[i]
    }
  }
}

const changeTab = async () => {
  // await initData()
}

const refresh = async (tab: number) => {
  activeTab.value = 0
  nextTick(() => {
    activeTab.value = tab
  })
}

onMounted(async () => {
  await initData()
})
</script>

<style lang="scss" scoped>
.tab-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 120px;
}
</style>