批量上传

src/api/report.js

@@ -499,24 +499,24 @@ export function fetchConversionAction(data) {
 
 export function getMaterialDirectoriesTree() {
   return request({
-    url: 'http://localhost:8567/material/business/youtube/directories/tree',
-    // url: 'https://putinapi.zhangxindiet.com/material/business/youtube/directories/tree',
+    // url: 'http://localhost:8567/material/business/youtube/directories/tree',
+    url: 'https://putinapi.zhangxindiet.com/material/business/youtube/directories/tree',
     method: 'get',
   })
 }
 
 export function getDirectoryById(params) {
   return request({
-    url: 'http://localhost:8567/material/business/youtube/getDirectoryById',
-    // url: 'https://putinapi.zhangxindiet.com/business/youtube/getDirectoryById',
+    // url: 'http://localhost:8567/material/business/youtube/getDirectoryById',
+    url: 'https://putinapi.zhangxindiet.com/business/youtube/getDirectoryById',
     method: 'get',
     params
   })
 }
 export function createDirectory(params) {
   return request({
-    url: 'http://localhost:8567/material/business/youtube/createdirectories',
-    // url: 'https://putinapi.zhangxindiet.com/business/youtube/createdirectories',
+    // url: 'http://localhost:8567/material/business/youtube/createdirectories',
+    url: 'https://putinapi.zhangxindiet.com/business/youtube/createdirectories',
     method: 'get',
     params
   })
@@ -524,16 +524,16 @@ export function createDirectory(params) {
 
 export function updateDirectory() {
   return request({
-    url: 'http://localhost:8567/business/youtube/updateDirectory',
-    // url: 'https://putinapi.zhangxindiet.com/business/youtube/updateDirectory',
+    // url: 'http://localhost:8567/business/youtube/updateDirectory',
+    url: 'https://putinapi.zhangxindiet.com/business/youtube/updateDirectory',
     method: 'get',
   })
 }
 
 export function getMaterialCount(params) {
   return request({
-    url: 'http://localhost:8567/material/count',
-    // url: 'https://putinapi.zhangxindiet.com/business/youtube/updateDirectory',
+    // url: 'http://localhost:8567/material/count',
+    url: 'https://putinapi.zhangxindiet.com/business/youtube/updateDirectory',
     method: 'get',
     params
   })
@@ -541,8 +541,8 @@ export function getMaterialCount(params) {
 
 export function movematerial(params) {
   return request({
-    url: 'http://localhost:8567/material/business/youtube/movematerial',
-    // url: 'https://putinapi.zhangxindiet.com/business/youtube/updateDirectory',
+    // url: 'http://localhost:8567/material/business/youtube/movematerial',
+    url: 'https://putinapi.zhangxindiet.com/business/youtube/updateDirectory',
     method: 'get',
     params
   })
@@ -551,8 +551,8 @@ export function movematerial(params) {
 
 export function deleteDirectory(params) {
   return request({
-    url: 'http://localhost:8567/material/business/youtube/deleteDirectory',
-    // url: 'https://putinapi.zhangxindiet.com/business/youtube/deleteDirectory',
+    // url: 'http://localhost:8567/material/business/youtube/deleteDirectory',
+    url: 'https://putinapi.zhangxindiet.com/business/youtube/deleteDirectory',
     method: 'get',
     params
   })
@@ -560,8 +560,8 @@ export function deleteDirectory(params) {
 
 export  function uploadMaterial(body,params){
   return request({
-    url: 'http://localhost:8567/material/business/youtube/uploadVideo',
-    // url: 'https://putinapi.zhangxindiet.com/business/youtube/deleteDirectory',
+    // url: 'http://localhost:8567/material/business/youtube/uploadVideo',
+    url: 'https://putinapi.zhangxindiet.com/business/youtube/deleteDirectory',
     method: 'post',
     headers: { 'Content-Type': 'multipart/form-data' },
     data: body, // Body 数据
@@ -570,5 +570,40 @@ export  function uploadMaterial(body,params){
 }
 
 
+export function getMaterialDesigners() {
+  return request({
+    // url: 'http://localhost:8567/material/getMaterialDesigners',
+    url: 'https://putinapi.zhangxindiet.com/material/getMaterialDesigners',
+    method: 'get',
+
+  })
+}
+export function getMaterialsByTag(params) {
+  return request({
+    // url: 'http://localhost:8567/material/business/youtube/getMaterialsByTag',
+    url: 'https://putinapi.zhangxindiet.com/material/getMaterialDesigners',
+    method: 'get',
+    params
+
+  })
+}
+export function getAllTags() {
+  return request({
+    // url: 'http://localhost:8567/material/getAllTags',
+    url: 'https://putinapi.zhangxindiet.com/material/getMaterialDesigners',
+    method: 'get',
+
+  })
+}
+export function getYoutubeUploadDetaillist() {
+  return request({
+    // url: 'http://localhost:8567/material/getYoutubeUploadDetaillist',
+    url: 'https://putinapi.zhangxindiet.com/material/getYoutubeUploadDetaillist',
+    method: 'get',
+
+  })
+}
+
+
 // ----------------------------------------
 

src/views/createDelivery/index.vue

@@ -618,8 +618,16 @@
                 <el-form-item label="选择图片">
                   <ImageUploader @change="handleUploadChange"/>
                 </el-form-item>
-                <el-form-item label="输入Youtube链接">
-                  <TextInputList v-model="putinTask.videoUrls" :maxLength="100"/>
+                <el-form-item label="选择 Youtube 视频">
+                  <el-button type="primary" @click="fetchVideoList">加载视频列表</el-button>
+                  <el-input v-model="videoUrlsString" placeholder="YouTube 链接将自动填充" :disabled="true" type="textarea" :rows="3"></el-input>
+                  <div class="video-list" style="display: flex; flex-wrap: wrap;">
+                    <div v-for="video in videoDataList" :key="video.videoId" class="video-item" @click="toggleVideoSelection(video)" style="margin: 10px; text-align: center; cursor: pointer;">
+                      <video :src="video.ossUrl" controls width="200"></video>
+                      <p>{{ video.materialName }}</p>
+                      <el-checkbox v-model="selectedVideoId" :label="video.videoId"></el-checkbox>
+                    </div>
+                  </div>
                 </el-form-item>
               </el-form>
             </div>
@@ -696,7 +704,8 @@ import {
   putinCreatePutinTask,
   getAdvList,
   getAdvertiseCount,
-  fetchConversionAction
+  fetchConversionAction,
+  getYoutubeUploadDetaillist
 } from "@/api/report";
 import { dateOptions } from "@/assets/js/dateOptions";
 import moment from "moment";
@@ -731,7 +740,14 @@ export default {
     ImageUploader,
     YouTubeVideoInput
   }, // 注册
-
+  watch: {
+    selectedVideoId: {
+      handler(newVal) {
+        this.putinTask.videoUrls = newVal.map(videoId => `https://www.youtube.com/watch?v=${videoId}`);
+      },
+      deep: true
+    }
+  },
   data() {
     return {
       tagId: "",
@@ -1001,6 +1017,8 @@ export default {
       activePutin: "newPutin",
       advGroupSelect: [],
       checkedAdvId: "", // 点击户时，选中的id
+      videoDataList: [], // 存储通过 getYoutubeUploadDetaillist 获取的视频列表
+      selectedVideoId: [], // 存储用户选择的视频的 videoId
     };
   },
 
@@ -1008,6 +1026,9 @@ export default {
     showGroupBudget() {
       return this.putinBaseInfo.budgetMode === "BUDGET_MODE_DAY";
     },
+    videoUrlsString() {
+      return this.putinTask.videoUrls.join('\n');
+    },
   },
   created() {
     this.putinTask.startDate = moment().subtract(0, "days").format("YYYY-MM-DD");
@@ -1716,7 +1737,23 @@ export default {
     handleUploadChange(files){
       console.log("aabbccddeeff", files)
       this.putinTask.imageAssets = files
+    },
+    fetchVideoList() {
+      getYoutubeUploadDetaillist().then(res => {
+        this.videoDataList = res.result.data;
+      });
+    },
+    selectVideo(video) {
+      this.selectedVideoId = video.videoId;
+    },
+    toggleVideoSelection(video) {
+      const index = this.selectedVideoId.indexOf(video.videoId);
+      if (index > -1) {
+        this.selectedVideoId.splice(index, 1); // 取消选中
+      } else {
+        this.selectedVideoId.push(video.videoId); // 选中
       }
     },
+  },
 };
 </script>

src/views/createMaterial/AdMaterialManager.vue

@@ -45,6 +45,20 @@
           <div class="current-path">
             当前位置：{{ currentPath }}
           </div>
+          <el-select
+            v-model="tagFilter"
+            @change="handleTagFilterChange"
+            clearable
+            placeholder="按标签筛选"
+            style="width: 200px; margin-right: 10px"
+          >
+            <el-option
+              v-for="tag in allTags"
+              :key="tag"
+              :label="tag"
+              :value="tag"
+            ></el-option>
+          </el-select>
             <el-button type="primary" @click="showUploadVideoDialog">上传视频</el-button>
         </div>
 
@@ -172,7 +186,7 @@
     <!-- 上传视频弹窗 -->
     <el-dialog title="上传视频" :visible.sync="uploadVideoDialogVisible" width="40%">
       <el-form ref="uploadVideoForm" :model="uploadVideoForm" label-width="120px">
-        <el-form-item label="选择文件" prop="file" :rules="[{ required: true, message: '请选择文件', trigger: 'change' }]">
+        <el-form-item label="选择文件">
           <el-upload
             class="upload-demo"
             ref="uploadVideo"
@@ -180,20 +194,29 @@
             :on-change="handleFileChange"
             :auto-upload="false"
             :file-list="fileList"
-            :limit="1"
+            :limit="50"
+            :multiple="true"
           >
             <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
-            <div slot="tip" class="el-upload__tip">只能上传视频文件,且不超过100MB</div>
+            <div slot="tip" class="el-upload__tip">可选择多个文件，单次上传不超过50个,且不要超过100MB</div>
           </el-upload>
         </el-form-item>
-        <el-form-item label="素材名称" prop="materialName" :rules="[{ required: true, message: '请输入素材名称', trigger: 'blur' }]">
-          <el-input v-model="uploadVideoForm.materialName" autocomplete="off"></el-input>
-        </el-form-item>
+<!--        <el-form-item label="素材名称" prop="materialName" :rules="[{ required: true, message: '请输入素材名称', trigger: 'blur' }]">-->
+<!--          <el-input v-model="uploadVideoForm.materialName" autocomplete="off"></el-input>-->
+<!--        </el-form-item>-->
         <el-form-item label="标签" prop="tags">
           <el-input v-model="uploadVideoForm.tags" autocomplete="off" placeholder="多个标签请用英文逗号分隔"></el-input>
         </el-form-item>
         <el-form-item label="创作者" prop="director">
-          <el-input-number v-model="uploadVideoForm.director" :min="0" placeholder="请输入创作者ID"></el-input-number>
+          <el-select v-model="uploadVideoForm.director" placeholder="请选择创作者" clearable filterable>
+            <el-option
+              v-for="designer in materialDesigners"
+              :key="designer.id"
+              :label="designer.realName"
+              :value="designer.id"
+            >
+            </el-option>
+          </el-select>
         </el-form-item>
         <el-form-item label="类型" prop="resType" :rules="[{ required: true, message: '请选择类型', trigger: 'change' }]">
           <el-select v-model="uploadVideoForm.resType" placeholder="请选择">
@@ -230,7 +253,10 @@ import {
   getDirectoryById,
   getMaterialCount,
   movematerial,
-  uploadMaterial
+  uploadMaterial,
+  getMaterialDesigners,
+  getAllTags,
+  getMaterialsByTag
 } from '@/api/report';
 
 export default {
@@ -286,7 +312,7 @@ export default {
 
       uploadVideoDialogVisible: false, // 控制上传视频弹窗的显示和隐藏
       uploadVideoForm: { // 上传视频表单数据
-        file: null,
+        // file: null,
         materialName: '',
         tags: '',
         director: null,
@@ -294,12 +320,20 @@ export default {
         directoryId: null
       },
       fileList:[],
-      uploadVideoUrl: 'http://localhost:8567/material/business/youtube/uploadVideo',
+      uploadVideoUrl: 'https://putinapi.zhangxindiet.com/business/youtube/deleteDirectory',
+      materialDesigners: [],
+      tagFilter: '',
+      allTags: [],
     };
   },
 
   created() {
+    this.currentPage = 1;
     this.fetchDirectories();
+    this.fetchMaterialDesigners();
+  },
+  mounted() {
+    this.fetchAllTags();
   },
 
   methods: {
@@ -312,17 +346,81 @@ export default {
         }
       });
     },
+    async fetchMaterialDesigners() {
+      try {
+        const response = await getMaterialDesigners();
+        if (response && response.status === 200 && response.result) {
+          this.materialDesigners = response.result.data;
+        } else {
+          this.$message.error('获取创作者列表失败');
+          console.error('获取创作者列表失败:', response);
+        }
+      } catch (error) {
+        this.$message.error('获取创作者列表失败');
+        console.error('获取创作者列表失败:', error);
+      }
+    },
+    async fetchMaterialsByTag(tag) {
+      this.loading = true;
+      this.currentPage = 1;
+      try {
+        const response = await getMaterialsByTag({
+          tag: tag,
+          pageNum: this.currentPage,
+          pageSize: this.pageSize,
+        });
+        if (response && response.status === 200) {
+          this.materials = response.result.data.value;
+          this.totalCount = response.result.data.total;
+        } else {
+          this.$message.error(response.msg || '获取素材列表失败');
+        }
+      } catch (error) {
+        this.$message.error('获取数据失败');
+        console.error('获取数据失败:', error);
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    handleTagFilterChange(value) {
+      this.tagFilter = value;
+      this.currentPage = 1; // 重置页码
+      if (this.tagFilter) {
+        this.fetchMaterialsByTag(this.tagFilter);
+      } else {
+        this.fetchMaterialsByDirectoryId(this.currentDirectory);
+      }
+    },
+    async fetchAllTags() {
+      try {
+        const response = await getAllTags();
+        if (response && response.status === 200) {
+          this.allTags = response.result.data;
+        } else {
+          this.$message.error('获取标签列表失败');
+        }
+      } catch (error) {
+        console.error('获取标签列表失败:', error);
+        this.$message.error('获取标签列表失败');
+      }
+    },
 
     handleSizeChange(val) {
       this.pageSize = val;
-      this.currentPage = 1; // 改变每页条数后，通常需要重置当前页码为 1
+      this.currentPage = 1;
+      if (this.tagFilter) {
+        this.fetchMaterialsByTag(this.tagFilter);
+      } else {
         this.fetchMaterialsByDirectoryId(this.currentDirectory);
+      }
     },
     // 处理目录点击
     handleNodeClick(data) {
       this.currentDirectory = data.id;
       this.currentPath = this.getNodePath(data);
-      this.currentPage = 1; // 重置当前页码为 1
+      this.currentPage = 1;
+      this.tagFilter = '';
       this.fetchMaterialsByDirectoryId(data.id);
     },
 
@@ -335,12 +433,10 @@ export default {
           directoryId: directoryId,
           includeSubdirectories: this.includeSubdirectories
         });
-        console.log("getMaterialCount response:", countResponse);
         if (countResponse && countResponse.status === 200) {
-          this.totalCount = countResponse.result;
+          this.totalCount = countResponse.result.data;
         } else {
           this.$message.error(countResponse.msg || '获取总数失败');
-          console.error('获取总数失败:', countResponse);
         }
 
         // 再获取数据
@@ -367,7 +463,11 @@ export default {
     // 翻页
     handleCurrentChange(val) {
       this.currentPage = val;
+      if (this.tagFilter) {
+        this.fetchMaterialsByTag(this.tagFilter);
+      } else {
         this.fetchMaterialsByDirectoryId(this.currentDirectory);
+      }
     },
 
     // 获取节点路径
@@ -567,33 +667,40 @@ export default {
       return new Date(date).toLocaleString();
     },
     handleFileChange(file, fileList) {
-      if (fileList.length > 0) {
-        this.fileList = [fileList[0]]; // 只保留一个文件
-        this.uploadVideoForm.file = fileList[0].raw; // 将选中的文件赋值给 file 字段
-      }
+      this.fileList = fileList;
     },
     async submitUpload() {
       this.$refs.uploadVideoForm.validate(async (valid) => {
         if (valid) {
+          // 1. 检查是否选择了文件
+          if (this.fileList.length === 0) {
+            this.$message.error('请选择文件');
+            return;
+          }
+
+          // 2. 创建 FormData 对象
           const formData = new FormData();
-          formData.append('file', this.uploadVideoForm.file);
-          formData.append('materialName', this.uploadVideoForm.materialName);
+
+          // 3. 添加文件到 FormData
+          this.fileList.forEach(file => {
+            formData.append('files', file.raw);
+          });
+
           formData.append('tags', this.uploadVideoForm.tags);
           formData.append('director', this.uploadVideoForm.director);
           formData.append('resType', this.uploadVideoForm.resType);
           formData.append('directoryId', this.uploadVideoForm.directoryId);
 
+          // 5. 发送上传请求
           try {
-            // 使用 uploadVideo 方法发送请求
             const response = await uploadMaterial(formData);
 
             if (response && response.status === 200) {
               this.$message.success('上传成功');
               this.uploadVideoDialogVisible = false;
-              this.fetchMaterialsByDirectoryId(this.currentDirectory); // 刷新列表
-              // 清空表单
+              this.fetchMaterialsByDirectoryId(this.currentDirectory); // 刷新文件列表
+              // 6. 清空表单和文件列表
               this.uploadVideoForm = {
-                file: null,
                 materialName: '',
                 tags: '',
                 director: null,
@@ -601,7 +708,7 @@ export default {
                 directoryId: null
               };
               this.fileList = [];
-              this.$refs.uploadVideo.clearFiles(); // 清空上传组件的文件列表
+              this.$refs.uploadVideo.clearFiles(); // 清空 el-upload 组件的文件列表
             } else {
               this.$message.error(response.msg || '上传失败');
             }
@@ -610,7 +717,7 @@ export default {
             console.error('上传失败:', error);
           }
         } else {
-          console.log('error submit!!');
+          console.log('表单验证失败');
           return false;
         }
       });