完成课程修改

src/api/biz/course.js

@@ -32,6 +32,14 @@ export const fetchAliyunAuth = () => {
   return request("get", "/api/aliyun/mgr/videoConfig", {});
 };
 
+export const deleteChaper = (chaperId) => {
+  return request("get", `/api/mgr/course/delChaper/${chaperId}`, {});
+};
+
+export const updateChaperTitle = (data) => {
+  return request("post", `/api/mgr/course/modifyChaperName`, data);
+};
+
 export const fetchAliyunPolicy = (data) => {
   return request(
     "get",
@@ -55,4 +63,3 @@ export const fetchVideoInfo = (videoId) => {
 export const saveCourse = (obj) => {
   return request("post", "/api/mgr/course/save", obj);
 };
-

src/views/biz/course/detail.vue

@@ -78,15 +78,35 @@
               justify="start"
               align="middle"
             >
-              <a-col :span="6">
+              <a-col
+                :span="6"
+                class="video-image"
+              >
+                <div class="video-image-background">
                   <img
-                  :src="video.coverURL"
+                    :src="video.coverUrl"
                     width="100%"
                   />
+                  <div class="video-image-toolbar">
+                    <a-icon
+                      type="delete"
+                      @click="deleteVideo(video)"
+                    />
+                    <a-icon
+                      type="edit"
+                      @click="editVideo(video)"
+                    />
+                  </div>
+                  <div class="video-image-cover"></div>
+                  <div class="video-image-play">
+                    <a-icon type="play-circle" />
+                  </div>
+                  <div class="video-image-time">{{formatDuraton(video.duration)}}</div>
+                </div>
               </a-col>
               <a-col :span="12">
                 <div class="video-desc">第{{index+1}}级</div>
-                <div class="video-desc">{{video.chaperName}}</div>
+                <div class="video-desc">{{video.name}}</div>
               </a-col>
             </a-row>
           </div>
@@ -217,16 +237,17 @@
 
           <a-select
             mode="multiple"
+            label-in-value
             placeholder="选择课程标签"
-            v-model="step1FormModel.tags"
+            v-model="selectedTags"
             @change="handleTagChange"
           >
             <a-select-option
               v-for="(t) in this.tags"
-              :key="t.id"
-              :value="t.id"
+              :key="t.tagId"
+              :value="t.tagId"
             >
-              {{ t.name }}
+              {{ t.tagName }}
             </a-select-option>
           </a-select>
         </a-form-model-item>
@@ -307,7 +328,6 @@
               name="file"
               :multiple="false"
               :show-upload-list="true"
-              :loading="loading"
               :customRequest="uploadVideo"
               :before-upload="beforeVideoUpload"
             >
@@ -319,6 +339,26 @@
       </a-modal>
     </template>
 
+    <template>
+      <a-modal
+        :visible="showVideoEditor"
+        title="修改视频名称"
+        @ok="updateVideoTitle"
+        @cancel="closeVideoEditor"
+        :destroyOnClose="true"
+      >
+        <a-form>
+          <a-form-item>
+            <a-input
+              v-model="video2update.name"
+              placeholder="输入视频标题"
+              allowClear
+            ></a-input>
+          </a-form-item>
+        </a-form>
+      </a-modal>
+    </template>
+
   </div>
 </template>
 <script>
@@ -336,56 +376,16 @@ import {
   saveCourse,
   fetchSeriesList,
   saveSeriesInfo,
+  deleteChaper,
+  updateChaperTitle,
 } from "@/api/biz/course";
 
 import { fetchList as fetchTagList } from "@/api/biz/courseTag";
-
 import { fetchList as fetchEnterprise } from "@/api/biz/enterprise";
 
-//系列待选列表表格列定义
-let seriesColumns = [
-  {
-    title: "系列名称",
-    dataIndex: "name",
-    align: "center",
-  },
-];
-//讲师待选列表表格列定义
-let teacherColumns = [
-  {
-    title: "讲师名称",
-    dataIndex: "name",
-    align: "center",
-  },
-  {
-    title: "培训机构",
-    dataIndex: "orgName",
-    align: "center",
-  },
-];
-//章节表格列定义
-let chaperColumns = [
-  {
-    title: "章节名称",
-    dataIndex: "name",
-    align: "center",
-  },
-  {
-    title: "视频",
-    dataIndex: "videoUrl",
-    align: "center",
-  },
-  {
-    title: "操作",
-    key: "action",
-    scopedSlots: { customRender: "videoTblAction" },
-    align: "center",
-  },
-];
 export default {
   // 创建完毕
   created() {
-    // console.log(this.$route.query.id)
     //路由传过来的课程ID，新建是为空
     let courseId = this.$route.query.id;
     if (courseId) {
@@ -412,7 +412,14 @@ export default {
       pageIndex: 1,
       pageSize: 1000,
     }).then((res) => {
-      this.tags = res.data;
+      const _tags = [];
+      res.data.forEach((d) => {
+        _tags.push({
+          tagId: d.id,
+          tagName: d.name,
+        });
+      });
+      this.tags = _tags;
     });
 
     teacherFetchList({
@@ -513,12 +520,15 @@ export default {
       }
     };
     return {
-      enterpriese: [],
+      video2update: {},
+      enterprise: [],
       currentSeries: {},
       tags: [],
+      selectedTags: [],
       videoSeries: [],
       videoTitle: "",
       video: { id: "", img: "", file: "", fileName: "", title: "" },
+      showVideoEditor: false,
       teachers: [],
       seriesData: [],
       onUploadProgress: undefined,
@@ -530,23 +540,6 @@ export default {
       statusText: "",
       aliyunRegion: "",
       aliyunUserId: "",
-      //当前第几步
-      currentStep: 0,
-      //步骤列表
-      steps: [
-        {
-          title: "第一步",
-          content: "添加课程基本信息",
-        },
-        {
-          title: "第二步",
-          content: "添加课件和标签",
-        },
-        {
-          title: "完成",
-          content: "完成添加课程",
-        },
-      ],
       //第一步保存时验证规则定义
       step1FormRules: {
         name: [{ required: true, message: "不能为空", trigger: "blur" }],
@@ -580,51 +573,88 @@ export default {
       loading: false,
       //选择系列弹出窗口的显示控制
       seriesModalVisible: false,
-      //系列待选表格列定义
-      seriesColumns: seriesColumns,
-      //系列待选表格数据对象
-      seriesData: [],
-      //系列待选表格加载进度条
-      seriesLoading: false,
-      //系列待选表格分页控制对象
-      seriesPagination: {},
-      //系列待选表格选中项的ID
-      seriesSelectedRowKeys: [],
-      //选择讲师弹出窗口显示控制
-      teacherModalVisible: false,
       //视频上传窗口
       videoUploadModalVisible: false,
-      //讲师待选表格列定义
-      teacherColumns: teacherColumns,
-      //讲师待选表格数据对象
-      teacherData: [],
-      //讲师待选表格加载进度条
-      teacherLoading: false,
-      //讲师待选表格分页控制对象
-      teacherPagination: {
-        showSizeChanger: true,
-      },
-      //选择讲师的ID
-      teacherSelectedRowKeys: [],
-      //讲师待选表格查询参数对象
       teacherSearchPage: {
         name: "",
         pageIndex: 1,
         pageSize: 10,
       },
-      //记录第一步操作表单修改次数，用于判断是否要提交后台保存，> 1时说明表单修改过需要保存
-      step1ModifyCount: 0,
-      //第二步添加章节点弹出窗口显示控制
-      videoModalVisible: false,
-      //第二步章节列表列定义
-      chaperColumns: chaperColumns,
-      //第二步章节表格数据对象
-      chaperData: [],
-      //第二步章节表格加载进度条
-      chaperTblLoading: false,
     };
   },
   methods: {
+    editVideo(video) {
+      this.video2update = video;
+      this.showVideoEditor = true;
+    },
+    updateVideoTitle() {
+      const data = {
+        chaperId: this.video2update.id,
+        chaperName: this.video2update.name,
+      };
+      updateChaperTitle(data).then((resp) => {
+        if (resp.resp_code === 200) {
+          this.$message.success("视频名称修改成功");
+        } else {
+          this.$message.error(`视频名称修改失败:${resp.resp_msg}`);
+        }
+      });
+
+      this.showVideoEditor = false;
+    },
+    closeVideoEditor() {
+      this.showVideoEditor = false;
+    },
+    deleteVideo(video) {
+      let self = this;
+      this.$confirm({
+        title: `确认要删除${video.name ? video.name : ""}吗?`,
+        content: "删除操作同时会删除已经上传的视频文件",
+        onOk() {
+          deleteChaper(video.id).then((resp) => {
+            if (resp.resp_code === 200) {
+              self.videoSeries.forEach((item, index) => {
+                console.log(item, video);
+                if (item.id === video.id) {
+                  self.videoSeries.splice(index, 1);
+                }
+              });
+            }
+          });
+        },
+        onCancel() {},
+      });
+    },
+    formatDuraton(t) {
+      let time = Math.round(t);
+      if (time > -1) {
+        var hour = Math.floor(time / 3600);
+        var min = Math.floor(time / 60) % 60;
+        var sec = time % 60;
+        if (hour > 0) {
+          if (hour < 10) {
+            time = "0" + hour + ":";
+          } else {
+            time = hour + ":";
+          }
+        } else {
+          time = "";
+        }
+        if (min > 0) {
+          if (min < 10) {
+            time += "0";
+          }
+          time += min + ":";
+        } else {
+          time = "";
+        }
+        if (sec < 10) {
+          time += "0";
+        }
+        time += sec;
+      }
+      return time;
+    },
     handleEnterpriseChange(value) {
       this.step1FormModel.allowOrgIds = value;
     },
@@ -646,7 +676,6 @@ export default {
         if (res.count === 0) {
           callback([{ name: value, id: -1 }]);
         } else {
-          console.log(res.data);
           const item = res.data.find((d) => d.name.trim() === value);
           if (!item) {
             //未找到完全匹配的
@@ -669,7 +698,7 @@ export default {
       }
     },
     handleTagChange(values) {
-      console.log(values);
+      this.selectedTags = values;
     },
     handleTeacherChange(value) {
       this.teachers.forEach((org) => {
@@ -700,12 +729,9 @@ export default {
 
       const chaperList = [];
       this.videoSeries.forEach((chapter, index) => {
-        chaperList.push({
-          chaperName: chapter.chaperName,
-          videoId: chapter.videoId,
-          sortNo: index,
-        });
+        chaperList.push(chapter);
       });
+
       const course = {
         allow,
         allowOrgIds,
@@ -730,6 +756,16 @@ export default {
           : this.currentSeries.label;
       }
 
+      const courseId = this.$route.query.id;
+      if (courseId) {
+        course.id = parseInt(courseId, 10);
+      }
+
+      const _tags = [];
+      this.selectedTags.forEach((t) => {
+        _tags.push(t.key);
+      });
+      course.tagIds = _tags;
       saveCourse(course).then((res) => {
         if (res.resp_code === 200) {
           this.$message.success("课程保存成功");
@@ -744,29 +780,29 @@ export default {
         .then((res) => {
           if (res.resp_code == 200) {
             this.step1FormModel = { ...res.datas };
-            const _ctags = [];
-            this.step1FormModel.tagList.forEach((t) => {
-              _ctags.push(t.tagId);
-            });
-            this.step1FormModel.tags = _ctags;
 
+            if (this.step1FormModel.allowOrgList) {
               const _enterprise = [];
               this.step1FormModel.allowOrgList.forEach((t) => {
                 _enterprise.push(t.orgId);
               });
               this.step1FormModel.allowOrgIds = _enterprise;
+            }
+
+            if (this.step1FormModel.tagList) {
+              this.step1FormModel.tagList.forEach((t) => {
+                this.selectedTags.push({ key: t.tagId, label: t.tagName });
+              });
+            }
 
             this.currentSeries = {
               key: this.step1FormModel.seriesId,
               label: this.step1FormModel.seriesName,
             };
+
             const _videoSeries = [];
             res.datas.chaperList.forEach((cc) => {
-              _videoSeries.push({
-                chaperName: cc.name,
-                videoId: cc.id,
-                coverURL: cc.snapshotUrl,
-              });
+              _videoSeries.push({ ...cc });
             });
             this.videoSeries = _videoSeries;
           } else {
@@ -777,55 +813,9 @@ export default {
           disposereq(this, err);
         });
     },
-    //跳转下一步
-    nextStep() {
-      if (this.currentStep == 0) {
-        this.saveStep1();
-      }
-    },
-    //保存第一步表单数据
-    saveStep1() {
-      // console.log(this.step1FormModel)
-      if (this.step1ModifyCount <= 1) {
-        //未修改，无需保存
-        this.currentStep++;
-        return;
-      }
-      this.$refs.step1FormModelRef.validate((valid) => {
-        if (valid) {
-          if (!this.step1FormModel.logoUrl) {
-            this.$message.info("请上传封面");
-            return false;
-          }
-          //请求后台保存
-          let saveObj = { ...this.step1FormModel };
-          saveStep1(saveObj)
-            .then((res) => {
-              if (res.resp_code == 200) {
-                let courseId = res.datas;
-                this.step1FormModel.id = courseId;
-                this.currentStep++;
-              } else {
-                this.$message.info(res.resp_msg);
-              }
-            })
-            .catch((err) => {
-              disposereq(this, err);
-            });
-        }
-      });
-    },
-    //上一步
-    prevStep() {
-      this.currentStep--;
-    },
-    //最后一步完成操作
-    completeStep() {
-      this.$message.info("完成");
-    },
+
     //上传封面时上传中的回调
     handleChange(info) {
-      // console.log(info.file.status)
       if (info.file.status === "uploading") {
         this.loading = true;
         return;
@@ -921,6 +911,7 @@ export default {
         },
         // 开始上传
         onUploadstarted: function(uploadInfo) {
+          self.uploadVideoStatus = "uploading";
           if (!uploadInfo.videoId) {
             fetchAliyunPolicy({
               fileName: self.video.fileName,
@@ -943,7 +934,6 @@ export default {
                 return;
               }
             });
-            self.$message.info("文件开始上传");
           } else {
             refreshAliyunPolicy(uploadInfo.videoId).then((res) => {
               if (res.resp_code == 200) {
@@ -968,6 +958,7 @@ export default {
         // 文件上传成功
         onUploadSucceed: function(uploadInfo) {
           self.$message.success("文件上传成功");
+          self.uploadVideoStatus = "success";
         },
         // 文件上传失败
         onUploadFailed: function(uploadInfo, code, message) {
@@ -1046,9 +1037,9 @@ export default {
           if (res.resp_code == 200) {
             const { coverURL, duration } = res.datas;
             this.videoSeries.push({
-              chaperName: title,
+              name: title,
               videoId: id,
-              coverURL,
+              coverUrl: coverURL,
               duration,
             });
             this.video = {};
@@ -1057,51 +1048,6 @@ export default {
         });
       }
     },
-
-    //讲师待选窗口确认操作
-    teacherSelected() {
-      if (this.teacherSelectedRowKeys.length == 0) {
-        this.$message.info("请选择讲师");
-        return false;
-      }
-      this.step1FormModel.teacherId = this.teacherSelectedRowKeys[0];
-      let teacherObj = this.teacherData.filter(
-        (e) => e.id == this.teacherSelectedRowKeys[0]
-      )[0];
-      // console.log(teacherObj)
-      this.step1FormModel.teacherName = teacherObj.name;
-      // console.log(this.step1FormModel)
-      this.teacherModalClose();
-    },
-    //关闭讲师待选窗口
-    teacherModalClose() {
-      this.teacherModalVisible = false;
-      this.seriesSelectedRowKeys = [];
-      this.teacherData = [];
-      this.teacherPagination = {};
-      this.teacherSelectedRowKeys = [];
-      this.teacherSearchPage = {
-        name: "",
-        pageIndex: 1,
-        pageSize: 10,
-      };
-    },
-    //待选讲师表格分页操作
-    teacherHandleTableChange(pagination, filters, sorter) {
-      let queryParam = { ...this.teacherSearchPage };
-      queryParam.pageIndex = pagination.current;
-      queryParam.pageSize = pagination.pageSize;
-      this.getTeacherList(queryParam);
-    },
-    //选中讲师操作
-    teacherSelectChange(selectedRowKeys) {
-      // console.log(selectedRowKeys)
-      this.teacherSelectedRowKeys = selectedRowKeys;
-    },
-    //待选讲师表格查询
-    teacherHandlSearch() {
-      this.getTeacherList(this.teacherSearchPage);
-    },
     //查询讲师
     getTeacherList(query) {
       this.teacherLoading = true;
@@ -1128,15 +1074,6 @@ export default {
       this.videoModalVisible = true;
     },
   },
-  watch: {
-    //监视第一步表单是否有修改操作
-    step1FormModel: {
-      handler(val, oldVal) {
-        this.step1ModifyCount++;
-      },
-      deep: true,
-    },
-  },
 };
 </script>
 <style>
@@ -1183,4 +1120,63 @@ export default {
 .cancel-btn {
   margin-left: 15px;
 }
+.video-image-background {
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-size: contain;
+  width: 100%;
+  height: 100%;
+}
+.video-image {
+  width: 120px;
+  height: 68px;
+  background: #d5d5d5 url("../../../assets/img/course/video-bg.png") no-repeat
+    50%;
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  background-size: 60px;
+}
+.video-image-time {
+  position: absolute;
+  text-align: right;
+  color: #fff;
+  width: 100%;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  height: 24px;
+  line-height: 24px;
+  padding: 0 3px;
+  background-image: linear-gradient(-180deg, transparent, rgba(0, 0, 0, 0.8));
+}
+
+.video-image-toolbar {
+  position: absolute;
+  text-align: right;
+  color: #fff;
+  width: 100%;
+  right: 0;
+  top: 0;
+  z-index: 2;
+  height: 24px;
+  line-height: 24px;
+  padding: 0 3px;
+}
+.video-image-play {
+  position: absolute;
+  top: 20px;
+  left: 52px;
+  z-index: 3;
+  color: #fff;
+  opacity: 0.4;
+}
+.video-image-cover {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
 </style>
\ No newline at end of file