加个没写完的上传页面

src/api/report.js

@@ -443,6 +443,30 @@ export function getListMyPlaylists(params) {
     params
   })
 }
+export function getVideo(params) {
+  return request({
+    // url: 'http://localhost:8567/material/business/video/list',
+    url: 'https://putinapi.zhangxindiet.com/material/business/video/list',
+    method: "get",
+    params
+  })
+}
+
+export function getTotalVideoNumber() {
+  return request({
+    // url: 'http://localhost:8567/material/business/video/total',
+    url: 'https://putinapi.zhangxindiet.com/material/business/video/total',
+    method: 'get'
+  })
+}
+export function uploadFromOss(data) {
+  return request({
+    // url: 'http://localhost:8567/youtube/uploadFromOss',
+    url: 'https://putinapi.zhangxindiet.com/youtube/uploadFromOss',
+    method: 'post',
+    data
+  })
+}
 
 // 获取指定账户的转化列表
 export function fetchConversionAction(data) {

src/views/uploadYoutube/uploadYoutube.vue

 <template>
   <div class="video-upload-form">
-    <!-- Header Section -->
     <div class="form-header">
       <div class="account-select">
         <el-select v-model="selectedAccount" placeholder="选择YouTube账户" style="width: 200px;" @change="handleAccountChange">
@@ -11,39 +10,66 @@
             :value="account.id">
           </el-option>
         </el-select>
-        <el-button type="primary" class="add-material-btn">添加素材</el-button>
+        <el-button type="primary" class="add-material-btn" @click="openMaterialDialog">添加素材</el-button>
       </div>
     </div>
 
-    <el-form :inline="true" class="demo-form-inline" style="margin-bottom: 20px;">
-      <el-form-item label="选中的视频">
-        <el-tag
-          v-for="video in selectedVideos"
-          :key="video.id"
-          closable
-          @close="removeSelectedVideo(video)"
-        >
-          {{ video.name }}
-        </el-tag>
-      </el-form-item>
-    </el-form>
-
+    <el-table :data="tableData" style="width: 100%" @selection-change="handleTableSelectionChange" ref="table" row-key="id">
+      <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
+      <el-table-column label="预览" width="180">
+        <template slot-scope="scope">
+          <video v-if="scope.row.url || scope.row.resType === 2" style="width: 100px; height: 56px" controls>
+            <source :src="scope.row.url" type="video/mp4">
+            Your browser does not support the video tag.
+          </video>
+          <el-image v-else-if="scope.row.thumbnail || scope.row.resType === 1" style="width: 100px; height: 56px" :src="scope.row.thumbnail" fit="cover"></el-image>
+        </template>
+      </el-table-column>
+      <el-table-column prop="materialName" label="名称" width="180"></el-table-column>
+      <el-table-column label="标题" width="180">
+        <template slot-scope="scope">
+          <el-input v-model="scope.row.title" size="small" placeholder="请输入标题"></el-input>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="180">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click="removeVideo(scope.row)">移除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
 
-    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
+    <!-- Material Dialog -->
+    <el-dialog title="选择素材" :visible.sync="materialDialogVisible" width="70%" @close="fetchTotalVideoNumber">
+      <el-table :data="materialTableData" style="width: 100%" @selection-change="handleMaterialSelectionChange" ref="materialTable" height="400">
         <el-table-column type="selection" width="55"></el-table-column>
-      <el-table-column label="缩略图" width="180">
+        <el-table-column label="预览" width="180">
           <template slot-scope="scope">
-          <el-image
-            style="width: 100px; height: 56px"
-            :src="scope.row.thumbnail"
-            fit="cover"
-          ></el-image>
+            <video style="width: 100px; height: 56px" controls>
+              <source :src="scope.row.url" type="video/mp4">
+              Your browser does not support the video tag.
+            </video>
           </template>
         </el-table-column>
-      <el-table-column prop="name" label="名称" width="180"></el-table-column>
-      <el-table-column prop="title" label="标题"></el-table-column>
-      <el-table-column prop="operation" label="操作" width="180"></el-table-column>
+        <el-table-column prop="materialName" label="名称"></el-table-column>
+        <el-table-column prop="datadate" label="日期"></el-table-column>
       </el-table>
+      <div style="margin-top: 20px;">
+        <el-pagination
+          @size-change="handleMaterialPageSizeChange"
+          @current-change="handleMaterialPageCurrentChange"
+          :current-page="materialCurrentPage"
+          :page-sizes="[5, 10, 20]"
+          :page-size="materialPageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="totalVideoNumber">
+        </el-pagination>
+      </div>
+      <span slot-footer class="dialog-footer">
+      <el-button @click="materialDialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="confirmMaterialSelection">确 定</el-button>
+      </span>
+    </el-dialog>
+
 
 
     <el-form :model="form" label-width="120px">
@@ -59,7 +85,6 @@
         </el-tag>
       </el-form-item>
 
-
       <el-form-item label="类别" required>
         <el-select v-model="form.category" placeholder="请选择分类" style="width: 100%" v-if="categories.length > 0">
           <el-option
@@ -71,7 +96,6 @@
         </el-select>
       </el-form-item>
 
-
       <el-form-item label="播放列表" v-if="playlists.length > 0">
         <el-select v-model="form.playlist" placeholder="请选择播放列表" style="width: calc(100% - 130px)">
           <el-option
@@ -82,24 +106,28 @@
           >
           </el-option>
         </el-select>
-<!--        <el-button type="primary" plain>创建播放列表</el-button>-->
       </el-form-item>
 
+      <el-form-item label="标签">
+        <el-input
+          type="text"
+          placeholder="请输入标签，用逗号分隔"
+          v-model="form.tags"
+        ></el-input>
+      </el-form-item>
 
       <el-form-item label="公开范围">
         <el-tabs v-model="activeTab">
           <el-tab-pane label="发布" name="publish">
             <el-select v-model="form.visibility" placeholder="选择可见性" style="width: 100%">
-              <el-option label="不公开" value="private"></el-option>
+              <el-option label="私密" value="private"></el-option>
               <el-option label="公开" value="public"></el-option>
-              <el-option label="私密" value="unlisted"></el-option>
+              <el-option label="不公开列出" value="unlisted"></el-option>
             </el-select>
           </el-tab-pane>
-<!--          <el-tab-pane label="安排时间" name="schedule"></el-tab-pane>-->
         </el-tabs>
       </el-form-item>
 
-
       <el-form-item label="说明">
         <el-input
           type="textarea"
@@ -109,7 +137,6 @@
         ></el-input>
       </el-form-item>
 
-
       <el-form-item>
         <el-button type="primary" @click="saveForm">保存</el-button>
       </el-form-item>
@@ -118,94 +145,237 @@
 </template>
 
 <script>
-import { getYoutubeAccountList, getYoutubeCategoryId, getListMyPlaylists } from '@/api/report';
+import { getYoutubeAccountList, getYoutubeCategoryId, getListMyPlaylists, getVideo, getTotalVideoNumber, uploadFromOss } from '@/api/report';
 
 export default {
   data() {
     return {
       youtubeAccounts: [],
       selectedAccount: '',
-      tableData: [],
-      selectedVideos: [],
+      tableData: [], // 表格数据
+      selectedVideos: [], // 已选视频列表, 只用在弹窗那里
+      tableSelectedVideos: [], // 表格中选中的视频
       categories: [],
-      playlists: [], // 新增的播放列表数据
+      playlists: [],
       form: {
         isForChildren: false,
         category: '',
         playlist: '',
         visibility: '不公开列出',
-        description: ''
+        description: '',
+        tags: '' // 标签
       },
-      activeTab: 'publish'
+      activeTab: 'publish',
+      materialDialogVisible: false,
+      materialTableData: [],
+      selectedMaterials: [],
+      materialCurrentPage: 1,
+      materialPageSize: 5,
+      totalVideoNumber: 0,
     }
   },
   created() {
     this.fetchYoutubeAccounts();
+    this.fetchTotalVideoNumber();
   },
   methods: {
-    async fetchYoutubeAccounts() {
-      try {
-        const response = await getYoutubeAccountList();
+    fetchYoutubeAccounts() {
+      getYoutubeAccountList()
+        .then(response => {
           if (response.status === 200) {
             this.youtubeAccounts = response.result.data;
           } else {
             this.$message.error('获取YouTube账户列表失败');
           }
-      } catch (error) {
+        })
+        .catch(error => {
           console.error('Error fetching YouTube accounts:', error);
           this.$message.error('获取YouTube账户列表失败');
-      }
+        });
     },
-    async fetchCategories() {
+    fetchCategories() {
       if (!this.selectedAccount) {
         this.categories = [];
         return;
       }
-      try {
-        const response = await getYoutubeCategoryId({ youTubeAccountId: this.selectedAccount });
+      getYoutubeCategoryId({ youTubeAccountId: this.selectedAccount })
+        .then(response => {
           if (response.status === 200) {
             this.categories = response.result.data;
           } else {
             this.$message.error('获取YouTube类别失败');
           }
-      } catch (error) {
+        })
+        .catch(error => {
           console.error('Error fetching YouTube categories:', error);
           this.$message.error('获取YouTube类别失败');
-      }
+        });
     },
-    async fetchPlaylists() { // 新增的获取播放列表的方法
+    fetchPlaylists() {
       if (!this.selectedAccount) {
         this.playlists = [];
         return;
       }
-      try {
-        const response = await getListMyPlaylists({ youTubeAccountId: this.selectedAccount });
+      getListMyPlaylists({ youTubeAccountId: this.selectedAccount })
+        .then(response => {
           if (response.status === 200) {
             this.playlists = response.result.data;
           } else {
             this.$message.error('获取YouTube播放列表失败');
           }
-      } catch (error) {
+        })
+        .catch(error => {
           console.error('Error fetching YouTube playlists:', error);
           this.$message.error('获取YouTube播放列表失败');
-      }
+        });
     },
-    async handleAccountChange() {
-      await this.fetchCategories();
-      await this.fetchPlaylists();
+    handleAccountChange() {
+      this.fetchCategories();
+      this.fetchPlaylists();
     },
     saveForm() {
-      // 这里添加保存表单的逻辑
-      console.log('表单已保存');
+      if (this.tableSelectedVideos.length === 0) {
+        this.$message.warning('请选择要上传的视频');
+        return;
+      }
+
+      // 构建 videoInfos 数组
+      const videoInfos = this.tableSelectedVideos.map(video => ({
+        id: video.id,
+        title: video.title
+      }));
+
+      // 构建 UploadRequest 对象
+      const uploadRequest = {
+        videoInfos: videoInfos,
+        youTubeAccountId: this.selectedAccount,
+        description: this.form.description,
+        tags: this.form.tags,
+        categoryId: this.form.category,
+        privacyStatus: this.form.visibility,
+        playlistId: this.form.playlist
+      };
+
+      // 使用 then 的写法调用 uploadFromOss 方法发送请求
+      uploadFromOss(uploadRequest)
+        .then(response => {
+          if (response.status === 200) {
+            this.$message.success('开始上传视频');
+            // 清空表格选中项
+            this.$refs.table.clearSelection();
+            // 清空表格数据
+            this.tableData = [];
+          } else {
+            this.$message.error('上传视频失败: ' + response.message);
+          }
+        })
+        .catch(error => {
+          this.$message.error('上传视频失败');
+          console.error(error);
+        });
     },
-    removeSelectedVideo(video) {
-      const index = this.selectedVideos.findIndex(v => v.id === video.id);
-      if (index !== -1) {
-        this.selectedVideos.splice(index, 1);
+    generateTitle() {
+      // 基于 tableSelectedVideos 生成标题
+      if (this.tableSelectedVideos.length === 0) {
+        return '默认标题';
       }
+
+      if (this.tableSelectedVideos.length === 1) {
+        return this.tableSelectedVideos[0].title || '默认标题';
+      }
+
+      return '多個視頻';
+    },
+    handleTableSelectionChange(val) {
+      this.tableSelectedVideos = val;
+    },
+    openMaterialDialog() {
+      this.materialDialogVisible = true;
+      this.fetchMaterials();
     },
-    handleSelectionChange(val) {
-      this.selectedVideos = val;
+    fetchMaterials() {
+      getVideo({ page: this.materialCurrentPage - 1, size: this.materialPageSize })
+        .then(response => {
+          if (response.status === 200) {
+            this.materialTableData = response.result.data;
+            this.$nextTick(() => {
+              this.selectedVideos.forEach(selectedVideo => {
+                const targetRow = this.materialTableData.find(row => row.id === selectedVideo.id);
+                if (targetRow) {
+                  this.$refs.materialTable.toggleRowSelection(targetRow, true);
+                }
+              });
+            });
+          } else {
+            this.$message.error('获取素材列表失败');
+          }
+        })
+        .catch(error => {
+          console.error('Error fetching materials:', error);
+          this.$message.error('获取素材列表失败');
+        });
+    },
+    handleMaterialSelectionChange(val) {
+      this.selectedMaterials = val;
+    },
+    confirmMaterialSelection() {
+      this.selectedMaterials.forEach(newVideo => {
+        const isDuplicate = this.tableData.some(existingVideo => existingVideo.id === newVideo.id);
+        if (!isDuplicate) {
+          // 直接添加素材，不添加 editable 属性
+          this.tableData.push({ ...newVideo, title: newVideo.title || ''});
+        }
+      });
+      this.$nextTick(() => {
+        this.tableData.forEach(row => {
+          const isSelected = this.selectedMaterials.some(selectedVideo => selectedVideo.id === row.id);
+          if (isSelected) {
+            this.$refs.table.toggleRowSelection(row, true);
+          }
+        });
+      });
+      this.materialDialogVisible = false;
+      this.selectedMaterials = [];
+    },
+    handleMaterialPageSizeChange(val) {
+      this.materialPageSize = val;
+      this.fetchMaterials();
+    },
+    handleMaterialPageCurrentChange(val) {
+      this.materialCurrentPage = val;
+      this.fetchMaterials();
+    },
+    fetchTotalVideoNumber() {
+      getTotalVideoNumber()
+        .then(response => {
+          if (response.status === 200) {
+            this.totalVideoNumber = response.result.data;
+          } else {
+            this.$message.error('获取视频总数失败');
+          }
+        })
+        .catch(error => {
+          console.error('Error fetching total video number:', error);
+          this.$message.error('获取视频总数失败');
+        });
+    },
+    // 移除视频
+    removeVideo(row) {
+      this.$confirm('确定移除该视频吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          const index = this.tableData.findIndex(item => item.id === row.id);
+          if (index !== -1) {
+            this.tableData.splice(index, 1);
+            this.$message.success('移除成功!');
+          }
+        })
+        .catch(() => {
+          this.$message.error('移除失败!');
+        });
     }
   }
 }