创意素材部分

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

@@ -21,10 +21,10 @@
 
       <div class="titleBox flex borCon">
         <div class="title">创意内容</div>
-        <div class="smallTitle lMar20">创意组数量: {{}}组</div>
+        <div class="smallTitle lMar20">创意组数量: {{pageInfo.creativeTeamList&&pageInfo.creativeTeamList.length}}组</div>
         <div class="lMarauto">
-          <el-button type="primary">批量添加视频</el-button>
-          <el-button type="primary">批量添加封面</el-button>
+          <el-button type="primary" @click="openLibraryDialog(1)">批量添加视频</el-button>
+          <el-button type="primary" @click="openLibraryDialog(2)">批量添加封面</el-button>
           <el-button type="primary">一键指定封面</el-button>
           <el-button type="primary">一键测新</el-button>
         </div>
@@ -46,8 +46,8 @@
               </div>
             </div>
 
-            <Tooltip notes="复制创意组" colorCss="c-theme" :slotFalg="true">
-              <template v-slot:content>
+            <Tooltip notes="复制创意组" colorCss="c-theme" :iconSlotFalg="true">
+              <template v-slot:iconSlot>
                 <div class="iconBox" @click="copyItemEvent(item)">
                   <el-icon :size="14" color="#3173FF"><i-ep-DocumentCopy /></el-icon>
                 </div>
@@ -59,12 +59,14 @@
       </div>
 
 
+      <LibraryDialog ref="LibraryDialogRef"></LibraryDialog>
     </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 LibraryDialog from '@/components/businessMoudle/batchGdt/configArea/creativeMaterial/libraryDialog.vue'
 import Tooltip from '@/components/capsulationMoudle/_tooltip.vue'
 import {getCurrentInstance, nextTick, onMounted, reactive, ref} from "vue";
 import {reactiveTableAndAny} from "@/api/ApiModel";
@@ -93,7 +95,8 @@ interface radioFace{
   name:string,
   EgName:string,
   radioVal:string,
-  list:Array[]
+  haveNotes:boolean,
+  list:any
 }
 
 const coverRadioList = ref<radioFace>({
@@ -187,9 +190,16 @@ const loading = ref<boolean>(false)
 const confirmEvent = () => {
 
 }
+//打开素材库弹框
+const LibraryDialogRef = ref<{switchShow:(val:boolean,mtype:number)=>void}>()
+const openLibraryDialog = (type:number) => {
+  nextTick(()=>{
+    LibraryDialogRef.value!.switchShow(true,type)
+  })
+}
 
 // 切换显隐
-const dialogShow = ref<boolean>(true)
+const dialogShow = ref<boolean>(false)
 const switchShow = (val:boolean)=>{
   dialogShow.value = val
   if(val){

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

@@ -1,9 +1,10 @@
 <template>
   <el-dialog
+      class="library_Dialog"
       :model-value="dialogShow"
       top="8px"
       append-to-body
-      :width="width"
+      width="1200px"
       @close="dialogShow = false"
       :modal="true"
       :show-close="false"
@@ -12,30 +13,111 @@
       :destroy-on-close="false"
       draggable>
     <template #header="{ close }">
-      <div class="flex_between">
-        <div class="c-0F161E f18 f-wei-600">{{dialogTitle}}</div>
+      <div class="flex dialog-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}}</div>
+            <!--          <div class="borLine"></div>-->
+          </div>
+        </div>
+        <div class="c-theme lMarauto f13 pointer" @click="goMaterialLibrary">管理素材</div>
       </div>
     </template>
-    <div class="container" :style="{ maxHeight: height , minHeight:minheight }" v-loading="loading">
-      <slot name="content"></slot>
+    <div class="library_body" v-loading="loading">
+<!--      搜索框-->
+      <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>
+        <Select ref="sizeTypeRef"
+                :clearFlag="true"
+                :filterFlag="true"
+                title="尺寸"
+                selectWidth="160px" class="bMar10"
+                @changeEvent="()=>init()" @clearEvent="()=>init()"
+                :options="pageInfo.sizeTypeList"/>
+        <Select ref="ideaManRef"
+                :clearFlag="true"
+                title="创意人"
+                selectWidth="160px" class="bMar10"
+                :optObj="{k:'id',la:'username',val:'id'}"
+                @changeEvent="()=>init()" @clearEvent="()=>init()"
+                :options="pageInfo.createrList"/>
+        <Select ref="designerRef"
+                :clearFlag="true"
+                title="设计师" class="bMar10"
+                selectWidth="160px"
+                :optObj="{k:'id',la:'username',val:'id'}"
+                @changeEvent="()=>init()" @clearEvent="()=>init()"
+                :options="pageInfo.editorList"/>
+
+        <tagBlock ref="tagRef" title="素材标签" selectWidth="240px" :haveNewTag="false" class="bMar10"
+                  @handleChange="val=>{pageInfo.tagChooseVal = val}" @hideChange="()=>init()"></tagBlock>
+        <TimeScreen title="时间" selectWidth="260px" :haveQuick="false" :clearFlag="true" :valueIsKong="true"
+                    ref="timeRef"
+                    :shortcuts="pageInfo.shortList"
+                    @init="()=>init()"
+                    class="bMar10 lMar10"></TimeScreen>
+        <span class="pointer c-theme lMar10 bMar10" @click="init()">刷新</span>
+        <div class="flex bMar10 lMar10">
+          <Tooltip notes="因媒体接口限制只能使用符合尺寸要求的素材" colorCss="c-d3"  :iconSlotFalg="true">
+            <template v-slot:iconSlot>
+              <div class="f13 flex">仅显示可投放素材<el-icon class="f13 pointer lMar5" color="#d3d3d3"><i-ep-QuestionFilled/></el-icon></div>
+            </template>
+          </Tooltip>
+          <el-switch v-model="canPutOn" class="lMar5"/>
+        </div>
+      </div>
+<!--      素材区-->
+      <div class="materialBox flexWrap">
+        <materialBlock v-for="item in pageInfo.materialList"
+                         :key="item.id"
+                         folderId="folder_id"
+                         :paramsObj="item"
+                         :checkShow="true"
+                         :showCreateTimeFlag="true"
+                          :showDetialFlag="false"
+                         @init="()=>init()"
+                         @checkChange="checkChangeItem"></materialBlock>
+
+          <noData v-if="(pageInfo.materialList && pageInfo.materialList.length==0) || !pageInfo.materialList"></noData>
+      </div>
+<!--      分页区-->
+      <div class="pageBox flex">
+        <el-checkbox v-model="allChecked" @change="allChangeEvent">全选</el-checkbox>
+        <div class="c-666 lMar20 f12">使用原生页外顶部视频换内功能时,请筛选640*360,640*480,750*1334等尺寸素材</div>
+        <el-pagination
+            class="lMarauto"
+            :small="true"
+            v-model:current-page="currentPage"
+            v-model:page-size="pageSize"
+            :page-sizes="[10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="300"
+            @current-change="handleCurrentChange"
+        />
+      </div>
     </div>
     <template #footer>
       <div class="dialog-footer">
-        <div>
-          <span>已选素材: {{}} / {{}}</span>
+        <div class="flex">
+          <span>已选素材: {{pageInfo.chooseList_Item&&pageInfo.chooseList_Item.length || 0}} / {{total || 0}}</span>
+          <Tooltip notes="素材已根据媒体的要求进行过滤（广点通：支持视频格式：mp4、mov、avi，大小不超过100M）" colorCss="c-d3"/>
         </div>
 
-        <div class="lMarauto">
-          <Tooltip notes="复制创意组" colorCss="c-theme" :slotFalg="true">
+        <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>2、<b>创量审核状态</b>：只有素材库素材通过审核才可以使用；</div>
+            </template>
+            <template v-slot:iconSlot>
               <div class="flex">
-                找不到素材？点这里
-                <el-icon size="14" class="f14 pointer"><i-ep-QuestionFilled/></el-icon>
+                找不到素材？点这里<el-icon class="f14 pointer lMar5" color="#d3d3d3"><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>
+          <el-button plain @click="cancelEVent" size="default" class="lMar10">取消</el-button>
+          <el-button type="primary" @click="submitEVent" size="default" class="lMar10">提交</el-button>
         </div>
       </div>
     </template>
@@ -44,14 +126,70 @@
 <script setup lang="ts">
 import {getCurrentInstance, nextTick, onMounted, reactive, ref} from "vue";
 import Tooltip from '@/components/capsulationMoudle/_tooltip.vue'
+import Select from '@/components/capsulationMoudle/_select.vue'
+import TimeScreen from '@/components/capsulationMoudle/timeScreen.vue'
+import Input from '@/components/capsulationMoudle/_input.vue'
+import materialCatalog from '@/components/businessMoudle/materialLibrary/materialCatalog.vue'
+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 {publicSwitchType} from "@/components/businessMoudle/switchType";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
 
 const { proxy } = getCurrentInstance() as any;
 // 全局方法定义
 const NumberHandle = proxy.$NumberHandle
 
+const canPutOn = ref<boolean>(false)
+const allChecked = ref<boolean>(false)
+//全选
+const allChangeEvent = (val: any) => {
+  if(val){
+    pageInfo.chooseList_Item = []
+    pageInfo.materialList.forEach(item=>{
+      item.checked = true
+      pageInfo.chooseList_Item.push(item)
+    })
+  }else{
+    pageInfo.chooseList_Item = []
+    pageInfo.materialList.forEach(item=>{
+      item.checked = false
+    })
+  }
+}
+
+// 类型切换公共ts
+const typeListParams = reactive([
+  {name:'素材库',key:'video'},
+  {name:'收藏夹',key:'cover'},
+])
+const {
+  typeAc,
+  typeList,
+  switchTypeItem
+} = publicSwitchType(typeListParams)
+
+
+//去素材管理
+const goMaterialLibrary = () => {
+  let newPage:any = router.resolve({
+    path: '/materialLibrary',
+    query: { type: 'material'}
+  })
+  window.open(newPage.href, "_blank")
+}
 
 // 切换显隐
 const dialogShow = ref<boolean>(false)
+const switchShow = (val:boolean,mtype:number)=>{
+  dialogShow.value = val
+  if(val){
+    initAll(mtype)
+  }
+}
 
 //提交
 const submitEVent = () => {
@@ -61,32 +199,102 @@ 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)
-//   }
-// }
 
 
+
+
+
+// 父组件共享值
+defineExpose({
+  switchShow
+});
+
+//公共ts 和 素材库共用
+const {
+  pageInfo,
+  InputRef_text,
+  mtypeRef,
+  ctypeRef,
+  sizeTypeRef,
+  ideaManRef,
+  designerRef,
+  CataRef,
+  tagRef,
+  timeRef,
+  loading,
+  currentPage,
+  pageSize,
+  total,
+  init,
+  init_createrList,
+  getSizeList,
+  handleCurrentChange,
+  initAll,
+  checkChangeItem
+} = searchBoxTs(1)
+
 onMounted(()=>{
   nextTick(()=>{
 
   })
 })
 </script>
+<style lang="scss">
+.library_Dialog{
+  .el-dialog__header{
+    padding: 10px 30px;
+    margin: 0;
+  }
+  .el-dialog__body{
+    padding: 10px 0 0;
+    .pageBox{
+      .el-input.is-disabled .el-input__inner{
+        height: 24px!important;
+      }
+      .el-input--small .el-input__inner{
+        height:24px!important;
+      }
+    }
+  }
+  .el-dialog__footer{
+    border-top: 1px solid #F2F2F2;
+    padding: 10px 30px;
+
+  }
+  //--el-component-size-small: 24px;
+}
+</style>
 <style lang="scss" scoped>
+.library_body {
+  :deep(.spanTitle) {
+    font-size: 13px;
+  }
+  .searchBox{
+    border-bottom: 1px solid #F2F2F2;
+    padding: 0 30px;
+
+  }
+  .materialBox{
+    padding: 10px 30px;
+    background-color: #f2f2f2;
+    height: calc(100vh - 275px);
+    overflow-y: auto;
+    //scrollbar-color: transparent transparent;
+    &::-webkit-scrollbar{
+      width: 2px;
+    }
+  }
+  .pageBox{
+    border-top: 1px solid #F2F2F2;
+    padding: 10px 30px;
+  }
+}
+
 .dialog-footer{
   display: flex;
   align-items: center;
-  padding: 16px 32px 16px 24px;
+  color: #666;
+  font-size: 13px;
 }
+
 </style>

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

@@ -0,0 +1,206 @@
+import {getCurrentInstance, nextTick, reactive, ref} from "vue";
+import {materialManage, reactiveTableAndAny} from "@/api/ApiModel";
+import {Api} from "@/api/api";
+import {ElMessage} from "element-plus";
+
+
+
+export function searchBoxTs(mType?:number){
+    const { proxy } = getCurrentInstance() as any;
+    // 全局方法定义
+    const NumberHandle = proxy.$NumberHandle
+
+    const InputRef_text = ref<{value:string}>()
+    const mtypeRef = ref<{value:string|number}>()
+    const ctypeRef = ref<{value:string|number}>()
+    const sizeTypeRef = ref<{value:string|number}>()
+    const ideaManRef = ref<{value:string|number}>()
+    const designerRef = ref<{value:string|number}>()
+    const CataRef = ref<{value:string,idVal:number,initAllAlbum:()=>void}>()
+    const tagRef = ref<{init:()=>void}>()
+    const timeRef = ref<{dateVal:any}>()
+    //图片还是视频
+    const m_type = ref<any>()
+
+    const pageInfo = reactive<reactiveTableAndAny>({
+        materialList:[],
+        chooseList:[],//选中素材的id
+        moreList:[
+            {label:'修改标签',value:'1'},
+            {label:'修改设计师',value:'3'},
+            {label:'修改创意人',value:'4'},
+            {label:'迅雷下载',value:'5'},
+            {label:'删除',value:'6'},
+        ],
+        typeList:[
+            {label:'视频',value:1},
+            {label:'图片',value:2},
+        ],
+        getTypeList:[
+            {label:'本地上传',value:1},
+            {label:'媒体下载',value:2},
+        ],
+        tagChooseVal:[],
+        sizeTypeList:[],
+        createrList:[],
+        editorList:[],
+        shortList:[
+            {
+                text: '近7天',
+                value: () => {
+                    const end = new Date()
+                    const start = new Date()
+                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+                    return [start, end]
+                },
+            },
+            {
+                text: '近30天',
+                value: () => {
+                    const end = new Date()
+                    const start = new Date()
+                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+                    return [start, end]
+                },
+            },
+            {
+                text: '近90天',
+                value: () => {
+                    const end = new Date()
+                    const start = new Date()
+                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+                    return [start, end]
+                },
+            },
+        ],
+        tasksList:[],
+        chooseList_Item:[],//选中素材的整个obj
+    })
+
+    //创意师
+    const init_createrList = async () => {
+        let res:any = await proxy.$http.get(Api.account_list)
+        if(res&&res.errNo=='0'){
+            pageInfo.createrList = res.rst
+            pageInfo.editorList = res.rst
+        }else{
+            ElMessage.error(res.errMsg)
+        }
+    }
+
+
+    //获取尺寸列表
+    const getSizeList = async () => {
+        let res:any = await proxy.$http.get(Api.sizeTypeList)
+        if(res&&res.errNo=='0'){
+            let resNew:any = res.rst
+            pageInfo.sizeTypeList = []
+            resNew.forEach(item=>{
+                pageInfo.sizeTypeList.push({
+                    label:item,
+                    value:item
+                })
+            })
+        }else{
+            ElMessage.error(res.errMsg)
+        }
+    }
+
+
+    //列表
+    const total = ref<number>()
+    const currentPage = ref<number>(1)
+    const pageSize = ref<number>(20)
+    const loading = ref<boolean>(false)
+    const handleCurrentChange = (val:number) => {
+        init(val)
+    }
+    const init = async (page?:any) => {
+        loading.value = true
+        currentPage.value = page ? page : 1
+        const paramsModel = reactive<materialManage>({
+            name:InputRef_text.value!.value,
+            folder_id:CataRef.value!.idVal,
+            tags:pageInfo.tagChooseVal,
+            start:timeRef.value!.dateVal ? timeRef.value!.dateVal[0] : '',
+            end:timeRef.value!.dateVal ? timeRef.value!.dateVal[1] : '',
+            size_type:sizeTypeRef.value!.value,
+            idea_man:ideaManRef.value!.value,
+            designer:designerRef.value!.value,
+            page:page?page:currentPage.value,
+            pageSize:pageSize.value,
+        })
+        if(!mType){ // 素材库
+            paramsModel.mtype = mtypeRef.value!.value
+            paramsModel.ctype = ctypeRef.value!.value
+        }else{ //创意 - 素材弹框
+            paramsModel.mtype =  m_type.value
+        }
+        let res:any = await proxy.$http.get(Api.materialManage_list,paramsModel)
+        loading.value = false
+        if(res&&res.errNo=='0'){
+            let resNew:any = res.rst
+            if(resNew.data){
+                pageInfo.materialList = resNew.data
+            }else{
+                pageInfo.materialList = []
+            }
+            total.value = resNew.pageInfo.total
+        }else{
+            ElMessage.error(res.errMsg)
+        }
+    }
+
+    const initAll = (mType?:number) => {
+        nextTick(()=>{
+            m_type.value = mType || ''
+            init()
+            getSizeList()
+            init_createrList()
+            CataRef.value!.initAllAlbum()
+            tagRef.value!.init()
+        })
+    }
+
+//选择素材
+    const checkChangeItem = (flag: any,obj:any) => {
+        if(flag){
+            pageInfo.chooseList.push(obj.id)
+            pageInfo.chooseList_Item.push(obj)
+            //迅雷下载的列表
+            pageInfo.tasksList.push({
+                name:obj.name,
+                url:obj.oss_url,
+            })
+        }else{
+            let idx:number = pageInfo.chooseList.findIndex(n=>n==obj.id)
+            pageInfo.chooseList.splice(idx,1)
+            pageInfo.tasksList.splice(idx,1)
+            pageInfo.chooseList_Item.splice(idx,1)
+        }
+    }
+
+
+    return {
+        pageInfo,
+        InputRef_text,
+        mtypeRef,
+        ctypeRef,
+        sizeTypeRef,
+        ideaManRef,
+        designerRef,
+        CataRef,
+        tagRef,
+        timeRef,
+        loading,
+        currentPage,
+        pageSize,
+        total,
+        init,
+        init_createrList,
+        getSizeList,
+        handleCurrentChange,
+        initAll,
+        checkChangeItem
+    }
+}

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

@@ -39,7 +39,7 @@
                 <template #content>
                   <PreviewInfo :propInfo="{list:slotProps.row.jsonInfo}"></PreviewInfo>
                 </template>
-                <el-icon :size="14" color="#999" class="lMar5"><i-ep-InfoFilled /></el-icon>
+                <el-icon :size="14" color="#d3d3d3" class="lMar5"><i-ep-InfoFilled /></el-icon>
               </el-tooltip>
             </div>
           </template>

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

@@ -33,7 +33,7 @@
                 <template #content>
                   <PreviewInfo :propInfo="{list:slotProps.row.jsonInfo}"></PreviewInfo>
                 </template>
-                <el-icon :size="14" color="#999" class="lMar5"><i-ep-InfoFilled /></el-icon>
+                <el-icon :size="14" color="#d3d3d3" class="lMar5"><i-ep-InfoFilled /></el-icon>
               </el-tooltip>
             </div>
           </template>

src/components/businessMoudle/materialLibrary/block/materialBlock.vue

@@ -20,8 +20,9 @@
       <div class="conBox">
         <div class="flex">
           <span style="width: 190px" class="clampOne" :title="paramsObj.name">{{paramsObj.name || '-'}}</span>
-          <span class="lMarauto c-theme pointer f12" @click="goDetial">详情</span>
+          <span class="lMarauto c-theme pointer f12" @click="goDetial" v-if="showDetialFlag">详情</span>
         </div>
+        <div v-if="showCreateTimeFlag" class="tMar6 c-666 f12">上传时间: {{paramsObj.created_at}}</div>
         <!--     <div class="tMar40 statusCss" :class="paramsObj.status == 1 ? 's2' : 's1'">-->
         <!--       {{paramsObj.status == 1 ? '无消耗' : '未使用'}}-->
         <!--     </div>-->
@@ -57,12 +58,16 @@ const props = withDefaults(defineProps<{
   paramsObj:any,
   checkShow?:boolean,
   idName?:string,
-  folderIdName?:string
+  folderIdName?:string,
+  showDetialFlag?:boolean,
+  showCreateTimeFlag?:boolean,
 }>(),{
   paramsObj:{},
   checkShow:false,
   idName:'id',
-  folderIdName:'folder_id'
+  folderIdName:'folder_id',
+  showDetialFlag:true,
+  showCreateTimeFlag:false
 })
 
 const changeEvent = (val:any) => {

src/components/businessMoudle/materialLibrary/index.vue

@@ -17,7 +17,9 @@ import {publicSwitchType} from "@/components/businessMoudle/switchType";
 import album from "./album.vue";
 import material from "./material.vue";
 import {getCurrentInstance, nextTick, onMounted, reactive, shallowRef,markRaw} from "vue";
+import { useRoute  } from "vue-router";
 
+const route = useRoute();
 
 const { proxy } = getCurrentInstance() as any;
 // 全局方法定义
@@ -42,6 +44,9 @@ const switchTypeItem = (item:any) => {
   acIdx.value = item.compName
 }
 
+const {query:{type}}  = route
+typeAc.value = type ? type : 'album'
+acIdx.value = type&&type=='material' ? markRaw(material) : markRaw(album)
 onMounted(()=>{
   nextTick(()=>{
 

src/components/businessMoudle/materialLibrary/material.vue

@@ -124,6 +124,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 { collectParam, materialManage, reactiveTableAndAny} from "@/api/ApiModel";
 import {Api} from "@/api/api";
 import {ElMessage} from "element-plus";
@@ -132,105 +133,12 @@ const { proxy } = getCurrentInstance() as any;
 // 全局方法定义
 const NumberHandle = proxy.$NumberHandle
 
-const pageInfo = reactive<reactiveTableAndAny>({
-  materialList:[],
-  chooseList:[],
-  moreList:[
-    {label:'修改标签',value:'1'},
-    {label:'修改设计师',value:'3'},
-    {label:'修改创意人',value:'4'},
-    {label:'迅雷下载',value:'5'},
-    {label:'删除',value:'6'},
-  ],
-  typeList:[
-    {label:'视频',value:1},
-    {label:'图片',value:2},
-  ],
-  getTypeList:[
-    {label:'本地上传',value:1},
-    {label:'媒体下载',value:2},
-  ],
-  tagChooseVal:[],
-  sizeTypeList:[],
-  createrList:[],
-  editorList:[],
-  shortList:[
-    {
-      text: '近7天',
-      value: () => {
-        const end = new Date()
-        const start = new Date()
-        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-        return [start, end]
-      },
-    },
-    {
-      text: '近30天',
-      value: () => {
-        const end = new Date()
-        const start = new Date()
-        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-        return [start, end]
-      },
-    },
-    {
-      text: '近90天',
-      value: () => {
-        const end = new Date()
-        const start = new Date()
-        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-        return [start, end]
-      },
-    },
-  ],
-  tasksList:[]
-})
-
-//创意师
-const init_createrList = async () => {
-  let res:any = await proxy.$http.get(Api.account_list)
-  if(res&&res.errNo=='0'){
-    pageInfo.createrList = res.rst
-    pageInfo.editorList = res.rst
-  }else{
-    ElMessage.error(res.errMsg)
-  }
-}
 
-//获取尺寸列表
-const getSizeList = async () => {
-  let res:any = await proxy.$http.get(Api.sizeTypeList)
-  if(res&&res.errNo=='0'){
-    let resNew:any = res.rst
-    pageInfo.sizeTypeList = []
-    resNew.forEach(item=>{
-      pageInfo.sizeTypeList.push({
-        label:item,
-        value:item
-      })
-    })
-  }else{
-    ElMessage.error(res.errMsg)
-  }
-}
 
 //批量操作
 const batchShow = ref<boolean>(false)
 const allBatchVal = ref<boolean>(false)
-//选择素材
-const checkChangeItem = (flag: any,obj:any) => {
-  if(flag){
-    pageInfo.chooseList.push(obj.id)
-    pageInfo.tasksList.push({
-      name:obj.name,
-      url:obj.oss_url,
-    })
-  }else{
-    let idx:number = pageInfo.chooseList.findIndex(n=>n==obj.id)
-    pageInfo.chooseList.splice(idx,1)
-    pageInfo.tasksList.splice(idx,1)
-  }
-}
+
 //全选
 const allBatchEvent = (val: any) => {
   if(val){
@@ -333,63 +241,33 @@ const dropdownEvent = (val: string | number | object) => {
   }
 }
 
-//列表
-const total = ref<number>()
-const currentPage = ref<number>(1)
-const pageSize = ref<number>(20)
-const loading = ref<boolean>(false)
-const InputRef_text = ref<{value:string}>()
-const mtypeRef = ref<{value:string|number}>()
-const ctypeRef = ref<{value:string|number}>()
-const sizeTypeRef = ref<{value:string|number}>()
-const ideaManRef = ref<{value:string|number}>()
-const designerRef = ref<{value:string|number}>()
-const CataRef = ref<{value:string,idVal:number,initAllAlbum:()=>void}>()
-const tagRef = ref<{init:()=>void}>()
-const timeRef = ref<{dateVal:any}>()
-const handleCurrentChange = (val:number) => {
-    init(val)
-}
-const init = async (page?:any) => {
-  loading.value = true
-  currentPage.value = page ? page : 1
-  const paramsModel = reactive<materialManage>({
-    name:InputRef_text.value!.value,
-    folder_id:CataRef.value!.idVal,
-    mtype:mtypeRef.value!.value,
-    ctype:ctypeRef.value!.value,
-    tags:pageInfo.tagChooseVal,
-    start:timeRef.value!.dateVal ? timeRef.value!.dateVal[0] : '',
-    end:timeRef.value!.dateVal ? timeRef.value!.dateVal[1] : '',
-    size_type:sizeTypeRef.value!.value,
-    idea_man:ideaManRef.value!.value,
-    designer:designerRef.value!.value,
-    page:page?page:currentPage.value,
-    pageSize:pageSize.value,
-  })
-  let res:any = await proxy.$http.get(Api.materialManage_list,paramsModel)
-  loading.value = false
-  if(res&&res.errNo=='0'){
-    let resNew:any = res.rst
-    if(resNew.data){
-      pageInfo.materialList = resNew.data
-    }else{
-      pageInfo.materialList = []
-    }
-    total.value = resNew.pageInfo.total
-  }else{
-    ElMessage.error(res.errMsg)
-  }
-}
+
+//公共ts 和 创意-素材库共用
+const {
+  pageInfo,
+  InputRef_text,
+  mtypeRef,
+  ctypeRef,
+  sizeTypeRef,
+  ideaManRef,
+  designerRef,
+  CataRef,
+  tagRef,
+  timeRef,
+  loading,
+  currentPage,
+  pageSize,
+  total,
+  init,
+  init_createrList,
+  getSizeList,
+  handleCurrentChange,
+  initAll,
+  checkChangeItem
+} = searchBoxTs()
 
 onMounted(()=>{
-  nextTick(()=>{
-    init()
-    getSizeList()
-    init_createrList()
-    CataRef.value!.initAllAlbum()
-    tagRef.value!.init()
-  })
+  initAll()
 })
 </script>
 <style lang="scss" scoped>

src/components/capsulationMoudle/_tooltip.vue

@@ -1,8 +1,13 @@
 <template>
-  <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 :effect="effect" raw-content :placement="placement">
+    <!--    提示框的内容-->
+    <template #content>
+      <template v-if="contentSlotFalg"><slot name="content"></slot></template>
+      <template v-else>{{notes}}</template>
+    </template>
+    <!--    提示框的图标-->
+    <template v-if="iconSlotFalg"><slot name="iconSlot"></slot></template>
+    <i-ep-QuestionFilled v-if="!iconSlotFalg" class="lMar5  f14 pointer" :class="colorCss"/>
   </el-tooltip>
 </template>
 <script lang="ts" setup>
@@ -10,11 +15,17 @@ const props = withDefaults(defineProps<{
   notes?: string,
   colorCss?: string,
   effect?: string,
-  slotFalg?:boolean
+  iconSlotFalg?:boolean,
+  contentFlag?:boolean,
+  contentSlotFalg?:boolean,
+  placement?:string,
 }>(), {
   notes: '',
   colorCss: 'c-999',
   effect: 'light',
-  slotFalg:false
+  iconSlotFalg:false,
+  contentFlag:false,
+  contentSlotFalg:false,
+  placement:'bottom'
 })
 </script>