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

<script lang="ts" setup>
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 = 'sd';
const activeTab = ref(1);
const RuleStatusButton = ref({
  '1': 0,
  '2': 0,
  '3': 0,
  '4': 0,
  '5': 0,
  '6': 0,
})

const baseData = ref({
  campaignId: props.campaignId,
  campaignType: campaignType,
  profileId: props.profileId,
  ruleType: activeTab,
});

async function changeStatus(newStatus: number, tabIndex: string) {
  const body = {
    ...baseData.value,
    ruleType: Number(tabIndex),
    status: newStatus
  };
  try {
    const response = await postCampaignStatus(body);
    if (response.code === 2000) {
      ElMessage.success('更新状态成功');
      // const resp = await getCampaignRuleInfo(baseData.value);
      // RuleStatusButton.value = resp.data[0].RuleStatusButton;
    } else if (response.code == 5000) {
      ElMessage.warning(`${ response.data.description }`);
    } else {
      ElMessage.error('状态更新失败');
    }
  } catch (error) {
    console.log('error:', error);
  }
}
function updateRuleStatusButton(newValue) {
  if (newValue !== undefined) {
    RuleStatusButton.value = { ...RuleStatusButton.value, ...newValue }
  } else {
    console.error('接收到的 newValue 是 undefined')
  }
}

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

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

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

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