新增短视频管理页面

src/api/stortVideo/index.js

@@ -0,0 +1,77 @@
+import request from '@/utils/request'
+
+class ShortVideoApi {
+  /** 查询短视频列表 */
+  getList(query) {
+    return request({
+      url: 'pc/teachingDsp/dsp/list',
+      method: 'get',
+      params: query
+    })
+  }
+
+  /** 查询短视频详情 */
+  getVideoInfo(Id) {
+    return request({
+      url: 'pc/teachingDsp/dsp/' + Id,
+      method: 'get'
+    })
+  }
+
+  /** 新增短视频 */
+  addVideo(data) {
+    return request({
+      url: 'pc/teachingDsp/dsp',
+      method: 'post',
+      data: data
+    })
+  }
+
+  /** 修改短视频信息 */
+  updateVideo(data) {
+    return request({
+      url: 'pc/teachingDsp/dsp',
+      method: 'put',
+      data: data
+    })
+  }
+
+  /** 删除短视频 */
+  delVideo(ids) {
+    return request({
+      url: 'pc/teachingDsp/dsp/' + ids,
+      method: 'delete'
+    })
+  }
+
+  /** 上传视频封面 */
+  uploadCover(data, fn) {
+    return request({
+      url: 'pc/teachingDsp/dsp/coverUp',
+      method: 'put',
+      headers: {
+        'content-type': 'multipart/form-data'
+      },
+      data,
+      onUploadProgress: fn,
+      timeout: 0
+    })
+  }
+
+  /** 修改上架状态 */
+  changeUserStatus(id, shelfStatus) {
+    if (shelfStatus != 0) {
+      return request({
+        url: 'pc/teachingDsp/dsp/offShelf/' + id,
+        method: 'put'
+      })
+    } else {
+      return request({
+        url: 'pc/teachingDsp/dsp/putShelf/' + id,
+        method: 'put'
+      })
+    }
+  }
+}
+
+export default new ShortVideoApi()

src/views/shortVideo/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="app-container">
     <el-row :gutter="20">
-      <!--用户数据-->
       <el-col :span="24" :xs="24">
+        <!--搜索模块-->
         <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
           <el-form-item label="视频标题" prop="title">
             <el-input
@@ -20,6 +20,7 @@
           </el-form-item>
         </el-form>
 
+        <!--全局按钮模块-->
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
             <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:user:add']">新增</el-button>
@@ -27,7 +28,9 @@
           <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
         </el-row>
 
+        <!--列表数据模块-->
         <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
+          <el-table-column label="ID" align="center" prop="id" />
           <el-table-column label="视频标题" align="center" prop="title" />
           <el-table-column label="视频描述" align="center" prop="videoDescribe" />
           <el-table-column label="视频预览" align="center" width="300px">
@@ -40,7 +43,6 @@
               <span>{{ new Date(scope.row.videoDuration * 1000).toISOString().slice(11, 19) }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="视频分类" align="center" prop="teachingVideoTypeName" :show-overflow-tooltip="true" />
           <el-table-column label="上架状态" align="center">
             <template slot-scope="scope">
               <el-switch v-model="scope.row.shelfStatus" :active-value="0" :inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
@@ -74,7 +76,7 @@
     </el-row>
 
     <!-- 添加或修改参数配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body :close-on-click-modal="false">
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-row>
           <el-col :span="24">
@@ -82,11 +84,6 @@
               <el-input v-model="form.title" placeholder="请输入视频标题" />
             </el-form-item>
           </el-col>
-          <!-- <el-col :span="12">
-            <el-form-item label="视频类别" prop="teachingVideoTypeId">
-              <treeselect v-model="form.teachingVideoTypeId" :options="deptOptions" :show-count="true" placeholder="请选择视频分类" />
-            </el-form-item>
-          </el-col> -->
         </el-row>
         <el-row>
           <el-col :span="24">
@@ -102,26 +99,36 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item v-if="form.userId == undefined" label="上传进度">
-              <el-progress :text-inside="true" :stroke-width="24" :percentage="videoPercentage" status="success"></el-progress>
+            <el-form-item label="上传进度">
+              <el-progress
+                :text-inside="true"
+                :stroke-width="24"
+                :percentage="videoPercentage"
+                :status="form.vodVideoFileId ? 'success' : ''"
+              ></el-progress>
             </el-form-item>
           </el-col>
         </el-row>
-        <el-row>
+        <el-row v-if="form.vodVideoFileId">
           <el-col :span="12">
             <el-form-item label="视频封面">
               <input type="file" ref="coverFile" @change="coverUpload" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item v-if="form.userId == undefined" label="上传进度">
-              <el-progress :text-inside="true" :stroke-width="24" :percentage="imagePercentage" status="success"></el-progress>
+            <el-form-item label="上传进度">
+              <el-progress
+                :text-inside="true"
+                :stroke-width="24"
+                :percentage="imagePercentage"
+                :status="form.coverFileId ? 'success' : ''"
+              ></el-progress>
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button type="primary" @click="submitForm" :disabled="!form.coverFileId">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
@@ -129,20 +136,14 @@
 </template>
 
 <script>
-import { listUser, getUser, delUser, addUser, updateUser, changeUserStatus, uploadCover } from '@/api/teachingVideo/index'
-import { treeselect } from '@/api/videoType'
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import shortVideoApi from '@/api/stortVideo/index'
 import { vodSignature } from '@/api/upload'
 import TcVod from 'vod-js-sdk-v6'
 
 export default {
-  name: 'User',
-  components: { Treeselect },
+  name: 'stortVideo',
   data() {
     return {
-      pid: 0,
-      teachingVideoTypeId: 0,
       videoPercentage: 0,
       imagePercentage: 0,
       mediaFile: null,
@@ -178,48 +179,54 @@ export default {
       form: {},
       defaultProps: {
         children: 'children',
-        label: 'typeName',
+        label: 'typeName'
       },
       // 查询参数
       queryParams: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 10
       },
       // 表单校验
       rules: {
-        userName: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
-      },
+        userName: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }]
+      }
     }
   },
-  watch: {
-    // 根据名称筛选部门树
-    deptName(val) {
-      this.$refs.tree.filter(val)
-    },
-  },
   async created() {
     this.tcVod = new TcVod({
-      getSignature: vodSignature,
+      getSignature: vodSignature
     })
     this.getList()
-    this.getTreeselect()
-    this.getDicts('sys_normal_disable').then((response) => {
+    this.getDicts('sys_normal_disable').then(response => {
       this.statusOptions = response.data
     })
   },
   methods: {
+    /** 查询短视频列表 */
+    async getList() {
+      this.loading = true
+      const params = this.addDateRange(this.queryParams, this.dateRange)
+      const res = await shortVideoApi.getList(params)
+      this.userList = res.rows
+      this.total = res.total
+      this.loading = false
+    },
     //上传视频
-    fileUpload(e) {
+    async fileUpload(e) {
       this.mediaFile = e.target.files[0]
+      if (!this.mediaFile.type.includes('video')) {
+        this.msgError('请选择视频文件')
+        return false
+      }
       this.videoPercentage = 0
       const uploader = this.tcVod.upload({
-        mediaFile: this.mediaFile, // 媒体文件（视频或音频或图片），类型为 File
+        mediaFile: this.mediaFile // 媒体文件（视频或音频或图片），类型为 File
       })
-      uploader.on('media_progress', (info) => {
+      uploader.on('media_progress', info => {
         this.videoPercentage = Math.floor(info.percent * 100 * 100) / 100
       })
-      uploader.done().then((doneResult) => {
-        this.form.vodVideoFileId = doneResult.fileId
+      uploader.done().then(doneResult => {
+        this.$set(this.form, 'vodVideoFileId', doneResult.fileId)
       })
     },
     //上传封面
@@ -229,66 +236,34 @@ export default {
       let formData = new FormData()
       formData.append('coverFile', this.coverFile)
       formData.append('fileId', this.form.vodVideoFileId)
-      let { data } = await uploadCover(formData, (e) => {
+      const { data } = await shortVideoApi.uploadCover(formData, e => {
         this.imagePercentage = Math.floor((e.loaded / e.total) * 100 * 100) / 100
       })
-      this.form.coverFileId = data.fileId
-    },
-    /** 查询用户列表 */
-    getList() {
-      this.loading = true
-      listUser(this.addDateRange(this.queryParams, this.dateRange)).then((response) => {
-        this.userList = response.rows
-        this.total = response.total
-        this.loading = false
-      })
-    },
-    /** 查询部门下拉树结构 */
-    getTreeselect() {
-      treeselect().then((response) => {
-        this.deptOptions = response.data
-      })
-    },
-    // 筛选节点
-    filterNode(value, data) {
-      if (!value) return true
-      return data.typeName.indexOf(value) !== -1
+      this.$set(this.form, 'coverFileId', data.fileId)
     },
-    // 节点单击事件
-    handleNodeClick(data) {
-      this.queryParams.teachingVideoTypeId = data.id
-      this.teachingVideoTypeId = data.id
-      this.pid = data.pid
-      this.getList()
-    },
-    // 用户状态修改
-    handleStatusChange(row) {
-      let text = row.shelfStatus === '1' ? '上架' : '下架'
-      this.$confirm('确认要"' + text + '""' + row.title + '"视频吗?', '警告', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      })
-        .then(function () {
-          return changeUserStatus(row.id, row.shelfStatus)
-        })
-        .then(() => {
-          this.msgSuccess(text + '成功')
-        })
-        .catch(function () {
-          row.shelfStatus = row.shelfStatus === '0' ? '1' : '0'
+    /** 视频状态修改 */
+    async handleStatusChange(row) {
+      const text = row.shelfStatus === 0 ? '上架' : '下架'
+      try {
+        await this.$confirm(`确认要 ${text} ${row.title}吗?`, '警告', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
         })
+        await shortVideoApi.changeUserStatus(row.id, row.shelfStatus)
+      } catch (error) {
+        console.log(error)
+        row.shelfStatus = row.shelfStatus === 0 ? 1 : 0
+      }
     },
-    // 取消按钮
+    /** 取消按钮,关闭修改窗口 */
     cancel() {
       this.open = false
       this.reset()
     },
-    // 表单重置
+    /** 表单重置 */
     reset() {
       this.form = {}
-      // this.$refs.videoFile.resetFields()
-      // this.$refs.coverFile.resetFields()
       this.videoPercentage = 0
       this.imagePercentage = 0
       this.resetForm('form')
@@ -306,56 +281,50 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.userId)
+      this.ids = selection.map(item => item.userId)
       this.single = selection.length != 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
     handleAdd() {
       this.reset()
-      this.getTreeselect()
       this.open = true
       this.title = '添加视频'
     },
     /** 修改按钮操作 */
-    handleUpdate(row) {
+    async handleUpdate(row) {
       this.reset()
-      this.getTreeselect()
-      const userId = row.id || this.ids
-      getUser(userId).then((response) => {
-        this.form = response.data
-        this.open = true
-        this.title = '修改视频信息'
-      })
+      const res = await shortVideoApi.getVideoInfo(row.id)
+      this.form = res.data
+      this.open = true
+      this.title = '修改视频信息'
     },
     /** 提交按钮 */
-    submitForm: function () {
-      this.$refs['form'].validate((valid) => {
+    async submitForm() {
+      this.$refs['form'].validate(valid => {
         if (valid) {
           if (this.form.id != undefined) {
-            let data = {
-              teachingVideoTypeId: this.form.teachingVideoTypeId,
+            const data = {
               id: this.form.id,
               title: this.form.title,
               videoDescribe: this.form.videoDescribe,
               videoFileId: this.form.vodVideoFileId,
-              coverFileId: this.form.coverFileId,
+              coverFileId: this.form.coverFileId
             }
-            updateUser(data).then((response) => {
+            shortVideoApi.updateVideo(data).then(response => {
               this.msgSuccess('修改成功')
               this.open = false
               this.getList()
             })
           } else {
-            let data = {
-              teachingVideoTypeId: this.teachingVideoTypeId,
+            const data = {
               id: this.form.id,
               title: this.form.title,
               videoDescribe: this.form.videoDescribe,
               videoFileId: this.form.vodVideoFileId,
-              coverFileId: this.form.coverFileId,
+              coverFileId: this.form.coverFileId
             }
-            addUser(data).then((response) => {
+            shortVideoApi.addVideo(data).then(response => {
               this.msgSuccess('新增成功')
               this.open = false
               this.getList()
@@ -365,22 +334,19 @@ export default {
       })
     },
     /** 删除按钮操作 */
-    handleDelete(row) {
-      const userIds = row.userId || this.ids
-      this.$confirm('是否确认删除用户编号为"' + userIds + '"的数据项?', '警告', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      })
-        .then(function () {
-          return delUser(userIds)
-        })
-        .then(() => {
-          this.getList()
-          this.msgSuccess('删除成功')
+    async handleDelete(row) {
+      try {
+        const ids = row.id || this.ids
+        await this.$confirm(`是否删除ID为${ids}的短视频`, '警告', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
         })
-    },
-  },
+        await shortVideoApi.delVideo(ids)
+        this.getList()
+      } catch (error) {}
+    }
+  }
 }
 </script>