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

<script lang="ts" setup>
/**
 * @Name: adActivityDialog.vue
 * @Description:广告关联活动弹窗
 * @Author: xinyan
 */
import { computed, onMounted, ref, watch ,toRefs} from 'vue';
import { getAdGroupList, getRelationCampaign } from '/@/views/efTools/automation/api';
import { storeToRefs } from 'pinia';
import { useShopInfo } from '/@/stores/shopInfo';
import { ElMessage } from 'element-plus';
import TargetRuleDialog from '/@/views/efTools/automation/components/targetRuleDialog.vue';
import { DocumentAdd } from '@element-plus/icons-vue';


const props = defineProps({
  templateId: {
    type: [String, Number],
    required: true,
  },
  activeModel: {
    type: String,
  },
  modelValue: {
    type: Boolean,
    required: true,
  },
});
const emits = defineEmits(['update:modelValue']);
const shopInfo = useShopInfo();
const { profile } = storeToRefs(shopInfo);
const { templateId } = toRefs(props);
// const { activeModel } = toRefs(props);
const activeModel = ref('specified');

const dialogVisible = ref(true);
const targetRuleDialogVisible = ref(false);

// 定向规则
//const adGroupId = ref('')
//const campaignId = ref('')
const selectedTargetedRow = ref(null);
const targetLength = ref(0);
let selectedGroups = [];

// 筛选条件
const searchAdCampaign = ref('');
const selectedCampaignType = ref('sp');
const selectedAdGroup = ref('');
const selectedStatus = ref('');

const adCampaignName = ref([]);
const campaignType = [
  { value: 'sb', label: 'SB' },
  { value: 'sp', label: 'SP' },
  { value: 'sd', label: 'SD' },
];
const adGroups = ref([]);
const campaignStatus = [
  { value: 0, label: '未存档' },
  { value: 'ENABLED', label: '已启用' },
  { value: 'PAUSED', label: '已暂停' },
];
// 表格
const currentPage = ref(1);
const pageSize = ref(25);
const total = ref(0);

const loading = ref(false);
const xGridOne = ref(null);
const xGridTwo = ref(null);
let selectedAds = ref([]);

const selectedColumns = computed(() => [
  {
    field: 'campaignName',
    title: '广告活动',
    slots: { default: 'campaignName_default' },
    treeNode: activeModel.value == 'specified' || activeModel.value == 'adGroup'
  },
  { title: '操作', width: 100, align: 'center', slots: { header: 'header_operation', default: 'default_operation' } }
]);

const treeProps = computed(() => {
  activeModel.value = 'specified';

  if (activeModel.value === 'adGroup' || activeModel.value === 'specified') {
    return {
      rowField: 'campaignId',
      childrenField: 'campaignGroupInfo',  // 子节点字段
      expandAll: true,
    };
  }
  return {};
});

const gridOptions = reactive({
  border: 'inner',
  height: 500,
  rowConfig: {
    isHover: true,
    keyField: 'campaignId',
  },
  treeConfig: treeProps,
  checkboxConfig: {
    labelField: 'name',
    reserve: true,
    checkStrictly: false,
  },
  columns: computed(() => [
    {
      field: 'campaignName',
      title: '广告活动',
      slots: { default: 'campaignName_default' },
      treeNode: activeModel.value == 'specified' || activeModel.value == 'adGroup'
    },
    { type: 'checkbox', width: 55, fixed: 'right' },
  ]),
  data: []
});

function handleCurrentChange(newPage) {
  currentPage.value = newPage;
  loading.value = true;
  fetchAdCampaign();
}

// 处理分页器每页显示条目数变化
function handleSizeChange(newSize) {
  pageSize.value = newSize;
  currentPage.value = 1;
  fetchAdCampaign();
}

function handleAdCampaignChange() {
  localStorage.setItem('searchAdCampaign', JSON.stringify(searchAdCampaign.value));
  fetchAdCampaign();
}

async function fetchAdCampaign() {
  const savedAdCampaign = localStorage.getItem('searchAdCampaign');
  if (savedAdCampaign) {
    searchAdCampaign.value = JSON.parse(savedAdCampaign);
  }
  try {
    loading.value = true;
    const cachedSelectedAds = [...selectedAds.value];
    const resp = await getRelationCampaign({
      profileId: profile.value.profile_id,
      templateId: 51,
      campaignName: searchAdCampaign.value,
      portfolioId: selectedAdGroup.value,
      campaignStatus: selectedStatus.value,
      campaignType: selectedCampaignType.value,
      page: currentPage.value,
      limit: pageSize.value,
    });
    gridOptions.data = resp.data;
    total.value = resp.total;
    currentPage.value = resp.page;
  } catch (error) {
    ElMessage.error('请求广告活动数据失败');
  } finally {
    loading.value = false;
  }
}

const handleGridChange = (event) => {
  if (activeModel.value == 'specified' || activeModel.value == 'adGroup') {
    handleSelectionChange(event);
  } else {
    handelSelect(event);
  }
};

function handelSelect({ records }) {
  selectedAds.value = [
    ...selectedAds.value.filter(ad => ad.page !== currentPage.value),
    ...records.map(ad => ({ ...ad, page: currentPage.value }))
  ];
}

function updateSelectedAds() {
  selectedAds.value = gridOptions.data
      .filter(ad => ad.campaignGroupInfo && ad.campaignGroupInfo.some(group => group.isSelected))
      .map(ad => ({
        ...ad,
        campaignGroupInfo: ad.campaignGroupInfo.filter(group => group.isSelected),
        page: currentPage.value
      }));
}

function handleSelectionChange({ records, checked, reserve }) {
  console.log("=>(adActivityDialog.vue:193) records", records);

  if (records.length === 0 && !reserve) {
    // 当所有项目被取消选择时，清空 selectedAds
    selectedAds.value = [];
  } else {
    records.forEach(record => {
      if (record.adGroupId) {
        // 这是一个广告组（子节点）
        const parentCampaign = gridOptions.data.find(campaign =>
            campaign.campaignGroupInfo.some(group => group.adGroupId === record.adGroupId)
        );
        if (parentCampaign) {
          const group = parentCampaign.campaignGroupInfo.find(group => group.adGroupId === record.adGroupId);
          if (group) {
            group.isSelected = checked;
          }
        }
      } else {
        // 这是一个广告活动（父节点）
        record.campaignGroupInfo.forEach(group => {
          group.isSelected = checked;
        });
      }
    });

    updateSelectedAds();
  }

  console.log("=>(adActivityDialog.vue:224) selectedAds.value", selectedAds.value);
}

function handleSelectTarget(row) {
  // 获取父节点数据
  const parent = gridOptions.data.find(campaign =>
      campaign.campaignGroupInfo.some(group => group.adGroupId === row.adGroupId)
  );
  selectedTargetedRow.value = {
    campaignType: parent.campaignType,
    campaignId: parent.campaignId,
    adGroupId: row.adGroupId,
    isSelected: row.isSelected || false, // 同步 isSelected 状态
  };
  targetRuleDialogVisible.value = true;
}


function handleConfirm({ campaignInfo, targetType }) {
  if (!selectedTargetedRow.value) return;

  // 找到父级广告活动
  const parentCampaign = gridOptions.data.find(campaign =>
      campaign.campaignGroupInfo.some(group => group.adGroupId === selectedTargetedRow.value.adGroupId)
  );

  if (parentCampaign) {
    // 更新子节点（广告组）的信息
    const group = parentCampaign.campaignGroupInfo.find(group => group.adGroupId === selectedTargetedRow.value.adGroupId);
    if (group) {
      if (targetType === 'keyword') {
        group.keywordInfo = campaignInfo;
      } else if (targetType === 'target') {
        group.campaignTargetInfo = campaignInfo;
      }
      group.isSelected = true;
      group.targetLength = (group.keywordInfo?.length || 0) + (group.campaignTargetInfo?.length || 0);
    }
  }

  // 更新选中的广告
  updateSelectedAds();

  // 勾选表格1中的对应行
  if (xGridOne.value) {
    xGridOne.value.setCheckboxRow(selectedTargetedRow.value, true);
  }
}

const removeSelectedAd = async (row) => {
  console.log("=>(adActivityDialog.vue:274) row", row);
  const $grid = xGridTwo.value;
  if ($grid) {
    console.log("=>(1) selectedAds.value", selectedAds.value);

    if (row.adGroupId) {
      // 删除子节点（广告组）
      selectedAds.value = selectedAds.value.map(ad => {
        if (ad.campaignGroupInfo) {
          return {
            ...ad,
            campaignGroupInfo: ad.campaignGroupInfo.filter(group => group.adGroupId !== row.adGroupId)
          };
        }
        return ad;
      }).filter(ad => ad.campaignGroupInfo && ad.campaignGroupInfo.length > 0);
    } else {
      // 删除父节点（广告活动）
      selectedAds.value = selectedAds.value.filter(ad => ad.campaignId !== row.campaignId);
    }

    await $grid.remove(row);
    console.log("=>(2) selectedAds.value", selectedAds.value);
  }

  if (xGridOne.value) {
    await xGridOne.value.toggleCheckboxRow(row);
  }
};

function removeAllSelectedAds() {
  selectedAds.value = [];
  const $grid = xGridOne.value;
  if ($grid) {
    $grid.clearCheckboxRow();
  }
}

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

//TODO: 确认按钮-商品
async function confirm() {
  const campaignItems = selectedAds.value.map(ad => ({
    campaignId: ad.campaignId,
    campaignType: ad.campaignType
  }));
  const adGroupInfo = [];
  const campaignTargetInfo = [
    { targetId: '492707808377423', adGroup_id: '448117369011017', bid: 0.45 },
  ];
  console.log('=>(adActivityDialog.vue:291) selectedTargetedRow.value', selectedTargetedRow.value);

  const campaignInfo = selectedTargetedRow.value.keywordInfo.map(keyword => ({
    keywordId: keyword.keywordId,
    adGroup_id: keyword.adGroup_id,
    bid: keyword.bid
  }));

  const requestData = {
    profileId: profile.value.profile_id,
    templateId: templateId.value,
    campaignItems,
    adGroupInfo,
    campaignTargetInfo,
    campaignInfo
  };
  console.log('requestData', requestData);
}

// 获取广告组下拉框
async function fetchAdGroupList() {
  try {
    const resp = await getAdGroupList({
      profileId: profile.value.profile_id,
    });
    adGroups.value = resp.data.map((item: any) => {
      return {
        label: item.name,
        value: item.portfolioId
      };
    });
  } catch (error) {
    ElMessage.error('请求失败');
  }
}

const headerCellStyle = (args) => {
  if (args.rowIndex === 0) {
    return {
      backgroundColor: 'rgba(245, 245, 245, 0.9)',
      fontWeight: '500',
    };
  }
};

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

//监控筛选条件变化
watch(selectedCampaignType, () => {
  fetchAdCampaign();
});

watch(selectedAdGroup, (newVal) => {
  if (newVal) {
    selectedAdGroup.value = newVal;
    fetchAdCampaign();
  }
});

watch(selectedStatus, () => {
  fetchAdCampaign();
});

watch(templateId, () => {
  fetchAdCampaign();
  fetchAdGroupList();
});

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

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

onMounted(() => {
  fetchAdGroupList();
  fetchAdCampaign();
});

</script>

<template>
  <el-dialog
      v-model="dialogVisible"
      style="border-radius: 10px;"
      title="关联广告活动"
      width="1158px"
  >
    <div class="container">
      <div class="container-left">
        <el-input v-model="searchAdCampaign" clearable placeholder="请输入广告活动" style="width: 100%;"
                  @change="handleAdCampaignChange()"></el-input>
        <div class="custom-inline">
          <el-select v-model="selectedCampaignType" placeholder="选择广告类型">
            <el-option v-for="item in campaignType"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"
            ></el-option>
          </el-select>

          <el-select v-model="selectedAdGroup" clearable placeholder="广告组合" style="margin-bottom: 10px;">
            <el-option
                v-for="item in adGroups"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>

          <el-select v-model="selectedStatus" placeholder="状态" style="margin-bottom: 10px;">
            <el-option
                v-for="item in campaignStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <vxe-grid ref="xGridOne" :cell-style="cellStyle" :header-cell-style="headerCellStyle" v-bind="gridOptions"
                  @checkbox-change="handleGridChange" @checkbox-all="handleGridChange">
          <template #campaignName_default="{ row }">
            <el-tag
                v-if="row.campaignType"
                :color="row.campaignType === 'sb' ? '#0163d2' : (row.campaignType === 'sp' ? '#ff7424' : '#365672')"
                class="campaign-type"
                disable-transitions
                round>
              {{ row.campaignType }}
            </el-tag>
            <span>  {{ row.campaignName }}</span>
            <span class="flex-container">
              {{ row.adGroupName }}
            <el-button
                v-if="row.adGroupName && activeModel==='specified'&&!row.isSelected"
                class="btn-link"
                link
                @click="handleSelectTarget(row)">
              选择定向
            </el-button>
            <span v-else-if="row.adGroupName">已选择定向</span>
            </span>
          </template>
        </vxe-grid>
        <div class="pagination-container mt-4">
          <el-pagination
              v-model:current-page="currentPage"
              :page-size="pageSize"
              :page-sizes="[10, 25, 50,100,200]"
              :total="total"
              background
              layout="total,sizes,prev, next, jumper"
              small
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <div class="container-right">
        <h3>已选择({{ selectedAds.length }})</h3>
        <vxe-grid ref="xGridTwo"
                  :cell-style="cellStyle"
                  :columns="selectedColumns"
                  :data="selectedAds"
                  :header-cell-style="headerCellStyle"
                  :tree-config="treeProps"
                  border="inner"
                  height="484">
          <template #campaignName_default="{ row }">
            <template v-if="!row.adGroupId">
              <!-- 父节点（广告活动） -->
              <el-tag
                  v-if="row.campaignType"
                  :color="row.campaignType === 'sb' ? '#0163d2' : (row.campaignType === 'sp' ? '#ff7424' : '#365672')"
                  class="campaign-type"
                  disable-transitions
                  round>
                {{ row.campaignType }}
              </el-tag>
              <span>{{ row.campaignName }}</span>
            </template>
            <template v-else>
              <!-- 子节点（广告组） -->
              <div class="flex-container">
                <span>{{ row.adGroupName }}</span>
                <el-button
                    v-if="row.isSelected"
                    :icon="DocumentAdd"
                    class="btn-link"
                    link
                    @click="handleSelectTarget(row)">
                  共{{ row.targetLength }}个定向规则
                </el-button>
              </div>
            </template>
          </template>
          <template #header_operation>
            <el-button link size="default" style="color: #2077d7" @click="removeAllSelectedAds">删除全部</el-button>
          </template>
          <template #default_operation="{row}">
            <el-button type="text" @click="removeSelectedAd(row)">
              <CircleClose style="width:16px;color:#4b5765" />
            </el-button>
          </template>
        </vxe-grid>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
  <TargetRuleDialog v-if="activeModel === 'specified'"
                    v-model="targetRuleDialogVisible"
                    :selectedTargetedRow="selectedTargetedRow"
                    @confirm:targetRule="handleConfirm"
  ></TargetRuleDialog>
</template>

<style scoped>
.pagination-container {
  display: flex;
  flex-direction: row-reverse;
}

.custom-inline {
  display: flex;
  justify-content: space-around;
  margin: 12px 0;
  gap: 4px;
}

.campaign-type {
  /* width: 35px; */
  /* text-align: center; */
  /* height: 22px; */
  /* font-size: 13px; */
  /* font-weight: 400; */
  color: #fff;
  border-color: #fff;
  /* line-height: 21px; */
  border-radius: 12px;
  margin-right: 4px;
}

.container {
  width: 100%;
  height: 100%;
  border: 1px solid #d6dbe2;
  border-radius: 4px;
  display: flex;
  overflow: hidden;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: row;
  /* padding: 10px; */
}

.container-left {
  width: 50%;
  border-right: 1px solid #d6dbe2;
  padding: 15px
}

.container-right {
  flex: 1;
  padding: 15px
}

.btn-link {
  font-size: 13px;
  color: #0085ff;
  /* ling-heigt: 23px; */
}

.flex-container {
  display: flex;
  justify-content: space-between;
}

</style>