ads_web/src/views/components/auto/search-term-add.vue

<script lang="ts" setup>
/**
 * @Name: search-term-add.vue
 * @Description: 自动化-添加搜索词
 * @Author: Cheney
 */
import { ref } from 'vue';
import { Delete, Plus } from '@element-plus/icons-vue';
import CampaignSelect from '/@/views/components/campaign-select/index.vue';
import AdGroupSelect from '/@/views/components/ad-group-select/index.vue';

interface Props {
  rule: AutoRule;
  disabled?: boolean;
}

const props = defineProps<Props>();
const formRef = ref();

function addCampaignAd() {
  props.rule.campaignAd.push({
    campaignType: 'sp',
    campaignId: '',
    adGroupId: '',
  });
}

if (props.rule.campaignAd.length === 0) {
  addCampaignAd();
}

if (!props.rule.activeModel) {
  props.rule.activeModel = 'all';
}

function delCampaignAd(index: number) {
  props.rule.campaignAd.splice(index, 1);
}

async function changeCampaignType(info: any) {
  info.campaignId = '';
  info.adGroupId = '';
}

async function validate() {
  let ret = true;
  if (!formRef.value) return ret;
  await formRef.value.validate(async (valid: boolean) => {
    ret = valid;
  });
  return ret;
}

defineExpose({ validate });
</script>

<template>
  <div>
    <div class="asj-h3">
      <span class="custom-title-icon"></span>

      添加到
    </div>
    <el-radio-group
      style="display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 20px"
      v-model="rule.activeModel">
      <el-radio label="all">当前广告活动（所有广告组）</el-radio>
      <el-radio label="current">当前广告活动（当前广告组）</el-radio>
      <el-radio label="specified">指定广告活动的广告组</el-radio>
      <div style="margin-left: 23px" v-if="rule.activeModel === 'specified'">
        <el-form :inline="true" :model="rule" :disabled="disabled" ref="formRef">
          <el-form-item
            v-for="(info, index) in rule.campaignAd"
            style="margin: 10px auto"
            :prop="`campaignAd[${index}].adGroupId`"
            :rules="{ required: true, message: '广告组必填' }">
            <div style="display: flex; align-items: center; gap: 10px">
              <el-select v-model="info.campaignType" style="width: 100px" @change="changeCampaignType(info)">
                <el-option label="SP" value="sp"></el-option>
                <el-option label="SB" value="sb"></el-option>
                <!-- <el-option label="SD" value="sd"></el-option> -->
              </el-select>
              <CampaignSelect
                v-model="info.campaignId"
                :query="{ profileId: '3006125408623189', campaignType: info.campaignType }"
                @change="info.adGroupId = ''"
                width="450px"></CampaignSelect>
              <AdGroupSelect
                v-model="info.adGroupId"
                width="450px"
                :query="{ profileId: '3006125408623189', campaignType: info.campaignType, campaignId: info.campaignId }">
              </AdGroupSelect>
              <el-button
                link
                :icon="Delete"
                type="danger"
                @click="delCampaignAd(index)"
                v-show="rule.campaignAd.length > 1"></el-button>
            </div>
          </el-form-item>
        </el-form>
        <el-button link :icon="Plus" type="primary" @click="addCampaignAd">添加</el-button>
      </div>
    </el-radio-group>
  </div>
</template>

<style scoped>
.custom-title-icon {
  padding-right: 10px;
}

.custom-title-icon:before {
  content: '';
  width: 4px;
  height: 15px;
  background: #3569d6;
  position: absolute;
  transform: translateY(25%);
}
</style>