ads_web/src/views/efTools/automation/components/targetRuleDialog.vue

<script lang="ts" setup>
/**
 * @Name: targetRuleDialog.vue
 * @Description: 关联广告活动-选择定向弹窗
 * @Author: xinyan
 */
import { onMounted, reactive, ref, watch } from 'vue';
import { MatchType } from '../../utils/enum';
import { getTargetingRuleList } from '/@/views/efTools/automation/api';
import { ElMessage } from 'element-plus';

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  },
  selectedTargetedRow: {
    type: Object,
    required: true,
  },
});
const emits = defineEmits(['update:modelValue', 'confirm:targetRule']);
const targetRuleDialogVisible = ref(props.modelValue);
const { selectedTargetedRow } = toRefs(props);
const adGroupId = ref(props.adGroupId);
const campaignKeywordInfo = ref(null);

// 查询、筛选条件
const matchType = ref('');
const keyWord = ref('');

const gridOptions = reactive({
  height: 550,
  showOverflow: true,
  loading: false,
  rowConfig: {
    isHover: true,
    height: 34
  },
  columns: [
    { field: 'keywordText', title: '关键词', width: 220 },
    {
      field: 'matchType',
      title: '匹配方式',
      formatter: ({ cellValue }) => getMatchTypeLabel(cellValue).label,
    },
    { type: 'checkbox', align: 'right', width: 55 }
  ],
  data: []
});

async function fetchTargetRuleList() {
  try {
    gridOptions.loading = true;
    const resp = await getTargetingRuleList({
      campaignType: selectedTargetedRow.value.campaignType,
      campaignId: selectedTargetedRow.value.parentCampaignId,
      adGroupId: selectedTargetedRow.value.adGroupId,
      matchType: matchType.value,
      search: keyWord.value,
    });
    gridOptions.data = resp.data.targetData;
    gridOptions.loading = false;
  } catch (error) {
    ElMessage.error('请求定向数据失败');
  }
}

function handleCheckChange({ records }) {
  campaignKeywordInfo.value = records;
}

function getMatchTypeLabel(type: string) {
  const matchType = MatchType.find(item => item.value === type);
  if (matchType) {
    return { label: matchType.label, type: type };
  }
  return { label: type, type: '' };
}

function cancel() {
  targetRuleDialogVisible.value = false;
}

async function confirm() {
  targetRuleDialogVisible.value = false;
  emits('confirm:targetRule', campaignKeywordInfo.value);
}

const headerCellStyle = () => {
  return {
    fontSize: '13px',
    height: '34px',
  };
};

const cellStyle = () => {
  return {
    fontSize: '13px',
    //fontWeight: '500',
  };
};

watch(() => props.modelValue, (newValue) => {
  targetRuleDialogVisible.value = newValue;
});

watch(targetRuleDialogVisible, (newValue) => {
  emits('update:modelValue', newValue);
});

watch(() => props.selectedTargetedRow, () => {
  fetchTargetRuleList();
});

onMounted(() => {
  //fetchTargetRuleList();
});

</script>

<template>
  <el-dialog v-model="targetRuleDialogVisible"
             style="border-radius: 10px;"
             title="关联广告活动 > 选择定向"
             width="1158px">
    <div>
      <el-select
          v-model="matchType"
          placeholder="全部匹配方式"
          style="width: 128px; margin-bottom: 10px"
          @change="fetchTargetRuleList"
      >
        <el-option
            v-for="item in MatchType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </div>
    <el-input v-model="keyWord" class="mb-3" clearable placeholder="快速搜索关键词" @change="fetchTargetRuleList" />
    <vxe-grid :cell-style="cellStyle" :header-cell-style="headerCellStyle" @checkbox-change="handleCheckChange"
              v-bind="gridOptions"></vxe-grid>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>