3.24

src/router/index.js

@@ -362,6 +362,17 @@ export const asyncRoutes = [
         },
         hidden: true,
       },
+      {
+        path: "editvideo",
+        name: "editvideo",
+        component: () => import("@/views/video/editvideo"),
+        meta: {
+          title: "添加视频",
+          icon: "message",
+          roles: ["Super admin", "Admin", "Student"],
+        },
+        hidden: true,
+      },
     ],
     // Super admin
   },

src/views/video/api/video.js

@@ -4,7 +4,7 @@
  * @Author: King
  * @Date: 2022-02-14 14:46:14
  * @LastEditors: king
- * @LastEditTime: 2023-03-24 18:14:20
+ * @LastEditTime: 2023-03-24 18:36:56
  */
 import request from '@/utils/request'
 //视频模块接口--------------------------------------------------------------
@@ -18,7 +18,7 @@ export function videoList(params) {
 // 视频添加 ?????????
 export function videoAdd(data) {
   return request({
-    url: '/course/1/video',
+    url: '/course/video',
     method: 'post',
     data,
   })
@@ -26,21 +26,14 @@ export function videoAdd(data) {
 //视频修改 -->此处data需要穿一个id
 export function videoEdit(data) {
   return request({
-    url: '/course/video/' + data,
+    url: '/course/video',
     method: 'put',
   })
 }
-//视频详情 -->此处params需要穿一个id
-export function videoDetail(params) {
-  return request({
-    url: '/course/' + params.courseId + '/video/' + params.videoId,
-    method: 'get',
-  })
-}
 // 课程删除 --》此处data需要穿一个id
 export function videoDelete(data) {
   return request({
-    url: '/course/video/' + data.id,
+    url: '/course/video',
     method: 'delete',
   })
 }

src/views/video/editvideo.vue

@@ -0,0 +1,514 @@
+<template>
+  <div class="department-management-container">
+    <el-page-header :content="title" @back="goBack" />
+    <el-form
+      ref="form"
+      label-width="150px"
+      :model="form"
+      :rules="rules"
+      style="width: 50%; margin-top: 50px"
+    >
+      <el-form-item label="视频名称:" prop="title">
+        <el-input
+          v-model="form.title"
+          placeholder="请输入视频名称"
+        />
+      </el-form-item>
+      <el-form-item
+        label="课程章节:"
+        prop="course_chapter_id"
+      >
+        <el-select
+          v-model="form.course_chapter_id"
+          placeholder="请选择课程章节"
+        >
+          <el-option
+            v-for="item in chapterData"
+            :key="item.id"
+            :label="item.title"
+            :value="item.id"
+          />
+        </el-select>
+        <el-button style="margin-left: 10px" type="text" @click="chapterManage">
+          章节管理
+        </el-button>
+      </el-form-item>
+
+      <el-form-item label="上传视频:" prop="fileList">
+        <el-upload
+          ref="upload"
+          accept=".mp4"
+          :action="action"
+          class="upload-demo"
+          :data="videoUploadData"
+          :file-list="form.fileList"
+          :limit="limit"
+          list-type="fileList"
+          multiple
+          :on-error="uploadErr"
+          :on-success="videoSuccess"
+        >
+          <el-button size="small" type="primary">
+           上传视频
+          </el-button>
+          <div slot="tip" class="el-upload__tip">
+           只能上传mp4格式
+          </div>
+        </el-upload>
+        <div v-if="title == '编辑视频'">
+          <a :href="form.fileList.url" target="_blank">
+            {{ form.fileList.url }}
+          </a>
+        </div>
+      </el-form-item>
+
+      <el-form-item
+        label="视频简介:"
+        prop="short_description"
+      >
+        <el-input
+          v-model="form.short_description"
+          autosize
+          placeholder="请输入课程简述"
+          type="textarea"
+        />
+      </el-form-item>
+      <el-form-item label="视频描述:" prop="description">
+        <el-input
+          v-model="form.description"
+          autosize
+          placeholder="请输入视频描述"
+          type="textarea"
+        />
+      </el-form-item>
+
+      <el-form-item label="发布时间:" prop="published_at">
+        <el-date-picker
+          v-model="form.published_at"
+          format="yyyy-MM-dd HH:mm:ss"
+          placeholder="选择日期时间"
+          style="width: 100%"
+          type="datetime"
+          value-format="yyyy-MM-dd HH:mm:ss"
+        />
+      </el-form-item>
+
+      <el-form-item
+        label="视频时长:"
+        prop="duration"
+        style="position: relative"
+      >
+        <span style="position: absolute; top: 0px; left: -80px; color: red">
+          *
+        </span>
+        <el-input-number
+          v-model="hours"
+          label="请输入小时"
+        />
+       时
+        <el-input-number
+          v-model="minute"
+          label="请输入分钟时"
+          style="margin-left: 10px"
+        />
+       分
+        <el-input-number
+          v-model="second"
+          label="请输入秒"
+          style="margin-left: 10px"
+        />
+        秒
+      </el-form-item>
+      <el-form-item
+        label="中文字幕地:"
+        prop="subtitle_zh_path"
+      >
+        <el-upload
+          ref="upload"
+          accept=".vtt"
+          :action="action"
+          class="upload-demo"
+          :data="zhUploadData"
+          :limit="limit"
+          list-type="fileList"
+          multiple
+          :on-error="uploadErr"
+          :on-success="zhSuccess"
+        >
+          <el-button size="small" type="primary">
+            点击上传
+          </el-button>
+          <div slot="tip" class="el-upload__tip">
+            只能上传(vtt格式)
+          </div>
+        </el-upload>
+        <div v-if="title == '编辑视频'">
+          <a :href="form.subtitle_zh_path_resource.url" target="_blank">
+            {{ form.subtitle_zh_path_resource.url }}
+          </a>
+        </div>
+      </el-form-item>
+      <el-form-item
+        label="英文字幕地址:"
+        prop="subtitle_en_path"
+      >
+        <el-upload
+          ref="upload"
+          accept=".vtt"
+          :action="action"
+          class="upload-demo"
+          :data="enUploadData"
+          :limit="limit"
+          list-type="fileList"
+          multiple
+          :on-error="uploadErr"
+          :on-success="enSuccess"
+        >
+          <el-button size="small" type="primary">
+            点击上传
+          </el-button>
+          <div slot="tip" class="el-upload__tip">
+            只能上传(vtt格式)
+          </div>
+        </el-upload>
+        <div v-if="title == '编辑视频'">
+          <a :href="form.subtitle_en_path_resource.url" target="_blank">
+            {{ form.subtitle_en_path_resource.url }}
+          </a>
+        </div>
+      </el-form-item>
+      <el-form-item label="课程排序:" prop="sort">
+        <el-input v-model="form.sort" type="number" />
+      </el-form-item>
+      <el-form-item label="课程状态" prop="status">
+        <el-radio-group v-model="form.status">
+          <el-radio :label="1">正常</el-radio>
+          <el-radio :label="0">禁用</el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <div class="foot">
+      <el-button @click="close">取 消</el-button>
+      <el-button v-if="title == '添加视频'" type="primary" @click="add">
+        添 加
+      </el-button>
+      <el-button v-if="title == '编辑视频'" type="primary" @click="save">
+        确 定
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { videoAdd, videoEdit, videoDetail } from './api/video'
+  import { chapterList } from './api/chapter'
+  export default {
+    name: 'DepartmentManagementEdit',
+    // components: { VabQuill },
+    data() {
+      return {
+        chapterData: [],
+        minute: '', //分
+        hours: '', //时
+        second: '', //秒
+        courseId: '', //课程id
+        videoId: '', //视频id
+        form: {
+          course_chapter_id: '',
+          title: '',
+          url: '',
+          short_description: '',
+          description: '',
+          published_at: '',
+          is_rec: 1,
+          status: 1,
+          sort: 0,
+          fileList: [],
+        },
+        action: '', //图片上传地址
+        uploadShow: true,
+        videoUploadData: { file_type: 'file', type: 'course_video' },
+        zhUploadData: { file_type: 'file', type: 'course_video' },
+        enUploadData: { file_type: 'file', type: 'course_video' },
+        limit: 1,
+        rules: {
+          category_id: [
+            { required: true, trigger: 'change', message: '请选择课程类型' },
+          ],
+          title: [
+            { required: true, trigger: 'blur', message: '请输入课程名称' },
+          ],
+          course_chapter_id: [
+            { required: true, trigger: 'change', message: '请选择课程章节' },
+          ],
+          fileList: [
+            { required: true, trigger: 'change', message: '请上传课程视频' },
+          ],
+          short_description: [
+            { required: true, trigger: 'blur', message: '请输入课程简介' },
+          ],
+          sort: [
+            { required: true, trigger: 'blur', message: '请输入课程排序' },
+          ],
+          status: [
+            { required: true, trigger: 'blur', message: '请选择课程状态' },
+          ],
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    watch: {
+      $route: 'getChapterList',
+    },
+    created() {
+      let route = this.$route
+      console.log(route.query, 'route.query')
+      // this.course_chapter_id
+      // 接收视频列表页面的数据参数
+      this.courseId = route.query.courseId
+      this.videoId = route.query.videoId
+      if (route.query.videoId) {
+        this.title = '编辑视频'
+        this.getVideoDetail()
+      } else {
+        this.title = '添加视频'
+      }
+      console.log(route.query, 'ids')
+      this.action = baseURL + '/common/upload'
+      this.chapterData = []
+      this.getChapterList()
+    },
+
+    methods: {
+      //富文本编辑器
+      getTnyMac(res) {
+        this.form.intro = res
+      },
+      //获取视频详情
+      async getVideoDetail() {
+        let params = {
+          courseId: this.courseId,
+          videoId: this.videoId,
+        }
+        const { data } = await videoDetail(params)
+        console.log(data, '视频详情')
+        this.form = data
+        this.form.fileList = data.url_resource
+        let time = data.duration
+        this.hours =
+          parseInt(time / 3600) < 10
+            ? '0' + parseInt(time / 3600)
+            : parseInt(time / 3600)
+        this.minute =
+          parseInt((time % 3600) / 60) < 10
+            ? '0' + parseInt((time % 3600) / 60)
+            : parseInt((time % 3600) / 60)
+        this.second =
+          parseInt((time % 3600) % 60) < 10
+            ? '0' + parseInt((time % 3600) % 60)
+            : parseInt((time % 3600) % 60)
+      },
+      //返回上一页
+      goBack() {
+        this.$router.push({
+          path: '/video/video',
+          query: {
+            id: this.courseId,
+          },
+        })
+      },
+      //章节管理
+      chapterManage() {
+        this.$router.push({
+          path: '/course/chapter',
+          query: {
+            courseId: this.courseId,
+            videoId: this.videoId,
+          },
+        })
+      },
+      //获取章节列表
+      async getChapterList() {
+        const { data } = await chapterList({
+          courseId: this.courseId,
+          status: 1,
+        })
+        console.log(data, '章节列表')
+        this.chapterData = data.list
+      },
+      //视频上传成功
+      videoSuccess(response, file) {
+        console.log(response, '图片上传成功')
+        console.log(file, '图片上传成功')
+        this.form.url = response.data.id
+        this.form.fileList.push(file)
+        this.$refs.form.validateField('fileList')
+      },
+      //中文字幕上传成功
+      zhSuccess(response) {
+        console.log(response, '图片上传成功')
+        this.form.subtitle_zh_path = response.data.id
+      },
+      //英文字幕上传成功
+      enSuccess(response) {
+        console.log(response, '图片上传成功')
+        this.form.subtitle_en_path = response.data.id
+      },
+      uploadErr(err) {
+        console.log(err, '上传失败')
+        this.$message.error('文件上传失败,请重新上传')
+      },
+      handleNodeClick(node) {
+        this.form.category_name = node.name
+        this.form.category_id = node.id
+      },
+      close() {
+        this.hours = this.second = this.minute = 0
+        this.$refs['form'].resetFields()
+        this.form = this.$options.data().form
+        this.dialogFormVisible = false
+        this.goBack()
+      },
+
+      //编辑保存
+      save() {
+        this.form.duration = this.hours * 3600 + this.minute * 60 + this.second
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { message } = await videoEdit(this.form)
+            this.$baseMessage(
+              message,
+              'success',
+              false,
+              'vab-hey-message-success'
+            )
+            this.$router.push({
+              path: '/course/video',
+              query: {
+                id: this.courseId,
+              },
+            })
+          }
+        })
+      },
+      //添加
+      add() {
+        console.log(this.hours, '时')
+        console.log(this.minute, '时')
+        console.log(this.second, '时')
+        this.form.id = this.courseId
+        this.form.duration = this.hours * 3600 + this.minute * 60 + this.second
+        if (this.form.duration == 0) {
+          this.$message.error('视频时长不能为0')
+          return
+        }
+        console.log(this.form.duration, '视频时长')
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { message } = await videoAdd(this.form)
+            this.$baseMessage(
+              message,
+              'success',
+              false,
+              'vab-hey-message-success'
+            )
+            this.hours = this.minute = this.second = 0
+            this.form = {
+              course_chapter_id: '',
+              title: '',
+              url: '',
+              short_description: '',
+              description: '',
+              published_at: '',
+              is_rec: 1,
+              status: 1,
+            }
+            this.$refs.upload.clearFiles()
+            this.$router.push({
+              path: '/course/video',
+              query: {
+                id: this.courseId,
+              },
+            })
+          }
+        })
+      },
+    },
+  }
+</script>
+<style lang="scss">
+  .foot {
+    width: 50%;
+    margin-top: 50px;
+    text-align: center;
+  }
+  p {
+    margin: 10px;
+  }
+
+  .edit_container,
+  .quill-editor {
+    height: 300px;
+  }
+
+  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
+  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
+    content: '14px';
+  }
+
+  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
+  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
+    content: '10px';
+  }
+  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
+  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
+    content: '18px';
+  }
+  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
+  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
+    content: '32px';
+  }
+
+  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
+  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
+    content: '文本';
+  }
+  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
+  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
+    content: '标题1';
+  }
+  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
+  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
+    content: '标题2';
+  }
+  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
+  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
+    content: '标题3';
+  }
+  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
+  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
+    content: '标题4';
+  }
+  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
+  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
+    content: '标题5';
+  }
+  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
+  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
+    content: '标题6';
+  }
+
+  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
+  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
+    content: '标准字体';
+  }
+  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
+  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
+    content: '衬线字体';
+  }
+  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
+  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
+    content: '等宽字体';
+  }
+</style>

src/views/video/video.vue

@@ -283,7 +283,7 @@
       //暂时不要求添加视频
       handleEdit() {
         this.$router.push({
-          path: '/course/editvideo',
+          path: '/video/editvideo',
           query: {
             courseId: this.queryForm.id,
           },