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

<script lang="ts" setup>
/**
 * @Name: automation-index.vue
 * @Description: 自动化初始页
 * @Author: Cheney
 */

import { nextTick, onMounted, ref } 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';

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,
});
console.log('sp',baseData.value);
onMounted(async () => {
  await initData();
});

async function initData() {
  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];
    }
  }
}

async function changeTab() {
  // await initData()
}

async function refresh(tab: number) {
  activeTab.value = 0;
  nextTick(() => {
    activeTab.value = tab;
  });
}
</script>

<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>

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