|
|
@@ -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>
|
xsc