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 { postCampaignStatus } from './api';
import { ElMessage } from 'element-plus';


interface Props {
  campaignId: string;
  profileId: string;
}

const props = defineProps<Props>();
const campaignType = 'sp';
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 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];
  //   }
  //   console.log('Initialized RuleStatusButton', RuleStatusButton.value); // 添加调试信息
  // }
}

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

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="分时预算">
      <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="添加搜索词">
      <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="添加否定词">
      <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: 120px;
}
</style>