稿件列表页添加修改视频可见范围功能

src/views/post/PostList.vue

@@ -38,6 +38,11 @@
               <el-table-column
                 prop="videoId"
                 label="视频 ID">
+                <template slot-scope="scope">
+                  <router-link target="_blank" :to="`/video/${scope.row.videoId}`">
+                    <span>{{scope.row.videoId}}</span>
+                  </router-link>
+                </template>
               </el-table-column>
               <el-table-column
                 prop="title"
@@ -51,18 +56,27 @@
                 prop="scope"
                 label="可见范围">
                 <template slot-scope="scope">
-                  <el-tag v-if="scope.row.scope === 1" disable-transitions>
-                    全部可见
-                  </el-tag>
-                  <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>
-                    本人可见
-                  </el-tag>
+                  <el-tooltip class="item" effect="dark" content="点击修改视频可见范围" placement="top-end">
+                    <el-button
+                      v-if="scope.row.scope === 1"
+                      size="mini"
+                      @click="handleScope(scope.$index, scope.row)">全部可见</el-button>
+                    <el-button
+                      v-else-if="scope.row.scope === 2"
+                      size="mini"
+                      type="success"
+                      @click="handleScope(scope.$index, scope.row)">VIP 可见</el-button>
+                    <el-button
+                      v-else-if="scope.row.scope === 3"
+                      size="mini"
+                      type="warning"
+                      @click="handleScope(scope.$index, scope.row)">验证码可见</el-button>
+                    <el-button
+                      v-else
+                      size="mini"
+                      type="danger"
+                      @click="handleScope(scope.$index, scope.row)">本人可见</el-button>
+                  </el-tooltip>
                 </template>
               </el-table-column>
               <el-table-column
@@ -228,11 +242,37 @@
       </el-tabs>
     </el-col>
 
+    <!-- 修改视频可见范围对话框 -->
+    <el-dialog
+      append-to-body
+      :visible.sync="showEditScopeDialog"
+      width="30%"
+      center
+    >
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>修改视频可见范围</span>
+          <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateVideoScope">更新</el-button>
+        </div>
+        <div class="text item">
+          <el-form ref="form" :model="form" label-width="80px">
+            <el-form-item label="可见范围">
+              <el-select v-model="form.scope" placeholder="选择可见范围">
+                <el-option label="所有人可见" value="1" />
+                <el-option label="验证码可见" value="2" />
+                <el-option label="VIP 可见" value="3" />
+                <el-option label="仅自己可见" value="4" />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-card>
+    </el-dialog>
     <!-- 视频预览对话框 -->
     <el-dialog
       title="预览视频"
       append-to-body
-      :visible.sync="previewVideo"
+      :visible.sync="showPreviewDialog"
       :before-close="handleDialogClose"
       width="70%"
       center
@@ -247,7 +287,7 @@
 <script>
 import VideoPreviewPlayer from 'components/VideoPreviewPlayer'
 
-import {userVideoPost, videoInfo, deleteVideo} from "@/api/video";
+import {userVideoPost, updateVideoScope, videoInfo, deleteVideo} from "@/api/video";
 import {getUserAlbums} from "@/api/image";
 import { getUserAudio } from "@/api/audio";
 
@@ -264,8 +304,13 @@ export default {
       activeName: 'video',
       userId: 10001,
       dataList: [],
-      previewVideo: false,
+      showPreviewDialog: false,
       videoProp: null,
+      showEditScopeDialog: false,
+      form: {
+        videoId: null,
+        scope: null
+      }
     }
   },
   created() {
@@ -294,8 +339,13 @@ export default {
     }
   },
   methods: {
+    handleScope(index, row) {
+      this.form.videoId = row.videoId
+      this.form.scope = row.scope
+      this.showEditScopeDialog = true
+    },
     handleDialogClose(done) {
-      this.previewVideo = false
+      this.showPreviewDialog = false
       this.videoProp = {
         videoId: null,
         play: false
@@ -305,7 +355,7 @@ export default {
     handlePreview(index, row) {
       videoInfo(row.videoId).then(res => {
         if (res.code === 0) {
-          this.previewVideo = true
+          this.showPreviewDialog = true
           this.videoProp = {
             videoId: res.data.videoId,
             play: true
@@ -425,6 +475,26 @@ export default {
         this.lastId = 0
       }
     },
+    onUpdateVideoScope() {
+      this.showEditScopeDialog = false
+      updateVideoScope(this.form).then(res => {
+        if (res.code === 0) {
+          this.$notify({
+            title: '提示',
+            message: '视频可见范围已更新',
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          title: '提示',
+          message: error.message,
+          type: 'warning',
+          duration: 3000
+        })
+      })
+    }
   }
 }
 </script>