update

src/components/upload/PublishVideo.vue

@@ -68,20 +68,26 @@
                 <el-input v-model="form.description" type="textarea" autosize style="padding-right: 1px;" />
               </el-form-item>
               <el-form-item label="分区">
-                <el-select v-model="category" placeholder="请选择分区">
-                  <el-option label="新闻" value="shanghai" />
-                  <el-option label="教育" value="beijing" />
+                <el-select v-model="form.categoryPid" placeholder="请选择分区" @change="getCategory">
+                  <el-option
+                    v-for="item in pCategoryList" :key="item.value"
+                    :label="item.label" :value="item.value">
+                  </el-option>
                 </el-select>
-                <el-select v-model="childCategory" placeholder="请选择子分区">
-                  <el-option label="历史" value="shanghai" />
-                  <el-option label="计算机" value="beijing" />
+                <el-select v-model="form.categoryId" placeholder="请选择子分区">
+                  <el-option
+                    v-for="item in categoryList" :key="item.value"
+                    :label="item.label" :value="item.value">
+                  </el-option>
                 </el-select>
               </el-form-item>
               <el-form-item label="标签">
-                <el-input v-model="tagsStr" style="width: 70%; padding-right: 2px" placeholder="多个标签使用英文逗号分隔" />
+                <el-select v-model="form.tags" style="padding-right: 1px" placeholder="输入标签，用回车添加" @change="getRecommendTags" clearable multiple filterable allow-create default-first-option>
+                  <el-option v-for="item in rcmdTags" :key="item.value" :label="item.label" :value="item.label"></el-option>
+                </el-select>
               </el-form-item>
               <el-form-item label="可见范围">
-                <el-select v-model="form.scope" placeholder="选择可见范围">
+                <el-select v-model="form.scope" placeholder="选择稿件的可见范围">
                   <el-option label="所有人可见" value="1" />
                   <el-option label="验证码可见" value="2" />
                   <el-option label="VIP 可见" value="3" />
@@ -89,12 +95,12 @@
                 </el-select>
               </el-form-item>
               <el-form-item label="定时发布">
-                <el-col :span="11">
-                  <el-date-picker v-model="form.date" type="date" placeholder="选择日期" style="width: 100%;" />
-                </el-col>
-                <el-col :span="11">
-                  <el-time-picker v-model="form.time" placeholder="选择时间" style="width: 100%;" />
-                </el-col>
+                <el-date-picker
+                  v-model="form.scheduledPubDate"
+                  type="datetime"
+                  placeholder="选择发布的时间"
+                  @change="getScheduledPubDate">
+                </el-date-picker>
               </el-form-item>
             </el-form>
           </div>
@@ -146,21 +152,24 @@ export default {
         Contains: function(key) { return this.Get(key) !== null },
         Remove: function(key) { delete this[key] }
       },
-      category: [],
-      childCategory: [],
-      // 提交给后端的数据
-      tagsStr: null,
+      pCategoryList: [],
+      categoryList: [],
+      rcmdTags: [
+        /*{ label: "知识点1" }*/
+      ],
       form: {
         videoFileId: null,
         coverUrl: null,
         title: null,
         description: null,
-        categoryId: 0,
+        categoryPid: null,
+        categoryId: null,
         tags: [],
         scope: null,
         width: 0,
         height: 0,
-        duration: 0
+        duration: 0,
+        scheduledPubDate: null
       },
     }
   },
@@ -172,7 +181,20 @@ export default {
         this.options.chunkSize = resData.maxSize
         this.options.headers.Authorization = "Bearer " + resData.token
       } else {
+        this.$notify({
+          title: '提示',
+          message: '获取视频上传服务器地址失败, 暂时无法上传视频',
+          type: 'error',
+          duration: 3000
+        })
       }
+    }).catch(error => {
+      this.$notify({
+        title: '提示',
+        message: error.message,
+        type: 'warning',
+        duration: 3000
+      })
     })
 
     getServerInfo(5).then(res => {
@@ -181,7 +203,20 @@ export default {
         this.imgOssUrl = resData.ossUrl
         this.imgHeaders.Authorization = "Bearer " + resData.token
       } else {
+        this.$notify({
+          title: '提示',
+          message: '获取图片上传服务器地址失败, 暂时无法上传视频',
+          type: 'error',
+          duration: 3000
+        })
       }
+    }).catch(error => {
+      this.$notify({
+        title: '提示',
+        message: error.message,
+        type: 'warning',
+        duration: 3000
+      })
     })
     this.getVideoCategory()
   },
@@ -192,14 +227,12 @@ export default {
     onFileAdded(file) {
       if (file.file.size > 1024*1024*1024*5) {
         file.cancel()
-        this.$notify(
-          {
+        this.$notify({
             title: '提示',
             message: '视频文件应小于 5GiB',
             type: 'warning',
             duration: 3000
-          }
-        )
+          })
         return
       }
       this.setTitle(file.file.name)
@@ -218,17 +251,25 @@ export default {
           type: 'warning',
           duration: 3000
         })
+      } else {
+        console.log(chunk)
+        this.$notify({
+          title: '提示',
+          message: '视频文件上传失败',
+          type: 'warning',
+          duration: 3000
+        })
       }
     },
     onFileError(rootFile, file, response, chunk) {
-      this.$notify(
-        {
+      const res = JSON.parse(response)
+      console.log(res.msg)
+      this.$notify({
           title: '提示',
-          message: '文件上传错误',
+          message: '视频文件上传错误',
           type: 'warning',
           duration: 3000
-        }
-      )
+        })
     },
     /***********************************************************************/
     beforeAvatarUpload(file) {
@@ -319,17 +360,14 @@ export default {
                 const resData = json.data
                 this.form.coverUrl = resData.url
               } else {
-                this.$notify(
-                  {
-                    title: '提示',
-                    message: '视频封面上传失败，请重试！' + json.msg,
-                    type: 'warning',
-                    duration: 3000
-                  }
-                )
+                this.$notify({
+                  title: '提示',
+                  message: '视频封面上传失败，请重试！' + json.msg,
+                  type: 'warning',
+                  duration: 3000
+                })
               }
-            })
-            .catch(e => {
+            }).catch(e => {
               return null
             })
         }
@@ -347,60 +385,51 @@ export default {
       }
     },
     getVideoCategory() {
-      videoCategory()
-        .then(res => {
+      videoCategory().then(res => {
           if (res.code === 0) {
-            for (let i = 0; i < res.data.length; i++) {
-              const name = res.data[i].name
-              //this.category.push(name)
-              this.categoryMap.Set(name, res.data[i])
+            const resData = res.data
+            for (let i = 0; i < resData.length; i++) {
+              const name = resData[i].name
+              const id = resData[i].id
+              this.pCategoryList.push({label: name, value: id})
+              this.categoryMap.Set(id, resData[i].children)
             }
           } else {
-            this.$notify(
-              {
-                title: '提示',
-                message: res.msg,
-                type: 'warning',
-                duration: 3000
-              }
-            )
-          }
-        }).catch(error => {
-          this.$notify(
-            {
+            this.$notify({
               title: '提示',
-              message: error.message,
-              type: 'error',
+              message: res.msg,
+              type: 'warning',
               duration: 3000
-            }
-          )
+            })
+          }
+        }).catch(error => {
+          this.$notify({
+            title: '提示',
+            message: error.message,
+            type: 'error',
+            duration: 3000
+          })
         })
     },
-    getCategory(name) {
+    getCategory(id) {
       // 重置子分区，清除前一次选择分区时留下的缓存
-      this.childCategory = []
-      this.currentCategory = this.categoryMap.Get(name)
-      this.form.categoryId = this.currentCategory.id
-
-      const c = this.currentCategory.children
-      if (c) {
-        for (let i = 0; i < c.length; i++) {
-          this.childCategory.push(c[i].name)
-        }
+      this.categoryList = []
+      for (const item of this.categoryMap.Get(id)) {
+        this.categoryList.push({label: item.name, value: item.id})
       }
     },
-    getChildCategory(name) {
-      const c = this.currentCategory.children
-      for (let i = 0; i < c.length; i++) {
-        if (c[i].name === name) {
-          this.form.categoryId = c[i].id
-        }
+    // 根据输入的标签获取相似的标签
+    getRecommendTags(tags) {
+      for (const tag of tags) {
+        // console.log(tag)
       }
     },
+    getScheduledPubDate() {
+      console.log(this.form.scheduledPubDate)
+    },
     onSubmit() {
       if (!this.form.videoFileId) {
-        this.$notify(
-          {
+        this.$notify({
             title: '提示',
             message: '你还没有上传视频',
             type: 'warning',
@@ -411,8 +440,7 @@ export default {
       }
 
       if (!this.form.coverUrl) {
-        this.$notify(
-          {
+        this.$notify({
             title: '提示',
             message: '你还没有上传视频封面',
             type: 'warning',
@@ -423,8 +451,7 @@ export default {
       }
 
       if (this.form.title === '' || this.form.categoryId === -1) {
-        this.$notify(
-          {
+        this.$notify({
             title: '提示',
             message: '分区和稿件标题不能为空',
             type: 'warning',
@@ -434,11 +461,10 @@ export default {
         return
       }
 
-       if (this.form.scope === null) {
-        this.$notify(
-          {
+      if (this.form.tags.length === 0 || this.form.tags.length > 10) {
+        this.$notify({
             title: '提示',
-            message: '稿件可见范围不能为空',
+            message: '标签最少 1 个, 最多 10 个',
             type: 'warning',
             duration: 3000
           }
@@ -446,12 +472,10 @@ export default {
         return
       }
 
-       this.form.tags = this.tagsStr.split(",")
-      if (this.form.tags.length === 0 || this.form.tags.length > 10) {
-        this.$notify(
-          {
+      if (this.form.scope === null) {
+        this.$notify({
             title: '提示',
-            message: '标签最少 1 个, 最多 10 个',
+            message: '稿件可见范围不能为空',
             type: 'warning',
             duration: 3000
           }
@@ -459,6 +483,18 @@ export default {
         return
       }
 
+      if (this.form.scheduledPubDate !== null) {
+        console.log(this.form.scheduledPubDate)
+        if (false) {
+          this.$notify({
+            title: '提示',
+            message: '定时发布的时间必须在当前时间之后',
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }
+
       submitVideo(this.form).then(res => {
         if (res.code === 0) {
           this.$notify({

src/views/post/PostList.vue

@@ -23,29 +23,21 @@
               <el-table-column
                 type="index">
               </el-table-column>
+              <el-table-column
+                prop="pubDate"
+                label="发布时间">
+              </el-table-column>
               <el-table-column
                 prop="coverUrl"
-                label="视频封面"
+                label="封面"
                 width="80">
                 <template   slot-scope="scope">
                   <el-image :src="scope.row.coverUrl" min-width="40" height="30" />
                 </template>
               </el-table-column>
               <el-table-column
-                prop="pubDate"
-                label="发布时间">
-              </el-table-column>
-              <el-table-column
-                prop="horizontal"
-                label="横屏">
-                <template slot-scope="scope">
-                  <el-tag v-if="scope.row.horizontal" :type="'success'" disable-transitions>
-                    横屏
-                  </el-tag>
-                  <el-tag v-else :type="'warning'" disable-transitions>
-                    竖屏
-                  </el-tag>
-                </template>
+                prop="videoId"
+                label="视频 ID">
               </el-table-column>
               <el-table-column
                 prop="title"
@@ -57,34 +49,34 @@
               </el-table-column>
               <el-table-column
                 prop="scope"
-                label="审核状态">
+                label="可见范围">
                 <template slot-scope="scope">
-                  <el-tag v-if="scope.row.viewCount === 1" :type="'success'" disable-transitions>
-                    {{scope.row.viewCount}}
+                  <el-tag v-if="scope.row.scope === 1" disable-transitions>
+                    全部可见
                   </el-tag>
-                  <el-tag v-else-if="scope.row.viewCount === 2" :type="'warning'" disable-transitions>
-                    {{scope.row.viewCount}}
+                  <el-tag v-else-if="scope.row.scope === 2" :type="'success'" disable-transitions>
+                    VIP 可见
+                  </el-tag>
+                  <el-tag v-else-if="scope.row.scope === 3" :type="'warning'" disable-transitions>
+                    验证码可见
                   </el-tag>
                   <el-tag v-else :type="'danger'" disable-transitions>
-                    {{scope.row.viewCount}}
+                    本人可见
                   </el-tag>
                 </template>
               </el-table-column>
               <el-table-column
                 prop="scope"
-                label="可见范围">
+                label="审核状态">
                 <template slot-scope="scope">
-                  <el-tag v-if="scope.row.viewCount === 1" disable-transitions>
-                    全部可见
+                  <el-tag v-if="scope.row.status === 1" :type="'success'" disable-transitions>
+                    审核通过
                   </el-tag>
-                  <el-tag v-else-if="scope.row.viewCount === 2" :type="'success'" disable-transitions>
-                    VIP 可见
-                  </el-tag>
-                  <el-tag v-else-if="scope.row.viewCount === 3" :type="'warning'" disable-transitions>
-                    验证码可见
+                  <el-tag v-else-if="scope.row.status === 2" :type="'warning'" disable-transitions>
+                    审核中
                   </el-tag>
                   <el-tag v-else :type="'danger'" disable-transitions>
-                    本人可见
+                    审核未通过
                   </el-tag>
                 </template>
               </el-table-column>
@@ -255,8 +247,8 @@
 <script>
 import VideoPreviewPlayer from 'components/VideoPreviewPlayer'
 
+import {userVideoPost, videoInfo, deleteVideo} from "@/api/video";
 import {getUserAlbums} from "@/api/image";
-import { userVideoList, videoInfo } from "@/api/video";
 import { getUserAudio } from "@/api/audio";
 
 export default {
@@ -328,7 +320,17 @@ export default {
       this.$router.push(path)
     },
     handleDelete(index, row) {
-      console.log(row.videoId);
+      deleteVideo(row.videoId).then(res => {
+         if (res.code === 0) {
+           this.$notify({
+             title: '提示',
+             message: '视频稿件已删除',
+             type: 'warning',
+             duration: 3000
+           })
+           this.$router.go(0)
+         }
+      })
     },
     handleEditImage(index, row) {
       console.log(row.videoId);
@@ -359,8 +361,9 @@ export default {
       this.$router.push(path)
     },
     getData() {
+      this.dataList = []
       if (this.activeName === 'video') {
-        userVideoList(1, this.userId, 1).then(res => {
+        userVideoPost(1, this.userId, 1).then(res => {
           if (res.code === 0) {
             const resData = res.data.list
             if (resData.length !== 0) {
@@ -371,7 +374,21 @@ export default {
             } else {
               this.showEmpty = true
             }
+          } else {
+            this.$notify({
+              title: '提示',
+              message: res.msg,
+              type: 'warning',
+              duration: 3000
+            })
           }
+        }).catch(error => {
+          this.$notify({
+            title: '提示',
+            message: error.message,
+            type: 'error',
+            duration: 3000
+          })
         })
       } else if (this.activeName === 'image') {
         getUserAlbums(this.userId).then(res => {