定向包

src/api/ApiModel.ts

@@ -152,6 +152,7 @@ export interface directPacket extends pageParams{
     device_price?:string,
     account_id?:any,
     type?:string,
+    targeting_id?:string
 }
 
 

src/api/api.ts

@@ -79,7 +79,7 @@ export enum Api{
     //定向包
     directPacket_add = '/api/ad/targetingsAdd',
     directPacket_list = '/api/ad/targetingGet',
-    directPacket_detial = '/api/ad/targetingsUp',
+    directPacket_edit = '/api/ad/targetingsUp',
     directPacket_get_behavior_list = '/api/ad/getOptimizationGoal',
     directPacket_get_customer_base_list = '/api/ad/customAudiencesGet',
     directPacket_user_os_list = '/api/ad/userOsList',

src/components/basisMoudle/layout/index_head.vue

@@ -37,6 +37,8 @@ const size = ref<string>('small')
     padding: 0;
     background-color: #F7F7F7;;
     color: #161E46;
+    height: calc(100vh - 70px);
+    overflow-y: auto;
   }
 }
 </style>

src/components/businessMoudle/batchGdt/configArea/checkGroup.vue

@@ -33,7 +33,7 @@ import {nextTick, onMounted, reactive, ref} from "vue";
 import {reactiveTableAndAny} from "@/api/ApiModel";
 interface Emits {
   (event: "changeEvent", val: string | number | boolean): void;
-  (event: "returnEvent", val: any): void;
+  (event: "returnEvent", val: any,flag?:boolean): void;
 }
 const emit = defineEmits<Emits>();
 
@@ -71,18 +71,17 @@ const changeEvent=(val:any)=>{
   if(flag){
     pageInfo.acIdx = 0
     pageInfo.values = ['unlimited']
-    emit('returnEvent',[{name:'不限',value:'unlimited'}])
+    emit('returnEvent',[{name:'不限',value:'unlimited'}],true)
   }else{
     returnValueEvent()
   }
-
 }
 
 //不限-点击
 const unlimitedChange = () => {
   pageInfo.acIdx = 0
   pageInfo.values = ['unlimited']
-  emit('returnEvent',[{name:'不限',value:'unlimited'}])
+  emit('returnEvent',[{name:'不限',value:'unlimited'}],true)
 }
 
 //返回值
@@ -95,7 +94,7 @@ const returnValueEvent = ()=>{
       }
     })
   })
-  emit('returnEvent',reVal)
+  emit('returnEvent',reVal,true)
 }
 
 // 暴露自己的属性供父组件使用
@@ -105,7 +104,7 @@ defineExpose({
 
 onMounted(()=>{
   nextTick(()=>{
-    emit('returnEvent',[{name:'不限',value:'unlimited'}])
+    emit('returnEvent',[{name:'不限',value:'unlimited'}],false)
   })
 })
 </script>

src/components/businessMoudle/batchGdt/configArea/directPacket/index.vue

@@ -62,25 +62,47 @@ const pageInfo = reactive<reactiveTableAndAny>({
 
 const wayChange = (val:any) => {
   pageInfo.exposeObj.type = val.value
+  if(pageInfo.exposeObj.type=='2'){
+    comRef2.value!.echoChooseList()
+  }else if(pageInfo.exposeObj.type=='1'){
+    comRef.value!.echoChooseList()
+  }
 }
 
 const loading = ref<boolean>(false)
-const comRef = ref<{ExposeChooseList:()=>void,echoInit:()=>void,init:()=>void,clearTableSelect:()=>void}>()
-const comRef2 = ref<{ExposeChooseList:()=>void,echoInit:()=>void,init:()=>void,clearTableSelect:()=>void}>()
+const comRef = ref<{ExposeChooseList:()=>void,echoInit:()=>void,init:()=>void,clearTableSelect:()=>void,echoChooseList:()=>void}>()
+const comRef2 = ref<{ExposeChooseList:()=>void,echoInit:()=>void,init:()=>void,clearTableSelect:()=>void,echoChooseList:()=>void}>()
 
 //确定按钮
 const confirmEvent = () => {
   nextTick(async ()=>{
-    if(pageInfo.exposeObj.type=='1'){ //使用定向包
-      pageInfo.exposeObj.chooseList = _.cloneDeep(comRef.value!.ExposeChooseList())
-      comRef.value!.clearTableSelect()
-    }else if(pageInfo.exposeObj.type=='2'){ //使用定向包内容
-      pageInfo.exposeObj.chooseList = _.cloneDeep(comRef2.value!.ExposeChooseList())
-      comRef2.value!.clearTableSelect()
+    let Obj:any = pageInfo.exposeObj
+    let flag:boolean = true //是否符合条件
+    // 将选中的赋值给本页面
+    if(Obj.type=='1'){ //使用定向包
+      Obj.chooseList = _.cloneDeep(comRef.value!.ExposeChooseList())
+    }else if(Obj.type=='2'){ //使用定向包内容
+      Obj.chooseList = _.cloneDeep(comRef2.value!.ExposeChooseList())
+    }
+    //判断是否符合条件
+    for(var i=0;i<Obj.chooseList.length;i++){
+      let item:any = Obj.chooseList[i]
+      if((item.chooseList && item.chooseList.length<=0) || !item.chooseList){
+        ElMessage.error(item.id+'账户的定向包还未选择!')
+        flag = false
+        break
+      }
+    }
+    // 符合再关闭弹框之类的
+    if(flag) {
+      if(Obj.type=='1'){ //使用定向包
+        comRef.value!.clearTableSelect()
+      }else if(Obj.type=='2'){ //使用定向包内容
+        comRef2.value!.clearTableSelect()
+      }
+      await emit('assignEvent',Obj)
+      dialogShow.value = false
     }
-    console.log(pageInfo.exposeObj);
-    await emit('assignEvent',pageInfo.exposeObj)
-    dialogShow.value = false
   })
 }
 

src/components/businessMoudle/batchGdt/configArea/directPacket/newDirecPacket.vue

@@ -15,8 +15,8 @@
         <Input class="bMar20" ref="InputRef_name" spanTitleWidth="112px" :showTitle="true" title="定向包名称" inputWidth="400px" maxLength="15"/>
         <template v-for="item in pageInfo.jsonInfo">
           {{item.value}}
-          <CheckGroup v-if="item.isMultiple" :checkList="item.list" :haveNotes="item.haveNotes" :haveFlex="item.haveFlex" :title="item.name" :key="item.EgName" @returnEvent="val=>{item.value = val,getEstimation(4)}"></CheckGroup>
-          <RadioGroup v-else :radioList="item.list" :title="item.name"  :haveNotes="item.haveNotes" :haveFlex="item.haveFlex" :key="item.EgName" @returnEvent="val=>reEvent(val,item)">
+          <CheckGroup v-if="item.isMultiple" :checkList="item.list" :haveNotes="item.haveNotes" :haveFlex="item.haveFlex" :title="item.name" :key="item.EgName" @returnEvent="(val,flag)=>reEventCheck(val,item,flag)"></CheckGroup>
+          <RadioGroup v-else :radioList="item.list" :title="item.name"  :haveNotes="item.haveNotes" :haveFlex="item.haveFlex" :key="item.EgName" @returnEvent="(val,flag)=>reEvent(val,item,flag)">
             <template v-if="item.EgName=='geo_location'" v-slot:appoint>
               <div class="tMar20">
                 <el-checkbox-group v-model="pageInfo.locationCheckList">
@@ -71,7 +71,7 @@
 </template>
 <script setup lang="ts">
 import {computed, getCurrentInstance, inject, nextTick, onMounted, reactive, ref} from "vue";
-import {collectParam, directPacket, reactiveTableAndAny} from "@/api/ApiModel";
+import { directPacket, reactiveTableAndAny} from "@/api/ApiModel";
 import Dialog from '@/components/capsulationMoudle/_dialog.vue'
 import RadioGroup from '@/components/businessMoudle/batchGdt/configArea/radioGroup.vue'
 import CheckGroup from '@/components/businessMoudle/batchGdt/configArea/checkGroup.vue'
@@ -83,7 +83,7 @@ import Select from '@/components/capsulationMoudle/_select.vue'
 import {ElMessage} from "element-plus";
 import {Api} from "@/api/api";
 import Input from '@/components/capsulationMoudle/_input.vue'
-
+import _ from "lodash";
 
 
 const { proxy } = getCurrentInstance() as any;
@@ -94,6 +94,14 @@ const emit = defineEmits<{
   (event: "init"): void;
 }>();
 
+const props = withDefaults(defineProps<{
+  id?: string,
+  echoList?: any,
+}>(), {
+  id: '',
+  echoList: []
+})
+
 //得到上边传来的值
 const inject_accountId = inject('accountId')
 
@@ -312,18 +320,18 @@ const age_min = ref<number>(14)
 const age_max = ref<number>(66)
 const ageEvent = (item:any) => {
   item.value.subValue = age_min.value + '至' + age_max.value + '岁'
-  getEstimation(1)
+  getEstimation()
 }
 //排除已转化用户
 const transformation_behaviorRef = ref<{value:any}>()
 const behaviorEvent = (val:any,item:any) => {
   item.value.subValue = pageInfo.transformation_behavior_list[pageInfo.transformation_behavior_list.findIndex(n=>n.key == val)]
-  getEstimation(2)
+  getEstimation()
 }
 
 
 //回显值
-const reEvent = (val:any,item:any) => {
+const reEvent = (val:any,item:any,flag?:boolean) => {
   item.value = val
   if(item.EgName=='age'&&item.value.value=='appoint'){
     nextTick(()=>{
@@ -336,7 +344,15 @@ const reEvent = (val:any,item:any) => {
       transformation_behaviorRef.value!.value = ''
     })
   }
-  getEstimation(3)
+  if(flag){
+    getEstimation()
+  }
+}
+const reEventCheck = (val:any,item:any,flag?:boolean) => {
+  item.value = val
+  if(flag){
+    getEstimation()
+  }
 }
 
 const init = () => {
@@ -344,7 +360,7 @@ const init = () => {
 }
 
 //获取预览展示的信息
-const getEstimation =  (test?:number) => {
+const getEstimation =  () => {
   nextTick(async()=>{
     let obj:directPacket = {}
     pageInfo.jsonInfo.forEach(item=>{
@@ -455,8 +471,15 @@ const confirmEvent = async () => {
     targeting_name:InputRef_name.value!.value,
     account_id: inject_accountId,
   })
+  let api:string = Api.directPacket_add
+  //如果是编辑
+  if(props.id){
+    paramsModel.targeting_id = JSON.parse(JSON.stringify(props.id))
+    api = Api.directPacket_edit
+  }
 
-  let res:any = await proxy.$http.post(Api.directPacket_add,{...paramsModel,...obj})
+  return
+  let res:any = await proxy.$http.post(api,{...paramsModel,...obj})
   loading.value = false
   ElMessage.info(res.errMsg)
   if(res&&res.errNo=='0'){
@@ -466,6 +489,16 @@ const confirmEvent = async () => {
   }
 }
 
+//编辑回显
+const editEchoEcent = () => {
+  let taregtArr:any = _.cloneDeep(props.echoList)
+  if(taregtArr&&taregtArr.length==0){//全是不限
+
+  }else{
+
+  }
+}
+
 
 
 // 切换显隐
@@ -481,6 +514,13 @@ const switchShow = (val:boolean)=>{
 
       get_location_list()
 
+      //得到右边人群覆盖的数据
+      getEstimation()
+
+      console.log(props.id);
+      if(props.id){ //编辑
+        editEchoEcent()
+      }
     })
   }
 }

src/components/businessMoudle/batchGdt/configArea/directPacket/newDirecPacket_preview.vue

@@ -62,7 +62,6 @@
           </div>
         </div>
       </div>
-
     </div>
   </div>
 

src/components/businessMoudle/batchGdt/configArea/directPacket/useDirect.vue

@@ -48,7 +48,7 @@
 
     </div>
     <!--    新建定向包-->
-    <NewDirecPacket ref="NewDirecPacketRef" @init="get_direct_list()"></NewDirecPacket>
+    <NewDirecPacket ref="NewDirecPacketRef" @init="get_direct_list()" :id="pageInfo.targeting_id+''" :echoList="pageInfo.targeting"></NewDirecPacket>
   </div>
 
 </template>
@@ -80,6 +80,8 @@ const props = withDefaults(defineProps<{
 const pageInfo = reactive<reactiveTableAndAny>({
   accList:[],
   accId:-1,
+  targeting_id:'',
+  targeting:[]
 })
 
 //暴露出需要的值
@@ -102,6 +104,7 @@ const accItemEvent = async (item:any,idx:number) => {
 //打开新建定向
 const NewDirecPacketRef = ref<{switchShow:(val:boolean)=>void}>()
 const newAddEvent = () => {
+  pageInfo.targeting_id = ''
   nextTick(()=>{
     NewDirecPacketRef.value!.switchShow(true)
   })
@@ -123,7 +126,11 @@ const selectEvent = (obj:any)=>{
 
 //编辑
 const editEvent = (item:any) => {
-
+  pageInfo.targeting_id = item.targeting_id
+  pageInfo.targeting = item.targeting
+  nextTick(()=>{
+    NewDirecPacketRef.value!.switchShow(true)
+  })
 }
 
 const InputRef_text = ref<{value:string}>()
@@ -180,12 +187,21 @@ const clearTableSelect = () => {
   tableListRef.value!.clearSelected()
 }
 
+//回显选中的 - 切换使用方式
+const echoChooseList = () => {
+  if(pageInfo.accId){
+    let idx:number = pageInfo.accList.findIndex(n=>n.id == pageInfo.accId)
+    tableListRef.value!.toggleSelected(pageInfo.accList&&pageInfo.accList[idx].chooseList,true)
+  }
+}
+
 // 父组件共享值
 defineExpose({
   ExposeChooseList,
   echoInit,
   init,
-  clearTableSelect
+  clearTableSelect,
+  echoChooseList
 });
 
 //传值

src/components/businessMoudle/batchGdt/configArea/directPacket/useDirectCon.vue

@@ -59,7 +59,6 @@
     <!--    新建定向包-->
     <NewDirecPacket ref="NewDirecPacketRef" @init="get_direct_list()"></NewDirecPacket>
   </div>
-
 </template>
 <script setup lang="ts">
 import {getCurrentInstance, inject, nextTick, onMounted, provide, reactive, ref, toRef} from "vue";
@@ -71,7 +70,7 @@ import TableList from '@/components/capsulationMoudle/tableList.vue'
 import Input from '@/components/capsulationMoudle/_input.vue'
 import {publicTableTs} from "@/components/businessMoudle/tableInfo";
 import NewDirecPacket from "@/components/businessMoudle/batchGdt/configArea/directPacket/newDirecPacket.vue";
-import _ from "lodash";
+import _, {iteratee} from "lodash";
 
 
 
@@ -101,12 +100,10 @@ const accRef = ref<{value:any}>()
 const accItemEvent = async (val:any) => {
   pageInfo.accId = val
   let idx:number = pageInfo.accList.findIndex(n=>n.id == val)
-  let obj:any = pageInfo.accList[idx].chooseList
+  let arr:any = pageInfo.accList[idx].chooseList
   await get_direct_list()
-  if(obj && obj.length>0){
-    nextTick(()=>{
-      tableListRef.value!.toggleSelected(obj,true)
-    })
+  if(arr && arr.length>0){
+    tableListRef.value!.toggleSelected(arr,true)
   }
 }
 
@@ -195,6 +192,8 @@ const get_direct_list = async (page?:any,pageSize?:any) => {
     ElMessage.error(res.errMsg)
   }
 }
+
+
 const init = async () => {
   await initAccList()
   await get_direct_list()
@@ -205,21 +204,37 @@ const inject_echoAcId = inject('echoAcId')
 
 const initAccList = () => {
   pageInfo.accList = _.cloneDeep(inject_accountIds)
-  accRef.value!.value = pageInfo.accList[0].id
+  accRef.value!.value = pageInfo.accList&&pageInfo.accList.length> 0 ? pageInfo.accList[0].id : -1
   pageInfo.accId = accRef.value!.value
   tableListRef.value!.clearSelected()
 }
 
+//回显选中的 - 切换使用方式
+const echoChooseList = () => {
+  if(pageInfo.accId){
+    let idx:number = pageInfo.accList.findIndex(n=>n.id == pageInfo.accId)
+    let arr:any = pageInfo.accList&&pageInfo.accList[idx].chooseList
+    if(arr&&arr.length>0){
+      tableListRef.value!.toggleSelected(arr,true)
+    }
+  }
+}
 
 //编辑初始化
-const echoInit = () => {
+const echoInit = async () => {
   let flag:boolean = props.echoValue&&props.echoValue.length>0
   pageInfo.accList = flag ? props.echoValue : _.cloneDeep(inject_accountIds)
   pageInfo.accId = inject_echoAcId
-  accRef.value!.value = inject_echoAcId
+  nextTick(()=>{accRef.value!.value = pageInfo.accId})
+  await get_direct_list()
+  // pageInfo.chooseList = _.cloneDeep(pageInfo.accList)
   if(flag&&pageInfo.accId){
     let idx:number = pageInfo.accList.findIndex(n=>n.id == pageInfo.accId)
-    tableListRef.value!.toggleSelected(pageInfo.accList&&pageInfo.accList[idx].chooseList,true)
+    let arr:any = pageInfo.accList&&pageInfo.accList[idx].chooseList
+
+    if(arr&&arr.length>0){
+      tableListRef.value!.toggleSelected(arr,true)
+    }
   }
 }
 
@@ -247,22 +262,18 @@ const ExposeChooseList = () => {
 const clearTableSelect = () => {
   tableListRef.value!.clearSelected()
 }
-
-// 将选中的值回显到表格中,切换select的时候
-const chooseItemToTableList = () => {
-
-}
-
 // 父组件共享值
 defineExpose({
   ExposeChooseList,
   echoInit,
   init,
-  clearTableSelect
+  clearTableSelect,
+  echoChooseList
 });
 
 //传值
 provide('accountId',toRef(pageInfo,'accId'))
+
 </script>
 <style lang="scss" scoped>
 @import "src/assets/style/batchGdt.scss";

src/components/businessMoudle/batchGdt/configArea/radioGroup.vue

@@ -6,7 +6,7 @@
       <template v-if="radioList&&radioList.length>0">
         <div :class="haveFlex ? 'haveFlex' : ''">
           <div class="flex">
-            <el-radio-group v-model="value" @change="returnValueEvent">
+            <el-radio-group v-model="value" @change="val=>returnValueEvent(true)">
               <el-radio-button v-for="item in radioList" :label="item.value" :disabled="item.disabled" :title="item.disTitle">{{item.name}}</el-radio-button>
             </el-radio-group>
             <Tooltip v-if="toolTipsVal" :notes="toolTipsVal" effect="light" popperClass="wid400"/>
@@ -31,7 +31,7 @@ import {nextTick, onMounted, ref} from "vue";
 import Tooltip from '@/components/capsulationMoudle/_tooltip.vue'
 
 const emit = defineEmits<{
-  (event: "returnEvent", val: string | number | boolean): void;
+  (event: "returnEvent", val: string | number | boolean,flag?:boolean): void;
 }>();
 
 const value=ref('')
@@ -63,14 +63,14 @@ const props = withDefaults(defineProps<{
 })
 
 //返回值
-const returnValueEvent = ()=>{
+const returnValueEvent = (flag?:boolean)=>{
   let reVal:any = {}
   props.radioList.forEach(item=>{
     if(value.value == item.value){
       reVal = item
     }
   })
-  emit('returnEvent',reVal)
+  emit('returnEvent',reVal,flag)
 }
 
 
@@ -83,7 +83,7 @@ onMounted(()=>{
   nextTick(()=>{
     if(props.radioList&&props.radioList.length>0){
       value.value = props.echoValue ? props.echoValue : props.radioList[0].value
-      returnValueEvent()
+      returnValueEvent(false)
     }
   })
 })