创意素材

src/components/businessMoudle/batchGdt/configArea/creativeMaterial/creativeTeam.vue

@@ -31,7 +31,7 @@
           </div>
         </div>
         <div class="tipsBox">
-          尺寸:{{video_tips.width}}px * {{video_tips.height}}px (推荐) ,
+          尺寸:{{video_tips.min_width}}px * {{video_tips.min_height}}px (推荐) ,
           格式: <span v-for="(i,idx) in video_tips.file_format"><span v-if="idx!==0"> / </span>{{i.split('_')[2]}} </span> ,
           小于{{video_tips.file_size}}MB ,
           播放时长 {{video_tips.min_duration}} - {{video_tips.max_duration}} s

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

@@ -28,7 +28,7 @@
           <div class="lMarauto">
             <el-button type="primary" @click="openLibraryDialog(1)">批量添加视频</el-button>
             <el-button type="primary" v-if="haveCoverFlag" @click="openLibraryDialog(2)">批量添加封面</el-button>
-            <el-button type="primary" v-if="haveCoverFlag">一键指定封面</el-button>
+<!--            <el-button type="primary" v-if="haveCoverFlag">一键指定封面</el-button>-->
             <el-button type="primary" @click="openTestNew">一键测新</el-button>
           </div>
         </div>
@@ -38,7 +38,7 @@
             <div class="flex tMar10" style="align-items: flex-start">
               <div class="TeamBox">
                 <div class="TeamTitle flex">
-                  <div>创意组{{fillZero(idx+1)}} - {{item.id}}</div>
+                  <div>创意组{{fillZero(idx+1)}}</div>
                   <div class="lMarauto">
                     <el-icon :size="14" color="#999" class="pointer" @click="item.show = !item.show"><i-ep-CaretBottom /></el-icon>
                     <el-icon :size="14" color="red" class="lMar10 pointer" @click="deleItemEvent(item)"><i-ep-CircleClose /></el-icon>
@@ -51,8 +51,8 @@
                                   @deleEvent="(type)=>{deleItemUrlEvent(item.id,type)}"
                                   @openEvent="(type,maxNum)=>{openLibraryDialog(type,maxNum,item.id)}"
                                   @autoCoverEvent="openAutoCover(item.itemId)"
-                                  :video_tips="pageInfo.video_restriction"
-                                  :image_tips="pageInfo.image_restriction"></CreativeTeam>
+                                  :video_tips="video_tips"
+                                  :image_tips="image_tips"></CreativeTeam>
                   </el-collapse-transition>
                 </div>
               </div>
@@ -78,17 +78,18 @@
     <LibraryDialog ref="LibraryDialogRef"
                    @assignEvent="assignEvent_LibraryDialog"
                    :is_generate_cover="coverRadioList.radioVal"
-                   :video_tips="pageInfo.video_restriction"
-                   :image_tips="pageInfo.image_restriction"></LibraryDialog>
+                   :video_tips="video_tips"
+                   :image_tips="image_tips"></LibraryDialog>
     <!--      智能封面-->
     <AutoCoverDialog ref="AutoCoverDialogRef" @assignEvent="assignEvent_AutoCoverDialog"></AutoCoverDialog>
     <!--      一件测新-->
-    <TestNewDialog ref="TestNewDialogRef" :propInfo="{
-                                            testNewType,
-                                            is_generate_cover:coverRadioList.radioVal,
-                                            video_tips:pageInfo.video_restriction,
-                                            image_tips:pageInfo.image_restriction,
-                                          }"></TestNewDialog>
+    <TestNewDialog ref="TestNewDialogRef"
+                   @assignEvent="assignEvent_LibraryDialog"
+                   :propInfo="{testNewType,
+                              is_generate_cover:coverRadioList.radioVal,
+                              video_tips,
+                              image_tips
+                            }"></TestNewDialog>
   </div>
 </template>
 <script setup lang="ts">
@@ -111,15 +112,19 @@ const { proxy } = getCurrentInstance() as any;
 const NumberHandle = proxy.$NumberHandle
 
 const emit = defineEmits<{
-  (event: "assignEvent", val: any): void; //赋值给父组件
+  (event: "assignEvent", val: any, resResult:any): void; //赋值给父组件
 }>();
 
 const props = withDefaults(defineProps<{
   haveCoverFlag:boolean,
+  video_tips:any,
+  image_tips:any,
   testNewType?:string,
 }>(), {
   haveCoverFlag:false,
-  testNewType:'video'
+  testNewType:'video',
+  video_tips:{},
+  image_tips:{},
 })
 
 interface radioFace{
@@ -164,36 +169,12 @@ const pageInfo = reactive<reactiveTableAndAny>({
     videoName:'',
     picName:'',
   }],
-  video_restriction: {
-    "width": 100,
-    "height": 100,
-    "min_width": 640,
-    "min_height": 360,
-    "ratio_width": 16,
-    "ratio_height": 9,
-    "file_size": 1024000,
-    "file_format": [
-      "MEDIA_TYPE_MP4",
-      "MEDIA_TYPE_MOV",
-      "MEDIA_TYPE_AVI"
-    ],
-    "min_duration": 5,
-    "max_duration": 300
-  },
-  image_restriction:{
-    "width": 80,
-    "height": 80,
-    "file_size": 20,
-    "file_format": [
-      "IMAGE_TYPE_JPG",
-      "IMAGE_TYPE_PNG"
-    ]
-  },
   updateKey:1,
   creativeTeamList_interim: [],//复制份
   keyUrl:'videoUrl',
   maxNum:0,//素材库最大可选个数
   CreativeTeamId:-1,//创意组ID
+  resResult:[],//video_id和image_id在里边
 })
 
 //删除创意组的视频或图片
@@ -293,9 +274,10 @@ const openLibraryDialog = (type:number,maxNum?:any,id?:any) => {
   })
 }
 //素材确认返回来的值
-const assignEvent_LibraryDialog = (val:any,mType:number) => {
+const assignEvent_LibraryDialog = (val:any,mType:number,resResult:any) => {
   pageInfo.keyUrl = mType==1?'videoUrl':'picUrl'
   pageInfo.creativeTeamList_interim = _.cloneDeep(val)
+  pageInfo.resResult = _.cloneDeep(resResult)
   pageInfo.updateKey++
 }
 
@@ -396,13 +378,21 @@ const confirmEvent = () => {
     ElMessage.error('请完善素材')
     return
   }
-  emit('assignEvent',arr)
+  emit('assignEvent',arr,pageInfo.resResult)
   dialogShow.value = false
 }
 
+//提供给主页面使用
+const clearAllEvent = async () => {
+  pageInfo.creativeTeamList = []
+  pageInfo.creativeTeamList_interim = []
+  emit('assignEvent',pageInfo.creativeTeamList,pageInfo.resResult)
+}
+
 // 父组件共享值
 defineExpose({
-  switchShow
+  switchShow,
+  clearAllEvent
 });
 
 </script>

src/components/businessMoudle/batchGdt/configArea/creativeMaterial/libraryDialog.vue

@@ -3,6 +3,7 @@
       class="library_Dialog"
       :model-value="dialogShow"
       :key="updateKey"
+      :loading="loading"
       top="8px"
       append-to-body
       width="1200px"
@@ -18,47 +19,45 @@
         <div class="typeBorlineBox">
           <div class="item" v-for="item in typeList.list" :key="item.key" :class="item.key == typeAc ? 'itemAc' : ''" @click="switchTypeItem(item.key)">
             <div>{{item.name}}</div>
-            <!--          <div class="borLine"></div>-->
           </div>
         </div>
         <div class="c-theme lMarauto f13 pointer" @click="goMaterialLibrary">管理素材</div>
       </div>
     </template>
-    <div class="library_body" v-loading="loading">
+    <div class="library_body">
       <template v-if="typeAc == 'video'">
         <!--      搜索框-->
         <div class="flexWrap searchBox">
-          <Input ref="InputRef_text" title="素材名称" placeholderTxt="素材名称" class="bMar10" @changeEvent="()=>init()" @clearEvent="()=>init()"/>
-          <materialCatalog selectWidth="160px" ref="CataRef" title="素材目录" class="bMar10" @changeEvent="()=>init()" :clearableFlag="true"></materialCatalog>
+          <Input ref="InputRef_text" title="素材名称" placeholderTxt="素材名称" class="bMar10" @changeEvent="()=>sizeVisibleEvent(typeAc)" @clearEvent="()=>sizeVisibleEvent(typeAc)"/>
+          <materialCatalog selectWidth="160px" ref="CataRef" title="素材目录" class="bMar10" @changeEvent="()=>sizeVisibleEvent(typeAc)" :clearableFlag="true"></materialCatalog>
           <Select ref="sizeTypeRef"
                   :isMultiple="true"
                   :clearFlag="true"
                   :filterFlag="true"
                   title="尺寸"
                   selectWidth="160px" class="bMar10"
-                  @visibleEvent="(val)=>sizeVisibleEvent(val,typeAc)" @clearEvent="()=>init()"
+                  @changeEvent="()=>sizeVisibleEvent(typeAc)" @clearEvent="()=>sizeVisibleEvent(typeAc)"
                   :options="pageInfo.sizeTypeList"/>
           <Select ref="ideaManRef"
                   :clearFlag="true"
                   title="创意人"
                   selectWidth="160px" class="bMar10"
                   :optObj="{k:'id',la:'username',val:'id'}"
-                  @changeEvent="()=>init()" @clearEvent="()=>init()"
+                  @changeEvent="()=>sizeVisibleEvent(typeAc)" @clearEvent="()=>sizeVisibleEvent(typeAc)"
                   :options="pageInfo.createrList"/>
           <Select ref="designerRef"
                   :clearFlag="true"
                   title="设计师" class="bMar10"
                   selectWidth="160px"
                   :optObj="{k:'id',la:'username',val:'id'}"
-                  @changeEvent="()=>init()" @clearEvent="()=>init()"
+                  @changeEvent="()=>sizeVisibleEvent(typeAc)" @clearEvent="()=>sizeVisibleEvent(typeAc)"
                   :options="pageInfo.editorList"/>
-
           <tagBlock ref="tagRef" title="素材标签" selectWidth="240px" :haveNewTag="false" class="bMar10"
-                    @handleChange="val=>{pageInfo.tagChooseVal = val}" @hideChange="()=>init()"></tagBlock>
+                    @handleChange="val=>{pageInfo.tagChooseVal = val}" @hideChange="()=>sizeVisibleEvent(typeAc)"></tagBlock>
           <TimeScreen title="时间" selectWidth="260px" :haveQuick="false" :clearFlag="true" :valueIsKong="true"
                       ref="timeRef"
                       :shortcuts="pageInfo.shortList"
-                      @init="()=>init()"
+                      @init="()=>sizeVisibleEvent(typeAc)"
                       class="bMar10 lMar10"></TimeScreen>
           <span class="pointer c-theme lMar10 bMar10" @click="init()">刷新</span>
           <div class="flex bMar10 lMar10">
@@ -74,41 +73,41 @@
 
       <template v-if="typeAc == 'cover'">
         <div class="flexWrap searchBox">
-          <Input ref="InputRef_text" title="素材名称" placeholderTxt="素材名称" class="bMar10" @changeEvent="()=>init_collect_list()" @clearEvent="()=>init_collect_list()"/>
-          <materialCatalog selectWidth="160px" ref="CataRef" title="素材目录" class="bMar10" @changeEvent="()=>init_collect_list()" :clearableFlag="true"></materialCatalog>
+          <Input ref="InputRef_text" title="素材名称" placeholderTxt="素材名称" class="bMar10" @changeEvent="()=>sizeVisibleEvent(typeAc)" @clearEvent="()=>sizeVisibleEvent(typeAc)"/>
+          <materialCatalog selectWidth="160px" ref="CataRef" title="素材目录" class="bMar10" @changeEvent="()=>sizeVisibleEvent(typeAc)" :clearableFlag="true"></materialCatalog>
           <Select ref="sizeTypeRef"
                   :isMultiple="true"
                   :clearFlag="true"
                   :filterFlag="true"
                   title="尺寸"
                   selectWidth="160px" class="bMar10"
-                  @visibleEvent="(val)=>sizeVisibleEvent(val,typeAc)" @clearEvent="()=>init_collect_list()"
+                  @changeEvent="()=>sizeVisibleEvent(typeAc)" @clearEvent="()=>sizeVisibleEvent(typeAc)"
                   :options="pageInfo.sizeTypeList"/>
           <Select ref="ideaManRef"
                   :clearFlag="true"
                   title="创意人"
                   selectWidth="160px" class="bMar10"
                   :optObj="{k:'id',la:'username',val:'id'}"
-                  @changeEvent="()=>init_collect_list()" @clearEvent="()=>init_collect_list()"
+                  @changeEvent="()=>sizeVisibleEvent(typeAc)" @clearEvent="()=>sizeVisibleEvent(typeAc)"
                   :options="pageInfo.createrList"/>
           <Select ref="designerRef"
                   :clearFlag="true"
                   title="设计师" class="bMar10"
                   selectWidth="160px"
                   :optObj="{k:'id',la:'username',val:'id'}"
-                  @changeEvent="()=>init_collect_list()" @clearEvent="()=>init_collect_list()"
+                  @changeEvent="()=>sizeVisibleEvent(typeAc)" @clearEvent="()=>sizeVisibleEvent(typeAc)"
                   :options="pageInfo.editorList"/>
           <TimeScreen title="时间" selectWidth="260px" :haveQuick="false" :clearFlag="true" :valueIsKong="true"
                       ref="timeRef"
                       :shortcuts="pageInfo.shortList"
-                      @init="()=>init_collect_list()"
+                      @init="()=>sizeVisibleEvent(typeAc)"
                       class="bMar10 lMar10"></TimeScreen>
           <Select ref="collectRef"
                   title="收藏夹"
                   :clearFlag="false"
                   selectWidth="160px" class="bMar10"
                   :optObj="{k:'id',la:'name',val:'id'}"
-                  @changeEvent="()=>init_collect_list()" @clearEvent="()=>init_collect_list()"
+                  @changeEvent="()=>sizeVisibleEvent(typeAc)" @clearEvent="()=>sizeVisibleEvent(typeAc)"
                   :options="pageInfo.collectList"/>
           <span class="pointer c-theme lMar10 bMar10" @click="init_collect_list()">刷新</span>
         </div>
@@ -123,7 +122,7 @@
                        :checkShow="true"
                        :showCreateTimeFlag="true"
                        :showDetialFlag="false"
-                       @init="()=>init()"
+                       @init="()=>sizeVisibleEvent(typeAc)"
                        @checkChange="checkChangeItem"></materialBlock>
 
         <noData v-if="(pageInfo.materialList && pageInfo.materialList.length==0) || !pageInfo.materialList"></noData>
@@ -132,7 +131,9 @@
 <!--      分页区-->
       <div class="pageBox flex">
         <el-checkbox v-model="allChecked" @change="allChangeEvent">全选</el-checkbox>
-        <div class="c-666 lMar20 f12" v-if="typeAc == 'video'">使用原生页外顶部视频换内功能时,请筛选640*360,640*480,750*1334等尺寸素材</div>
+        <div class="c-666 lMar20 f12" v-if="typeAc == 'video'">使用原生页外顶部视频换内功能时,请筛选
+          <span v-for="(siz,sizIdx) in pageInfo.sizeTypeList"><i v-if="sizIdx>0">,</i>{{siz.value}}</span>
+          等尺寸素材</div>
         <el-pagination
             class="lMarauto"
             :small="true"
@@ -149,13 +150,18 @@
       <div class="dialog-footer">
         <div class="flex">
           <span>已选素材: {{pageInfo.chooseList_Item&&pageInfo.chooseList_Item.length || 0}} / {{ max_num ? max_num : (total || 0)}}</span>
-          <Tooltip notes="素材已根据媒体的要求进行过滤（广点通：支持视频格式：mp4、mov、avi，大小不超过100M）" colorCss="c-d3"/>
+          <Tooltip :contentSlotFalg="true" colorCss="c-d3">
+            <template #content>
+              素材已根据媒体的要求进行过滤（广点通：支持视频格式：
+              <span v-for="(vi,viIdx) in video_tips.file_format"><i v-if="viIdx>0">,</i>{{vi&&vi.split('_')[2] || '-'}}</span>，大小不超过{{video_tips.file_size||'-'}}M）
+            </template>
+          </Tooltip>
         </div>
 
         <div class="lMarauto flex">
           <Tooltip notes="复制创意组" colorCss="c-theme" :iconSlotFalg="true" :contentSlotFalg="true">
             <template v-slot:content>
-              <div>1、<b>素材可投放尺寸</b>：1440x2560；1080x1920；720x1280；<a href="https://thoughts.teambition.com/sharespace/5fc77c211dc1b5004618990a/docs/617b899f0a1306004198c393" target="_blank">详细尺寸>></a></div>
+              <div>1、<b>素材可投放尺寸</b>：<span v-for="(siz,sizIdx) in pageInfo.sizeTypeList"><i v-if="sizIdx>0">;</i>{{siz.value}}</span>；<a href="https://thoughts.teambition.com/sharespace/5fc77c211dc1b5004618990a/docs/617b899f0a1306004198c393" target="_blank">详细尺寸>></a></div>
               <div>2、<b>创量审核状态</b>：只有素材库素材通过审核才可以使用；</div>
             </template>
             <template v-slot:iconSlot>
@@ -164,8 +170,8 @@
               </div>
             </template>
           </Tooltip>
-          <el-button plain @click="cancelEVent" size="default" class="lMar10">取消</el-button>
-          <el-button type="primary" @click="submitEVent" size="default" class="lMar10">提交</el-button>
+          <el-button plain @click="cancelEvent" size="default" class="lMar10">取消</el-button>
+          <el-button type="primary" @click="submitEVent" size="default" class="lMar10"  v-loading.fullscreen.lock="fullLoading">提交</el-button>
         </div>
       </div>
     </template>
@@ -181,16 +187,17 @@ import materialCatalog from '@/components/businessMoudle/materialLibrary/materia
 import tagBlock from '@/components/businessMoudle/materialLibrary/block/tagBlock.vue'
 import noData from '@/components/capsulationMoudle/noData.vue'
 import materialBlock from '@/components/businessMoudle/materialLibrary/block/materialBlock.vue'
-import {searchBoxTs} from '@/components/businessMoudle/batchGdt/configArea/creativeMaterial/ts/searchBox'
+import {materialTs} from '@/components/businessMoudle/batchGdt/configArea/creativeMaterial/ts/materialTs'
+import {uploadAddGetResTs} from '@/components/businessMoudle/batchGdt/configArea/creativeMaterial/ts/uploadAddGetRes'
 import {publicSwitchType} from "@/components/businessMoudle/switchType";
 import { useRouter } from "vue-router";
 import {ElMessage} from "element-plus";
 import _ from "lodash";
-import {creative} from "@/api/ApiModel";
+import {creative, reactiveTableAndAny} from "@/api/ApiModel";
 import {Api} from "@/api/api";
 
 const emit = defineEmits<{
-  (event: "assignEvent", val:any,mType:number): void;
+  (event: "assignEvent", val:any,mType:number,resResult:any): void;
 }>();
 
 const props = withDefaults(defineProps<{
@@ -235,13 +242,15 @@ const typeListParams = reactive([
   {name:'收藏夹',key:'cover'},
 ])
 const switchTypeItem = async (key:string) => {
+  loading.value = true
   typeAc.value = key
+  pageInfo.chooseList_Item = []
   if(key == 'cover'){
-    init_collect_all(m_type_switchShow.value)
+    await init_collect_all(m_type_switchShow.value)
   }else{
-    initAll(m_type_switchShow.value)
+    await initAll(m_type_switchShow.value)
   }
-
+  loading.value = false
 }
 const {
   typeAc,
@@ -259,7 +268,6 @@ const goMaterialLibrary = () => {
 }
 
 // 切换显隐
-const dialogShow = ref<boolean>(false)
 const updateKey = ref<number>(1)
 const max_num = ref<number>(0) // 允许上传的最大数字 - 用于区分是否可多选
 const m_type_switchShow = ref<number>(1) // 视频:1还是图片:2
@@ -267,6 +275,8 @@ const switchShow = async (val:boolean,mtype:number,maxNum?:number)=>{
   //val:弹框显true/隐false ,mtype:视频:1还是图片:2,maxNum:可选的最大值 0=>走素材的总个数,否则传几显示几
   dialogShow.value = val
   if(val){
+    requestObj.upload_flag = false
+    clearTimeout(requestObj.timer_get_upload_res)
     updateKey.value++
     max_num.value = maxNum ? maxNum : 0
     m_type_switchShow.value = mtype
@@ -278,6 +288,7 @@ const switchShow = async (val:boolean,mtype:number,maxNum?:number)=>{
       obj.min_duration = video_tips.min_duration
       obj.max_duration = video_tips.max_duration
       obj.file_types = video_tips.file_format
+      pageInfo.ratio_size = video_tips.ratio_width + ':' + video_tips.ratio_height
     }else if(mtype == 2){ //封面
       obj.max_size = image_tips.file_size
       obj.file_types = image_tips.file_format
@@ -293,84 +304,29 @@ const switchShow = async (val:boolean,mtype:number,maxNum?:number)=>{
 
 //提交
 const submitEVent = async () => {
+  requestObj.upload_flag = false
+  clearTimeout(requestObj.timer_get_upload_res)
   let arr:any = pageInfo.chooseList_Item
   if(arr&&arr.length==0){
     ElMessage.error('请选择素材后再提交!')
     return
   }
-  await get_up_record_id(arr)
-  get_upload_res()
-  return
-
-
-  emit('assignEvent',arr,m_type.value)
-  dialogShow.value = false
-}
-//得到上边传来的值
-const inject_accountIds = inject('accountIds')
-const up_record_id = ref<null|string|number>()
-//得到up_record_id
-const get_up_record_id = async (targetArr:any) => {
-  let arr:any = _.cloneDeep(inject_accountIds)
-  let aIds:any = []
-  arr._object[arr._key].forEach(a=>{
-    aIds.push(a.id)
+  fullLoading.value = true
+  let ids:any = []
+  arr.forEach(a=>{
+    ids.push(a.id)
   })
-  if(aIds&&aIds.length==0){
-    ElMessage.error('account_ids错误')
-    return
-  }
-  if(targetArr&&targetArr.length==0){
-    ElMessage.error('暂无符合条件的素材')
-    return
-  }
-  const paramsModel = reactive<creative>({
-    account_ids: aIds,
-    target_ids:targetArr,
-    type:'material',
-    is_generate_cover:props.is_generate_cover == 'On' ? 1 : 0,
-  })
-  let res:any = await proxy.$http.post(Api.creative_upload,paramsModel)
-  if(res&&res.errNo=='0'){
-    let resNew:any = res.rst
-    if(resNew){
-      up_record_id.value = resNew.up_record_id
-    }
-  }else{
-    ElMessage.error(res.errMsg)
-  }
+  await get_up_record_id(ids)
+  await get_upload_res()
 }
-//轮询 - 得到上传结果
-const get_upload_res = async () => {
-  if(!up_record_id.value){
-    return
-  }
-  const paramsModel = reactive<{up_record_id:null|string|number}>({
-    up_record_id: up_record_id.value,
-  })
-  let res:any = await proxy.$http.get(Api.creative_upload_getRes,paramsModel)
-  if(res&&res.errNo=='0'){
-    let resNew:any = res.rst
-    if(resNew){
-      if(!resNew.result){
-        pageInfo.requestNum++
-        if(pageInfo.requestNum < 30){
-          setTimeout(()=>{
-            get_upload_res()
-          },3000)
-        }
-      }
-    }
-  }else{
-    ElMessage.error(res.errMsg)
-  }
+//上传素材成功后 走的代码
+const successEvent = (resResult:any) => {
+  emit('assignEvent',pageInfo.chooseList_Item,m_type.value,resResult)
 }
 
+const {get_up_record_id,get_upload_res,requestObj,cancelEvent,dialogShow,fullLoading} =
+    uploadAddGetResTs(props.is_generate_cover == 'On' ? 1 : 0,successEvent)
 
-//取消
-const cancelEVent = () => {
-  dialogShow.value = false
-}
 
 
 //是否可投放
@@ -418,7 +374,6 @@ const checkChangeItem = (flag: any,obj:any) => {
 }
 
 
-
 // 父组件共享值
 defineExpose({
   switchShow
@@ -451,12 +406,8 @@ const {
   initAll,
   sizeVisibleEvent,
   init_collect_list
-} = searchBoxTs(1)
+} = materialTs(1)
 
-onMounted(()=>{
-  nextTick(()=>{
-  })
-})
 </script>
 <style lang="scss">
 .library_Dialog{

src/components/businessMoudle/batchGdt/configArea/creativeMaterial/testNew.vue

@@ -2,12 +2,13 @@
   <Dialog
       :dialogVisible="dialogShow"
       @confirm="confirmEvent"
-      @close="dialogShow = false"
+      :fullLoading="fullLoading"
+      @close="cancelEvent"
       :closeOnModal="false"
       width="700px"
       height="400px"
       dialog-title="一键测新">
-    <template v-slot:content v-loading="loading">
+    <template v-slot:content>
       <RadioGroup :id="pageInfo.radioId"
                   :radioList="cateRadioList.list"
                   :title="cateRadioList.name">
@@ -54,9 +55,11 @@ import {ElMessage} from "element-plus";
 import _ from "lodash";
 import {creative, directPacket, materialManage, reactiveTableAndAny} from "@/api/ApiModel";
 import {Api} from "@/api/api";
+import {uploadAddGetResTs} from '@/components/businessMoudle/batchGdt/configArea/creativeMaterial/ts/uploadAddGetRes'
+
 
 const emit = defineEmits<{
-  (event: "assignEvent", val: any): void; //赋值给父组件
+  (event: "assignEvent", val:any,mType:number,resResult:any): void;
 }>();
 
 const props = withDefaults(defineProps<{
@@ -73,7 +76,7 @@ const inject_accountIds = inject('accountIds')
 
 const pageInfo = reactive<reactiveTableAndAny>({
   radioId:1,
-  materialList_id:[],
+  materialList:[],
   up_record_id:-1,
   requestNum:0,
 })
@@ -123,18 +126,16 @@ const cateRadioList = reactive<radioFace>({
 
 
 // 切换显隐
-const dialogShow = ref<boolean>(false)
 const switchShow = (val:boolean)=>{
   dialogShow.value = val
   if(val){
     nextTick(()=>{
+      clearTimeout(requestObj.timer_get_upload_res)
       CataRef.value!.initAllAlbum()
     })
   }
 }
 
-
-const loading = ref<boolean>(false)
 const canPutOnObj = reactive<reactiveTableAndAny>({
   is_legal:1,
   file_types:[],
@@ -142,26 +143,9 @@ const canPutOnObj = reactive<reactiveTableAndAny>({
   max_size:0,
   min_duration:0,
   max_duration:0,
+  un_select_today:0,
 })
 
-//确定
-const confirmEvent = async () => {
-  //先从接口Api.materialManage_list中中找到numRadioList.value个素材的id
-  //将这些素材id走API.creative_upload接口得到up_record_id
-  //将up_record_id轮询API.creative_upload_getRes接口得到是否上传完成
-  //上传完成 - 将完成的列表push进index.vue的pageInfo.creativeTeamList
-  loading.value = true
-  await getmaterialList()
-  await get_up_record_id()
-  //写到准备轮询API.creative_upload_getRes
-  get_upload_res()
-  if(pageInfo.requestNum >= 30){
-    loading.value = false
-  }
-  return
-  emit('assignEvent','')
-  dialogShow.value = false
-}
 
 //处理投放的参数
 const handle_canPutOnObj = () => {
@@ -176,8 +160,9 @@ const handle_canPutOnObj = () => {
     obj.max_size = image_tips.file_size
     obj.file_types = image_tips.file_format
   }
+  obj.un_select_today = numRadioList.subChecked ? 1 : 0
 }
-//找到numRadioList.value个素材的id
+//找到numRadioList.value个素材的
 const getmaterialList = async () => {
   await handle_canPutOnObj()
   const paramsModel = reactive<materialManage>({
@@ -186,83 +171,47 @@ const getmaterialList = async () => {
     page:1,
     pageSize:numRadioList.value,
   })
-  let res:any = await proxy.$http.get(Api.materialManage_list,Object.assign(paramsModel,canPutOnObj))
-  if(res&&res.errNo=='0'){
-    let resNew:any = res.rst
-    if(resNew.data){
-      pageInfo.materialList_id = []
-      resNew.data.forEach(item=>{
-        pageInfo.materialList_id.push(item.id)
-      })
-    }
-  }else{
-    ElMessage.error(res.errMsg)
-  }
-}
-//得到up_record_id
-const get_up_record_id = async () => {
-  let arr:any = _.cloneDeep(inject_accountIds)
-  let aIds:any = []
-  arr._object[arr._key].forEach(a=>{
-    aIds.push(a.id)
-  })
-  if(aIds&&aIds.length==0){
-    ElMessage.error('account_ids错误')
+  if(!CataRef.value!.idVal){
+    ElMessage.error('请选择目录')
     return
   }
-  if(pageInfo.materialList_id&&pageInfo.materialList_id.length==0){
-    ElMessage.error('暂无符合条件的素材')
-    return
-  }
-  const paramsModel = reactive<creative>({
-    account_ids: aIds,
-    target_ids:pageInfo.materialList_id,
-    type:'material',
-    is_generate_cover:props.propInfo.is_generate_cover == 'On' ? 1 : 0,
-  })
-  let res:any = await proxy.$http.post(Api.creative_upload,paramsModel)
+  let res:any = await proxy.$http.get(Api.materialManage_list,Object.assign(paramsModel,canPutOnObj))
   if(res&&res.errNo=='0'){
     let resNew:any = res.rst
-    if(resNew){
-      pageInfo.up_record_id = resNew.up_record_id
+    if(resNew.data){
+      pageInfo.materialList = resNew.data
     }
   }else{
     ElMessage.error(res.errMsg)
   }
 }
-//轮询 - 得到上传结果
-const get_upload_res = async () => {
-  if(!pageInfo.up_record_id){
-    return
-  }
-  const paramsModel = reactive<creative>({
-    up_record_id: pageInfo.up_record_id,
+
+
+//确定
+const confirmEvent = async () => {
+  //先从接口Api.materialManage_list中中找到numRadioList.value个素材的id
+  //将这些素材id走API.creative_upload接口得到up_record_id
+  //将up_record_id轮询API.creative_upload_getRes接口得到是否上传完成
+  //上传完成 - 将完成的列表push进index.vue的pageInfo.creativeTeamList
+  clearTimeout(requestObj.timer_get_upload_res)
+  await getmaterialList()
+  fullLoading.value = true
+  let ids:any = []
+  pageInfo.materialList.forEach(item=>{
+    ids.push(item.id)
   })
-  let res:any = await proxy.$http.get(Api.creative_upload_getRes,paramsModel)
-  if(res&&res.errNo=='0'){
-    let resNew:any = res.rst
-    if(resNew){
-      if(!resNew.result){
-        pageInfo.requestNum++
-        if(pageInfo.requestNum < 30){
-          setTimeout(()=>{
-            get_upload_res()
-          },3000)
-        }
-      }
-    }
-  }else{
-    ElMessage.error(res.errMsg)
-  }
+  await get_up_record_id(ids)
+  await get_upload_res()
 }
 
+//上传成功后走的代码
+const successEvent = (resResult:any) => {
+  emit('assignEvent',pageInfo.materialList,props.propInfo.testNewType == 'video' ? 1 : 2,resResult)
+}
+const {get_up_record_id,get_upload_res,requestObj,cancelEvent,dialogShow,fullLoading} =
+    uploadAddGetResTs(props.is_generate_cover == 'On' ? 1 : 0,successEvent)
 
 
-onMounted(()=>{
-  nextTick(()=>{
-
-  })
-})
 // 父组件共享值
 defineExpose({
   switchShow

src/components/businessMoudle/batchGdt/configArea/creativeMaterial/ts/searchBox.ts

@@ -2,10 +2,11 @@ import {getCurrentInstance, nextTick, reactive, ref} from "vue";
 import {fileParam, materialManage, reactiveTableAndAny} from "@/api/ApiModel";
 import {Api} from "@/api/api";
 import {ElMessage} from "element-plus";
+import {rest} from "lodash";
 
 
 
-export function searchBoxTs(mType?:number){
+export function materialTs(mType?:number){
     const { proxy } = getCurrentInstance() as any;
     // 全局方法定义
     const NumberHandle = proxy.$NumberHandle
@@ -87,7 +88,8 @@ export function searchBoxTs(mType?:number){
         ],
         tasksList:[],
         chooseList_Item:[],//选中素材的整个obj
-        collectList:[]
+        collectList:[],
+        ratio_size:''
     })
 
     //收藏夹列表
@@ -124,7 +126,13 @@ export function searchBoxTs(mType?:number){
 
     //获取尺寸列表
     const getSizeList = async () => {
-        let res:any = await proxy.$http.get(Api.sizeTypeList)
+        const paramsModel = reactive<{ratio?:string}>({
+            ratio:''
+        })
+        if(mType){ //弹框
+            paramsModel.ratio = pageInfo.ratio_size
+        }
+        let res:any = await proxy.$http.get(Api.sizeTypeList,paramsModel)
         if(res&&res.errNo=='0'){
             let resNew:any = res.rst
             pageInfo.sizeTypeList = []
@@ -134,6 +142,9 @@ export function searchBoxTs(mType?:number){
                     value:item
                 })
             })
+            if(mType){
+                sizeTypeRef.value!.value = resNew
+            }
         }else{
             ElMessage.error(res.errMsg)
         }
@@ -188,22 +199,21 @@ export function searchBoxTs(mType?:number){
         }
     }
 
-    const sizeVisibleEvent = (val:any,type:string) => {
-      if(val == false){
-          if(type=='cover'){
-              init_collect_list()
-          }else{
-              init()
-          }
-      }
+    const sizeVisibleEvent = async (type:string) => {
+        pageInfo.materialList = []
+        if(type=='cover'){
+            await init_collect_list()
+        }else{
+            await init()
+        }
     }
 
     const initAll = (mType?:number) => {
         nextTick(async ()=>{
             // mType : 创意素材弹框 - 1:video  /  2:cover
             m_type.value = mType || ''
+            await getSizeList()
             init()
-            getSizeList()
             init_createrList()
             CataRef.value!.initAllAlbum()
             tagRef.value!.init()

src/components/businessMoudle/batchGdt/configArea/creativeMaterial/ts/uploadAddGetRes.ts

@@ -1,14 +1,111 @@
-import {getCurrentInstance, nextTick, reactive, ref} from "vue";
-import {fileParam, materialManage, reactiveTableAndAny} from "@/api/ApiModel";
+import {getCurrentInstance, inject, reactive, ref} from "vue";
+import {creative,reactiveTableAndAny} from "@/api/ApiModel";
 import {Api} from "@/api/api";
 import {ElMessage} from "element-plus";
+import _ from "lodash";
 
 
 
-export function uploadAddGetResTs(){
+export function uploadAddGetResTs(generateCoverParams?:number,successEvent?:any){
+    const { proxy } = getCurrentInstance() as any;
+// 全局方法定义
+    const NumberHandle = proxy.$NumberHandle
 
+//得到上边传来的值
+    const inject_accountIds = inject('accountIds')
+    const up_record_id = ref<null|string|number>()
 
-    return{
+    const fullLoading = ref<boolean>(false)
+//得到up_record_id
+    const get_up_record_id = async (targetArr:any) => {
+        let arr:any = _.cloneDeep(inject_accountIds)
+        let aIds:any = []
+        arr._object[arr._key].forEach(a=>{
+            aIds.push(a.id)
+        })
+        if(aIds&&aIds.length==0){
+            fullLoading.value = false
+            ElMessage.error('account_ids错误')
+            return
+        }
+        if(targetArr&&targetArr.length==0){
+            fullLoading.value = false
+            ElMessage.error('暂无符合条件的素材')
+            return
+        }
+        const paramsModel = reactive<creative>({
+            account_ids: aIds,
+            target_ids:targetArr,
+            type:'material',
+            is_generate_cover:generateCoverParams,
+        })
+        let res:any = await proxy.$http.post(Api.creative_upload,paramsModel)
+        if(res&&res.errNo=='0'){
+            let resNew:any = res.rst
+            if(resNew){
+                up_record_id.value = resNew.up_record_id
+            }
+        }else{
+            ElMessage.error(res.errMsg)
+            fullLoading.value = false
+        }
+    }
+
+    const requestObj = reactive<reactiveTableAndAny>({
+        requestNum:1,
+        timer_get_upload_res:null,
+        upload_flag:false
+    })
+
+    //轮询 - 得到上传结果
+    const get_upload_res = async () => {
+        if(!up_record_id.value){
+            fullLoading.value = false
+            return
+        }
+        const paramsModel = reactive<{up_record_id:null|string|number}>({
+            up_record_id: up_record_id.value,
+        })
+        let res:any = await proxy.$http.get(Api.creative_upload_getRes,paramsModel)
+        if(res&&res.errNo=='0'){
+            let resNew:any = res.rst
+            if(resNew){
+                if(!resNew.result){
+                    requestObj.upload_flag = true
+                    requestObj.requestNum++
+                    if(requestObj.requestNum <= 100){
+                        requestObj.timer_get_upload_res = setTimeout(()=>{
+                            get_upload_res()
+                        },3000)
+                    }
+                }else{ //成功获取到数据
+                    requestObj.upload_flag = false
+                    fullLoading.value = false
+                    successEvent(resNew.result)
+                    dialogShow.value = false
+                }
+            }
+        }else{
+            fullLoading.value = false
+            ElMessage.error(res.errMsg)
+        }
+    }
 
+    const dialogShow = ref<boolean>(false)
+    //取消
+    const cancelEvent = () => {
+        dialogShow.value = false
+        clearTimeout(requestObj.timer_get_upload_res)
+        requestObj.upload_flag = false
+    }
+
+
+    return{
+        get_up_record_id,
+        get_upload_res,
+        requestObj,
+        cancelEvent,
+        dialogShow,
+        fullLoading,
     }
 }

src/components/businessMoudle/batchGdt/configArea/directPacket/common/Cascader/index.ts

@@ -1,4 +1,4 @@
-import {computed, getCurrentInstance, reactive, ref} from "vue";
+import {computed, getCurrentInstance, nextTick, reactive, ref, watch} from "vue";
 import SubList from '@/components/businessMoudle/batchGdt/configArea/directPacket/common/Cascader/subList.vue'
 import {reactiveTableAndAny} from "@/api/ApiModel";
 import _ from "lodash";
@@ -8,13 +8,36 @@ export function cascaderTs(propsParams:any){
     const { proxy } = getCurrentInstance() as any;
 // 全局方法定义
     const NumberHandle = proxy.$NumberHandle
-
-
 //列表
     const opionsList = computed(()=>{
         return propsParams.list
     })
 
+//回显值
+    const echo_user_os_Event = () => {
+        console.log(1);
+        const {echoVal} = propsParams
+        if(echoVal&&echoVal.length>0){
+            echoVal.forEach(a=>{
+                opionsList.value.forEach(item=>{
+                    if(item.id == a){
+                        item.isCheck = true
+                    }else{
+                        set_check(item.child,true)
+                    }
+                })
+            })
+        }
+    }
+
+
+
+    watch(()=>propsParams.updateKey,()=>{
+        echo_user_os_Event()
+    },{immediate:true,deep:true})
+
+
+
     const acIdx = ref<number>(-1)
 
     //全选
@@ -38,12 +61,14 @@ export function cascaderTs(propsParams:any){
 
     //设置下级是否全选或全不选
     const set_check = (arr:any,val:boolean) => {
-        arr.forEach(item=>{
-            item.isCheck = val
-            if(item.child&&item.child.length>0){
-                set_check(item.child,val)
-            }
-        })
+        if(arr&&arr.length>0){
+            arr.forEach(item=>{
+                item.isCheck = val
+                if(item.child&&item.child.length>0){
+                    set_check(item.child,val)
+                }
+            })
+        }
     }
 
 //全选
@@ -94,6 +119,7 @@ export function cascaderTs(propsParams:any){
         opionsList,
         allEvent,
         updateKey,
+        set_check,
         ItemClickShowSubEvent,
         ItemClickEvent,
         setParentItemCheckEvent,

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

@@ -1,6 +1,6 @@
 <template>
+  {{echoVal}}
   <div class="flexWrap" style="align-items: flex-start">
-    {{testList.list}}
     <div class="panel" >
       <div class="title">{{title||'-'}}</div>
       <div class="content">
@@ -8,7 +8,7 @@
           <el-checkbox v-model="isAllCheck" size="default" @change="val=>allEvent(val)">全选</el-checkbox>
         </div>
         <div class="cItem" v-for="(item,itemIdx) in opionsList" :class="itemIdx == acIdx ? 'active' : ''" @click.stop="ItemClickShowSubEvent(itemIdx,item)">
-          <el-checkbox v-model="item.isCheck" size="default" @change="val=>ItemClickEvent(itemIdx,item)">{{item.name}}</el-checkbox>
+          <el-checkbox v-model="item.isCheck" size="default" @change="val=>ItemClickEvent(itemIdx,item)">{{item.name}}-{{item.id}}</el-checkbox>
           <el-icon class="lMarauto" color="#606266" :size="14" v-if="item.child&&item.child.length>0"><i-ep-ArrowRight/></el-icon>
         </div>
       </div>
@@ -21,12 +21,12 @@
     </template>
 
 
-    <div class="panel">
+    <div class="panel" v-if="chooseNum>0">
       <div class="title c-000 f12">已选<span>({{chooseNum}})</span></div>
       <div class="content">
         <template v-for="(item,idx) in opionsList">
-          <div class="cItem active tMar8"  v-if="item.isCheck">
-            {{item.name}}-{{item.id}}}
+          <div class="cItem active tMar8 f13"  v-if="item.isCheck">
+            {{item.name}}-{{item.id}}
             <el-icon class="lMarauto" color="#606266" :size="14" @click="deleEvent(item)"><i-ep-Close/></el-icon>
           </div>
           <template v-else>
@@ -45,41 +45,58 @@
 import SubChooseItem from '@/components/businessMoudle/batchGdt/configArea/directPacket/common/Cascader/subChooseItem.vue'
 import {cascaderTs} from "@/components/businessMoudle/batchGdt/configArea/directPacket/common/Cascader/index";
 import {subChooseTs} from "@/components/businessMoudle/batchGdt/configArea/directPacket/common/Cascader/subChoose";
-import {computed, defineProps, withDefaults, watch, reactive} from "vue";
+import {computed, defineProps, withDefaults, watch, reactive, nextTick} from "vue";
+import {reactiveTableAndAny} from "@/api/ApiModel";
+import _ from "lodash";
 
+const emit = defineEmits<{
+  (event: "getIds",val:any): void;
+}>();
 
 const props = withDefaults(defineProps<{
   title?: string,
   list?:any,
   subId?:string|number,
+  updateKey?:number,
+  echoVal?:any
 }>(), {
   title: '',
   list:[],
-  subId:''
+  subId:'',
+  updateKey:1,
+  echoVal:[]
 })
 
+const chooseObj = reactive<reactiveTableAndAny>({
+  ids:[]
+})
 
 //已选的个数
 const chooseNum = computed(()=>{
   let num:number = 0
+  chooseObj.ids = []
   opionsList.value.forEach(item=>{
     if(item.isCheck){
       num+=1
+      chooseObj.ids.push(item.id)
     }else{
       if(item.child&&item.child.length>0){
         item.child.forEach(sub=>{
           if(sub.isCheck){
             num+=1
+            chooseObj.ids.push(sub.id)
           }else{
             if(sub.child&&sub.child.length>0){
               sub.child.forEach(sun=>{
                 if(sun.isCheck){
                   num+=1
+                  chooseObj.ids.push(sun.id)
                 }else{
                   if(sun.child&&sun.child.length>0){
                     sun.child.forEach(cSun=>{
                       if(cSun.isCheck){
                         num+=1
+                        chooseObj.ids.push(cSun.id)
                       }
                     })
                   }
@@ -91,6 +108,7 @@ const chooseNum = computed(()=>{
       }
     }
   })
+  emit('getIds',chooseObj.ids)
   return num
 })
 
@@ -110,8 +128,6 @@ const subChooseNum = (arr:any,numProp:number) => {
 }
 
 
-
-
 const {
   acIdx,
   isAllCheck,
@@ -121,7 +137,8 @@ const {
   updateKey,
   ItemClickShowSubEvent,
   ItemClickEvent,
-  setParentItemCheckEvent
+  setParentItemCheckEvent,
+  set_check
 }  = cascaderTs(props)
 
 
@@ -143,6 +160,8 @@ const {deleEvent} = subChooseTs()
 //   }
 // }
 
+
+
 </script>
 <style lang="scss" scoped>
 .panel{
@@ -169,8 +188,10 @@ const {deleEvent} = subChooseTs()
       align-items: center;
       cursor: pointer;
       padding: 0 12px;
-      height: 32px;
-      line-height: 32px;
+      height: 30px;
+      :deep(.el-checkbox__label){
+        font-size: 13px;
+      }
       &:hover{
         background-color: #f8f8f8;
       }

src/components/businessMoudle/batchGdt/configArea/directPacket/common/Cascader/subChooseItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="cItem active tMar8"  v-if="ITEM.isCheck">
+  <div class="cItem active tMar8 f13"  v-if="ITEM.isCheck">
     {{ITEM.name}}-{{ITEM.id}}
     <el-icon class="lMarauto" color="#606266" :size="14" @click="deleEvent(ITEM)"><i-ep-Close/></el-icon>
   </div>
@@ -48,8 +48,7 @@ const {deleEvent} = subChooseTs()
       align-items: center;
       cursor: pointer;
       padding: 0 12px;
-      height: 32px;
-      line-height: 32px;
+      height: 30px;
       &:hover{
         background-color: #f8f8f8;
       }

src/components/businessMoudle/batchGdt/configArea/directPacket/common/Cascader/subList.vue

@@ -91,8 +91,11 @@ watch(()=>isAllCheck.value,(val)=>{
       align-items: center;
       cursor: pointer;
       padding: 0 12px;
-      height: 32px;
-      line-height: 32px;
+      height: 30px;
+      line-height: 30px;
+      :deep(.el-checkbox__label){
+        font-size: 13px;
+      }
       &:hover{
         background-color: #f8f8f8;
       }

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

@@ -32,11 +32,11 @@
 import { reactive, watch} from "vue";
 import {reactiveTableAndAny} from "@/api/ApiModel";
 import _ from "lodash";
-interface Emits {
+
+const emit = defineEmits<{
   (event: "changeEvent"): void;
   (event: "returnEvent", val: any): void;
-}
-const emit = defineEmits<Emits>();
+}>();
 
 
 const pageInfo = reactive<reactiveTableAndAny>({

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

@@ -10,10 +10,9 @@
       :dialog-title="(propsInfo.id ? '编辑' : '新建') + '定向包'">
     <template v-slot:content>
       <div class="dialogBox affix-container" v-loading="loading">
-        <Cascade :list="pageInfo.location_ca_list"></Cascade>
-<!--        <div style="height: 200px"></div>-->
         <Input class="bMar20" ref="InputRef_name" spanTitleWidth="112px" :showTitle="true" title="定向包名称" inputWidth="400px" maxLength="15"/>
         <template v-for="item in pageInfoTs.jsonInfo">
+          {{item}}
           <CheckGroup v-if="item.isMultiple" :checkList="item.list"
                       :haveNotes="item.haveNotes"
                       :haveFlex="item.haveFlex"
@@ -34,6 +33,7 @@
                       @returnEvent="val=>reEventRadio(val,item)">
             <template v-if="item.EgName=='geo_location'" v-slot:appoint>
               <div class="tMar20">
+                <Cascade :list="pageInfo.location_ca_list" key="geo_location" @getIds="val=>{pageInfo.location_ca_ids = val}"></Cascade>
                 <el-checkbox-group v-model="pageInfo.locationCheckList">
                   <el-checkbox v-for="i in pageInfo.locationList" :label="i.label" >{{i.value}}</el-checkbox>
                 </el-checkbox-group>
@@ -74,6 +74,12 @@
               </div>
             </template>
 
+            <template v-if="item.EgName=='user_os'" v-slot:appoint>
+              <div class="tMar20">
+                <Cascade :list="pageInfo.user_os_list" key="user_os" :echoVal="item.value" :updateKey="pageInfo.user_os_key" @getIds="val=>{pageInfo.user_os_ids = val}"></Cascade>
+              </div>
+            </template>
+
           </RadioGroup>
         </template>
 
@@ -138,6 +144,9 @@ const pageInfo = reactive<reactiveTableAndAny>({
   user_os_list:[],
   estimationObj:{},
   directPacketParams:{},//确认和获取信息后台需要的参数
+  user_os_ids:[],
+  location_ca_ids:[],
+  user_os_key:1
 })
 
 
@@ -149,7 +158,7 @@ const get_user_os_list = async () => {
     pageInfo.user_os_list = []
     if(resNew){
       for(let i in resNew){
-        pageInfo.user_os_list.push({id:i,name:i,children:resNew[i]})
+        pageInfo.user_os_list.push({id:i,name:i,child:resNew[i]})
       }
     }
   }else{
@@ -233,7 +242,9 @@ const handledirectPacketParams = async () => {
           obj[item.EgName] = ''
         }
       }else{//单选
-        obj[item.EgName] = (r_val == 'unlimited' ? '' : (r_val == 'appoint' ? 1 : r_val))
+        if(item.EgName!=='user_os'){
+          obj[item.EgName] = (r_val == 'unlimited' ? '' : (r_val == 'appoint' ? 1 : r_val))
+        }
 
         if(item.EgName=='geo_location' && r_val == 'appoint'){
           let loList:any = pageInfo.locationCheckList
@@ -256,6 +267,16 @@ const handledirectPacketParams = async () => {
           obj.custom_audience = list1&&list1.length>0 ? list1.join(',') : ''
           obj.excluded_custom_audience = list2&&list2.length>0 ? list2.join(',') : ''
         }
+
+        if(item.EgName=='user_os' && r_val == 'appoint'){
+          let list1:any = pageInfo.user_os_ids
+          obj.user_os = list1&&list1.length>0 ? list1.join(',') : ''
+        }
+
+        if(item.EgName=='geo_location' && r_val == 'appoint'){
+          let list1:any = pageInfo.location_ca_ids
+          obj.regions = list1&&list1.length>0 ? list1.join(',') : ''
+        }
       }
     })
   })
@@ -294,7 +315,6 @@ const confirmEvent = async () => {
   }
 }
 
-
 //处理编辑的数据,在刚显示弹框的时候调用
 const handleEditData = async () => {
   InputRef_name.value!.value = ''
@@ -304,6 +324,7 @@ const handleEditData = async () => {
     InputRef_name.value!.value = props.propsInfo.name
     if(Object.prototype.toString.call(props.propsInfo.echoList) === '[object Object]'){ //有值
       await editEchoEcent(props.propsInfo.echoList,pageInfoTs.jsonInfo)
+      pageInfo.user_os_key++
       loading.value = false
     }else{
       loading.value = false
@@ -321,12 +342,11 @@ const switchShow = (val:boolean)=>{
       await get_behavior_list()
       //处理编辑的数据
       await handleEditData()
-      //得到右边人群覆盖的数据
-      await getEstimation()
-
-      // get_user_os_list()
-
+      //操作系统版本和地区
       get_location_list()
+      get_user_os_list()
+      //得到右边人群覆盖的数据
+      getEstimation()
 
 
     })

src/components/businessMoudle/batchGdt/configArea/directPacket/ts/directDetialPreview.ts

@@ -199,6 +199,7 @@ export function directDetialPreviewTs(){
                 })
             }else{//有值
                 obj.value = val
+
                 if(!obj.isMultiple && obj.haveAppoint){//单选 并且 有指定
                     obj.radioVal = 'appoint'
                 }else if(!obj.isMultiple){//只单选

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

@@ -1,5 +1,7 @@
 <template>
-
+  <div class="flex titleBox">
+    <span>程序化批量/广点通</span>
+  </div>
   <div class="areaBox">
     <div class="areaTitle">配置区
       <span class="smallTitle lMarauto">预览广告数 : <span class="c-theme">{{NumberHandle(pageInfo.adNum)||0}}</span></span>
@@ -25,7 +27,6 @@
       </div>
 
       <div class="configArea">
-
         <div v-for="item in pageInfo.adTitleList" :key="item.id"
              :style=" {width:item.name == '广告' ? 'calc((100vw - 40px - 32px) / 6 * 2)' : 'calc((100vw - 40px - 32px) / 6 * 4)'}">
           <div class="bigTitle" :class="item.name == '广告创意' ? 'no_left_boder' : ''">{{item.name}}</div>
@@ -39,7 +40,7 @@
                 <template v-if="sub.name == '创意文案'">
                   <Copywriter ref="CopywriterRef" :showFlag="sub.haveContent"></Copywriter>
                 </template>
-                <div class="noData" v-if="!sub.haveContent">暂无数据</div>
+                <div class="noData" v-if="!sub.haveContent">暂无数据 </div>
                 <!-- 定向包展示 -->
                 <template v-if="sub.name == '定向包'">
                   <DirectPacketExhibition :showFlag="sub.haveContent" ref="DirectPacketExhibitionRef" @updateHaveContent="updateHaveContent"></DirectPacketExhibition>
@@ -67,10 +68,10 @@
                 <template v-if="sub.name == '创意素材'">
                   <div class="flex bMar8" v-for="cItem in cMaterial.list" :key="cItem.id">
                     <div class="flex" style="width: 100%;justify-content: center">
-                      <video :src="cItem.videoUrl" height="76"></video>
+                      <video :src="cItem.videoUrl" height="auto" width="100%"></video>
                     </div>
                     <div style="width: 100%;justify-content: center" class="lMar10 flex">
-                      <img v-if="cMaterial.haveCoverFlag" :src="cItem.picUrl" height="76"/>
+                      <img v-if="cMaterial.haveCoverFlag" :src="cItem.picUrl" height="auto" width="100%"/>
                     </div>
                   </div>
                 </template>
@@ -79,7 +80,6 @@
             </div>
           </div>
         </div>
-
       </div>
 
       <div class="btnArea">
@@ -92,17 +92,25 @@
           </template>
         </span>
         <span class="lMarauto">
-          <el-button type="primary">批量预览广告</el-button>
+          <el-button type="primary" @click="openPreAreaEvent">批量预览广告</el-button>
 <!--          <el-button type="primary" class="lMar10">保存策略组</el-button>-->
         </span>
       </div>
     </div>
   </div>
+  <!--  预览区-->
+  <template v-if="previewObj.showPreFlag">
+    <PreviewArea :infoObj="previewObj"></PreviewArea>
+  </template>
 
   <!--规则配置-->
   <RuleConfig ref="RuleConfigRef" @ExposeEvent="val=>pageInfo.RuleConfigObj = val"></RuleConfig>
   <!--  创意素材-->
-  <CreativeMaterial ref="CreativeMaterialRef" :haveCoverFlag="cMaterial.haveCoverFlag" @assignEvent="assignEvent_CreativeMaterial"></CreativeMaterial>
+  <CreativeMaterial ref="CreativeMaterialRef"
+                    :haveCoverFlag="cMaterial.haveCoverFlag"
+                    :video_tips="cMaterial.video_tips"
+                    :image_tips="cMaterial.image_tips"
+                    @assignEvent="assignEvent_CreativeMaterial"></CreativeMaterial>
 
 
   <!-- 创意基本信息 -->
@@ -117,14 +125,17 @@
   <AttributionOuter :visible="basicInfoData.outerConfig.attributionOuter.visible" :accIdsList="pageInfo.accIdsList" :fillback="basicInfoData.outerConfig['attributionOuter'].value" @close="(obj)=>{basicOuterClose({val: obj?.val || null, type: obj?.type || null , key:'attributionOuter'})}"></AttributionOuter>
   <!-- 优量汇流量包 -->
   <UnionPosition :visible="basicInfoData.outerConfig.unionPosition.visible" :accIdsList="pageInfo.accIdsList" :infoSelect="basicInfoData.outerConfig.unionPosition.infoSelect" :fillback="basicInfoData.outerConfig['unionPosition'].value"  @close="(obj)=>{basicOuterClose({val: obj?.val || null, type: obj?.type || null , key:'unionPosition'})}"></UnionPosition>
+
+
 </template>
 <script setup lang="ts">
 import {getCurrentInstance, nextTick, onMounted, reactive, ref, provide, computed,toRef,watch} from "vue";
-import {adqParam, reactiveTableAndAny, ruleConfig} from "@/api/ApiModel";
+import {adqParam, reactiveTableAndAny} from "@/api/ApiModel";
 import Select from '@/components/capsulationMoudle/_select.vue'
 import DirectPacketExhibition from '@/components/businessMoudle/batchGdt/configArea/directPacket/echoIndex.vue'
 import RuleConfig from '@/components/businessMoudle/batchGdt/configArea/ruleConfig/index.vue'
 import CreativeMaterial from '@/components/businessMoudle/batchGdt/configArea/creativeMaterial/index.vue'
+import PreviewArea from '@/components/businessMoudle/batchGdt/previewArea/index.vue'
 import {Api} from "@/api/api";
 import {ElMessage} from "element-plus";
 import BasicInfo from "./basicInfo/index.vue";
@@ -140,6 +151,11 @@ import _ from "lodash";
 const { proxy } = getCurrentInstance() as any;
 // 全局方法定义
 const NumberHandle = proxy.$NumberHandle
+const emit = defineEmits<{
+  (event: "openPreEvent", val: boolean,arr:any): void; //打开预览区
+}>();
+
+
 const targetRef = ref<{value:any}>()
 const originalityBasicRef = ref()
 
@@ -165,6 +181,7 @@ const pageInfo = reactive<reactiveTableAndAny>({
   RuleConfigObj:{},//规则配置的值
 })
 
+
 //广告基本信息
 const basicInfoData = reactive<any>({
   visible:false,
@@ -251,6 +268,28 @@ const accEvent = () => {
     basicInfoData.outerConfig[i].value = getCommonValue( basicInfoData.outerConfig[i].value )
   }
 }
+
+// 预览区
+const previewObj = reactive<reactiveTableAndAny>({
+  showPreFlag:false,
+  updateKey:1,
+  accVal:[],
+  RuleConfigObj:{}
+})
+const openPreAreaEvent = () => {
+  let arr:any = pageInfo.accIdsList
+  if(arr&&arr.length<=0){
+    ElMessage.error('请选择媒体账户!')
+    return
+  }
+  openPreEvent(arr)
+}
+const openPreEvent = (arr:any) => {
+  previewObj.showPreFlag = true
+  previewObj.updateKey++
+  previewObj.accVal = _.cloneDeep(arr)
+  previewObj.RuleConfigObj = _.cloneDeep(pageInfo.RuleConfigObj)
+}
 const targetChange = () => {
   pageInfo.targetValue = targetRef.value!.value
 }
@@ -275,17 +314,53 @@ const get_ruleConfig_info = async () => {
 }
 
 //创意素材
-const CreativeMaterialRef = ref<{switchShow:(val:boolean,isEdit:boolean,arr:any)=>void}>()
+const CreativeMaterialRef = ref<{switchShow:(val:boolean,isEdit:boolean,arr:any)=>void,clearAllEvent:()=>void}>()
 const cMaterial = reactive<reactiveTableAndAny>({
   list:[],
   list_copy:[],
   key:1,
-  haveCoverFlag:true
+  haveCoverFlag:false,
+  video_tips:{},
+  image_tips:{},
+  resResult:[],//提审后台需要的值
 })
+//处理素材返回来的值
+const handle_resResult = (resResult:any) => {
+  let resArr:any = []
+  resResult.forEach(item=>{
+    let obj:any = {}
+    obj.account_id = item.account_id
+    obj.list = []
+    for(let i in item){
+      if(item[i].material_res&&item[i].material_res.video_id){
+        obj.list.push({
+          video_id:item[i].material_res.video_id,
+          image_id:item[i].material_res.cover.image_id
+        })
+      }
+    }
+    resArr.push(obj)
+  })
+  return resArr
+}
 //创意素材值回显
-const assignEvent_CreativeMaterial = (val:any) => {
+const assignEvent_CreativeMaterial = async (val:any,resResult:any) => {
   cMaterial.list_copy = _.cloneDeep(val)
   cMaterial.key++
+  let cloneRes:any = await handle_resResult(_.cloneDeep(resResult))
+  let arr:any = cMaterial.resResult // 处理成提审后台需要的值
+  originalityBasicInfoData.params.forEach(item=>{
+    cloneRes.forEach(cItem=>{
+      if(item.account_id == cItem.account_id){
+        cItem.list.forEach(c=>{
+          item.adcreative_elements = Object.assign(item.adcreative_elements,c)
+          arr.push(item)
+        })
+      }
+    })
+  })
+  cMaterial.resResult = arr
+  console.log(cMaterial.resResult);
 }
 //监听创意素材点击了确定
 watch(()=>cMaterial.key,()=>{
@@ -293,12 +368,22 @@ watch(()=>cMaterial.key,()=>{
   let num = cMaterial.list&&cMaterial.list.length
   updateHaveContent(6,num)
 })
+//得到是否有封面 , 以及视频和图片尺寸
+const get_cover_info = () => {
+  let obj:any = originalityBasicInfoData.apiResult.adTemplateItem.adcreative_elements
+  cMaterial.video_tips = obj.video.restriction.video_restriction
+  if(obj.image){
+    cMaterial.haveCoverFlag = true
+    cMaterial.image_tips = obj.image.restriction.image_restriction
+  }
+}
+
 
 // 定向包
 const DirectPacketExhibitionRef = ref<{get_echoAcId:()=>void,showDirectPacket:()=>void,clearDirectContent:()=>void}>()
 
 // 打开添加 / 编辑
-const openDialogEvent = (sub:any) => {
+const openDialogEvent = async (sub:any) => {
   if(pageInfo.accIdsList && pageInfo.accIdsList.length<=0){
     ElMessage.error('请选择媒体账户!')
     return
@@ -315,9 +400,6 @@ const openDialogEvent = (sub:any) => {
       }
     })
   }
-  if(sub.name == '创意素材'){
-      CreativeMaterialRef.value!.switchShow(true,sub.haveContent,cMaterial.list)
-  }
   if(sub.name == '广告基本信息'){
     basicInfoData.visible = true;
   }
@@ -332,6 +414,30 @@ const openDialogEvent = (sub:any) => {
       ElMessage.error('请完善广告基本信息!')
     }
   }
+
+  if(sub.name == '创意素材'){
+    let _id:number = 5
+    let _haveContent:boolean = false
+    pageInfo.adTitleList.forEach(item=>{
+      if(item.id == _id){
+        _haveContent = item.haveContent
+      }else{
+        if(item.subList&&item.subList.length>0){
+          item.subList.forEach(sub=>{
+            if(sub.id == _id){
+              _haveContent = sub.haveContent
+            }
+          })
+        }
+      }
+    })
+    if(!_haveContent){
+      ElMessage.error('请先完善广告基本信息!')
+      return;
+    }
+    await get_cover_info()
+    CreativeMaterialRef.value!.switchShow(true,sub.haveContent,cMaterial.list)
+  }
   if(sub.name == '创意文案'){
     CopywriterRef.value![0].initFun(true)
   }
@@ -377,6 +483,78 @@ const originalityBasicClose = (obj) => {
     originalityBasicInfoData.receiveForm = obj.form
     originalityBasicInfoData.apiResult = obj.apiResult
     updateHaveContent(5)
+    console.log(obj);
+
+
+    let test:any = _.cloneDeep([
+      {
+        "account_id": "30159231",
+        "100": {
+          "material_res": {
+            "video_id": 8091724345,
+            "cover": {
+              "image_id": "8175212937",
+              "preview_url": "http://pgdt.gtimg.cn/141/20204/snscosdownload/SZ/reserved/6501625600081dfe08e36f8046908e0b0000008d00004eec?m=f530c6a6a35ada7647f86307631d7edd&ck=f530c6a6a35ada7647f86307631d7edd&sha256=f1b3c94a7b78129b6aa5b08cf1ff28ae5784255d0753441885c52220eb95d6fa",
+              "description": "图片-720-1280-1-1694589526",
+              "width": 720,
+              "height": 1280,
+              "file_size": 95869,
+              "type": "IMAGE_TYPE_JPG",
+              "signature": "f530c6a6a35ada7647f86307631d7edd"
+            }
+          }
+        },
+        "115": {
+          "material_res": {
+            "video_id": 8232178730,
+            "cover": {
+              "image_id": "8232170993",
+              "preview_url": "http://pgdt.gtimg.cn/141/20204/snscosdownload/SZ/reserved/650a5cac000bf0f22c4a9212dd64bc1e0000008d00004eec?m=6096a15874c54f002aa6d889104ad977&ck=6096a15874c54f002aa6d889104ad977&sha256=79735f7cafd80031ca7dd366733427d8e3efbdc56400fc0e91203ff67c5bcb1c",
+              "description": "图片-1080-1920-1-1695177900",
+              "width": 1080,
+              "height": 1920,
+              "file_size": 294089,
+              "type": "IMAGE_TYPE_JPG",
+              "signature": "6096a15874c54f002aa6d889104ad977"
+            }
+          }
+        }
+      },
+      {
+        "account_id": "30159230",
+        "100": {
+          "material_res": {
+            "video_id": 8232170360,
+            "cover": {
+              "image_id": "8175213109",
+              "preview_url": "http://pgdt.gtimg.cn/141/20204/snscosdownload/SZ/reserved/65016257000774e518e6527c464b88090000008d00004eec?m=f530c6a6a35ada7647f86307631d7edd&ck=f530c6a6a35ada7647f86307631d7edd&sha256=f1b3c94a7b78129b6aa5b08cf1ff28ae5784255d0753441885c52220eb95d6fa",
+              "description": "图片-720-1280-1-1694589527",
+              "width": 720,
+              "height": 1280,
+              "file_size": 95869,
+              "type": "IMAGE_TYPE_JPG",
+              "signature": "f530c6a6a35ada7647f86307631d7edd"
+            }
+          }
+        },
+        "115": {
+          "material_res": {
+            "video_id": 8232183918,
+            "cover": {
+              "image_id": "8232171373",
+              "preview_url": "http://pgdt.gtimg.cn/141/20204/snscosdownload/SZ/reserved/650a5caf0003ac9a158d4303616fbc1e0000008d00004eec?m=6096a15874c54f002aa6d889104ad977&ck=6096a15874c54f002aa6d889104ad977&sha256=79735f7cafd80031ca7dd366733427d8e3efbdc56400fc0e91203ff67c5bcb1c",
+              "description": "图片-1080-1920-1-1695177903",
+              "width": 1080,
+              "height": 1920,
+              "file_size": 294089,
+              "type": "IMAGE_TYPE_JPG",
+              "signature": "6096a15874c54f002aa6d889104ad977"
+            }
+          }
+        }
+      }
+    ])
+    handle_resResult(test)
   }
 }
 /**广告基础信息回调 */
@@ -488,6 +666,15 @@ provide('accountIds',toRef(pageInfo,'accIdsList'))
 </script>
 <style lang="scss" scoped>
 @import "src/assets/style/batchGdt.scss";
+.titleBox{
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 48px;
+  color: #515a6e;
+  background-color: #fff;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,.08);
+  padding: 0 30px 0 32px;
+}
 .areaCon{
   .screenArea{
     display: flex;

src/components/businessMoudle/batchGdt/index.vue

@@ -1,46 +0,0 @@
-<template>
-  <div class="flex titleBox">
-    <span>程序化批量/广点通</span>
-<!--    <div class="lMarauto">-->
-<!--      <el-button type="primary" >选择策略组</el-button>-->
-<!--    </div>-->
-  </div>
-
-  <!--  配置区-->
-  <ConfigArea></ConfigArea>
-
-  <!--  预览区-->
-  <PreviewArea></PreviewArea>
-
-</template>
-<script setup lang="ts">
-import {getCurrentInstance, nextTick, onMounted, reactive, ref} from "vue";
-import ConfigArea from '@/components/businessMoudle/batchGdt/configArea/index.vue'
-import PreviewArea from '@/components/businessMoudle/batchGdt/previewArea/index.vue'
-
-const { proxy } = getCurrentInstance() as any;
-// 全局方法定义
-const NumberHandle = proxy.$NumberHandle
-
-
-
-
-
-onMounted(()=>{
-  nextTick(()=>{
-
-  })
-})
-</script>
-<style lang="scss" scoped>
-@import "src/assets/style/batchGdt.scss";
-.titleBox{
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 48px;
-  color: #515a6e;
-  background-color: #fff;
-  box-shadow: 0 2px 4px 0 rgba(0,0,0,.08);
-  padding: 0 30px 0 32px;
-}
-</style>

src/components/businessMoudle/batchGdt/previewArea/index.vue

@@ -1,49 +1,61 @@
 <template>
-  <div class="areaBox">
-    <div class="areaTitle flex">
-      预览区
-      <div class="lMarauto flex f14" style="font-weight: initial">
-        <span>推广计划总数 : {{pageInfo.tableList&&pageInfo.tableList.length}}</span>
-        <span class="lMar8">广告总数 : {{pageInfo.tableList&&pageInfo.tableList.length}}</span>
-        <el-button type="primary" class="lMar20" @click="auditSubmitEvent">全部提交审核</el-button>
-      </div>
-    </div>
-    <div class="areaCon">
-      <div class="flex">
-        <div class="accItem" v-for="item in pageInfo.accList" :key="item.id" :class="pageInfo.accId == item.id ? 'active' : ''" @click="accItemEvent(item.id)">{{item.name}}</div>
-      </div>
-      <div class=" flex chooseBox">
-        <div>已选 : <span>{{pageInfo.chooseList&&pageInfo.chooseList.length}}</span></div>
-        <div class="lMarauto flex">
-          <span>推广计划数量 : {{pageInfo.tableList&&pageInfo.tableList.length}}</span>
-          <span class="lMar8">广告数量 : {{pageInfo.tableList&&pageInfo.tableList.length}}</span>
-          <Dropdown title="批量操作" lMar="10px" :list="pageInfo.moreList" @close="dropdownEvent" :disabledFlag="pageInfo.chooseList&&pageInfo.chooseList.length == 0"></Dropdown>
+    <div class="areaBox">
+      <div class="areaTitle flex">
+        预览区
+        <div class="lMarauto flex f14" style="font-weight: initial">
+          <span>推广计划总数 : {{pageInfo.tableList&&pageInfo.tableList.length}}</span>
+          <span class="lMar8">广告总数 : {{pageInfo.tableList&&pageInfo.tableList.length}}</span>
+          <el-button type="primary" class="lMar20" @click="auditSubmitEvent">全部提交审核</el-button>
         </div>
       </div>
-      <el-table v-loading="loading" ref="tableRef" :data="pageInfo.tableList"
-                :header-cell-style="tableHeaderStyle"
-                :key="updateKey" style="width: 100%;"
-                border empty-text="暂无数据"
-                :row-key="rowKeyStr"
-                @selection-change="selectionChangeEvent"
-                max-height="calc(100vh - 240px)">
-        <el-table-column fixed reserve-selection type="selection" width="60" />
-        <template v-for="bigItem in pageInfo.descol">
-          <el-table-column :label="bigItem.name">
-            <template v-for="item in bigItem.list">
-              <el-table-column :fixed="item.isfixed" :min-width="item.minWidth ? item.minWidth : '130px'">
-                <template #header>
-                  <div class="flex" :style="{ justifyContent: item.alignSelf ? item.alignSelf : 'left' }" >
-                    {{ item.name }}
-                    <el-tooltip v-if="item.notes" effect="dark" :content="item.notes"><i-ep-QuestionFilled class="lMar5 c-999 f14 pointer" /></el-tooltip>
-                  </div>
-                </template>
-                <template #default="scope">
-                  <div class="cellDiv" v-if="item.column == 'a1'">
-                    <el-select v-model="scope.row.a1_6_val" @change="changeEvent_a1_6">
-                      <el-option v-for="i in pageInfo.promoteList" :key="i.k " :label="i.la" :value="i.val"/>
-                    </el-select>
-                    <div v-if="scope.row.a1_6_val == 'new'">
+      <div class="areaCon">
+        <div class="flex">
+          <div class="accItem" v-for="item in pageInfo.accList" :key="item.id" :class="pageInfo.accId == item.id ? 'active' : ''" @click="accItemEvent(item.id)">{{item.name}}</div>
+        </div>
+        <div class=" flex chooseBox">
+          <div>已选 : <span>{{pageInfo.chooseList&&pageInfo.chooseList.length}}</span></div>
+          <div class="lMarauto flex">
+            <span>推广计划数量 : {{pageInfo.tableList&&pageInfo.tableList.length}}</span>
+            <span class="lMar8">广告数量 : {{pageInfo.tableList&&pageInfo.tableList.length}}</span>
+            <!--          <Dropdown title="批量操作" lMar="10px" :list="pageInfo.moreList" @close="dropdownEvent" :disabledFlag="pageInfo.chooseList&&pageInfo.chooseList.length == 0"></Dropdown>-->
+          </div>
+        </div>
+        <el-table v-loading="loading" ref="tableRef" :data="pageInfo.tableList"
+                  :header-cell-style="tableHeaderStyle"
+                  :key="updateKey" style="width: 100%;"
+                  border empty-text="暂无数据"
+                  :row-key="rowKeyStr"
+                  @selection-change="selectionChangeEvent"
+                  max-height="calc(100vh - 240px)">
+          <el-table-column fixed reserve-selection type="selection" width="60" />
+          <template v-for="bigItem in pageInfo.descol">
+            <el-table-column :label="bigItem.name">
+              <template v-for="item in bigItem.list">
+                <el-table-column :fixed="item.isfixed" :min-width="item.minWidth ? item.minWidth : '130px'">
+                  <template #header>
+                    <div class="flex" :style="{ justifyContent: item.alignSelf ? item.alignSelf : 'left' }" >
+                      {{ item.name }}
+                      <el-tooltip v-if="item.notes" effect="dark" :content="item.notes"><i-ep-QuestionFilled class="lMar5 c-999 f14 pointer" /></el-tooltip>
+                    </div>
+                  </template>
+                  <template #default="scope">
+                    <div class="cellDiv" v-if="item.column == 'a1'">
+                      <!--
+                      已有计划先不开发
+
+                                          <el-select v-model="scope.row.a1_6_val" @change="changeEvent_a1_6">
+                                            <el-option v-for="i in pageInfo.promoteList" :key="i.k " :label="i.la" :value="i.val"/>
+                                          </el-select>
+
+                                              <div class="tMar10" v-if="scope.row.a1_6_val == 'edit'">
+                                            <el-button type="primary" @click="openSubDialogEvent(scope.row,'choosePlan')">选择推广计划</el-button>
+                                            <div v-if="scope.row.choosePlanVal" class="tMar8 c-999">
+                                              已选 : {{scope.row.choosePlanVal}}
+                                            </div>
+                                          </div>
+
+                      -->
+
                       <div class="clampOne tMar10 flex">名称:
                         <span>{{scope.row.a1_1 || '-'}}</span>
                         <el-icon color="#3173FF" class="pointer" @click="openSubDialogEvent(scope.row,'planName')"><i-ep-Edit /></el-icon>
@@ -57,67 +69,59 @@
                       </div>
                       <div class="clampOne">推广目标: {{scope.row.a1_5 || '-'}} </div>
                     </div>
-
-                    <div class="tMar10" v-if="scope.row.a1_6_val == 'edit'">
-                      <el-button type="primary" @click="openSubDialogEvent(scope.row,'choosePlan')">选择推广计划</el-button>
-                      <div v-if="scope.row.choosePlanVal" class="tMar8 c-999">
-                        已选 : {{scope.row.choosePlanVal}}
-                      </div>
+                    <div class="cellDiv flex" v-else-if="item.column == 'a2'">
+                      <span>{{scope.row.a2 || '-'}}</span>
+                      <el-icon color="#3173FF" class="pointer" @click="openSubDialogEvent(scope.row,'adName')"><i-ep-Edit /></el-icon>
                     </div>
-                  </div>
-                  <div class="cellDiv flex" v-else-if="item.column == 'a2'">
-                    <span>{{scope.row.a2 || '-'}}</span>
-                    <el-icon color="#3173FF" class="pointer" @click="openSubDialogEvent(scope.row,'adName')"><i-ep-Edit /></el-icon>
-                  </div>
-                  <div class="cellDiv flex" v-else-if="item.column == 'a3'">
-                    <span>{{scope.row.a3 || 0}}</span>元/下单
-                    <el-icon color="#3173FF" class="pointer" @click="openSubDialogEvent(scope.row,'bid')"><i-ep-Edit /></el-icon>
-                  </div>
-                  <div class="cellDiv pointer" style="color:#3173FF;" v-else-if="item.column == 'a7'" @click="openSubDialogEvent(scope.row,'seeVideoImg')">已选{{scope.row.a7 || 0}}张图片,{{scope.row.a7_1 || 0}}个视频</div>
-                  <div class="cellDiv" v-else-if="item.column == 'a8'">文案:已选{{scope.row.a8 || 0}}条文案</div>
-                  <div class="cellDiv" v-else-if="item.column == 'a10'">
-                    <Popconfirm @confirm="deleTextEvent()"/>
-                  </div>
-                  <div class="cellDiv" v-else-if="item.column == 'a11'">
-                    {{scope.row.a11==1 ? '已提交' : '待提交'}}
-                  </div>
-                  <div class="cellDiv" :style="{ justifyContent: item.alignSelf ? item.alignSelf : 'left' }" v-else>
-                    <el-tooltip :disabled="!(scope.row[item.column] && scope.row[item.column].length >30)" effect="dark" :content="scope.row[item.column]+''">
-                      <div class="clampTwo line21" style="flex: 1">
-                        {{ scope.row[item.column] || scope.row[item.column]==0 ?
-                          (item.cancleForMat ? (scope.row[item.column] ? scope.row[item.column] : '-') : NumberHandle(scope.row[item.column])) : '-'}}
-                      </div>
-                    </el-tooltip>
-                  </div>
-                </template>
-              </el-table-column>
-            </template>
-          </el-table-column>
-        </template>
-      </el-table>
+                    <div class="cellDiv flex" v-else-if="item.column == 'a3'">
+                      <span>{{scope.row.a3 || 0}}</span>元/下单
+                      <el-icon color="#3173FF" class="pointer" @click="openSubDialogEvent(scope.row,'bid')"><i-ep-Edit /></el-icon>
+                    </div>
+                    <div class="cellDiv pointer" style="color:#3173FF;" v-else-if="item.column == 'a7'" @click="openSubDialogEvent(scope.row,'seeVideoImg')">已选{{scope.row.a7 || 0}}张图片,{{scope.row.a7_1 || 0}}个视频</div>
+                    <div class="cellDiv" v-else-if="item.column == 'a8'">文案:已选{{scope.row.a8 || 0}}条文案</div>
+                    <div class="cellDiv" v-else-if="item.column == 'a10'">
+                      <Popconfirm @confirm="deleTextEvent()"/>
+                    </div>
+                    <div class="cellDiv" v-else-if="item.column == 'a11'">
+                      {{scope.row.a11==1 ? '已提交' : '待提交'}}
+                    </div>
+                    <div class="cellDiv" :style="{ justifyContent: item.alignSelf ? item.alignSelf : 'left' }" v-else>
+                      <el-tooltip :disabled="!(scope.row[item.column] && scope.row[item.column].length >30)" effect="dark" :content="scope.row[item.column]+''">
+                        <div class="clampTwo line21" style="flex: 1">
+                          {{ scope.row[item.column] || scope.row[item.column]==0 ?
+                            (item.cancleForMat ? (scope.row[item.column] ? scope.row[item.column] : '-') : NumberHandle(scope.row[item.column])) : '-'}}
+                        </div>
+                      </el-tooltip>
+                    </div>
+                  </template>
+                </el-table-column>
+              </template>
+            </el-table-column>
+          </template>
+        </el-table>
+      </div>
     </div>
-  </div>
 
-  <!--修改推广计划名称-->
-  <EditPromotePlanName ref="EditPromotePlanNameRef" :propInfo="pageInfo.planName" @confirm="val=>echoVal(val,'planName')"></EditPromotePlanName>
-  <!--选择推广计划-->
-  <ChoosePromotePlan ref="ChoosePromotePlanRef" @confirm="val=>echoVal(val,'choosePlan')"></ChoosePromotePlan>
-  <!--推广计划日预算-->
-  <PromotePlanBudget_day ref="PromotePlanBudget_dayRef" @confirm="val=>echoVal(val,'PromotePlanBudget_day')"></PromotePlanBudget_day>
-  <!--推广计划总预算-->
-  <PromotePlanBudget_total ref="PromotePlanBudget_totalRef" @confirm="val=>echoVal(val,'PromotePlanBudget_total')"></PromotePlanBudget_total>
-  <!--修改广告名称-->
-  <EditAdverteName ref="EditAdverteNameRef" :propInfo="pageInfo.adName" @confirm="val=>echoVal(val,'adName')"></EditAdverteName>
-  <!--修改出价-->
-  <EditBid ref="EditBidRef" :propInfo="pageInfo.bid" @confirm="val=>echoVal(val,'bid')"></EditBid>
-  <!--查看视频/图片-->
-  <SeeVideoImg ref="SeeVideoImgRef" :propInfo="pageInfo.imgList" @confirm="val=>echoVal(val,'seeVideoImg')"></SeeVideoImg>
-  <!--批量修改推广计划名称-->
-  <batchChoosePromotePlan ref="batchChoosePromotePlanRef" @confirm="val=>batchEchoVal(val)"></batchChoosePromotePlan>
+    <!--修改推广计划名称-->
+    <EditPromotePlanName ref="EditPromotePlanNameRef" :propInfo="pageInfo.planName" @confirm="val=>echoVal(val,'planName')"></EditPromotePlanName>
+    <!--选择推广计划-->
+    <ChoosePromotePlan ref="ChoosePromotePlanRef" @confirm="val=>echoVal(val,'choosePlan')"></ChoosePromotePlan>
+    <!--推广计划日预算-->
+    <PromotePlanBudget_day ref="PromotePlanBudget_dayRef" @confirm="val=>echoVal(val,'PromotePlanBudget_day')"></PromotePlanBudget_day>
+    <!--推广计划总预算-->
+    <PromotePlanBudget_total ref="PromotePlanBudget_totalRef" @confirm="val=>echoVal(val,'PromotePlanBudget_total')"></PromotePlanBudget_total>
+    <!--修改广告名称-->
+    <EditAdverteName ref="EditAdverteNameRef" :propInfo="pageInfo.adName" @confirm="val=>echoVal(val,'adName')"></EditAdverteName>
+    <!--修改出价-->
+    <EditBid ref="EditBidRef" :propInfo="pageInfo.bid" @confirm="val=>echoVal(val,'bid')"></EditBid>
+    <!--查看视频/图片-->
+    <SeeVideoImg ref="SeeVideoImgRef" :propInfo="pageInfo.imgList" @confirm="val=>echoVal(val,'seeVideoImg')"></SeeVideoImg>
+    <!--批量修改推广计划名称-->
+    <!--  <batchChoosePromotePlan ref="batchChoosePromotePlanRef" @confirm="val=>batchEchoVal(val)"></batchChoosePromotePlan>-->
 </template>
 <script setup lang="ts">
 import Popconfirm from '@/components/capsulationMoudle/_popconfirm.vue'
-import {getCurrentInstance, nextTick, onMounted, reactive, ref} from "vue";
+import {getCurrentInstance, nextTick, onMounted, reactive, ref,watch} from "vue";
 import Dropdown from '@/components/capsulationMoudle/_dropdown.vue'
 import EditPromotePlanName from '@/components/businessMoudle/batchGdt/previewArea/dialog/editPromotePlanName.vue'
 import batchChoosePromotePlan from '@/components/businessMoudle/batchGdt/previewArea/dialog/batchChoosePromotePlan.vue'
@@ -128,12 +132,18 @@ import PromotePlanBudget_day from '@/components/businessMoudle/batchGdt/previewA
 import PromotePlanBudget_total from '@/components/businessMoudle/batchGdt/previewArea/dialog/PromotePlanBudget_total.vue'
 import SeeVideoImg from '@/components/businessMoudle/batchGdt/previewArea/dialog/SeeVideoImg.vue'
 import {reactiveTableAndAny} from "@/api/ApiModel";
-
+import _ from "lodash";
 
 const { proxy } = getCurrentInstance() as any;
 // 全局方法定义
 const NumberHandle = proxy.$NumberHandle
 
+const props = withDefaults(defineProps<{
+  infoObj:any
+}>(), {
+  infoObj:{}
+})
+
 const loading = ref<boolean>(false)
 const updateKey = ref<number>(1)
 const rowKeyStr = ref<string>('id')
@@ -181,10 +191,7 @@ const pageInfo = reactive<reactiveTableAndAny>({
   ],
   chooseList:[],
   moreList:[{label:'修改推广计划',value:'1'}],
-  accList:[
-    {name:'27384905',id:1},
-    {name:'27389205',id:2},
-  ],
+  accList:[],
   accId:1,
   choosePlanObj:{},//选择的计划项
   planName:'',//推广计划的名称
@@ -208,7 +215,7 @@ const EditBidRef = ref<{switchShow:(val:Boolean)=>void}>()
 //查看视频/图片
 const SeeVideoImgRef = ref<{switchShow:(val:Boolean)=>void}>()
 //批量选择推广计划
-const batchChoosePromotePlanRef = ref<{switchShow:(val:Boolean)=>void}>()
+// const batchChoosePromotePlanRef = ref<{switchShow:(val:Boolean)=>void}>()
 
 //打开相应弹框
 const openSubDialogEvent = (row:any,val:string) => {
@@ -281,38 +288,38 @@ const echoVal = (echoval:any,val:string) => {
 }
 
 //批量回显
-const batchEchoVal = (val:any) => {
-  if(pageInfo.tableList&&pageInfo.tableList.length==0){
-    return
-  }
-  if(val){//表示选择了一个计划
-    pageInfo.tableList.forEach(item=>{
-      pageInfo.chooseList.forEach(cItem=>{
-        if(item.id == cItem.id){
-          item.a1_6_val = 'edit'
-          item.choosePlanVal = val
-        }
-      })
-    })
-  }else{//切换到新建推广计划
-    pageInfo.tableList.forEach(item=>{
-      pageInfo.chooseList.forEach(cItem=>{
-        if(item.id == cItem.id){
-          item.a1_6_val = 'new'
-        }
-      })
-    })
-  }
-}
+// const batchEchoVal = (val:any) => {
+//   if(pageInfo.tableList&&pageInfo.tableList.length==0){
+//     return
+//   }
+//   if(val){//表示选择了一个计划
+//     pageInfo.tableList.forEach(item=>{
+//       pageInfo.chooseList.forEach(cItem=>{
+//         if(item.id == cItem.id){
+//           item.a1_6_val = 'edit'
+//           item.choosePlanVal = val
+//         }
+//       })
+//     })
+//   }else{//切换到新建推广计划
+//     pageInfo.tableList.forEach(item=>{
+//       pageInfo.chooseList.forEach(cItem=>{
+//         if(item.id == cItem.id){
+//           item.a1_6_val = 'new'
+//         }
+//       })
+//     })
+//   }
+// }
 
 //全部提交审核
 const auditSubmitEvent = () => {
 
 }
 
-const dropdownEvent = (val: string | number | object) => {
-  batchChoosePromotePlanRef.value!.switchShow(true)
-}
+// const dropdownEvent = (val: string | number | object) => {
+//   batchChoosePromotePlanRef.value!.switchShow(true)
+// }
 
 const accItemEvent = (id:number) => {
   pageInfo.accId = id
@@ -422,12 +429,23 @@ const init = async (page?:any,pageSize?:any) => {
   // }
 }
 
+//推广计划 - 规则配置的值
+const get_rule_config = () => {
+  const { RuleConfigObj } = props.infoObj
 
-onMounted(()=>{
+}
+watch(()=>props.infoObj.updateKey,()=>{
   nextTick(async ()=>{
+    //账号
+    pageInfo.accList = _.cloneDeep(props.infoObj.accVal)
+    accItemEvent(pageInfo.accList[0].id)
+
+    //推广计划
+
     await init()
   })
-})
+},{immediate:true,deep:true})
+
 </script>
 <style lang="scss" scoped>
 @import "src/assets/style/batchGdt.scss";

src/components/businessMoudle/materialLibrary/material.vue

@@ -125,7 +125,7 @@ import Select from '@/components/capsulationMoudle/_select.vue'
 import TimeScreen from '@/components/capsulationMoudle/timeScreen.vue'
 import Input from '@/components/capsulationMoudle/_input.vue'
 import Dropdown from '@/components/capsulationMoudle/_dropdown.vue'
-import {searchBoxTs} from '@/components/businessMoudle/batchGdt/configArea/creativeMaterial/ts/searchBox'
+import {materialTs} from '@/components/businessMoudle/batchGdt/configArea/creativeMaterial/ts/materialTs'
 import { collectParam, materialManage, reactiveTableAndAny} from "@/api/ApiModel";
 import {Api} from "@/api/api";
 import {ElMessage} from "element-plus";
@@ -266,7 +266,7 @@ const {
   initAll,
   checkChangeItem,
   sizeVisibleEvent
-} = searchBoxTs()
+} = materialTs()
 
 onMounted(()=>{
   initAll()

src/components/capsulationMoudle/_dialog.vue

@@ -29,7 +29,7 @@
         <template v-else>
           <slot name="footerBtn"></slot>
           <el-button @click="closeEVent" size="default">{{cancleText}}</el-button>
-          <el-button type="primary" @click="confirmEvent" size="default">{{ confirmText }}</el-button>
+          <el-button type="primary" @click="confirmEvent" v-loading.fullscreen.lock="fullLoading" size="default">{{ confirmText }}</el-button>
         </template>
       </span>
     </template>
@@ -45,6 +45,7 @@ const props = withDefaults(defineProps<{
   dialogTitle?: string,
   dialogVisible?: boolean,
   loading?: boolean,
+  fullLoading?: boolean,
   width?: string,
   height?: string,
   minheight?: string,
@@ -67,6 +68,7 @@ const props = withDefaults(defineProps<{
   destroyOnCloseFlag: false,
   dialogVisible: false,
   loading: false,
+  fullLoading: false,
   top: '15vh',
   propsClass:'',
   closeOnModal:true

src/router/index.ts

@@ -17,7 +17,7 @@ const collectClip = () => import('@/components/businessMoudle/collectClip/index.
 const taskList = () => import('@/components/businessMoudle/taskList/index.vue')
 const adqManage = () => import('@/components/businessMoudle/adqManage.vue')
 const miniprogram = () => import('@/components/businessMoudle/miniprogram/index.vue')
-const batchGdt = () => import('@/components/businessMoudle/batchGdt/index.vue')
+const batchGdt = () => import('@/components/businessMoudle/batchGdt/configArea/index.vue')
 const gdtList = () => import('@/components/businessMoudle/gdtList/index.vue')