木易华康-课程小节批量修改封面图

src/api/course/userCourseVideo.js

@@ -144,4 +144,13 @@ export function batchDownUserCourseVideo(videoId) {
   })
 }
 
+// 修改视频封面
+export function batchEditCover(data) {
+  return request({
+    url: '/course/userCourseVideo/batchEditCover',
+    method: 'post',
+    data: data
+  })
+}
+
 

src/views/components/course/userCourseCatalogDetails.vue

@@ -54,6 +54,11 @@
                    v-hasPermi="['course:userCourseVideo:batchDown']">批量下架
         </el-button>
       </el-col>
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-edit" size="mini" :disabled="multiple" @click="handleEditCover"
+                   v-hasPermi="['course:userCourseVideo:batchEditCover']">批量修改封面图
+        </el-button>
+      </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
     <el-table border v-loading="loading" :data="userCourseVideoList" @selection-change="handleSelectionChange">
@@ -472,6 +477,29 @@
       </div>
     </el-dialog>
 
+    <!-- 批量修改封面 -->
+    <el-dialog :title="batchEditCoverDialog.title" :visible.sync="batchEditCoverDialog.visible" width="500px" append-to-body>
+      <el-form ref="batchEditCoverDialogForm"
+               :model="batchEditCoverDialog.form"
+               :rules="batchEditCoverDialog.rules"
+               v-loading="batchEditCoverDialog.uploadLoading">
+        <el-form-item label="视频封面" prop="thumbnail">
+          <el-upload v-model="batchEditCoverDialog.form.thumbnail"
+                     class="avatar-uploader"
+                     :action="uploadUrl"
+                     :show-file-list="false"
+                     :on-success="handleCoverSuccess"
+                     :before-upload="beforeAvatarUpload">
+            <img v-if="batchEditCoverDialog.form.thumbnail" :src="batchEditCoverDialog.form.thumbnail" class="avatar" width="300px">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitEditCoverForm">确 定</el-button>
+        <el-button @click="cancelEditCoverForm">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -488,7 +516,7 @@ import {
   sortCourseVideo,
   updates,
   updateUserCourseVideo,
-  syncTemplate, batchDownUserCourseVideo
+  syncTemplate, batchDownUserCourseVideo, batchEditCover
 } from '@/api/course/userCourseVideo'
 // import {syncTemplate} from '@/api/course/userCourse'
 import QuestionBank from "@/views/course/courseQuestionBank/QuestionBank.vue";
@@ -641,7 +669,21 @@ export default {
         videoId: null,
         title: ""
       },
-      enableRandomRedPacket:false
+      enableRandomRedPacket:false,
+      // 批量修改封面
+      batchEditCoverDialog: {
+        title: '修改视频封面',
+        visible: false,
+        uploadLoading: false,
+        form: {
+          thumbnail: null,
+        },
+        rules: {
+          thumbnail: [
+            {required: true, message: "视频封面不能为空", trigger: "change"}
+          ],
+        }
+      }
     }
   },
   created() {
@@ -1315,10 +1357,75 @@ export default {
       }).catch(() => {
       });
     },
+    /** 修改封面 **/
+    handleEditCover() {
+      this.batchEditCoverDialog.form = {
+        thumbnail: null
+      }
+      this.batchEditCoverDialog.visible = true
+    },
+    handleCoverSuccess(res, file) {
+      if (res.code === 200) {
+        this.batchEditCoverDialog.form.thumbnail = res.url;
+        this.$forceUpdate()
+      } else {
+        this.msgError(res.msg);
+      }
+    },
+    submitEditCoverForm() {
+      this.$refs["batchEditCoverDialogForm"].validate(valid => {
+        if (!valid) {
+          return;
+        }
+
+        const thumbnail = this.batchEditCoverDialog.form.thumbnail
+        const videoIds = this.ids
+
+        if (!thumbnail || thumbnail === '') {
+          this.$message({
+            message: '请上传封面！',
+            type: 'warning'
+          });
+          return
+        }
+
+        if (!videoIds || videoIds.length === 0) {
+          this.$message({
+            message: '请选择小节！',
+            type: 'warning'
+          });
+          return
+        }
+
+        const params = {
+          thumbnail: thumbnail,
+          videoIds: videoIds
+        }
+
+        batchEditCover(params).then(response => {
+          this.msgSuccess("修改成功")
+          this.batchEditCoverDialog.visible = false
+          this.getList();
+        });
+      });
+    },
+    cancelEditCoverForm() {
+      this.batchEditCoverDialog.visible = false
+      this.batchEditCoverDialog.form = {
+        thumbnail: null,
+      }
+    },
 
   }
 }
 </script>
+<style scoped>
+.avatar-uploader-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
 <style>
 .avatar-uploader .el-upload {
   border: 1px dashed #d9d9d9;