tnbapp/src/views/post/PostList.vue

<template>
  <el-row>
    <el-col :md="2">
      <el-menu
        :default-active="this.$route.path"
        router
        class="el-menu-vertical-demo"
      >
        <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.path">
          <i :class="item.icon" />
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <el-col :md="22">
      <el-row>
        <el-tabs v-model="activeName" @tab-click='tabClick'>
          <el-tab-pane label="视频" name="video">
            <el-row :md="6" :sm="12" :xs="12">
              <el-table
                :data="dataList"
                style="width: 100%"
              >
                <el-table-column
                  type="index">
                </el-table-column>
                <el-table-column
                  prop="pubDate"
                  label="发布时间">
                </el-table-column>
                <el-table-column
                  prop="coverUrl"
                  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="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"
                  label="标题">
                </el-table-column>
                <el-table-column
                  prop="description"
                  label="描述">
                </el-table-column>
                <el-table-column
                  prop="scope"
                  label="可见范围">
                  <template slot-scope="scope">
                    <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
                  prop="scope"
                  label="审核状态">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.status === 1" :type="'warning'" disable-transitions>
                      审核中
                    </el-tag>
                    <el-tag v-else-if="scope.row.status === 2" :type="'success'" disable-transitions>
                      审核通过
                    </el-tag>
                    <el-tag v-else :type="'danger'" disable-transitions>
                      审核未通过
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="210">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handlePreview(scope.$index, scope.row)">预览</el-button>
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="相册" name="image">
            <el-row :md="6" :sm="12" :xs="12">
              <el-table
                :data="dataList"
                style="width: 100%"
              >
                <el-table-column
                  type="index">
                </el-table-column>
                <el-table-column
                  prop="coverUrl"
                  label="相册封面"
                  width="150">
                  <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="albumName"
                  label="相册名字"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="total"
                  label="图片数量">
                </el-table-column>
                <el-table-column
                  prop="scope"
                  label="可见范围">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.viewCount === 1" 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>
                    <el-tag v-else :type="'danger'" disable-transitions>
                      本人可见
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEditImage(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDeleteImage(scope.$index, scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="音频" name="audio">
            <el-row :md="6" :sm="12" :xs="12">
              <el-table
                :data="dataList"
                style="width: 100%"
              >
                <el-table-column
                  type="index">
                </el-table-column>
                <el-table-column
                  prop="coverUrl"
                  label="音频封面"
                  width="150">
                  <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="title"
                  label="音频名字">
                </el-table-column>
                <!--                <el-table-column
                                  prop="description"
                                  label="音频简介">
                                </el-table-column>-->
                <el-table-column
                  prop="scope"
                  label="可见范围">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.viewCount === 1" 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>
                    <el-tag v-else :type="'danger'" disable-transitions>
                      本人可见
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEditAudio(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDeleteAudio(scope.$index, scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="文章" name="article">
            <span>
              <h4>文章稿件</h4>
            </span>
          </el-tab-pane>
        </el-tabs>
      </el-row>
      <el-row>
        <el-col :span="22" class="pagination">
          <el-pagination
            background
            :small="screenWidth <= 768"
            layout="prev, pager, next"
            :page-size="pageSize"
            :current-page="currentPage"
            :total="totalSize"
            @current-change="handleCurrentChange"
            @prev-click="handleCurrentChange"
            @next-click="handleCurrentChange"
          />
        </el-col>
      </el-row>
    </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="showPreviewDialog"
      :before-close="handleDialogClose"
      width="70%"
      center
    >
      <template>
        <video-preview-player :video-prop.sync="this.videoProp"/>
      </template>
    </el-dialog>
  </el-row>
</template>

<script>
import VideoPreviewPlayer from 'components/VideoPreviewPlayer'

import {userVideoPost, updateVideoScope, videoInfo, deleteVideo} from "@/api/video";
import {getUserAlbums} from "@/api/image";
import { getUserAudio } from "@/api/audio";

export default {
  name: 'PostList',
  components: { VideoPreviewPlayer },
  data() {
    return {
      // 屏幕宽度, 为了控制分页条的大小
      screenWidth: document.body.clientWidth,
      currentPage: 1,
      pageSize: 12,
      totalSize: 0,
      dataList: [],
      /*************************************************************************/
      navList: [
        { path: '/post/publish', name: '发布', icon: 'el-icon-upload' },
        { path: '/post/list', name: '稿件', icon: 'el-icon-files' },
        { path: '/post/analysis', name: '数据', icon: 'el-icon-data-analysis' }
      ],
      activeName: 'video',
      userId: 10001,
      showPreviewDialog: false,
      videoProp: null,
      showEditScopeDialog: false,
      form: {
        videoId: null,
        scope: null
      }
    }
  },
  created() {
    document.title = "稿件列表"

    const path = this.$route.path
    if (path.endsWith("video")) {
      this.activeName = 'video'
      document.title = '视频稿件'
    } else if (path.endsWith("image")) {
      this.activeName = 'image'
      document.title = '图片稿件'
    } else if (path.endsWith("audio")) {
      this.activeName = 'audio'
      document.title = '音频稿件'
    } else if (path.endsWith("article")) {
      this.activeName = 'article'
      document.title = '文章稿件'
    }

    this.getData()
  },
  watch: {
    $route(){
      this.$router.go()
    }
  },
  methods: {
    handleCurrentChange(pageNumber) {
      this.currentPage = pageNumber
      this.getData()
      // 回到顶部
      scrollTo(0, 0)
    },
    handleScope(index, row) {
      this.form.videoId = row.videoId
      this.form.scope = row.scope
      this.showEditScopeDialog = true
    },
    handleDialogClose(done) {
      this.showPreviewDialog = false
      this.videoProp = {
        videoId: null,
        play: false
      }
      done()
    },
    handlePreview(index, row) {
      videoInfo(row.videoId).then(res => {
        if (res.code === 0) {
          this.showPreviewDialog = true
          this.videoProp = {
            videoId: res.data.videoId,
            play: true
          }
        }
      })
      console.log('预览 ' + row.videoId);
    },
    handleEdit(index, row) {
      console.log(row.videoId);
      const path = '/post/edit/video/' + row.videoId
      this.$router.push(path)
    },
    handleDelete(index, row) {
      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);
      const path = '/post/edit/album/' + row.albumId
      this.$router.push(path)
    },
    handleDeleteImage(index, row) {
      console.log(row.videoId);
    },
    handleEditAudio(index, row) {
      console.log(row.videoId);
      const path = '/post/edit/audio/' + row.audioId
      this.$router.push(path)
    },
    handleDeleteAudio(index, row) {
      console.log(row.videoId);
    },
    tabClick(tab) {
      this.activeName = tab.name
      this.goToTab(this.activeName)
    },
    goToTab(activeName) {
      const path = '/post/' + activeName
      if (this.$route.path === path) {
        this.$router.go(0)
        return
      }
      this.$router.push(path)
    },
    getData() {
      this.dataList = []
      if (this.activeName === 'video') {
        userVideoPost(this.currentPage).then(res => {
          if (res.code === 0) {
            const resData = res.data
            this.dataList = resData.list
            this.totalSize = resData.totalSize

            if (this.totalSize !== 0) {
              this.showEmpty = false
            } 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 => {
          if (res.code === 0) {
            const resData = res.data
            if (resData.length !== 0) {
              this.showEmpty = false
              for (const item of resData) {
                this.dataList.push(item)
              }
            } else {
              this.showEmpty = true
            }
          }
        })
      } else if (this.activeName === 'audio') {
        this.currentPage = 1
        this.lastId = 0
        getUserAudio(this.userId).then(res => {
          if (res.code === 0) {
            const resData = res.data.list
            if (resData.length !== 0) {
              this.showEmpty = false
              for (const item of resData) {
                this.dataList.push(item)
              }
            } else {
              this.showEmpty = true
            }
          }
        })
      } else if (this.activeName === 'article') {
        this.currentPage = 1
        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>

<style>
.uploader-example {
  width: 500px;
  padding: 15px;
  margin: 40px auto 0;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
.uploader-example .uploader-btn {
  margin-right: 4px;
}
.uploader-example .uploader-list {
  max-height: 440px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 320px;
  height: 240px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 320px;
  height: 240px;
  display: block;
}
</style>