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

<template>
  <Dialog
      :dialogVisible="dialogShow"
      @confirm="confirmEvent"
      @close="dialogShow = false"
      width="1000px"
      height="680px"
      dialog-title="媒体定向包">
    <template v-slot:content>
      <div class="dialogBox" v-loading="loading">
        <RadioGroup :radioList="pageInfo.wayList" :haveNotes="true" @returnEvent="val=>wayChange(val)" title="使用方式" :echoValue="propInfo.type"></RadioGroup>

        <keep-alive>
          <component :is='acIdx' ref="comRef" :echoValue="propInfo&&propInfo.chooseList"></component>
        </keep-alive>

      </div>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import {getCurrentInstance, markRaw, nextTick, onMounted, reactive, ref, shallowRef} from "vue";
import {reactiveTableAndAny} from "@/api/ApiModel";
import Dialog from '@/components/capsulationMoudle/_dialog.vue'
import UseDirect from '@/components/businessMoudle/batchGdt/configArea/directPacket/useDirect.vue'
import useDirectCon from '@/components/businessMoudle/batchGdt/configArea/directPacket/useDirectCon.vue'
import RadioGroup from '@/components/businessMoudle/batchGdt/configArea/radioGroup.vue'
import {ElMessage} from "element-plus";
import {Api} from "@/api/api";
import {deepCopy} from "@/common/common";
import _ from "lodash";


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

const emit = defineEmits<{
  (event: "getShowValue", val: any): void;
}>();

const props = withDefaults(defineProps<{
  propInfo?: any,
}>(), {
  propInfo: {},
})

//页面数据
const acIdx = shallowRef(UseDirect)

const pageInfo = reactive<reactiveTableAndAny>({
  wayList:[
    {name:'使用定向包',value:'1',notes:'分账户选择定向包, 当定向包内容被修改后全部广告会批量生效，提高投放效率'},
    {name:'使用定向包内容',value:'2',notes: '多个账户统一使用选定的定向包内容搭建广告，定向包将无法与广告关联'},
  ],
  exposeObj:{},

})

const wayChange = (val:any) => {
  pageInfo.exposeObj.type = val.value
  if(val.value=='1'){
    acIdx.value = markRaw(UseDirect)
  }else if(val.value=='2'){
    acIdx.value = markRaw(useDirectCon)
  }
}



const loading = ref<boolean>(false)
const comRef = ref<{ExposeChooseList:()=>void,echoInit:()=>void,init:()=>void}>()

//
const confirmEvent = async () => {
  pageInfo.exposeObj.chooseList = comRef.value!.ExposeChooseList()
  emit('getShowValue',pageInfo.exposeObj)
  dialogShow.value = false
  // if(memberRef.value!.value==''){
  //   ElMessage.error('名称为必填项')
  //   return
  // }
  // loading.value = true
  // const paramsModel = reactive<{username:string}>({
  //   username:memberRef.value!.value,
  // })
  // let res:any = await proxy.$http.post(Api.creater_add,paramsModel)
  // loading.value = false
  // if(res&&res.errNo=='0'){
  //   let resNew:any = res.rst
  //   dialogShow.value = false
  //   emit('init')
  // }else{
  //   ElMessage.error(res.errMsg)
  // }
}

// 切换显隐
const dialogShow = ref<boolean>(false)
const switchShow = (val:boolean)=>{
  dialogShow.value = val
  if(val){
    nextTick(()=>{
      if(props.propInfo.chooseList&&props.propInfo.chooseList.length>0){
        comRef.value!.echoInit()
      }else{
        comRef.value!.init()
      }
    })
  }
}
// 父组件共享值
defineExpose({
  switchShow,
});
onMounted(()=>{
  nextTick(()=>{

  })
})
</script>
<style lang="scss" scoped>
@import "src/assets/style/batchGdt.scss";

</style>