advertSystem/src/components/businessMoudle/batchGdt/configArea/directPacket/echoIndex.vue

<template>
  <div v-if="showFlag">
    <div class="f-wei-600 bMar10">使用方式: {{pageInfo.directContent?.type == '1' ? '使用定向包' : '使用定向包内容'}}</div>
    <template v-for="(dir,dirIdx) in pageInfo.directContent.chooseList"  :key="dir.id">
      <div>
        <div class="bMar8">{{dir.name|| '-'}}</div>
        <template v-for="(subDir,subIdx) in dir.chooseList" :key="subDir.id">
          <el-tooltip effect="light" placement="right">
            <template #content>
              <PreviewInfo :propInfo="{list:subDir.jsonInfo}"></PreviewInfo>
            </template>
            <div class="subDirItem" >
              <span>{{subDir.targeting_name || '-'}}</span>
              <el-icon :size="14" color="#bfc4d0" class="pointer lMarauto" @click="deleDirectEvent(dir.id,subIdx)"><i-ep-Close /></el-icon>
            </div>
          </el-tooltip>
        </template>
      </div>
    </template>
  </div>

  <!-- 定向包配置 -->
  <DirectPacket ref="DirectPacketRef"
                @assignEvent="DirectPacketAssignEvent"
                :propInfo="pageInfo.directContent"
                :echoType="pageInfo.directContent?.type"></DirectPacket>
</template>
<script setup lang="ts">
import {computed, getCurrentInstance, nextTick, onMounted, provide, reactive, readonly, ref, toRef, watch,} from "vue";
import PreviewInfo from '@/components/businessMoudle/batchGdt/configArea/directPacket/common/previewInfo.vue'
import DirectPacket from '@/components/businessMoudle/batchGdt/configArea/directPacket/index.vue'
import {reactiveTableAndAny} from "@/api/ApiModel";
import _ from "lodash";
import {directDetialPreviewTs} from "@/components/businessMoudle/batchGdt/configArea/directPacket/ts/directDetialPreview";

const { proxy } = getCurrentInstance() as any;
// 全局方法定义
const NumberHandle = proxy.$NumberHandle

const emit = defineEmits<{
  (event: "updateHaveContent", id:number,chooseNum?:number,minusFlag?:boolean,clearFlag?:boolean, type?:string): void;
}>();

const props = withDefaults(defineProps<{
  showFlag?: boolean,
}>(), {
  showFlag: false,
})

const pageInfo = reactive<reactiveTableAndAny>({
  directContent:{},
  directContent_interim:{},
  echoAcId:'',//定向包回显给子页面的账号id
  updateKey_DirectPacket:1,
})

watch(()=>pageInfo.updateKey_DirectPacket,()=>{
  nextTick(async ()=>{
    directContentChange()
  })
})

const directContentChange = (type?) => {
  pageInfo.directContent =  _.cloneDeep(pageInfo.directContent_interim)
  //计算选的个数
  let chooseNum:number = 0
  pageInfo.directContent.chooseList.forEach(sub=>{
    if(sub.chooseList&&sub.chooseList.length){
      chooseNum+=sub.chooseList&&sub.chooseList.length
    }
  })
  if(type == 'feedback'){//回显
    emit('updateHaveContent',3,chooseNum, false, false, 'feedback')
  }else{
    emit('updateHaveContent',3,chooseNum)
  }
}


//删除某一项定向包
const deleDirectEvent = (dirId:number,subIdx:number) => {
  pageInfo.directContent.chooseList.forEach(dir=>{
    if(dir.id == dirId){
      dir.chooseList.splice(subIdx,1)
    }
  })
  emit('updateHaveContent',3,-1,true)
}

const DirectPacketRef = ref<{switchShow:(val:boolean)=>void}>()


//弹框点击确认后，此页面定向包需要的操作
const DirectPacketAssignEvent = (val) => {
  pageInfo.directContent_interim = _.cloneDeep(val)
  pageInfo.updateKey_DirectPacket++
}

//获取定向包的第一个账号值
const get_echoAcId = () => {
  let arr:any = pageInfo.directContent.chooseList
  if(arr){
    for(var dir =0;dir<arr.length;dir++){
      if(arr[dir]?.chooseList&&arr[dir]?.chooseList?.length>0){
        pageInfo.echoAcId = arr[dir].id
        break
      }
    }
  }
}

//打开定向包弹框
const showDirectPacket = () => {
  DirectPacketRef.value!.switchShow(true)
  get_behavior_list()
  get_user_os_list()
  get_location_list()
}

//清空值
const clearDirectContent = () => {
  pageInfo.directContent = {}
  pageInfo.directContent_interim = {}
  emit('updateHaveContent',3,0,false,true)
}

//添加一些账号
// const addAcEvent = (arr:any) => {
//   if(arr&&arr.length>0 && pageInfo.directContent&&pageInfo.directContent.chooseList&&pageInfo.directContent.chooseList.length>0){
//     arr.forEach(obj=>{
//       pageInfo.directContent.chooseList.forEach(dir=>{
//         if(dir.id == obj.id){}else{
//           pageInfo.directContent.chooseList.push(obj)
//         }
//       })
//     })
//   }
// }

// //删除一些账号
// const deleAcEvent = (arr:any) => {
//   //arr空 就清空数据
//   if(arr&&arr.length>0){
//     arr.forEach(obj=>{
//       if(pageInfo.directContent.chooseList&&pageInfo.directContent.chooseList.length>0){
//         pageInfo.directContent.chooseList.forEach((dir,dirIdx)=>{
//           if(dir.id == obj.id){}else{
//             pageInfo.directContent.chooseList.splice(dirIdx,1)
//           }
//         })
//       }
//     })
//   }else{
//     clearDirectContent()
//   }
// }

//账号change arr为变化后的账号
const AcChangeEvent = (arr:any) => {
  if(arr&&arr.length>0){
    let new_ac = pageInfo?.directContent?.chooseList?.map((v)=>{return v.id}) || []
    arr.forEach((a_item) => {//添加账号
      if(!new_ac.includes(a_item.id)){
        pageInfo?.directContent?.chooseList?.push(a_item)
      }
    });
    if(pageInfo?.directContent?.chooseList){//删除不存在账号
      let arr_ac = arr.map((v)=>{return v.id}) || [];
      let brr:any = []
      let cp_chooseList = _.cloneDeep(pageInfo?.directContent?.chooseList)
      cp_chooseList.forEach((item) => {
        if(arr_ac.includes(item.id)){
          brr.push(_.cloneDeep(item))
        }
      });
      pageInfo.directContent.chooseList = brr;
    }
    
  }else{
    clearDirectContent()
  }
}

//抛出obj
const getObjValue = () => {
  return pageInfo.directContent
}
//回显
const feedbackEvent = (obj) => {
  if(obj){
    pageInfo.directContent_interim = _.cloneDeep(obj)
    console.log('pageInfo.directContent_interim', pageInfo.directContent_interim)
    directContentChange('feedback')
  }
}

// 父组件共享值
defineExpose({
  get_echoAcId,
  showDirectPacket,
  clearDirectContent,
  getObjValue,
  // addAcEvent,
  // deleAcEvent,
  AcChangeEvent,
  feedbackEvent
});


const {get_behavior_list,get_user_os_list,get_location_list,pageInfoTs}  = directDetialPreviewTs()

provide('userOsList',toRef(pageInfoTs,'user_os_list'))
provide('behaviorList',toRef(pageInfoTs,'transformation_behavior_list'))
provide('location_list',toRef(pageInfoTs,'location_ca_list'))

//传值
provide('echoAcId',toRef(pageInfo,'echoAcId'))
</script>
<style lang="scss" scoped>
.subDirItem{
  display: flex;
  align-items: center;
  padding: 8px;
  margin-bottom: 8px;
  color: #666;
  background-color: #fafafa;
  border-radius: 2px;
}
</style>