RING:建计划组件数据收集

src/views/put/component/check-box.vue

@@ -38,6 +38,7 @@
           <span>{{ item.label }}</span>
           <i class="iconfont icon-guanbi" @click="deleteItem(item)"></i>
         </p>
+        <a-empty v-show="checkedList.length === 0"></a-empty>
       </div>
     </div>
   </div>
@@ -55,7 +56,7 @@ import {
 } from "./plan-data";
 
 const CheckBox = defineComponent({
-  props: ["compType"],
+  props: ["compType", "showList"],
   setup() {
     const state = reactive({
       list: ref<any[]>([]),
@@ -82,18 +83,6 @@ const CheckBox = defineComponent({
   },
   mounted() {
     this.type = this.$props.compType ?? 1;
-    // this.list = [
-    //   { label: "测试1", value: 1 },
-    //   { label: "测试2", value: 2 },
-    //   { label: "测试3", value: 3 },
-    //   { label: "测试4", value: 4 },
-    //   { label: "测试5", value: 5 },
-    //   { label: "测试6", value: 6 },
-    //   { label: "测试7", value: 7 },
-    //   { label: "测试8", value: 8 },
-    //   { label: "测试9", value: 9 },
-    //   { label: "测试10", value: 10 },
-    // ];
     switch (this.type) {
       case 1:
         this.list = articleClassify;
@@ -108,6 +97,7 @@ const CheckBox = defineComponent({
         this.list = openDirection;
         break;
     }
+    this.showData(this.$props.showList);
   },
   methods: {
     // 全部清空
@@ -125,6 +115,29 @@ const CheckBox = defineComponent({
       this.checkAll = this.checkedList.length === this.list.length;
     },
     // 全选操作
+    // 获取父组件数据-回显
+    showData(arr: any) {
+      console.log(arr);
+      console.log(this.list);
+      this.checkedList = [];
+      if (arr.length > 0) {
+        this.list.forEach((item) => {
+          if (arr.includes(item.value)) this.checkedList.push(item);
+        });
+      }
+      console.log("回显数据", this.checkedList);
+    },
+    // 返回给父组件数据
+    backData() {
+      console.log("checkbox返回数据");
+      let arr: any = [];
+      if (this.checkedList.length > 0) {
+        this.checkedList.forEach((item) => {
+          arr.push(item.value);
+        });
+      }
+      return arr;
+    },
   },
 });
 

src/views/put/component/direction-exclusion.vue

@@ -125,42 +125,42 @@ const DirectionExclusion = defineComponent({
         {
           name: "测试人群包A测试人群包A测试人群包A",
           time: "2020-01-10",
-          id: "1",
+          id: 1,
         },
         {
           name: "测试人群包B",
           time: "2020-01-10",
-          id: "2",
+          id: 2,
         },
         {
           name: "测试人群包B",
           time: "2020-01-10",
-          id: "3",
+          id: 3,
         },
         {
           name: "测试人群包B",
           time: "2020-01-10",
-          id: "4",
+          id: 4,
         },
         {
           name: "测试人群包B",
           time: "2020-01-10",
-          id: "5",
+          id: 5,
         },
         {
           name: "测试人群包B",
           time: "2020-01-10",
-          id: "6",
+          id: 6,
         },
         {
           name: "测试人群包B",
           time: "2020-01-10",
-          id: "7",
+          id: 7,
         },
         {
           name: "测试人群包B",
           time: "2020-01-10",
-          id: "8",
+          id: 8,
         },
       ],
       directionList: {
@@ -181,7 +181,10 @@ const DirectionExclusion = defineComponent({
   },
   methods: {
     async getList() {
-      let { data } = await getMediaPackage({ advertiser_id: this.$route.query.advertiser_id, page: 999 });
+      let { data } = await getMediaPackage({
+        advertiser_id: this.$route.query.advertiser_id,
+        page: 999,
+      });
       console.log("定向包数据", data);
     },
     // 添加定向
@@ -248,6 +251,35 @@ const DirectionExclusion = defineComponent({
         );
       });
     },
+
+    // 获取父组件数据回显
+    showData(directionArr: any, exclusionArr: any) {
+      if (directionArr.length > 0) {
+        this.list.forEach((item) => {
+          if (directionArr.includes(item.value)) {
+            this.directionList.idList.push(item.value);
+            this.directionList.itemList.push(item);
+          }
+        });
+      }
+      if (exclusionArr.length > 0) {
+        this.list.forEach((item) => {
+          if (exclusionArr.includes(item.value)) {
+            this.exclusionList.idList.push(item.value);
+            this.exclusionList.itemList.push(item);
+          }
+        });
+      }
+    },
+    // 返回给父组件数据
+    backData() {
+      console.log(this.directionList);
+      let data = {
+        direction: this.directionList.idList,
+        exclusion: this.exclusionList.idList,
+      };
+      return data;
+    },
   },
 });
 

src/views/put/component/location-auto-release.vue

@@ -1020,19 +1020,65 @@ export default {
       this.checkedCounties = [];
       this.getPostData();
     },
+    // 返回给父组件数据
+    backData() {
+      let type = "",
+        list = [];
+      if (this.activeName === "city") {
+        type = "CITY";
+        if (this.finnalCityList.length > 0) {
+          this.finnalCityList.forEach((item) => {
+            list.push(Number(item));
+          });
+        }
+      } else if (this.activeName === "county") {
+        type = "COUNTY";
+        if (this.checkedCounties.length > 0) {
+          this.checkedCounties.forEach((item) => {
+            list.push(Number(item.value));
+          });
+        }
+      } else {
+        type = "NONE";
+        list = [];
+      }
+      console.log("最终数据-city", this.finnalCityList);
+      console.log("最终数据-county", this.checkedCounties);
+      let data = {
+        type,
+        list,
+      };
+      return data;
+    },
   },
 };
 </script>
 <style lang="scss" scope>
 // @import "@/assets/common-style/scroll-bar.scss";
-::-webkit-scrollbar {
-  width: 8px;
-}
+
 .city-box {
   width: 1000px;
   .el-tabs__nav-scroll {
     padding-left: 0px !important;
   }
+  ::-webkit-scrollbar {
+    width: 4px;
+  }
+  .list-box::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
+    height: 2px;
+  }
+  ::-webkit-scrollbar {
+    width: 4px;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: #e4e4e4;
+    border-radius: 8px;
+  }
+  ::-webkit-scrollbar-track-piece {
+    background: transparent;
+  }
 }
 // 省市搜索框
 .inline-input {

src/views/put/component/time-schedule.vue

@@ -215,6 +215,9 @@ export default {
       });
       this.$emit("triggertime", this.timeList.join(""));
     },
+    backData() {
+      return this.timeList.join("");
+    },
   },
 };
 </script>

src/views/put/plan-create/group-select.vue

@@ -70,9 +70,9 @@
           <div class="table-title"><h3>广告组名称</h3></div>
           <div class="list-box">
             <a-radio-group v-model:value="form.campaign_id">
-              <!-- <a-radio :style="radioStyle" :value="1"
+              <a-radio :style="radioStyle" :value="1"
                 >广告组1 <span class="desc">测试广告组</span></a-radio
-              > -->
+              >
               <a-radio
                 :style="radioStyle"
                 v-for="(item, index) in []"

src/views/put/plan-create/plan-edit.vue

@@ -116,7 +116,7 @@
         <!-- 地域组件 -->
         <a-form-item label="地域">
           <!-- 组件数据接入DDD -->
-          <location :checkedCity="'[]'"></location>
+          <location :checkedCity="'[]'" ref="cityCom"></location>
         </a-form-item>
         <a-form-item label="性别">
           <a-radio-group v-model:value="plan.gender">
@@ -126,7 +126,11 @@
           </a-radio-group>
         </a-form-item>
         <a-form-item label="年龄">
-          <a-checkbox-group v-model:value="plan.age" style="width: 700px">
+          <a-checkbox-group
+            v-model:value="plan.age"
+            style="width: 700px"
+            @change="checkboxChange($event, 'age')"
+          >
             <a-checkbox value="NONE">不限</a-checkbox>
             <a-checkbox value="AGE_BETWEEN_18_23">18-23</a-checkbox>
             <a-checkbox value="AGE_BETWEEN_24_30">24-30</a-checkbox>
@@ -143,6 +147,7 @@
           </a-radio-group>
           <!-- 组件数据待接入DDD -->
           <direction-exclusion
+            ref="crowdCom"
             :compType="'crowd'"
             v-if="userTarget.crowdType === 'CUSTOM'"
           ></direction-exclusion>
@@ -162,12 +167,16 @@
           </a-radio-group>
           <!-- 组件数据接入DDD -->
           <direction-exclusion
+            ref="mediaCom"
             :compType="'media'"
             v-if="userTarget.mediaTarget === 'CUSTOM'"
           ></direction-exclusion>
         </a-form-item>
         <a-form-item label="平台">
-          <a-checkbox-group v-model:value="plan.platform">
+          <a-checkbox-group
+            v-model:value="plan.platform"
+            @change="checkboxChange($event, 'platform')"
+          >
             <a-checkbox value="NONE">不限</a-checkbox>
             <a-checkbox value="IOS">ios</a-checkbox>
             <a-checkbox value="ANDROID">Android</a-checkbox>
@@ -175,14 +184,20 @@
           </a-checkbox-group>
         </a-form-item>
         <a-form-item label="设备类型">
-          <a-checkbox-group v-model:value="plan.device_type">
+          <a-checkbox-group
+            v-model:value="plan.device_type"
+            @change="checkboxChange($event, 'device_type')"
+          >
             <a-checkbox value="NONE">不限</a-checkbox>
             <a-checkbox value="MOBILE">智能手机</a-checkbox>
             <a-checkbox value="PAD">平板</a-checkbox>
           </a-checkbox-group>
         </a-form-item>
         <a-form-item label="网络">
-          <a-checkbox-group v-model:value="plan.ac">
+          <a-checkbox-group
+            v-model:value="plan.ac"
+            @change="checkboxChange($event, 'ac')"
+          >
             <a-checkbox value="unknown">不限</a-checkbox>
             <a-checkbox value="WIFI">Wi-Fi</a-checkbox>
             <a-checkbox value="2G">2G</a-checkbox>
@@ -228,12 +243,17 @@
           </a-radio-group>
           <!-- 组件数据接入DDD -->
           <check-box
+            ref="articleCom"
             :compType="1"
+            :showList="[]"
             v-if="userTarget.articleType === 'CLASSIFY'"
           ></check-box>
         </a-form-item>
         <a-form-item label="运营商">
-          <a-checkbox-group v-model:value="plan.carrier">
+          <a-checkbox-group
+            v-model:value="plan.carrier"
+            @change="checkboxChange($event, 'carrier')"
+          >
             <a-checkbox value="NONE">不限</a-checkbox>
             <a-checkbox value="MOBILE">移动</a-checkbox>
             <a-checkbox value="UNICOM">联通</a-checkbox>
@@ -244,6 +264,7 @@
           <a-checkbox-group
             v-model:value="plan.activate_type"
             style="width: 600px"
+            @change="checkboxChange($event, 'activate_type')"
           >
             <a-checkbox value="NONE">不限</a-checkbox>
             <a-checkbox value="WITH_IN_A_MONTH">一个月以内</a-checkbox>
@@ -261,7 +282,9 @@
           </a-radio-group>
           <!-- 组件数据接入DDD -->
           <check-box
+            ref="brandCom"
             :compType="2"
+            :showList="[]"
             v-if="userTarget.deviceBrand === 'BRAND'"
           ></check-box>
         </a-form-item>
@@ -322,7 +345,9 @@
           </a-radio-group>
           <!-- 组件数据待接入DDD -->
           <check-box
+            ref="workCom"
             :compType="3"
+            :showList="[]"
             v-if="userTarget.workStatus === 'STATUS'"
           ></check-box>
         </a-form-item>
@@ -333,7 +358,12 @@
             checked-children="开"
             un-checked-children="关"
           />
-          <check-box :compType="4" v-if="plan.auto_extend_enabled"></check-box>
+          <check-box
+            ref="extendCom"
+            :compType="4"
+            :showList="[]"
+            v-if="plan.auto_extend_enabled"
+          ></check-box>
         </a-form-item>
         <p style="line-height: 40px; width: 700px; text-align: right">
           <a-button @click="saveDirectPackage">保存为定向包</a-button>
@@ -374,6 +404,7 @@
             <a-radio value="CUSTOM">指定时间段</a-radio>
           </a-radio-group>
           <time-schedule
+            ref="timeCom"
             style="width: 800px; margin-top: 10px"
             v-if="userTarget.timeDuration === 'CUSTOM'"
           ></time-schedule>
@@ -456,6 +487,14 @@ const PlanEdit = defineComponent({
     CheckBox,
   },
   setup() {
+    const cityCom: any = ref(null); // 地域组件
+    const crowdCom: any = ref(null); // 人群组件
+    const mediaCom: any = ref(null); // 媒体组件
+    const timeCom: any = ref(null); // 时段组件
+    const articleCom: any = ref(null); // 文章分类组件
+    const workCom: any = ref(null); // 工作状态组件
+    const brandCom: any = ref(null); // 手机品牌组件
+    const extendCom: any = ref(null); // 智能放量组件
     const state = reactive({
       // 页面变量
       userTarget: {
@@ -471,6 +510,7 @@ const PlanEdit = defineComponent({
       },
       plan: {
         // part1 优化目标----------------------------------------------------
+        convert_type: "转化跟踪方式", // 转化跟踪方式
         external_url: undefined, // 落地页
         open_url: "", // 直达链接内容
         // part2 投放位置----------------------------------------------------
@@ -534,14 +574,22 @@ const PlanEdit = defineComponent({
       ...toRefs(state),
       labelCol: { span: 3 },
       wrapperCol: { span: 8 },
+      cityCom,
+      crowdCom,
+      mediaCom,
+      timeCom,
+      articleCom,
+      workCom,
+      brandCom,
+      extendCom,
     };
   },
   mounted() {
     Bus.$on("stepThreeCheck", (val?: any) => {
       console.log("Step3Check");
-      Bus.$emit("stepThreeBack");
+      // Bus.$emit("stepThreeBack");
       // console.log("接口");
-      // this.beforeCommit();
+      this.beforeCommit();
     });
   },
   methods: {
@@ -549,6 +597,38 @@ const PlanEdit = defineComponent({
     beforeCommit() {
       let data: any = {};
       data = JSON.parse(JSON.stringify(this.plan));
+      //  一、组件数据收集
+      // 1.地域组件
+      data.district = this.cityCom.backData().type;
+      data.city = this.cityCom.backData().list;
+      // 2.定向排除-人群组件
+      data.retargeting_tags_include = this.crowdCom
+        ? this.crowdCom.backData().direction
+        : []; // 定向
+      data.retargeting_tags_exclude = this.crowdCom
+        ? this.crowdCom.backData().exclusion
+        : []; // 排除
+      // 3.定向排除-媒体组件
+      data.flow_package = this.mediaCom
+        ? this.mediaCom.backData().direction
+        : []; // 定向
+      data.exclude_flow_package = this.mediaCom
+        ? this.mediaCom.backData().exclusion
+        : []; // 排除
+      // 4.checkbox-文章分类
+      data.article_category = this.articleCom ? this.articleCom.backData() : [];
+      // 5.checkbox-手机品牌
+      data.device_brand = this.brandCom ? this.brandCom.backData() : [];
+      // 6.checkbox-职业状态
+      data.career = this.workCom ? this.workCom.backData() : [];
+      // 7.checkbox-智能放量
+      data.auto_extend_targets = this.extendCom
+        ? this.extendCom.backData()
+        : [];
+      // 8.投放时段
+      data.schedule_time = this.timeCom ? this.timeCom.backData() : [];
+
+      // 二、数据处理
       // 1.搜索快投关键词 feed_delivery_search--true=>HAS_OPEN, false=>DISABLED
       data.feed_delivery_search = data.feed_delivery_search
         ? "HAS_OPEN"
@@ -587,6 +667,8 @@ const PlanEdit = defineComponent({
       delete data.number;
 
       // 调用接口
+      console.log("data", data);
+      return;
       this.savePlan(data);
     },
     // 保存数据
@@ -628,6 +710,7 @@ const PlanEdit = defineComponent({
         ? planOrigin.activate_type
         : ["NONE"];
       // 5.根据是否有article_category  字段判断页面变量文章分类
+      // planOrigin.article_category= ['SOCIETY', 'ENTERTAINMENT', 'CARS']
       this.userTarget.articleType = planOrigin.article_category
         ? "CLASSIFY"
         : "NONE";
@@ -646,6 +729,92 @@ const PlanEdit = defineComponent({
         ? "CUSTOM"
         : "NONE";
     },
+    // 多选框互斥
+    checkboxChange(val: any, type: any) {
+      // 年龄互斥
+      if (type === "age") {
+        this.$nextTick(() => {
+          if (this.plan.age.indexOf("NONE") == 0 && this.plan.age.length > 1) {
+            this.plan.age.splice(this.plan.age.indexOf("NONE"), 1);
+          } else if (this.plan.age.indexOf("NONE") > 0) {
+            this.plan.age = ["NONE"];
+          }
+          if (this.plan.age.length === 0) this.plan.age = ["NONE"];
+        });
+      }
+      // 平台互斥
+      if (type === "platform") {
+        this.$nextTick(() => {
+          if (
+            this.plan.platform.indexOf("NONE") == 0 &&
+            this.plan.platform.length > 1
+          ) {
+            this.plan.platform.splice(this.plan.platform.indexOf("NONE"), 1);
+          } else if (this.plan.platform.indexOf("NONE") > 0) {
+            this.plan.platform = ["NONE"];
+          }
+          if (this.plan.platform.length === 0) this.plan.platform = ["NONE"];
+        });
+      }
+      // 设备类型互斥
+      if (type === "device_type") {
+        if (
+          this.plan.device_type.indexOf("NONE") == 0 &&
+          this.plan.device_type.length > 1
+        ) {
+          this.plan.device_type.splice(
+            this.plan.device_type.indexOf("NONE"),
+            1
+          );
+        } else if (this.plan.device_type.indexOf("NONE") > 0) {
+          this.plan.device_type = ["NONE"];
+        }
+        if (this.plan.device_type.length === 0)
+          this.plan.device_type = ["NONE"];
+      }
+      // 网络互斥
+      if (type === "ac") {
+        console.log("acccc");
+        if (this.plan.ac.indexOf("unknown") == 0 && this.plan.ac.length > 1) {
+          this.plan.ac.splice(this.plan.ac.indexOf("unknown"), 1);
+        } else if (this.plan.ac.indexOf("unknown") > 0) {
+          this.plan.ac = ["unknown"];
+        }
+        if (this.plan.ac.length === 0) this.plan.ac = ["unknown"];
+      }
+      // 运营商互斥
+      if (type === "carrier") {
+        this.$nextTick(() => {
+          if (
+            this.plan.carrier.indexOf("NONE") == 0 &&
+            this.plan.carrier.length > 1
+          ) {
+            this.plan.carrier.splice(this.plan.carrier.indexOf("NONE"), 1);
+          } else if (this.plan.carrier.indexOf("NONE") > 0) {
+            this.plan.carrier = ["NONE"];
+          }
+          if (this.plan.carrier.length === 0) this.plan.carrier = ["NONE"];
+        });
+      }
+      // 新用户互斥
+      if (type === "activate_type") {
+        this.$nextTick(() => {
+          if (
+            this.plan.activate_type.indexOf("NONE") == 0 &&
+            this.plan.activate_type.length > 1
+          ) {
+            this.plan.activate_type.splice(
+              this.plan.activate_type.indexOf("NONE"),
+              1
+            );
+          } else if (this.plan.activate_type.indexOf("NONE") > 0) {
+            this.plan.activate_type = ["NONE"];
+          }
+          if (this.plan.activate_type.length === 0)
+            this.plan.activate_type = ["NONE"];
+        });
+      }
+    },
     // 用户定向保存为定向包
     saveDirectPackage() {
       console.log("保存定向包");
@@ -657,6 +826,14 @@ const PlanEdit = defineComponent({
       if (val === true) return 1;
       if (val === false) return 0;
     },
+    // 互斥项切换-工具函数
+    checkboxCheck(val: string) {
+      // if (this.plan[val].indexOf("NONE") == 0 && this.plan[val].length > 1) {
+      //       this.plan[val].splice(this.plan[val].indexOf("NONE"), 1);
+      //     } else if (this.plan[val].indexOf("NONE") > 0) {
+      //       this.plan[val] = ["NONE"];
+      //     }
+    },
   },
   beforeUnmount() {
     Bus.$off("stepThreeCheck");