创意素材

src/components/businessMoudle/batchGdt/configArea/basicInfo/components/wildcard.vue

@@ -1,35 +1,32 @@
 <template>
-  <div class="flex-baseline marB15">
-    <div class="form-block-item-title" v-if="title && title != ''">{{ title }}</div>
-    <div>
-      <div class="flex-center" style="flex:1;flex-wrap: wrap;align-items: end;">
-        <el-input :class="defaultFlag || errorFlag ? 'error' : ''" type="textarea"
-          :style="width ? `width:${width}` : 'width: 600px'" :disabled="disabled" v-model="inputValue"
-          :placeholder="placeholder" @input="onChange"></el-input>
-        <span class="temp-inlayremark">{{ inputValue.length }}/{{ valueMaxLength }}</span>
-      </div>
-      <div class="flex-center marT15 marB10">
-        <span class="wildcard_label">通配符：</span>
-        <template v-for="item in wildcardList.slice(0, 3)">
+  <div>
+    <div class="flex-center" style="flex:1;flex-wrap: wrap;align-items: end;">
+      <el-input :class="defaultFlag || errorFlag ? 'error' : ''" type="textarea"
+                :style="width ? `width:${width}` : 'width: 600px'" :disabled="disabled" v-model="inputValue"
+                :placeholder="placeholder" @input="onChange"></el-input>
+      <span class="temp-inlayremark">{{ inputValue.length }}/{{ valueMaxLength }}</span>
+    </div>
+    <div class="flex-center marT15 marB10">
+      <span class="wildcard_label">通配符：</span>
+      <template v-for="item in wildcardList.slice(0, 3)">
           <span :class="['wildcard', 'wildcard_label', getWildcardList.includes(item) ? 'wildcard_active' : '']" @click="!getWildcardList.includes(item)?onClickTPF(item):''">+ {{ item
-          }}</span>
-        </template>
-        <el-popover placement="top-start" trigger="click">
-          <template #reference>
+            }}</span>
+      </template>
+      <el-popover placement="top-start" trigger="click">
+        <template #reference>
             <span class="wildcard_label wildcard flex-center" style="margin-left: 60px;"><el-icon
                 style="margin-right: 4px;">
                 <Document />
               </el-icon>插入更多</span>
-          </template>
-          <div class="popover_con">
-            <div :class="['popover_item', getWildcardList.includes(item) ? 'popover_item_active' : '']"
-              v-for="item in wildcardList" @click="getWildcardList.includes(item) ? '' : onClickTPF(item)">{{ item }}</div>
-          </div>
-        </el-popover>
-      </div>
-      <p class="hint1" v-if="defaultFlag">取消“时间”类和“标号”类通配符可能导致名称重复，无法提交广告</p>
-      <p class="hint2" v-if="errorFlag">{{ inputValue == '' ? '请输入广告名称' : inputValue.length > valueMaxLength ? `请确保广告名称长度不超过${valueMaxLength}个字`: '您可能使用了不支持的通配符，请您确认后再保存' }}</p>
+        </template>
+        <div class="popover_con">
+          <div :class="['popover_item', getWildcardList.includes(item) ? 'popover_item_active' : '']"
+               v-for="item in wildcardList" @click="getWildcardList.includes(item) ? '' : onClickTPF(item)">{{ item }}</div>
+        </div>
+      </el-popover>
     </div>
+    <p class="hint1" v-if="defaultFlag">取消“时间”类和“标号”类通配符可能导致名称重复，无法提交广告</p>
+    <p class="hint2" v-if="errorFlag">{{ inputValue == '' ? '请输入广告名称' : inputValue.length > valueMaxLength ? `请确保广告名称长度不超过${valueMaxLength}个字`: '您可能使用了不支持的通配符，请您确认后再保存' }}</p>
   </div>
 </template>
 <script setup lang="ts">
@@ -194,4 +191,4 @@ const areBracketsComplete = (str) => {
   padding-bottom: 6px;
 }
 
-</style>
+</style>

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

@@ -0,0 +1,213 @@
+<template>
+  <div class="TeamContent_box">
+    <div class="con_header">
+      <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}} ({{item.num||0}}/1) </div>
+<!--          <div class="borLine"></div>-->
+        </div>
+      </div>
+      <el-button type="primary" class="lMarauto">添加素材</el-button>
+    </div>
+
+    <div class="con_body">
+      <div class="videoBox" v-if="typeAc=='video'">
+        <div class="uploadBox">
+          <!--        <input type="file" ref="fileRef" class="uploadIpt" name="file"
+                         multiple @change.prevent="handleFileChange" accept="png,jpg,jpeg,gif,mp4,mpeg,3pg,avi,mov">-->
+          <div class="iconBox">
+            <el-icon size="24" color="#999"><i-ep-Plus/></el-icon>
+          </div>
+
+          <div class="replaceBtn flex" v-if="false">
+            <el-button type="primary" style="margin: 0 auto">替换素材</el-button>
+            <el-button type="primary" style="margin: 0 auto">删除</el-button>
+          </div>
+        </div>
+        <div class="tipsBox">
+          尺寸:{{video_tips.width}}px * {{video_tips.height}}px (推荐) ,
+          格式: <span v-for="i in video_tips.file_format">{{i.split('_')[2]}} /</span> ,
+          小于{{video_tips.file_size}}MB ,
+          播放时长 {{video_tips.min_duration}} - {{video_tips.max_duration}} s
+        </div>
+      </div>
+
+      <div class="imageBox" v-if="typeAc=='cover'">
+        <div class="uploadBox">
+          <!--        <input type="file" ref="fileRef" class="uploadIpt" name="file"
+                         multiple @change.prevent="handleFileChange" accept="png,jpg,jpeg,gif,mp4,mpeg,3pg,avi,mov">-->
+          <div class="iconBox">
+            <el-icon size="24" color="#999"><i-ep-Plus/></el-icon>
+          </div>
+
+          <div class="replaceBtn flex" v-if="false">
+            <el-button type="primary" style="margin: 0 auto">替换素材</el-button>
+            <el-button type="primary" style="margin: 0 auto">删除</el-button>
+          </div>
+        </div>
+        <div class="tipsBox">
+          尺寸:{{image_tips.width}}px * {{image_tips.height}}px (推荐) ,
+          格式: <span v-for="i in image_tips.file_format">{{i.split('_')[2]}} /</span> ,
+          小于{{image_tips.file_size}}KB
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {getCurrentInstance, markRaw, nextTick, onMounted, reactive, ref} from "vue";
+import {fillZero, getCookie} from '@/common/common'
+import {publicSwitchType} from "@/components/businessMoudle/switchType";
+import {ElMessage} from "element-plus";
+
+const { proxy } = getCurrentInstance() as any;
+// 全局方法定义
+const NumberHandle = proxy.$NumberHandle
+
+const props = withDefaults(defineProps<{
+  ITEM:any,
+  video_tips:any,
+  image_tips:any,
+}>(), {
+  ITEM:{},
+  video_tips:{},
+  image_tips:{},
+})
+
+// 类型切换公共ts
+const typeListParams = reactive([
+  {name:'视频',key:'video'},
+  {name:'封面',key:'cover'},
+])
+const {
+  typeAc,
+  typeList,
+  switchTypeItem
+} = publicSwitchType(typeListParams)
+
+
+const handleFileChange = async (e:Event)=>{
+  // if(!CataRef.value!.idVal){
+  //   ElMessage.error('请先选择目录!')
+  //   fileRef.value!.value = ''
+  //   return
+  // }else if(!ideaManRef.value!.value){
+  //   ElMessage.error('请先选择创意人!')
+  //   fileRef.value!.value = ''
+  //   return
+  // }else if(!designerRef.value!.value){
+  //   ElMessage.error('请先选择设计师!')
+  //   fileRef.value!.value = ''
+  //   return
+  // }
+  // const target:any = e.target as HTMLInputElement
+  // if(target.files){
+  //   for (let i = 0; i < target.files.length; i++) {
+  //     let obj: any = target.files[i]
+  //     tableInfo.tableList.push({
+  //       oss_url: '',
+  //       name: obj.name.replace(('.'+obj.type.split('/')[1]),""),
+  //       mtype: obj.type,
+  //       file_size: obj.size,
+  //       tagList: tagRef.value!.pageInfo.valNameList,
+  //       idea_man_name: pageInfo.createrList[pageInfo.createrList.findIndex(n => n.id == ideaManRef.value!.value)].username,
+  //       designer_name: pageInfo.editorList[pageInfo.editorList.findIndex(n => n.id == designerRef.value!.value)].username,
+  //       status: 0
+  //     })
+  //   }
+  // }
+  // const files:any = target.files// 注意这里取得的是一个类数组
+  // if(files){
+  //   // 取得文件
+  //   Array.from(files).forEach((item:any)=>{
+  //     const formData = new FormData()
+  //     // 在这里做一些上传文件前的校验，比如文件格式，大小等，
+  //     // 不符合要求的话就不在继续发送请求
+  //
+  //     let admin_idPara:any = getCookie("admin_id")
+  //     let ttlPara:any = Number(getCookie("ttl"))
+  //     let signPara:any = getCookie("sign")
+  //     formData.append('material_file',item)
+  //     formData.append('admin_id',admin_idPara)
+  //     formData.append('ttl',ttlPara)
+  //     formData.append('sign',signPara)
+  //     fileUpload_check(formData)
+  //   })
+  // }
+}
+
+
+onMounted(()=>{
+  nextTick(()=>{
+
+  })
+})
+</script>
+<style lang="scss" scoped>
+.TeamContent_box{
+  .item{
+    font-size: 14px;
+  }
+  .con_header{
+    display: flex;
+    align-items: center;
+    padding: 8px 24px;
+    border-top: 1px solid #ebeef5;
+    border-bottom: 1px solid #ebeef5;
+  }
+  .con_body{
+    padding: 24px;
+    .uploadBox{
+      position: relative;
+      border: 1px solid #ebeef5;
+      width: 176px;
+      height: 124px;
+      .iconBox{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-top: -12px;
+        margin-left: -12px;
+      }
+      .img{
+        width: 176px;
+        height: 124px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+      }
+      .replaceBtn{
+        width: 176px;
+        height: 124px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: rgba(0,0,0,.2);
+        opacity: 0;
+        z-index: 2;
+      }
+      .uploadIpt{
+        width: 176px;
+        height: 124px;
+        &:hover{
+          cursor: pointer;
+        }
+      }
+      &:hover{
+        border: 1px solid #3173FF;
+        color: #3173FF;
+        cursor: pointer;
+        .replaceBtn{
+          opacity: 1;
+        }
+      }
+    }
+    .tipsBox{
+      color: #808695;
+      font-size: 12px;
+      margin-top: 10px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,265 @@
+<template>
+  <Dialog
+      :dialogVisible="dialogShow"
+      @confirm="confirmEvent"
+      @close="dialogShow = false"
+      :closeOnModal="false"
+      width="1000px"
+      height="calc(100vh - 190px)"
+      top="8px"
+      dialog-title="创意素材">
+    <template v-slot:content>
+      <RadioGroup :id="pageInfo.radioId" :radioList="coverRadioList.list"
+      :echoVal="coverRadioList.radioVal"
+      :title="coverRadioList.name"
+      @returnEvent="val=>{coverRadioList.radioVal = val}"></RadioGroup>
+      <RadioGroup :id="pageInfo.radioId" :radioList="videoRadioList.list"
+                  :echoVal="videoRadioList.radioVal"
+                  :title="videoRadioList.name"
+                  :haveNotes="videoRadioList.haveNotes"
+                  @returnEvent="val=>{videoRadioList.radioVal = val}"></RadioGroup>
+
+      <div class="titleBox flex borCon">
+        <div class="title">创意内容</div>
+        <div class="smallTitle lMar20">创意组数量: {{}}组</div>
+        <div class="lMarauto">
+          <el-button type="primary">批量添加视频</el-button>
+          <el-button type="primary">批量添加封面</el-button>
+          <el-button type="primary">一键指定封面</el-button>
+          <el-button type="primary">一键测新</el-button>
+        </div>
+      </div>
+
+      <div class="content">
+        <template v-for="(item,idx) in pageInfo.creativeTeamList">
+          <div class="flex tMar10" style="align-items: flex-start">
+            <div class="TeamBox">
+              <div class="TeamTitle flex">
+                <div>创意组{{fillZero(idx+1)}}</div>
+                <div class="lMarauto">
+                  <el-icon :size="14" color="#999" class="pointer"><i-ep-CaretBottom /></el-icon>
+                  <el-icon :size="14" color="red" class="lMar10 pointer" @click="deleItemEvent(item)"><i-ep-CircleClose /></el-icon>
+                </div>
+              </div>
+              <div class="TeamContent">
+                <CreativeTeam :ITEM="item" :video_tips="pageInfo.video_restriction" :image_tips="pageInfo.image_restriction"></CreativeTeam>
+              </div>
+            </div>
+
+            <Tooltip notes="复制创意组" colorCss="c-theme" :slotFalg="true">
+              <template v-slot:content>
+                <div class="iconBox" @click="copyItemEvent(item)">
+                  <el-icon :size="14" color="#3173FF"><i-ep-DocumentCopy /></el-icon>
+                </div>
+              </template>
+            </Tooltip>
+          </div>
+        </template>
+        <div class="addItem" @click="addItemEvent">添加创意组</div>
+      </div>
+
+
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import RadioGroup from '@/components/businessMoudle/batchGdt/configArea/directPacket/common/radioGroup.vue'
+import CreativeTeam from '@/components/businessMoudle/batchGdt/configArea/creativeMaterial/creativeTeam.vue'
+import Tooltip from '@/components/capsulationMoudle/_tooltip.vue'
+import {getCurrentInstance, nextTick, onMounted, reactive, ref} from "vue";
+import {reactiveTableAndAny} from "@/api/ApiModel";
+import Dialog from '@/components/capsulationMoudle/_dialog.vue'
+import {fillZero} from '@/common/common'
+import {ElMessage} from "element-plus";
+import _ from "lodash";
+
+
+const { proxy } = getCurrentInstance() as any;
+// 全局方法定义
+const NumberHandle = proxy.$NumberHandle
+
+const emit = defineEmits<{
+  (event: "assignEvent", val: any): void; //赋值
+}>();
+
+// const props = withDefaults(defineProps<{
+//
+// }>(), {
+//
+// })
+
+interface radioFace{
+  value:number,
+  name:string,
+  EgName:string,
+  radioVal:string,
+  list:Array[]
+}
+
+const coverRadioList = ref<radioFace>({
+  value:1,
+  name:'自动生成封面',
+  EgName:'cover',
+  radioVal:'On',
+  haveNotes:true,
+  list:[
+    {name:'不开启',value:'Pause'},
+    {name:'开启',value:'On'},
+  ]
+})
+const videoRadioList = ref<radioFace>({
+  value:1,
+  name:'保存至视频号',
+  EgName:'video',
+  radioVal:'Pause',
+  haveNotes:true,
+  list:[
+    {name:'不开启',value:'Pause'},
+    {name:'开启',value:'On',notes:'开启后将同步上传至视频号动态、且广告投放期间浮层卡片可见'},
+  ]
+})
+
+
+//页面数据
+const pageInfo = reactive<reactiveTableAndAny>({
+  radioId:0,
+  creativeTeamList:[{
+    id:0,
+  }],
+  video_restriction: {
+    "width": 0,
+    "height": 0,
+    "min_width": 640,
+    "min_height": 360,
+    "ratio_width": 16,
+    "ratio_height": 9,
+    "file_size": 102400,
+    "file_format": [
+      "MEDIA_TYPE_MP4",
+      "MEDIA_TYPE_MOV",
+      "MEDIA_TYPE_AVI"
+    ],
+    "min_duration": 5,
+    "max_duration": 60
+  },
+  image_restriction:{
+    "width": 80,
+    "height": 80,
+    "file_size": 20,
+    "file_format": [
+      "IMAGE_TYPE_JPG",
+      "IMAGE_TYPE_PNG"
+    ]
+  }
+})
+
+//添加创意组
+const addItemEvent = () => {
+  let arr:any = pageInfo.creativeTeamList
+  let _id:number = arr[arr.length-1].id
+  arr.push({
+    id:_id+1
+  })
+}
+//删除创意组
+const deleItemEvent = (item:any) => {
+  let arr:any = pageInfo.creativeTeamList
+  if(arr&&arr.length==1){
+    ElMessage.error('至少保留1个创意组！')
+    return
+  }
+  let idx:number = arr.findIndex(n=>n.id== item.id)
+  arr.splice(idx,1)
+}
+//复制创意组
+const copyItemEvent = (item:any) => {
+  let arr:any = pageInfo.creativeTeamList
+  let idx:number = arr.findIndex(n=>n.id== item.id)
+  let _id:number = arr[arr.length-1].id
+  let obj:any = _.cloneDeep(arr[idx])
+  obj.id = _id+1
+  arr.push(obj)
+}
+
+
+const loading = ref<boolean>(false)
+//确定按钮
+const confirmEvent = () => {
+
+}
+
+// 切换显隐
+const dialogShow = ref<boolean>(true)
+const switchShow = (val:boolean)=>{
+  dialogShow.value = val
+  if(val){
+
+  }
+}
+
+
+// 父组件共享值
+defineExpose({
+  switchShow
+});
+
+</script>
+<style lang="scss" scoped>
+@import "src/assets/style/batchGdt.scss";
+.marPad{
+  margin: 8px 24px;
+}
+.borCon{
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  color: #161E46;
+  padding: 8px 24px;
+}
+.titleBox{
+  .title{
+    font-weight: 600;
+  }
+  .smallTitle{
+    font-size: 12px;
+  }
+}
+.content{
+  .TeamBox{
+    flex: 1;
+    flex-shrink: 0;
+    border: 1px solid #ebeef5;
+    border-radius: 4px;
+    color: #161E46;
+    .TeamTitle{
+      padding: 8px 24px;
+      background-color: #fafafa;
+      line-height: 32px;
+    }
+    .TeamContent{
+      background-color: #fff;
+      width: 100%;
+    }
+
+  }
+  .iconBox{
+    padding: 6px 8px;
+    margin-left: 8px;
+    width: 32px;
+    cursor: pointer;
+    border: 1px solid #ebeef5;
+    border-radius: 4px;
+  }
+  .addItem{
+    padding: 8px 24px;
+    line-height: 24px;
+    background-color: #fafafa;
+    text-align: center;
+    width: calc(100% - 32px - 8px);
+    margin-top: 20px;
+    cursor: pointer;
+    &:hover{
+      font-weight: 600;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,92 @@
+<template>
+  <el-dialog
+      :model-value="dialogShow"
+      top="8px"
+      append-to-body
+      :width="width"
+      @close="dialogShow = false"
+      :modal="true"
+      :show-close="false"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="false"
+      draggable>
+    <template #header="{ close }">
+      <div class="flex_between">
+        <div class="c-0F161E f18 f-wei-600">{{dialogTitle}}</div>
+      </div>
+    </template>
+    <div class="container" :style="{ maxHeight: height , minHeight:minheight }" v-loading="loading">
+      <slot name="content"></slot>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <div>
+          <span>已选素材: {{}} / {{}}</span>
+        </div>
+
+        <div class="lMarauto">
+          <Tooltip notes="复制创意组" colorCss="c-theme" :slotFalg="true">
+            <template v-slot:content>
+              <div class="flex">
+                找不到素材？点这里
+                <el-icon size="14" class="f14 pointer"><i-ep-QuestionFilled/></el-icon>
+              </div>
+            </template>
+          </Tooltip>
+          <el-button plain @click="cancelEVent" size="default">取消</el-button>
+          <el-button type="primary" plain @click="submitEVent" size="default" class="lMar10">提交</el-button>
+        </div>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import {getCurrentInstance, nextTick, onMounted, reactive, ref} from "vue";
+import Tooltip from '@/components/capsulationMoudle/_tooltip.vue'
+
+const { proxy } = getCurrentInstance() as any;
+// 全局方法定义
+const NumberHandle = proxy.$NumberHandle
+
+
+// 切换显隐
+const dialogShow = ref<boolean>(false)
+
+//提交
+const submitEVent = () => {
+
+}
+//取消
+const cancelEVent = () => {
+  dialogShow.value = false
+}
+//账号列表
+// const init = async (page?:any,pageSize?:any) => {
+//   tableListRef.value!.loading = true
+//   const paramsModel = reactive<expertParam>({})
+//   let res:any = await proxy.$http.get(Api.expert_living,paramsModel)
+//   tableListRef.value!.loading = false
+//   if(res&&res.errNo=='0'){
+//     let resNew:any = res.rst
+//     tableInfo.tableList = resNew.data
+//     total.value = resNew.pageInfo.totalNum
+//   }else{
+//     ElMessage.error(res.errMsg)
+//   }
+// }
+
+
+onMounted(()=>{
+  nextTick(()=>{
+
+  })
+})
+</script>
+<style lang="scss" scoped>
+.dialog-footer{
+  display: flex;
+  align-items: center;
+  padding: 16px 32px 16px 24px;
+}
+</style>

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

@@ -12,9 +12,10 @@
             <Tooltip v-if="toolTipsVal" :notes="toolTipsVal" effect="light" popperClass="wid400"/>
           </div>
           <div class="tips" v-if="haveNotes">
-            <el-icon :size="14" color="#FF9B48"><i-ep-WarningFilled /></el-icon>
             <template  v-for="item in radioList">
-              <span v-if="item.notes && (item.value==value)">{{item.notes}}</span>
+              <span class="flex" v-if="item.notes && (item.value==value)">
+                <el-icon :size="14" color="#FF9B48"><i-ep-WarningFilled /></el-icon>{{item.notes}}
+              </span>
             </template>
           </div>
         </div>

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

@@ -3,6 +3,7 @@
       :dialogVisible="dialogShow"
       @confirm="confirmEvent"
       @close="dialogShow = false"
+      :closeOnModal="false"
       width="1000px"
       height="calc(100vh - 190px)"
       top="8px"

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

@@ -3,6 +3,7 @@
       :dialogVisible="dialogShow"
       @confirm="confirmEvent"
       @close="dialogShow = false"
+      :closeOnModal="false"
       width="1100px"
       height="calc(100vh - 190px)"
       top="8px"

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

@@ -38,14 +38,16 @@
               <div class="showInfoArea">
                 <div class="noData" v-if="!sub.haveContent">暂无数据</div>
                 <!-- 定向包展示 -->
-                <template  v-if="sub.name == '定向包'">
+                <template v-if="sub.name == '定向包'">
                   <DirectPacketExhibition :showFlag="sub.haveContent" ref="DirectPacketExhibitionRef" @updateHaveContent="updateHaveContent"></DirectPacketExhibition>
                 </template>
                 <div v-if="sub.name == '广告基本信息'">
                     <template v-for="(item) in basicInfoData.copywriting">
                       <div class="bMar8 lH16 c-515a6e">{{ item }}</div>
                     </template>
-                  </div>
+                </div>
+                <template v-if="sub.name == '创意素材'">
+                </template>
               </div>
               <div class="btn" @click="openDialogEvent(sub)">{{sub.haveContent ? '编辑' : '添加'}}</div>
             </div>
@@ -73,6 +75,8 @@
 
   <!--规则配置-->
   <RuleConfig ref="RuleConfigRef" @ExposeEvent="val=>pageInfo.RuleConfigObj = val"></RuleConfig>
+  <!--  创意素材-->
+  <CreativeMaterial ref="CreativeMaterialRef"></CreativeMaterial>
 
   <!-- 广告基本信息 -->
   <BasicInfo :visible="basicInfoData.visible" :dataFillBack="basicInfoData.fillBack" @close="basicInfoClose"></BasicInfo>
@@ -91,6 +95,7 @@ import {adqParam, reactiveTableAndAny, ruleConfig} 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 {Api} from "@/api/api";
 import {ElMessage} from "element-plus";
 import {deepCopy} from "@/common/common";
@@ -199,6 +204,9 @@ const openRuleConfig = () => {
     RuleConfigRef.value!.switchShow(true)
   })
 }
+//创意素材
+const CreativeMaterialRef = ref<{switchShow:(val:boolean)=>void}>()
+
 
 // 定向包
 const DirectPacketExhibitionRef = ref<{get_echoAcId:()=>void,showDirectPacket:()=>void,clearDirectContent:()=>void}>()
@@ -209,17 +217,21 @@ const openDialogEvent = (sub:any) => {
     ElMessage.error('请选择媒体账户!')
     return
   }
-  if(sub.name == '定向包'){
-    nextTick(()=>{
-      DirectPacketExhibitionRef.value![0].showDirectPacket()
-      if(sub.haveContent){
-        DirectPacketExhibitionRef.value![0].get_echoAcId()
-      }
-    })
-  }
-  if(sub.name == '广告基本信息'){
-    basicInfoData.visible = true;
-  }
+
+  nextTick(()=>{
+    if(sub.name == '定向包'){
+        DirectPacketExhibitionRef.value![0].showDirectPacket()
+        if(sub.haveContent){
+          DirectPacketExhibitionRef.value![0].get_echoAcId()
+        }
+    }
+    if(sub.name == '创意素材'){
+      CreativeMaterialRef.value!.switchShow(true)
+    }
+    if(sub.name == '广告基本信息'){
+      basicInfoData.visible = true;
+    }
+  })
 }
 
 

src/components/capsulationMoudle/_dialog.vue

@@ -8,6 +8,8 @@
       @close="closeEVent"
       :modal="haveModal"
       :show-close="false"
+      :close-on-click-modal="closeOnModal"
+      :close-on-press-escape="closeOnModal"
       :destroy-on-close="destroyOnCloseFlag"
       draggable>
     <template #header="{ close }">
@@ -52,6 +54,7 @@ const props = withDefaults(defineProps<{
   haveModal?: boolean,
   destroyOnCloseFlag?: boolean,
   propsClass?: string,
+  closeOnModal?: boolean,
 }>(), {
   dialogTitle: '提示',
   width: '60%',
@@ -64,7 +67,8 @@ const props = withDefaults(defineProps<{
   dialogVisible: false,
   loading: false,
   top: '15vh',
-  propsClass:''
+  propsClass:'',
+  closeOnModal:true
 })
 
 const closeEVent = () => {

src/components/capsulationMoudle/_tooltip.vue

@@ -1,6 +1,8 @@
 <template>
-  <el-tooltip :effect="effect" raw-content :content="notes" >
-    <i-ep-QuestionFilled class="lMar5  f14 pointer" :class="colorCss"/>
+  <el-tooltip :effect="effect" raw-content >
+    <template #content>{{notes}}</template>
+    <template v-if="slotFalg"><slot name="content"></slot></template>
+    <i-ep-QuestionFilled v-if="!slotFalg" class="lMar5  f14 pointer" :class="colorCss"/>
   </el-tooltip>
 </template>
 <script lang="ts" setup>
@@ -8,9 +10,11 @@ const props = withDefaults(defineProps<{
   notes?: string,
   colorCss?: string,
   effect?: string,
+  slotFalg?:boolean
 }>(), {
   notes: '',
   colorCss: 'c-999',
-  effect: 'dark',
+  effect: 'light',
+  slotFalg:false
 })
 </script>