|
@@ -0,0 +1,330 @@
|
|
|
+<template>
|
|
|
+ <div class="department-management-container">
|
|
|
+ <!-- <el-page-header content="视频列表" @back="goBack" /> -->
|
|
|
+ <vab-query-form style="display: flex;justify-content: space-between;">
|
|
|
+ <vab-query-form-left-panel :span="12">
|
|
|
+ <!-- 暂时不要求添加 -->
|
|
|
+ <el-button icon="el-icon-plus" type="primary" @click="handleEdit">
|
|
|
+ 添加
|
|
|
+ </el-button>
|
|
|
+ </vab-query-form-left-panel>
|
|
|
+ <vab-query-form-right-panel :span="12">
|
|
|
+ <el-form :inline="true" :model="queryForm" @submit.native.prevent>
|
|
|
+ <el-form-item>
|
|
|
+ <el-input
|
|
|
+ v-model.trim="queryForm.title"
|
|
|
+ clearable
|
|
|
+ placeholder="请输入视频名称"
|
|
|
+ @keyup.enter.native="queryData"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button icon="el-icon-search" type="primary" @click="queryData">
|
|
|
+ 查询
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </vab-query-form-right-panel>
|
|
|
+ </vab-query-form>
|
|
|
+
|
|
|
+ <el-table
|
|
|
+ v-loading="listLoading"
|
|
|
+ border
|
|
|
+ :data="list"
|
|
|
+ default-expand-all
|
|
|
+ row-key="id"
|
|
|
+ :tree-props="{ children: 'children' }"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="序号"
|
|
|
+ show-overflow-tooltip
|
|
|
+ type="index"
|
|
|
+ width="60"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="视频名称"
|
|
|
+ min-width="120"
|
|
|
+ prop="title"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="所属章节"
|
|
|
+ min-width="100"
|
|
|
+ prop="course_chapter.title"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="观看次数"
|
|
|
+ min-width="80"
|
|
|
+ prop="view_num"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="上线时间"
|
|
|
+ min-width="120"
|
|
|
+ prop="published_at"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="状态"
|
|
|
+ min-width="100"
|
|
|
+ prop="status"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag v-if="row.status == 1">
|
|
|
+ 正常
|
|
|
+ </el-tag>
|
|
|
+ <el-tag v-if="row.status == 0" type="danger">
|
|
|
+ 禁用
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="更新时间"
|
|
|
+ min-width="120"
|
|
|
+ prop="updated_at"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ fixed="right"
|
|
|
+ label="操作"
|
|
|
+ min-width="120"
|
|
|
+ >
|
|
|
+ <template #default="{ row }">
|
|
|
+ <!-- 暂时不要求编辑 -->
|
|
|
+ <el-button type="text" @click="handleEditVideo(row)">
|
|
|
+ 编辑
|
|
|
+ </el-button>
|
|
|
+ <el-button type="text" @click="videoDetail(row)">
|
|
|
+ 详情
|
|
|
+ </el-button>
|
|
|
+ <el-button type="text" @click="handleDelete(row)">
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <template #empty>
|
|
|
+ <!-- <el-image
|
|
|
+ class="vab-data-empty"
|
|
|
+ :src="require('@/assets/empty_images/data_empty.png')"
|
|
|
+ /> -->
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ :current-page="queryForm.page"
|
|
|
+ :layout="layout"
|
|
|
+ :page-size="queryForm.per_page"
|
|
|
+ :page-sizes="[15, 20, 30, 40, 50, 100]"
|
|
|
+ :total="total"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ // , videoEdit
|
|
|
+ import { videoList, videoDelete } from './api/video'
|
|
|
+ // import { mapActions } from 'vuex'
|
|
|
+ // import { handleActivePath } from '@/utils/routes'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'CourseManage',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //修改排序
|
|
|
+ editForm: '',
|
|
|
+ oldSort: 0,
|
|
|
+ editStatus: 0, //排序编辑状态 0为正常 1显示输入框
|
|
|
+ //
|
|
|
+ list: [],
|
|
|
+ listLoading: true,
|
|
|
+ layout: 'total, sizes, prev, pager, next, jumper',
|
|
|
+ total: 0,
|
|
|
+ queryForm: {
|
|
|
+ page: 1,
|
|
|
+ per_page: 15,
|
|
|
+ title: '',
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ $route: 'getVideoList',
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ const route = this.$route
|
|
|
+ console.log(route, route.query, route.query.id, 'idididii')
|
|
|
+ // 接收课程页面传过来的参数--》此id是课程id
|
|
|
+ this.queryForm.id = route.query.id
|
|
|
+ this.getVideoList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // ...mapActions({
|
|
|
+ // delVisitedRoute: 'tabs/delVisitedRoute',
|
|
|
+ // }),
|
|
|
+ //返回上一页
|
|
|
+ goBack() {
|
|
|
+ // this.delVisitedRoute(handleActivePath(this.$route, true))
|
|
|
+ // this.$router.push('/course/courseList')
|
|
|
+ },
|
|
|
+ //章节管理
|
|
|
+ chapterManage(row) {
|
|
|
+ console.log(row.id, this.queryForm.id, '视频跳转到章节传递的参数')
|
|
|
+ this.$router.push({
|
|
|
+ path: '/course/chapter',
|
|
|
+ query: {
|
|
|
+ // 视频id
|
|
|
+ videoId: row.id,
|
|
|
+ // 课程id
|
|
|
+ courseId: this.queryForm.id,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //附件管理
|
|
|
+ handleEnclosure(row) {
|
|
|
+ console.log(row.id, this.queryForm.id, '视频跳转到附件传递的参数')
|
|
|
+ this.$router.push({
|
|
|
+ path: '/course/enclosure',
|
|
|
+ query: {
|
|
|
+ // 视频id
|
|
|
+ videoId: row.id,
|
|
|
+ // 课程id
|
|
|
+ courseId: this.queryForm.id,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 跳转到视频详情页面
|
|
|
+ videoDetail(row) {
|
|
|
+ console.log(row.id, '课程列表页跳转到课程详情页row.id就是课程id')
|
|
|
+ this.$router.push({
|
|
|
+ path: '/course/videoDetail',
|
|
|
+ query: {
|
|
|
+ // 视频id
|
|
|
+ videoId: row.id,
|
|
|
+ // 课程id
|
|
|
+ courseId: this.queryForm.id,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleDelete(row) {
|
|
|
+ if (row.id) {
|
|
|
+ this.$baseConfirm('你确定要删除当前项吗', null, async () => {
|
|
|
+ const { message } = await videoDelete({ id: row.id })
|
|
|
+ this.$baseMessage(
|
|
|
+ message,
|
|
|
+ 'success',
|
|
|
+ false,
|
|
|
+ 'vab-hey-message-success'
|
|
|
+ )
|
|
|
+ await this.getVideoList()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.queryForm.per_page = val
|
|
|
+ this.getVideoList()
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.queryForm.page = val
|
|
|
+ this.getVideoList()
|
|
|
+ },
|
|
|
+ queryData() {
|
|
|
+ this.queryForm.page = 1
|
|
|
+ this.getVideoList()
|
|
|
+ },
|
|
|
+ async getVideoList() {
|
|
|
+ this.listLoading = true
|
|
|
+ const { data } = await videoList(this.queryForm)
|
|
|
+ console.log(data, '视频列表')
|
|
|
+ this.list = data.data
|
|
|
+ this.total = data.meta.pagination.total
|
|
|
+ this.listLoading = false
|
|
|
+ },
|
|
|
+ //修改排序事件
|
|
|
+ async changeSort(row) {
|
|
|
+ console.log('1111111111')
|
|
|
+ this.editStatus = 1
|
|
|
+ this.editForm = row
|
|
|
+ this.oldSort = row.sort
|
|
|
+
|
|
|
+ //await doEdit(this.editForm)
|
|
|
+ },
|
|
|
+ //修改排序
|
|
|
+ inputSort(e) {
|
|
|
+ console.log(e, '000000000')
|
|
|
+ this.editForm.sort = e
|
|
|
+ },
|
|
|
+ // async sureChange() {
|
|
|
+ // this.editStatus = 0
|
|
|
+ // if (this.oldSort !== this.editForm.sort) {
|
|
|
+ // const { message } = await videoEdit(this.editForm)
|
|
|
+ // console.log(message, 'message')
|
|
|
+ // // location.reload()
|
|
|
+ // this.$baseMessage(
|
|
|
+ // message,
|
|
|
+ // 'success',
|
|
|
+ // false,
|
|
|
+ // 'vab-hey-message-success'
|
|
|
+ // )
|
|
|
+ // this.getVideoList()
|
|
|
+ // } else {
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ //暂时不要求添加视频
|
|
|
+ handleEdit() {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/course/editvideo',
|
|
|
+ query: {
|
|
|
+ courseId: this.queryForm.id,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //暂时不要求编辑视频
|
|
|
+ // handleEditVideo(row) {
|
|
|
+ // console.log(row, row.id, '点击视频列表中的编辑按钮')
|
|
|
+ // if (row.id != undefined) {
|
|
|
+ // this.$router.push({
|
|
|
+ // path: '/course/editvideo',
|
|
|
+ // query: {
|
|
|
+ // // course_chapter_id: row.id,
|
|
|
+ // videoId: row.id,
|
|
|
+ // courseId: this.queryForm.id,
|
|
|
+ // },
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+ /* 修改排序样式 */
|
|
|
+ .edit {
|
|
|
+ display: inline-block;
|
|
|
+ width: 110px;
|
|
|
+ }
|
|
|
+ .input-sort {
|
|
|
+ display: inline-block;
|
|
|
+ width: 100px;
|
|
|
+ margin-left: 10px;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .sort-num {
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ .el-icon-edit {
|
|
|
+ color: #1890ff;
|
|
|
+ }
|
|
|
+</style>
|