tnbapp/src/views/home/VideoList.vue

<template>
  <div>
    <el-row class="movie-list">
      <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
      <el-button style="float: right; padding: 3px 0" type="text" @click="onSubmit">发布</el-button>
    </el-row>
    <!--电影列表，与推荐列表-->
    <el-row class="movie-list">
      <!--电影列表-->
      <el-col>
        <el-checkbox-group v-model="checkedVideos" @change="handleCheckedChange">
          <el-checkbox v-for="video in dataList" :key="video.videoId" :label="video.videoId">
            <div style="cursor: pointer" :title="video.title">
              <el-image
                lazy
                fit="cover"
                class="coverImg"
                :src="video.coverUrl"
              />
              <span style="position: absolute; top: 0; left: 60%; color:red"> {{ video.duration }} </span>
              <div style="padding: 14px">
                <router-link style="text-decoration-line: none" target="_blank" :to="`/video/${video.videoId}`">
                  <span style="left: 0;margin-bottom: 0px;color: black;">
                    {{ video.title | ellipsis }}
                  </span>
                </router-link>
              </div>
            </div>
          </el-checkbox>
        </el-checkbox-group>
        <el-col :span="24" class="pagination">
          <el-pagination
            :small="screenWidth <= 768"
            layout="prev, pager, next"
            :page-size="pageSize"
            :current-page="currentPage"
            :total="totalSize"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-col>
    </el-row>

    <el-dialog :visible.sync="showDialog" width="30%" center>
      <el-card class="box-card" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
        <div slot="header" class="clearfix">
          <span>修改视频所有者</span>
          <el-button style="float: right; padding: 10px" type="text" @click="onUpdate">保存修改</el-button>
        </div>
        <div class="text item">
          <el-input
            v-model="jsonData.newUserId"
            placeholder="新用户 ID"
            style="margin-left: 5px;width: 220px"
            prefix-icon="el-icon-search"
          />
        </div>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
import { getUserVideos } from '@/api/video'
import { updateVideoOwner } from '@/api/video_edit'
import { getUserInfo } from '@/api/user'

export default {
  name: 'VideoList',
  filters: {
    ellipsis(value) {
      if (!value) return ''
      const max = 20
      if (value.length > max) {
        return value.slice(0, max) + '...'
      }
      return value
    }
  },
  data() {
    return {
      // 屏幕宽度, 为了控制分页条的大小
      screenWidth: document.body.clientWidth,
      currentPage: 1,
      pageSize: 120,
      totalSize: 0,
      dataList: [],
      checkAll: false,
      checkedVideos: [],
      cityOptions: [],
      isIndeterminate: true,
      showDialog: false,
      jsonData: {
        oldUserId: null,
        newUserId: null,
        videoIds: null
      }
    }
  },
  created() {
    document.title = 'VideoList'
    this.userId = this.$route.params.userId
    var pnStr = this.$route.query.pn
    if (pnStr === null || pnStr === undefined) {
      pnStr = 1
    }

    getUserInfo(this.userId).then(resp => {
      if (resp.code === 0) {
        this.user = resp.data
        document.title = this.user.screenName + '的视频'
      }
    })

    this.currentPage = parseInt(pnStr)
    this.userVideoListWrapper(this.currentPage, this.userId)
  },
  mounted() {
    // 当窗口宽度改变时获取屏幕宽度
    window.onresize = () => {
      return () => {
        window.screenWidth = document.body.clientWidth
        this.screenWidth = window.screenWidth
      }
    }
  },
  methods: {
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.$router.push({
        path: '/edit/videolist/' + this.userId,
        query: {
          pn: this.currentPage
        }
      })
      this.$router.go(0)
    },
    userVideoListWrapper(pageNumber, userId) {
      this.dataList = []
      this.totalSize = 0
      getUserVideos(userId, pageNumber).then(resp => {
        if (resp.code === 0) {
          const respData = resp.data
          this.dataList = respData.list
          this.totalSize = respData.totalSize
          this.showEmpty = this.dataList.length === 0

          for (const item of this.dataList) {
            // 使用 videoId 作为 checked 的值
            this.cityOptions.push(item.videoId)
          }
        }
      })
    },
    handleCheckAllChange(val) {
      this.checkedVideos = val ? this.cityOptions : []
      this.isIndeterminate = false
    },
    handleCheckedChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.cityOptions.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cityOptions.length
      // console.log(value)
    },
    onSubmit() {
      this.jsonData.oldUserIdStr = this.userId
      // this.jsonData.newUserId = 10196
      this.jsonData.videoIds = this.checkedVideos

      this.showDialog = true
    },
    onUpdate() {
      updateVideoOwner(this.jsonData).then(resp => {
        if (resp.code !== 0) {
          this.$message.error(resp.msg)
        } else {
          this.checkedVideos = []
          this.checkAll = false
          this.$router.go(0)
        }
      }).finally(e => {
        this.showDialog = false

        this.jsonData.oldUserIdStr = this.userId
        this.jsonData.newUserId = null
        this.jsonData.videoIds = []
      })
    }
  }
}
</script>

<style scoped>
.movie-list {
  padding-top: 5px;
  padding-left: 1%;
  padding-right: 1%;
}

.pagination {
  text-align: center;
  padding: 10px;
}

.imgs {
  position: relative;
}

.coverImg {
  width: 100%;
  height: 175px;
  display: block;
}
</style>