RING:接入素材库推送

src/api/index.ts

@@ -747,7 +747,7 @@ export const getPromotionList = (data: {
 export const deletePromotion = (
   query: { channel_id: number }
 ): any => {
-  return axios("yuewen/deletePromotion", { params: query });
+  return axios("/yuewen/deletePromotion", { params: query });
 };
 
 //添加推广链接
@@ -774,7 +774,7 @@ export const updateReportConfig = (data: {
 export const getUserData = (
   query: { channel_id: number | string, page: number, is_paid?: number }
 ): any => {
-  return axios("yuewen/registerUsers", { params: query });
+  return axios("/yuewen/registerUsers", { params: query });
 };
 
 /**
@@ -784,7 +784,7 @@ export const getUserData = (
 export const forceReport = (
   query: { uid: number | string }
 ): any => {
-  return axios("yuewen/forceReport", { params: query });
+  return axios("/yuewen/forceReport", { params: query });
 };
 
 // 素材库相关接口
@@ -799,7 +799,7 @@ export const getVideoList = (
     demander: string, editor: string, uploader: string,
   }
 ): any => {
-  return axios("video/list", { params: query });
+  return axios("/video/list", { params: query });
 };
 
 /**
@@ -812,7 +812,7 @@ export const getImageList = (
     demander: string, editor: string, uploader: string,
   }
 ): any => {
-  return axios("image/list", { params: query });
+  return axios("/image/list", { params: query });
 };
 
 /**
@@ -824,7 +824,7 @@ export const deleteVideo = (
     ids: string
   }
 ): any => {
-  return axios("video/delete", { params: query });
+  return axios("/video/delete", { params: query });
 };
 
 /**
@@ -836,5 +836,69 @@ export const deleteImage = (
     ids: string
   }
 ): any => {
-  return axios("image/delete", { params: query });
+  return axios("/image/delete", { params: query });
 };
+
+/**
+ * 上传视频
+ * @data
+ */
+export const uploadVideo = (data: {
+  video: any,
+  is_public: number | string,
+  duration: number | string,
+  width: number | string,
+  height: number | string,
+}) => {
+  // return axios.post("/video/upload", data);
+  return axios({
+    method: 'post',
+    url: '/video/upload',
+    data,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+};
+
+/**
+ * 上传视频
+ * @data
+ */
+export const uploadImage = (data: {
+  image: any,
+  is_public: number | string,
+}) => {
+  // return axios.post("/image/upload", data);
+  return axios({
+    method: 'post',
+    url: '/image/upload',
+    data,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+};
+
+/**
+ * 获取广告主列表用于推送
+ * @param
+ */
+export const getAdvertiser = (
+): any => {
+  return axios("/ad/advertiser/all");
+};
+
+/**
+ * 推送素材
+ * @param
+ */
+export const pushMaterial = (
+  query: {
+    material_id: string | number,
+    advertiser_id: string | number,
+  }
+): any => {
+  return axios("/material/sync", { params: query });
+};
+

src/plugins/install.ts

@@ -33,7 +33,8 @@ import {
   Upload,
   List,
   Spin,
-  Progress
+  Progress,
+  Cascader,
 } from "ant-design-vue";
 
 import VueClipboard3 from "./vue-clipboard";
@@ -80,7 +81,8 @@ const install = (app: App<Element>) => {
     .use(List)
     .use(Spin)
     .use(Upload)
-    .use(Progress);
+    .use(Progress)
+    .use(Cascader);
 };
 
 export default install;

src/views/_pageOptions/table_material.ts

@@ -2,7 +2,7 @@
 export const TableColumnOfVideo = [
   {
     title: '视频名称',
-    dataIndex: 'video_name	',
+    dataIndex: 'name',
     slots: { customRender: 'video_name' },
   },
   {
@@ -11,11 +11,12 @@ export const TableColumnOfVideo = [
   },
   {
     title: '视频类型',
-    dataIndex: 'video_type	',
+    dataIndex: 'video_type',
+    slots: { customRender: 'video_type' },
   },
   {
     title: '推广书籍',
-    dataIndex: 'book_name	',
+    dataIndex: 'book_name',
   },
   {
     title: '需求方',
@@ -48,16 +49,17 @@ export const TableColumnOfVideo = [
 export const TableColumnOfImage = [
   {
     title: '图片名称',
-    dataIndex: 'image_name	',
+    dataIndex: 'name',
     slots: { customRender: 'image_name' },
   },
   {
     title: '图片类型',
-    dataIndex: 'image_type	',
+    dataIndex: 'image_type',
+    slots: { customRender: 'image_type' },
   },
   {
     title: '推广书籍',
-    dataIndex: 'book_name	',
+    dataIndex: 'book_name',
   },
   {
     title: '需求方',

src/views/material/component/common-table.vue

@@ -8,7 +8,6 @@
         >批量删除</a-button
       >
     </a-popconfirm>
-
     <a-table
       bordered
       :data-source="list"
@@ -22,8 +21,31 @@
         onChange: onSelectChange,
       }"
     >
+      <template #video_name="{ record }">
+        <div class="table-view-box">
+          <div class="video-view">
+            <i class="iconfont icon-ziyuan"></i>
+          </div>
+          <span>{{ record.name }}</span>
+        </div>
+      </template>
+      <template #image_name="{ record }">
+        <div class="table-view-box">
+          <div class="image-view"></div>
+          <span>{{ record.name }}</span>
+        </div>
+      </template>
+      <template #video_type="{ record }">
+        <span v-show="record.video_type === 'S'">竖版视频</span>
+        <span v-show="record.video_type === 'H'">横版视频</span>
+      </template>
+      <template #image_type="{ record }">
+        <span v-show="record.image_type === 'S'">竖版大图</span>
+        <span v-show="record.image_type === 'H'">横版大图</span>
+        <span v-show="record.image_type === 'X'">小图</span>
+      </template>
       <template #operation="{ record }">
-        <a>推送</a>&nbsp;
+        <a @click="onOpenPush(record)">推送</a>&nbsp;
         <a-popconfirm @confirm="onDelete(record)">
           <template #title>
             <p>确认删除该素材吗</p>
@@ -32,6 +54,25 @@
         </a-popconfirm>
       </template>
     </a-table>
+    <a-modal
+      v-model:visible="pushVisible"
+      :title="type === 'video' ? '推送视频' : '推送图片'"
+      @ok="onConfirmPush"
+      width="40%"
+    >
+      <span>选择广告主：</span>
+      <a-cascader
+        style="width: 360px"
+        v-model:value="advertiser"
+        :options="adList"
+        placeholder="请选择"
+        :field-names="{
+          label: 'advertiser_name',
+          value: 'advertiser_id',
+          children: 'advertises',
+        }"
+      />
+    </a-modal>
   </div>
 </template>
 
@@ -50,7 +91,14 @@ import {
   TableColumnOfImage,
 } from "../../_pageOptions/table_material";
 //getPromotionList
-import { getVideoList, getImageList, deleteVideo, deleteImage } from "@/api";
+import {
+  getVideoList,
+  getImageList,
+  deleteVideo,
+  deleteImage,
+  getAdvertiser,
+  pushMaterial,
+} from "@/api";
 import { message } from "ant-design-vue";
 const CommonTable = defineComponent({
   components: {},
@@ -62,14 +110,15 @@ const CommonTable = defineComponent({
       loading: false,
       list: ref<any[]>([]),
       columns: ref<any[]>([]),
+      adList: ref<any[]>([]),
       selectedRowKeys: ref<any[]>([]),
+      pushVisible: false,
+      currentId: 0, // 当前操作的素材id
+      advertiser: ref<string[]>([]), // 选择的广告主
     });
-    // watchEffect(() => {
-    //   console.log("测试变化监听", props.searchForm);
-    // });
     const getList = async (page?: any) => {
       state.loading = true;
-      return message.success("请求接口");
+      // return message.success("请求接口");
       let api = state.type === "video" ? getVideoList : getImageList;
       let { data } = await api({
         page: page ? page.current : 1,
@@ -97,20 +146,21 @@ const CommonTable = defineComponent({
     this.type = this.$props.materialType;
     if (this.type === "video") this.columns = TableColumnOfVideo;
     if (this.type === "picture") this.columns = TableColumnOfImage;
+    this.getAdList();
   },
   methods: {
-    // 获取推广链接数据
-    // async getList(page?: any) {
-    //   this.loading = true;
-    //   let api = this.type === "video" ? getVideoList : getImageList;
-    //   let { data } = await api({
-    //     page: page ? page.current : 1,
-    //     ...this.$props.searchForm,
-    //   });
-    //   this.loading = false;
-    //   this.list = data.list;
-    //   console.log("返回的数据", data);
-    // },
+    // 获取广告主列表
+    async getAdList() {
+      let { data } = await getAdvertiser();
+      console.log("AD", data);
+      this.adList = data;
+      if (this.adList.length === 0) return;
+      this.adList.forEach((item) => {
+        item.advertiser_id = item.account_id;
+        item.advertiser_name = item.account_name;
+      });
+    },
+
     async onDelete(val?: any) {
       let arr = [];
       if (val.id) {
@@ -133,6 +183,27 @@ const CommonTable = defineComponent({
         this.getList({ current: 1 });
       }
     },
+    // 点击推送
+    onOpenPush(item: any) {
+      this.currentId = item.id;
+      this.advertiser = [];
+      this.pushVisible = true;
+    },
+    // 确定推送
+    async onConfirmPush() {
+      console.log("IDS", this.currentId, this.advertiser);
+      try {
+        await pushMaterial({
+          material_id: this.currentId,
+          advertiser_id: this.advertiser[0],
+        });
+        this.pushVisible = false;
+        message.success("推送成功");
+      } catch (err) {
+        message.error("推送失败");
+        console.log(err);
+      }
+    },
   },
 });
 
@@ -143,5 +214,31 @@ export default CommonTable;
 .common-table {
   background: white;
   padding: 10px;
+  .table-view-box {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    .video-view {
+      width: 80px;
+      height: 60px;
+      border: 1px solid gray;
+      margin-right: 4px;
+      position: relative;
+      .icon-ziyuan {
+        position: absolute;
+        top: 18px;
+        left: 32px;
+      }
+    }
+    .image-view {
+      width: 60px;
+      height: 60px;
+      border: 1px solid gray;
+      margin-right: 4px;
+    }
+    &:hover span {
+      color: rgb(0, 140, 255);
+    }
+  }
 }
 </style>

src/views/material/component/search.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="search-bar">
-    <a-tabs v-model:activeKey="search.is_pubilc" @change="onSubmit">
+    <a-tabs v-model:activeKey="search.is_public" @change="onSubmit">
       <a-tab-pane :key="1" tab="公共素材"></a-tab-pane>
       <a-tab-pane :key="0" tab="个人素材"></a-tab-pane>
     </a-tabs>
@@ -28,15 +28,17 @@
         style="width: 200px"
         v-if="type === 'video'"
         v-model:value="search.videotype"
+        allowClear
       >
-        <a-select-option value="H">横板视频</a-select-option>
-        <a-select-option value="S">竖板视频</a-select-option>
+        <a-select-option value="H">横版视频</a-select-option>
+        <a-select-option value="S">竖版视频</a-select-option>
       </a-select>
       <a-select
         placeholder="请选择"
         style="width: 200px"
         v-if="type === 'picture'"
         v-model:value="search.imagetype"
+        allowClear
       >
         <a-select-option value="H">横版大图</a-select-option>
         <a-select-option value="S">竖版大图</a-select-option>
@@ -46,12 +48,19 @@
     <div class="search-item">
       <span class="label">推广书籍：</span>
       <a-select
+        allowClear
         style="width: 200px"
         v-model:value="search.bookname"
         placeholder="请选择"
+        show-search
+        :filter-option="filterOption"
       >
-        <a-select-option value="shanghai">Zone one</a-select-option>
-        <a-select-option value="beijing">Zone two</a-select-option>
+        <a-select-option
+          v-for="(item, index) in bookList"
+          :key="index"
+          :value="item.book_name"
+          >{{ item.book_name }}</a-select-option
+        >
       </a-select>
     </div>
     <span class="flag" @click="openFlag = openFlag ? false : true"
@@ -90,6 +99,7 @@
 <script lang="ts">
 import { defineComponent, reactive, toRefs, ref } from "vue";
 import { message } from "ant-design-vue";
+import { getLandingBooks } from "@/api";
 const PictureLibrary = defineComponent({
   components: {},
   props: ["materialType"],
@@ -97,32 +107,44 @@ const PictureLibrary = defineComponent({
     const state = reactive({
       type: "", // 组件类型： video:picture
       openFlag: true, // 展开/收起
+      bookList: ref<any[]>([]),
       search: {
-        is_pubilc: 1, // 1公共素材 0个人素材
+        is_public: 1, // 1公共素材 0个人素材
         videoName: "", // 视频名称
-        videotype: "", // 视频类型
+        videotype: undefined, // 视频类型
         imageName: "", // 图片名称
-        imagetype: "", // 图片类型
-        bookname: "", // 推广书籍
+        imagetype: undefined, // 图片类型
+        bookname: undefined, // 推广书籍
         demander: "", // 需求方
         editor: "", // 文案
         uploader: "", // 上传者
       },
     });
-    return { ...toRefs(state) };
+    const filterOption = (input: string, option: any) => {
+      console.log(option);
+      return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+    };
+    return { ...toRefs(state), filterOption };
   },
 
   mounted() {
     console.log("TYPE", this.$props.materialType);
     this.type = this.$props.materialType;
     this.onSubmit();
+    this.getBookList();
   },
   methods: {
+    // 获取推广书籍列表
+    async getBookList() {
+      let { data } = await getLandingBooks();
+      console.log(data.list);
+      this.bookList = data.list;
+    },
     // 搜索
     onSubmit() {
       console.log(this.search);
       let param: any = {
-        is_pubilc: this.search.is_pubilc,
+        is_public: this.search.is_public,
         book_name: this.search.bookname,
         demander: this.search.demander,
         editor: this.search.editor,
@@ -142,12 +164,12 @@ const PictureLibrary = defineComponent({
     // 重置
     reset() {
       this.search = {
-        is_pubilc: this.search.is_pubilc, // 1公共素材 0个人素材
+        is_public: this.search.is_public, // 1公共素材 0个人素材
         videoName: "", // 视频名称
-        videotype: "", // 视频类型
+        videotype: undefined, // 视频类型
         imageName: "", // 图片名称
-        imagetype: "", // 图片类型
-        bookname: "", // 推广书籍
+        imagetype: undefined, // 图片类型
+        bookname: undefined, // 推广书籍
         demander: "", // 需求方
         editor: "", // 文案
         uploader: "", // 上传者

src/views/material/component/upload-image.vue

@@ -40,10 +40,11 @@
 
 <script lang="ts">
 import { defineComponent, reactive, toRefs, ref } from "vue";
-import {} from "@/api";
+import { uploadImage } from "@/api";
 import { message, Progress } from "ant-design-vue";
 const UploadVideo = defineComponent({
   components: {},
+  props: ["searchForm"],
   setup() {
     const formRef = ref();
     const state = reactive({
@@ -51,7 +52,9 @@ const UploadVideo = defineComponent({
     });
     return { ...toRefs(state) };
   },
-  mounted() {},
+  mounted() {
+    console.log("isp", this.$props.searchForm.is_public);
+  },
   methods: {
     // 选择视频后
     addFile(event: any) {
@@ -59,40 +62,55 @@ const UploadVideo = defineComponent({
       event.target.files.forEach((item: any) => {
         this.getImgInfo(item).then((imgInfo: any) => {
           let { width, height } = imgInfo;
-          item.width = width;
-          item.height = height;
-        });
-        // 校验文件尺寸大小比例
-        if (
-          item.height / item.width !== 16 / 9 &&
-          item.height / item.width !== 9 / 16 &&
-          item.height / item.width !== 1.52 &&
-          item.width / item.height !== 1.52
-        )
-          return message.warning(
-            `图片：${item.name} 宽高比例不符合要求比例，请修改后重新上传`
-          );
-        if (item.height > 1368 || item.width > 1368)
-          return message.warning(
-            `图片：${item.name} 尺寸不符合要求尺寸，请修改后重新上传`
-          );
-        // 正则 /^[\u4E00-\u9FA5A-Za-z0-9]+(-|\/)[\u4E00-\u9FA5A-Za-z0-9]+(-|\/)[\u4E00-\u9FA5A-Za-z0-9]+$/  XX-XX-XX
-        if (this.checkNumber(item.name) !== 2)
-          return message.warning(
-            `图片：${item.name} 不符合命名要求，请修改后重新上传`
-          );
-        this.fileList.push({
-          file: item,
-          name: item.name,
-          percent: 0,
-          materialSize: (item.size / 1024 / 1024).toFixed(2) + "MB",
-          type: item.type.split("/")[0],
-          width: item.width,
-          height: item.height,
+          // 校验文件尺寸大小比例
+          // if (
+          //   height / width !== 16 / 9 &&
+          //   height / width !== 9 / 16 &&
+          //   height / width !== 1.52 &&
+          //   width / height !== 1.52
+          // )
+          //   return message.warning(
+          //     `图片：${item.name} 宽高比例不符合要求比例，请修改后重新上传`
+          //   );
+          if (height > 1368 || width > 1368)
+            return message.warning(
+              `图片：${item.name} 尺寸不符合要求尺寸，请修改后重新上传`
+            );
+          // 正则 /^[\u4E00-\u9FA5A-Za-z0-9]+(-|\/)[\u4E00-\u9FA5A-Za-z0-9]+(-|\/)[\u4E00-\u9FA5A-Za-z0-9]+$/  XX-XX-XX
+          if (this.checkNumber(item.name) !== 2)
+            return message.warning(
+              `图片：${item.name} 不符合命名要求，请修改后重新上传`
+            );
+          this.fileList.push({
+            file: item,
+            name: item.name,
+            percent: 0,
+            materialSize: (item.size / 1024 / 1024).toFixed(2) + "MB",
+            type: item.type.split("/")[0],
+            width: width,
+            height: height,
+          });
         });
       });
       console.log("新增文件列表", this.fileList);
     },
+    // 确定上传图片
+    async onUploadImage() {
+      if (this.fileList.length === 0) return message.error("请选择图片");
+      this.fileList.forEach((item) => {
+        console.log(item);
+        let file = item.file;
+        console.log(file);
+        let data: any = {
+          // video: file,
+          is_public: this.$props.searchForm.is_public,
+        };
+        data.video = file;
+        console.log(data);
+        // return;
+        uploadImage(data);
+      });
+    },
     // 获取图片宽高信息
     getImgInfo(file: any) {
       return new Promise((resolve, reject) => {

src/views/material/component/upload-video.vue

@@ -36,10 +36,11 @@
 
 <script lang="ts">
 import { defineComponent, reactive, toRefs, ref } from "vue";
-import {} from "@/api";
+import { uploadVideo } from "@/api";
 import { message, Progress } from "ant-design-vue";
 const UploadVideo = defineComponent({
   components: {},
+  props: ["searchForm"],
   setup() {
     const formRef = ref();
     const state = reactive({
@@ -47,10 +48,12 @@ const UploadVideo = defineComponent({
     });
     return { ...toRefs(state) };
   },
-  mounted() {},
+  mounted() {
+    console.log("SEARCH", this.$props.searchForm);
+  },
   methods: {
     // 选择视频后
-    addFile(event: any) {
+    async addFile(event: any) {
       console.log(event.target.files);
       event.target.files.forEach((item: any) => {
         console.log("item", item, this.checkNumber(item.name));
@@ -58,37 +61,57 @@ const UploadVideo = defineComponent({
           const { duration, height, width } = videoinfo;
           //获取到视频的时长,高度,宽度
           console.log(duration, height, width);
-          item.duration = duration;
-          item.height = height;
-          item.width = width;
+
+          // 校验文件尺寸比例大小
+          if (Number((item.size / 1024 / 1024).toFixed(2)) > 500)
+            return message.warning(`视频：${item.name}大小超过了500M`);
+          console.log("宽高1", height, width);
+          console.log("宽高", height / width, 16 / 9, 9 / 16);
+          // if (
+          //   item.height / item.width !== 16 / 9 &&
+          //   item.height / item.width !== 9 / 16
+          // )
+          //   return message.warning(
+          //     `视频：${item.name}宽高比例不符合要求比例，请修改后重新上传`
+          //   );
+          // 正则 /^[\u4E00-\u9FA5A-Za-z0-9]+(-|\/)[\u4E00-\u9FA5A-Za-z0-9]+(-|\/)[\u4E00-\u9FA5A-Za-z0-9]+$/  XX-XX-XX
+          if (this.checkNumber(item.name) !== 2)
+            return message.warning(
+              `视频：${item.name}不符合命名要求，请修改后重新上传`
+            );
+          this.fileList.push({
+            file: item,
+            name: item.name,
+            percent: 0,
+            materialSize: (item.size / 1024 / 1024).toFixed(2) + "MB",
+            type: item.type.split("/")[0],
+            duration: duration,
+            height: height,
+            width: width,
+          });
         });
-        // 校验文件尺寸比例大小
-        if (Number((item.size / 1024 / 1024).toFixed(2)) > 500)
-          return message.warning(`视频：${item.name}大小超过了500M`);
-        if (
-          item.height / item.width !== 16 / 9 &&
-          item.height / item.width !== 9 / 16
-        )
-          return message.warning(
-            `视频：${item.name}宽高比例不符合要求比例，请修改后重新上传`
-          );
-        // 正则 /^[\u4E00-\u9FA5A-Za-z0-9]+(-|\/)[\u4E00-\u9FA5A-Za-z0-9]+(-|\/)[\u4E00-\u9FA5A-Za-z0-9]+$/  XX-XX-XX
-        if (this.checkNumber(item.name) !== 2)
-          return message.warning(
-            `视频：${item.name}不符合命名要求，请修改后重新上传`
-          );
-        this.fileList.push({
-          file: item,
-          name: item.name,
-          percent: 0,
-          materialSize: (item.size / 1024 / 1024).toFixed(2) + "MB",
-          type: item.type.split("/")[0],
+      });
+      console.log("新增文件列表", this.fileList);
+    },
+    // 确定上传视频
+    async onUploadVideo() {
+      if (this.fileList.length === 0) return message.error("请选择视频");
+      this.fileList.forEach((item) => {
+        console.log(item);
+        let file = item.file;
+        console.log(file);
+        let data: any = {
+          // video: file,
+          is_public: this.$props.searchForm.is_public,
           duration: item.duration,
-          height: item.height,
           width: item.width,
-        });
+          height: item.height,
+        };
+        data.video = file;
+        console.log(data);
+        // return;
+        uploadVideo(data);
       });
-      console.log("新增文件列表", this.fileList);
     },
     // 获取视频宽高时长
     getVideoMsg(file: any) {

src/views/material/picture.vue

@@ -2,7 +2,14 @@
   <div class="picture">
     <div class="title-box-common">
       <h3>图片库</h3>
-      <a-button type="primary" @click="uploadVisible = true">上传</a-button>
+      <a-button
+        type="primary"
+        @click="
+          uploadVisible = true;
+          confirmLoading = false;
+        "
+        >上传</a-button
+      >
     </div>
     <div class="padding-box-common">
       <search :materialType="'picture'" @search="onSearch"></search>
@@ -14,13 +21,17 @@
     <a-modal
       width="40%"
       :title="`上传图片至${
-        searchForm.is_pubilc === 1 ? '公共素材' : '个人素材'
+        searchForm.is_public === 1 ? '公共素材' : '个人素材'
       }`"
       v-model:visible="uploadVisible"
       :confirm-loading="confirmLoading"
       @ok="onConfirmUpload"
     >
-      <upload-image v-if="uploadVisible"></upload-image>
+      <upload-image
+        ref="upload"
+        v-if="uploadVisible"
+        :searchForm="searchForm"
+      ></upload-image>
     </a-modal>
   </div>
 </template>
@@ -58,6 +69,8 @@ const ImageLibrary = defineComponent({
     // 确定上传 触发组件上传视频
     onConfirmUpload() {
       this.confirmLoading = true;
+      let upload: any = this.$refs.upload;
+      upload.onUploadImage();
     },
   },
 });

src/views/material/video.vue

@@ -2,7 +2,14 @@
   <div class="video">
     <div class="title-box-common">
       <h3>视频库</h3>
-      <a-button type="primary" @click="uploadVisible = true">上传</a-button>
+      <a-button
+        type="primary"
+        @click="
+          uploadVisible = true;
+          confirmLoading = false;
+        "
+        >上传</a-button
+      >
     </div>
     <div class="padding-box-common">
       <search :materialType="'video'" @search="onSearch"></search>
@@ -14,13 +21,18 @@
     <a-modal
       width="40%"
       :title="`上传视频至${
-        searchForm.is_pubilc === 1 ? '公共素材' : '个人素材'
+        searchForm.is_public === 1 ? '公共素材' : '个人素材'
       }`"
       v-model:visible="uploadVisible"
       :confirm-loading="confirmLoading"
       @ok="onConfirmUpload"
+      @cancel="confirmLoading = false"
     >
-      <upload-video v-if="uploadVisible"></upload-video>
+      <upload-video
+        ref="upload"
+        v-if="uploadVisible"
+        :searchForm="searchForm"
+      ></upload-video>
     </a-modal>
   </div>
 </template>
@@ -34,7 +46,7 @@ import { defineComponent, reactive, toRefs, ref } from "vue";
 import { onBeforeRouteUpdate } from "vue-router";
 // import { TableColumnOfYuewen } from "../_pageOptions/table_yuewen";
 //getPromotionList
-import { deletePromotion } from "@/api";
+import {} from "@/api";
 import { message } from "ant-design-vue";
 const VideoLibrary = defineComponent({
   components: { Search, CommonTable, UploadVideo },
@@ -58,6 +70,8 @@ const VideoLibrary = defineComponent({
     // 确定上传 触发组件上传视频
     onConfirmUpload() {
       this.confirmLoading = true;
+      let upload: any = this.$refs.upload;
+      upload.onUploadVideo();
     },
   },
 });