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

<script lang="ts" setup>
/**
 * @Name: adActivityDialog.vue
 * @Description:广告关联活动弹窗
 * @Author: xinyan
 */
import { computed, onMounted, reactive, ref, toRefs, watch } from 'vue';
import { getAdGroupList, getRelationCampaign, updateAdCampaign } 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', 'confirmSuccess']);
const shopInfo = useShopInfo();
const { profile } = storeToRefs(shopInfo);
const { templateId } = toRefs(props);
const { activeModel } = toRefs(props);

const dialogVisible = ref(false);
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 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,
    checkMethod: ({ row }) => {
      if (activeModel.value === 'specified') {
        // 如果是 specified 模式，只有已选择的行可以被取消选中
        return row.isSelected;
      }
      return true; // 其他模式下都可以选中
    }
  },
  columns: computed(() => [
    {
      field: 'campaignName',
      title: '广告活动',
      slots: { default: 'campaignName_default' },
      treeNode: activeModel.value == 'specified' || activeModel.value == 'adGroup'
    },
    {
      type: 'checkbox',
      width: 55,
      fixed: 'right',
      slots: activeModel.value == 'specified' ? { header: 'checkbox_header', checkbox: 'checkbox_cell' } : ''
    },
  ]),
  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];
    if (profile.value.profile_id && templateId.value){
    const resp = await getRelationCampaign({
      profileId: profile.value.profile_id,
      templateId: templateId.value,
      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 handleGridChange({ records, row, checked }) {
  if (activeModel.value === 'specified') {
    if (row) {
      if (!checked) {
        row.isSelected = false;
        updateSelectedAds();
      }
    } else {
      // 全选/取消全选
      records.forEach(record => {
        if (record.isSelected) {
          record.isSelected = checked;
        }
      });
      updateSelectedAds();
    }
  } else if (activeModel.value === 'adGroup') {
    handleSelectionChange({ records });
  } else {
    handelSelect({ records });
  }
}

function toggleCheckboxEvent(row) {
  if (activeModel.value === 'specified') {
    if (row.isSelected) {
      // 只有已选择的行可以被取消选中
      xGridOne.value.setCheckboxRow(row, false);
      handleGridChange({ records: [row], row, checked: false });
    }
  } else {
    // 其他模式下正常切换复选框状态
    xGridOne.value.toggleCheckboxRow(row);
  }
}

// 非树形结构的表格选择变化
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
      }));
  console.log('selectedAds.value', selectedAds.value);
}

// 树形结构的表格选择变化
function handleSelectionChange({ records }) {
  selectedGroups = selectedGroups.filter(group => {
    return records.some(record => record.adGroupId === group.adGroupId);
  });

  let updatedRecords = [];
  const parentCampaignMap = new Map();
  records.forEach(record => {
    if (record.adGroupId) {
      // 这是一个广告组（子节点）
      const parentCampaign = gridOptions.data.find(campaign =>
          campaign.campaignGroupInfo.some(group => group.adGroupId === record.adGroupId)
      );
      if (parentCampaign) {
        // 如果父节点已经存在，则将子节点添加到父节点的 campaignGroupInfo 中
        if (parentCampaignMap.has(parentCampaign.campaignId)) {
          parentCampaignMap.get(parentCampaign.campaignId).campaignGroupInfo.push(record);
        } else {
          // 如果父节点不存在，则创建一个新的父节点对象
          parentCampaignMap.set(parentCampaign.campaignId, {
            campaignType: parentCampaign.campaignType,
            campaignId: parentCampaign.campaignId,
            campaignName: parentCampaign.campaignName,
            campaignGroupInfo: [record]
          });
        }
      }
    }
  });

  // 将所有父节点对象添加到 updatedRecords
  updatedRecords = Array.from(parentCampaignMap.values());

  // 更新选中的广告
  selectedAds.value = [
    ...updatedRecords.map(ad => ({ ...ad, page: currentPage.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,
    keywordInfo: row.keywordInfo || [],
    campaignTargetInfo: row.campaignTargetInfo || [],
  };
  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);
    }

    // 勾选表格1中的对应行，只有在定向大于0时进行勾选
    if (group && group.targetLength > 0) {
      if (xGridOne.value) {
        xGridOne.value.toggleCheckboxRow(group, true); // 手动勾选复选框
      }
    }
  }
  // 更新选中的广告
  updateSelectedAds();
}

// 删除选中的广告
const removeSelectedAd = async (row) => {
  const $grid = xGridTwo.value;
  if ($grid) {
    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);
  }

  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: 确认按钮-adGroupInfo
async function confirm() {
  const campaignItems = selectedAds.value.map(ad => ({
    campaignId: ad.campaignId,
    campaignType: ad.campaignType
  }));

  let campaignKeywordInfo = [];
  let campaignTargetInfo = [];

  selectedAds.value.forEach(campaign => {
    campaign.campaignGroupInfo.forEach(group => {
      if (group.keywordInfo && group.keywordInfo.length > 0) {
        campaignKeywordInfo = campaignKeywordInfo.concat(
            group.keywordInfo.map(keyword => ({
              keywordId: keyword.keywordId,
              adGroup_id: group.adGroupId,
              bid: keyword.bid
            }))
        );
      }
      if (group.campaignTargetInfo && group.campaignTargetInfo.length > 0) {
        campaignTargetInfo = campaignTargetInfo.concat(
            group.campaignTargetInfo.map(target => ({
              targetId: target.targetId,
              adGroup_id: group.adGroupId,
              bid: target.bid
            }))
        );
      }
    });
  });

  const requestData = {
    profileId: profile.value.profile_id,
    templateId: templateId.value,
    campaignItems: campaignItems,
    adGroupInfo: [],
    campaignTargetInfo,
    campaignKeywordInfo
  };
  console.log('requestData', requestData);
  try {
    const response = await updateAdCampaign(requestData);
    if (response.code === 2000) {
      dialogVisible.value = false;
      emits('confirmSuccess');
      ElMessage({ message: '创建成功', type: 'success', });
    }
  } catch (error) {
    console.error('API error:', error);
    ElMessage({ message: '创建失败', type: 'error', });
  }
}

// 获取广告组下拉框
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>
          <template #checkbox_header="{ checked, indeterminate }">
        <span class="custom-checkbox" @click.stop="toggleAllCheckboxEvent">
          <i v-if="indeterminate" class="vxe-icon-square-minus-fill" style="color: #0d84ff"></i>
          <i v-else-if="checked" class="vxe-icon-square-checked-fill" style="color: #0d84ff"></i>
          <i v-else class="vxe-icon-checkbox-unchecked" style="color: #0d84ff"></i>
        </span>
          </template>
          <template #checkbox_cell="{ row, checked, indeterminate }">
            <span class="custom-checkbox" @click.stop="toggleCheckboxEvent(row)">
              <i v-if="indeterminate" class="vxe-icon-square-minus-fill" style="color: #0d84ff"></i>
              <i v-else-if="checked" class="vxe-icon-square-checked-fill" style="color: #0d84ff"></i>
              <el-tooltip v-else
                          class="box-item"
                          content="请选择定向"
                          effect="dark"
                          placement="top"
              >
                <i class="vxe-icon-checkbox-unchecked" style="color: #0d84ff"></i>
              </el-tooltip>
            </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>