feat: 优化需求12\14\15

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

@@ -164,6 +164,7 @@
               layout="total, sizes, prev, pager, next, jumper"
               :total="total"
               @current-change="(val)=>handleCurrentChange(val,typeAc)"
+              @size-change="(val) => handleSizeChange(val,typeAc)"
           />
         </div>
       </div>
@@ -356,7 +357,7 @@ const submitEVent = async () => {
   if(LoadingMaskRef.value){
     let inject_arr: any = _.cloneDeep(inject_accountIds)
     //假设15s一个视频 totalTime为总时长 3s一轮巡
-    let totalTime = 15 * Number(arr.length) * Number(inject_arr._object[inject_arr._key].length) 
+    let totalTime = 15 * Number(arr.length) * Number(inject_arr._object[inject_arr._key].length)
     LoadingMaskRef.value.time = formatSeconds(totalTime, false)
   }
   await get_upload_res()
@@ -445,6 +446,7 @@ const {
   init_createrList,
   getSizeList,
   handleCurrentChange,
+  handleSizeChange,
   init_collect_all,
   initAll,
   sizeVisibleEvent,

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

@@ -150,12 +150,19 @@ export function materialTs(mType?:number){
     const pageSize = ref<number>(20)
     const loading = ref<boolean>(false)
     const handleCurrentChange = (val:number,type:string) => {
-        if(type=='cover'){
+        if(type=='collect'){
             init_collect_list(val)
         }else{
             init(val)
         }
     }
+    const handleSizeChange = (val:number,type:string) => {
+        if(type=='collect'){
+            init_collect_list(1)
+        }else{
+            init(1)
+        }
+    }
     const init = async (page?:any) => {
         loading.value = true
         currentPage.value = page ? page : 1
@@ -329,6 +336,7 @@ export function materialTs(mType?:number){
         init_createrList,
         getSizeList,
         handleCurrentChange,
+        handleSizeChange,
         initAll,
         init_collect_all,
         checkChangeItem,

src/components/businessMoudle/materialLibrary/album.vue

@@ -97,6 +97,7 @@
               layout="total, sizes, prev, pager, next, jumper"
               :total="total"
               @current-change="handleCurrentChange"
+              @size-change="handleSizeChange"
           />
         </div>
       </div>
@@ -252,6 +253,9 @@ const clearEvent = () => {
 const handleCurrentChange = (val:number) => {
   initFile_Album(val)
 }
+const handleSizeChange = (val: number) => {
+  initFile_Album(1)
+}
 //文件夹列表
 const initFile_Album = async (page?:number) => {
   fileLoading.value = true

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

@@ -6,7 +6,7 @@
           <img :src="paramsObj.oss_url" alt=""  v-if="paramsObj.mtype==2"  height="120">
           <img :src="paramsObj.pre_oss_url" alt=""  v-if="paramsObj.mtype==1"  height="120">
         </div>
-        <div class="videoPlayBox" v-if="paramsObj.mtype==1"><el-icon :size="22"><i-ep-VideoPlay /></el-icon></div>
+        <div class="videoPlayBox" v-if="paramsObj.mtype==1" @click.stop="onClickVideoPlay(paramsObj)"><el-icon :size="28"><i-ep-VideoPlay /></el-icon></div>
         <div class="size shadowBox">{{paramsObj.width || '-'}} * {{paramsObj.height || '-'}}</div>
         <div class="time shadowBox" v-if="paramsObj.mtype==1">{{paramsObj.duration || '-'}}</div>
         <div class="collectBox" v-if="!checkShow || source=='librayDialog'" @click.stop="collectEvent(paramsObj)">
@@ -51,7 +51,7 @@
             <span>广点通拒审{{ paramsObj.refuse_cnt }}次</span>
             <el-icon class="lMar3"><WarningFilled /></el-icon>
           </div>
-          
+
         </div>
         <div class="f12 flex tMar8 c-999" v-if="paramsObj.is_placed == 0 && source=='librayDialog'"><el-icon :size="12" color="#3173FF" class="rMar5"><i-ep-Warning /></el-icon> 不符合媒体可投放要求</div>
       </div>
@@ -64,6 +64,15 @@
 
     <!-- 拒审理由 -->
     <RefuseDetails ref="RefuseDetailsRef"></RefuseDetails>
+
+    <!-- S 视频播放 弹框 -->
+    <videoPlayDialog
+      :dialogVisible="videoPlayVisible"
+      :videoInfo="currentVideoInfo"
+      @confirm="onConfirmVideoPlay"
+      @cancel="onCancelVideoPlay"
+    />
+    <!-- E 视频播放 弹框 -->
   </div>
 </template>
 <script setup lang="ts">
@@ -74,6 +83,7 @@ import {collectParam} from "@/api/ApiModel";
 import {Api} from "@/api/api";
 import {ElMessage} from "element-plus";
 import RefuseDetails from '../dialog/refuseDetails.vue'
+import videoPlayDialog from './videoPlayDialog.vue'
 
 const { proxy } = getCurrentInstance() as any;
 // 全局方法定义
@@ -162,6 +172,26 @@ const onClickRefuse = (id: string) => {
   }
 }
 
+// S 视频播放
+const videoPlayVisible = ref<boolean>(false)
+const currentVideoInfo = ref<any>({})
+const onClickVideoPlay = (paramsObj) => {
+  console.log('onClickVideoPlay paramsObj => ', paramsObj)
+  currentVideoInfo.value = {...paramsObj}
+  console.log('currentVideoInfo => ', currentVideoInfo.value)
+  videoPlayVisible.value = true
+}
+const onConfirmVideoPlay = () => {
+  currentVideoInfo.value = {}
+  videoPlayVisible.value = false
+}
+const onCancelVideoPlay = () => {
+  currentVideoInfo.value = {}
+  videoPlayVisible.value = false
+}
+// E 视频播放
+
+
 onMounted(()=>{
   nextTick(()=>{
 
@@ -268,8 +298,8 @@ onMounted(()=>{
       top: 50%;
       left: 50%;
       color: #fff;
-      margin-top: -11px;
-      margin-left: -11px;
+      margin-top: -15px;
+      margin-left: -15px;
     }
     .collectBox{
       position: absolute;
@@ -311,7 +341,7 @@ onMounted(()=>{
     color: #fb1919;
     border: 1px solid #fb1919;
   }
-  
+
   &:hover{
     box-shadow: 0px 2px 8px 1px rgba(0,0,0,.1);
     .collectBox{

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

@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <el-dialog :model-value="props.dialogVisible" :before-close="handleClose" :show-close="true" :title="dialogTitle" width="600px"
+    class="video-dialog">
+      <div class="content-wrap">
+        <video v-if="props.dialogVisible" class="video-wrap" :src="form.oss_url" :poster="form.pre_oss_url" controls autoplay muted preload="none" controlslist="nodownload noremoteplayback disablePictureInPicture noplaybackrate" />
+      </div>
+      <div class="footer">
+        <!-- <el-button @click="handleClose">取消</el-button>
+        <el-button type="primary" @click="handleSave">确定</el-button> -->
+        <el-button type="primary" @click="handleClose">关 闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, watch, computed } from 'vue'
+import type { PropType } from 'vue';
+import { ElMessage } from 'element-plus'
+import { Api as $api } from '@/api/api'
+import $http from '@/http/http'
+import to from 'await-to-js'
+
+const emits = defineEmits([
+  'confirm',
+  'cancel'
+])
+
+const props = defineProps({
+  dialogVisible: {
+    type: Boolean as PropType<boolean>,
+    default: () => false,
+  },
+  videoInfo: {
+    type: Object as PropType<object>,
+    default: () => ({})
+  },
+})
+
+// 弹框标题
+const dialogTitle = computed(() => {
+  return `视频素材：${form.name}`
+})
+
+// 表单数据
+const form = reactive({
+  name: '' as any,
+  oss_url: '' as any,
+  pre_oss_url: '' as any,
+})
+
+// 监听弹框显示
+watch(() => props.dialogVisible, isShow => {
+  isShow && handleInitForm()
+})
+
+// 表单数据初始化
+const handleInitForm = async () => {
+  console.log('handleInitForm => ')
+  console.log('props.videoInfo => ', props.videoInfo)
+  const { name, oss_url, pre_oss_url } = props.videoInfo as any
+  form.name = name
+  form.oss_url = oss_url
+  form.pre_oss_url = pre_oss_url
+}
+
+// 取消
+const handleClose = () => {
+  emits('cancel')
+}
+
+// 确定
+const handleSave = async () => {
+  try {
+    await handleValidate() // 表单判空校验
+    await handleSubmit() // 提交表单
+    emits('confirm')
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 表单判空校验
+const handleValidate = () => {
+  return new Promise((resolve, reject) => {
+    // const { strategy_name } = form
+    // if (strategy_name === '') {
+    //   ElMessage.warning('请输入策略名称')
+    //   reject('校验未通过')
+    // } else {
+    //   resolve('校验通过')
+    // }
+    resolve('校验通过')
+  })
+}
+
+// 提交表单
+const handleSubmit = async () => {
+  // const url = $api.sellStrategy_sellStrategyAdd
+  // const params = {
+  //   strategy_name: form.strategy_name,
+  // }
+  // const [err, res]: any = await to($http.post(url, params))
+  // if (err || res?.errNo !== '0' || res?.rst === false) {
+  //   ElMessage.error(err?.message || res?.errMsg || "操作失败")
+  //   return Promise.reject()
+  // } else if (res?.rst?.strategy_id) {
+  //   ElMessage.success('操作成功')
+  //   return Promise.resolve()
+  // }
+  return Promise.resolve()
+}
+
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-dialog) {
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  .el-dialog__body {
+    padding: 0;
+  }
+  .el-dialog__header{
+    border-bottom: 1px solid #e8eaec;
+    padding: 20px;
+    margin-right: 0;
+    margin-left: 0;
+    .el-dialog__title{
+      font-size: 16px;
+      font-weight: bold;
+      padding-left: 20px;
+    }
+  }
+  .content-wrap {
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .video-wrap {
+      width: 90%;
+      max-height: 400px;
+    }
+  }
+  .content {
+    padding: 24px 50px 0 40px;
+    .form-item {
+      display: flex;
+      align-items: center;
+      margin-top: 30px;
+      &:first-child {
+        margin-top: 0;
+      }
+      .item-label {
+        flex-shrink: 0;
+        width: 80px;
+        font-size: 14px;
+        color: #333;
+        font-weight: 400;
+        &.required {
+          position: relative;
+        }
+        &.required::before {
+          position: absolute;
+          left: -8px;
+          top: 0;
+          content: '*';
+          font-size: 12px;
+          color: rgb(245, 108, 108);
+        }
+      }
+      .el-input__inner {
+        height: 28px;
+      }
+      .el-cascader {
+        flex: 1;
+      }
+      .el-select {
+        flex: 1;
+      }
+    }
+  }
+  .footer {
+    padding: 0 0 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>

src/components/businessMoudle/materialLibrary/material.vue

@@ -100,6 +100,7 @@
               layout="total, sizes, prev, pager, next, jumper"
               :total="total"
               @current-change="handleCurrentChange"
+              @size-change="handleSizeChange"
       />
     </div>
   </div>
@@ -280,6 +281,7 @@ const {
   getSizeList,
   usageList,
   handleCurrentChange,
+  handleSizeChange,
   initAll,
   checkChangeItem,
   sizeVisibleEvent

src/components/businessMoudle/textLibrary/index.vue

@@ -31,6 +31,7 @@
           :descol="tableInfo.descolList"
           :selectableEvent="selectableEvent"
           :handleSelectionAllChange="handleSelectionAllChange"
+          pageLayout="total, sizes, prev, pager, next"
           @init="init"
           @selectChange="selectEvent"
           @sort="sortEvent"
@@ -96,7 +97,7 @@ const props = defineProps({
     type: String,
     default: 'default'
   }
-  
+
 })
 
 interface Emits {

src/components/capsulationMoudle/tableList.vue

@@ -51,6 +51,7 @@
                    :layout="pageLayout"
                    :small="pageSmall"
                    :total="total"
+                   @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
   </div>
 </template>
@@ -213,6 +214,11 @@ const handleCurrentChange = (val: number) => {
   emit('init', currentPage.value, pageSize.value)
 }
 
+const handleSizeChange = (val: number) => {
+  currentPage.value = 1
+  emit('init', currentPage.value, pageSize.value)
+}
+
 
 // 父组件共享值
 defineExpose({