自动化规则

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

@@ -40,7 +40,8 @@ const targetRuleDialogVisible = ref(false);
 //const adGroupId = ref('')
 //const campaignId = ref('')
 const selectedTargetedRow = ref(null);
-const KeyWordLength = ref(0);
+const targetLength = ref(0);
+let selectedGroups = [];
 
 // 筛选条件
 const searchAdCampaign = ref('');
@@ -146,17 +147,8 @@ async function fetchAdCampaign() {
       limit: pageSize.value,
     });
     gridOptions.data = resp.data;
-    console.log('=>(adActivityDialog.vue:131) gridOptions.data', gridOptions.data);
     total.value = resp.total;
     currentPage.value = resp.page;
-    // 恢复勾选状态
-    // nextTick(() => {
-    //   gridOptions.data.forEach(item => {
-    //     const isSelected = selectedAds.value.some(ad => ad.campaignId === item.campaignId);
-    //     // 如果在 selectedAds 中，则勾选
-    //     xGridOne.value.setCheckboxRow(item, isSelected);
-    //   });
-    // });
   } catch (error) {
     ElMessage.error('请求广告活动数据失败');
   } finally {
@@ -173,19 +165,19 @@ const handleGridChange = (event) => {
 };
 
 function handelSelect({ records }) {
-  console.log('=>(adActivityDialog.vue:147) records', records);
   selectedAds.value = [
     ...selectedAds.value.filter(ad => ad.page !== currentPage.value),
     ...records.map(ad => ({ ...ad, page: currentPage.value }))
   ];
-  console.log('=>(adActivityDialog.vue:148) 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.isSelected = false;
   records.forEach(record => {
     if (record.adGroupId) {
       // 这是一个广告组（子节点）
@@ -214,9 +206,9 @@ function handleSelectionChange({ records }) {
 
   // 更新选中的广告
   selectedAds.value = [
-    ...updatedRecords.map(ad => ({ ...ad, page: currentPage.value }))
+    ...updatedRecords.map(ad => ({ ...ad, page: currentPage.value })),
   ];
-  console.log("=>(adActivityDialog.vue:217) selectedAds.value", selectedAds.value);
+  console.log("=>(adActivityDialog.vue:209) selectedAds.value", selectedAds.value);
 
 }
 
@@ -237,12 +229,16 @@ function handleSelectTarget(row) {
   targetRuleDialogVisible.value = true;
 }
 
-let selectedGroups = [];
 
-function handleConfirm(campaignKeywordInfo) {
-  selectedTargetedRow.value.keywordInfo = campaignKeywordInfo;
+function handleConfirm({ campaignInfo, targetType }) {
+  if (targetType === 'keyword'){
+    selectedTargetedRow.value.keywordInfo = campaignInfo;
+    targetLength.value = selectedTargetedRow.value.keywordInfo.length;
+  }else if (targetType ==='target'){
+    selectedTargetedRow.value.campaignTargetInfo = campaignInfo;
+    targetLength.value = selectedTargetedRow.value.campaignTargetInfo.length;
+  }
   selectedTargetedRow.value.isSelected = true;
-  KeyWordLength.value = selectedTargetedRow.value.keywordInfo.length;
   // 更新子节点状态
   const parent = gridOptions.data.find(ad =>
       ad.campaignGroupInfo && ad.campaignGroupInfo.some(group => group.adGroupId === selectedTargetedRow.value.adGroupId)
@@ -254,8 +250,6 @@ function handleConfirm(campaignKeywordInfo) {
       group.isSelected = true; // 更新子节点的 isSelected 状态
       xGridOne.value.toggleCheckboxRow(group);
       selectedGroups.push(group);
-      console.log("=>(adActivityDialog.vue:322) selectedGroups", selectedGroups);
-      // 将 group 作为 records 数组传递
       handleSelectionChange({ records: selectedGroups });
     }
   }
@@ -284,7 +278,7 @@ function cancel() {
   dialogVisible.value = false;
 }
 
-//TODO: 确认按钮
+//TODO: 确认按钮-商品
 async function confirm() {
   const campaignItems = selectedAds.value.map(ad => ({
     campaignId: ad.campaignId,
@@ -294,9 +288,13 @@ async function confirm() {
   const campaignTargetInfo = [
     { targetId: '492707808377423', adGroup_id: '448117369011017', bid: 0.45 },
   ];
-  const campaignKeywordInfo = [
-    { keywordId: '416969576305724', adGroup_id: '393554556566271', bid: 0.04 },
-  ];
+  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,
@@ -304,9 +302,9 @@ async function confirm() {
     campaignItems,
     adGroupInfo,
     campaignTargetInfo,
-    campaignKeywordInfo
+    campaignInfo
   };
-  //console.log('requestData', requestData);
+  console.log('requestData', requestData);
 }
 
 // 获取广告组下拉框
@@ -483,7 +481,7 @@ onMounted(() => {
                   class="btn-link"
                   link
                   @click="handleSelectTarget(row)">
-              共{{ KeyWordLength }}个定向规则
+              共{{ targetLength }}个定向规则
             </el-button>
             </span>
           </template>

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

@@ -4,11 +4,12 @@
  * @Description: 关联广告活动-选择定向弹窗
  * @Author: xinyan
  */
-import { onMounted, reactive, ref, watch } from 'vue';
+import { provide, 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,
@@ -23,29 +24,36 @@ 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 campaignInfo = ref(null);
 
 // 查询、筛选条件
 const matchType = ref('');
 const keyWord = ref('');
 
+const targetType = ref(null);
+
+const keyWordColumn = ref([
+  { field: 'keywordText', title: '关键词', width: 220, },
+  { field: 'matchType', title: '匹配方式', formatter: ({ cellValue }) => getMatchTypeLabel(cellValue).label, },
+  { type: 'checkbox', align: 'right', width: 55 }
+]);
+const targetColumn = ref([
+  { field: 'expressionDesc', title: '品牌', slots: { default: 'expressionDesc_default' } },
+  { type: 'checkbox', align: 'right', width: 55 }
+]);
+
+const keyWordData = [];
+const targetData = [];
+
 const gridOptions = reactive({
   height: 550,
   showOverflow: true,
   loading: false,
   rowConfig: {
     isHover: true,
-    height: 34
+    height: 85,
   },
-  columns: [
-    { field: 'keywordText', title: '关键词', width: 220 },
-    {
-      field: 'matchType',
-      title: '匹配方式',
-      formatter: ({ cellValue }) => getMatchTypeLabel(cellValue).label,
-    },
-    { type: 'checkbox', align: 'right', width: 55 }
-  ],
+  columns: [],
   data: []
 });
 
@@ -59,6 +67,15 @@ async function fetchTargetRuleList() {
       matchType: matchType.value,
       search: keyWord.value,
     });
+    targetType.value = resp.data.targetType;
+    // 动态设置表格列
+    if (resp.data.targetType === 'keyword') {
+      gridOptions.columns = keyWordColumn;
+      gridOptions.rowConfig.height = 34;
+    } else if (resp.data.targetType === 'target') {
+      gridOptions.rowConfig.height = 85;
+      gridOptions.columns = targetColumn;
+    }
     gridOptions.data = resp.data.targetData;
     gridOptions.loading = false;
   } catch (error) {
@@ -67,7 +84,7 @@ async function fetchTargetRuleList() {
 }
 
 function handleCheckChange({ records }) {
-  campaignKeywordInfo.value = records;
+  campaignInfo.value = records;
 }
 
 function getMatchTypeLabel(type: string) {
@@ -84,13 +101,16 @@ function cancel() {
 
 async function confirm() {
   targetRuleDialogVisible.value = false;
-  emits('confirm:targetRule', campaignKeywordInfo.value);
+  emits('confirm:targetRule', {
+    campaignInfo: campaignInfo.value,
+    targetType: targetType.value, // 将 targetType 作为参数传递给父组件
+  });
 }
 
 const headerCellStyle = () => {
   return {
     fontSize: '13px',
-    height: '34px',
+    // height: '34px',
   };
 };
 
@@ -113,9 +133,9 @@ watch(() => props.selectedTargetedRow, () => {
   fetchTargetRuleList();
 });
 
-onMounted(() => {
-  //fetchTargetRuleList();
-});
+// onMounted(() => {
+//   //fetchTargetRuleList();
+// });
 
 </script>
 
@@ -140,8 +160,19 @@ onMounted(() => {
       </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>
+    <vxe-grid :cell-style="cellStyle" :header-cell-style="headerCellStyle" v-bind="gridOptions"
+              v-on="gridEvents" @checkbox-change="handleCheckChange">
+      <template #expressionDesc_default="{ row }">
+        <div v-if="row.expressionDesc.ASIN_CATEGORY_SAME_AS">分类:{{ row.expressionDesc.ASIN_CATEGORY_SAME_AS }}</div>
+        <div v-if="row.expressionDesc.ASIN_BRAND_SAME_AS">品牌:{{ row.expressionDesc.ASIN_BRAND_SAME_AS }}</div>
+        <div v-if="row.expressionDesc.ASIN_PRICE_BETWEEN">商品价格:{{ row.expressionDesc.ASIN_PRICE_BETWEEN }}</div>
+        <div v-if="row.expressionDesc.ASIN_REVIEW_RATING_BETWEEN">评分:{{
+            row.expressionDesc.ASIN_REVIEW_RATING_BETWEEN
+          }}
+        </div>
+        <div v-if="row.expressionDesc.ASIN_SAME_AS">asin:{{ row.expressionDesc.ASIN_SAME_AS }}</div>
+      </template>
+    </vxe-grid>
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="cancel">取消</el-button>

src/views/efTools/utils/columns.ts

@@ -0,0 +1,13 @@
+export const targetColumn = [
+  { field: 'expressionDesc', title: '品牌', },];
+
+export const keyWordColumn = [
+
+  { field: 'keywordText', title: '关键词', width: 220 },
+  {
+    field: 'matchType',
+    title: '匹配方式',
+    formatter: ({ cellValue }) => getMatchTypeLabel(cellValue).label,
+  },
+  { type: 'checkbox', align: 'right', width: 55 }
+];