视频管理

xiangpei

2025-05-22 d17757c6c7390fd6857c60c306b4f296475873a9

视频管理

 manager/src/api/file.js

New file
@@ -0,0 +1,14 @@
import service from "@/libs/axios";
import {commonUrl} from '@/libs/axios';


// 获取文件临时访问url
export const getFilePreview = (fileKey) => {
    return service({
        baseURL: commonUrl,
        url: "/common/lmk/file/preview",
        method: "POST",
        data: {"fileKey": fileKey}
    })
}


 manager/src/api/video.js

New file
@@ -0,0 +1,96 @@
import service from "@/libs/axios";

// 获取视频内容分页
export const getVideos = (data) => {
    return service({
        url: "/lmk/video/page",
        method: "POST",
        data: data
    })
}

// 获取视频内容列表
export const getVideoList = () => {
    return service({
        url: "/lmk/video/list",
        method: "GET"
    })
}

// 通过id获取视频内容
export const getVideoById = (params) => {
    return service({
        url: "/lmk/video/" + params,
        method: "GET"
    })
}

// 通过id删除视频内容
export const deleteVideoById = (params) => {
    return service({
        url: "/lmk/video/" + params,
        method: "DELETE"
    })
}

// 批量删除视频内容
export const deleteVideoByIds = (params) => {
    return service({
        url: "/lmk/video/batch",
        method: "DELETE",
        data: params
    })
}

// 修改视频内容
export const editVideo = (params) => {
    return service({
        url: "/lmk/video/",
        method: "PUT",
        data: params
    })
}

// 添加视频内容
export const addVideo = (params) => {
    return service({
        url: "/lmk/video/",
        method: "POST",
        data: params
    })
}

// 审核视频
export const auditingVideo = (data) => {
  return service({
    url: "/lmk/video/auditing",
    method: "POST",
    data: data
  })
}

// 首页推荐设置
export const recommendSet = (data) => {
  return service({
    url: "/lmk/video/recommend",
    method: "PUT",
    data: data
  })
}

// 视频上架
export const up = (id) => {
  return service({
    url: "/lmk/video/up/" + id,
    method: "POST"
  })
}

// 视频下架
export const down = (data) => {
  return service({
    url: "/lmk/video/down",
    method: "POST",
    data: data
  })
}

 manager/src/api/videoTag.js

@@ -10,10 +10,11 @@
}

// 获取视频标签列表
export const getVideoTagList = () => {
export const getVideoTagList = (params) => {
    return service({
        url: "/lmk/video-tag/list",
        method: "GET"
        method: "GET",
        params: params
    })
}


 manager/src/views/video/VideoList.vue

New file
@@ -0,0 +1,551 @@
<template>
  <div>
    <Card>
      <Form
        ref="searchForm"
        @keydown.enter.native="handleSearch"
        :model="searchForm"
        inline
        :label-width="70"
        class="search-form"
      >
        <Form-item label="标题" prop="title">
          <Input
            type="text"
            v-model="searchForm.title"
            clearable
            @on-clear="handleSearch"
            @on-change="handleSearch"
            style="width: 160px"
          />
        </Form-item>
        <Form-item label="标签" prop="tagList">
          <Select
            v-model="searchForm.tagList"
            clearable
            filterable
            multiple
            @on-clear="handleSearch"
            @on-change="handleSearch"
            style="width: 160px"
          >
            <Option v-for="tag in tagList" :key="tag.id" :value="tag.id">{{tag.tagName}}</Option>
          </Select>
        </Form-item>
        <Form-item label="视频状态" prop="status">
          <Select
            v-model="searchForm.status"
            clearable
            @on-clear="handleSearch"
            @on-change="handleSearch"
            style="width: 160px"
          >
            <Option value="99">待审核</Option>
            <Option value="1">已发布</Option>
            <Option value="0">已下架</Option>
            <Option value="-1">审核未通过</Option>
          </Select>
        </Form-item>
        <Button
          @click="handleSearch"
          type="primary"
          icon="ios-search"
          class="search-btn"
        >搜索</Button
        >
      </Form>

      <Modal
        v-model="playVideoShow"
        :title="playVideoTitle"
        width="800"
        :mask-closable="false"
      >
        <div class="video-warp">
          <video :src="playVideoUrl" autoplay controls style="width: 768px;height: 432px"/>
        </div>
        <div slot="footer">
          <Button type="text" @click="playVideoClose">关闭</Button>
        </div>
      </Modal>

      <Modal
        v-model="auditingShow"
        title="视频审核"
        width="800"
        :loading="auditingLoading"
        :mask-closable="false"
      >
        <Form
          ref="auditingForm"
          :model="auditingForm"
          :label-width="70"
          :rules="auditingRule"
        >
          <Form-item label="标题：">
            <div>{{detail.title}}</div>
          </Form-item>
          <Form-item label="标签：">
            <div style="display: flex;flex-wrap: wrap">
              <div v-for="(tag, index) in detail.tagList" :key="'tag' + index" style="margin-right: 5px">
                <Tag color="red">{{tag.tagName}}</Tag>
              </div>
            </div>
          </Form-item>
          <Form-item class="video-warp" :label-width="0">
            <video :src="detail.videoUrl" autoplay controls style="width: 768px;height: 432px"/>
          </Form-item>
          <Form-item label="审核结果：" :label-width="100" prop="result">
            <RadioGroup v-model="auditingForm.result">
              <Radio :label="1">通过</Radio>
              <Radio :label="0">不通过</Radio>
            </RadioGroup>
          </Form-item>
          <Form-item v-show="auditingForm.result === 0" label="不通过原因：" :label-width="100" prop="reason">
            <Input
              type="textarea"
              v-model="auditingForm.reason"
              clearable
              style="width: 100%"
            />
          </Form-item>
        </Form>
        <div slot="footer">
          <Button type="text" @click="closeAuditing">关闭</Button>
          <Button type="primary" @click="submitAuditing">确认</Button>
        </div>
      </Modal>

      <Modal
        v-model="videoDownShow"
        title="视频下架"
        width="800"
        :mask-closable="false"
      >
        <Form :model="videoDownForm" :rules="videoDownRule" ref="videoDownForm">
          <FormItem label="下架原因：" :labelWidth="100" prop="reason">
            <editor ref="editor" @input="getReason" />
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="text" @click="closeVideoDown">关闭</Button>
          <Button type="primary" @click="videoDown">确认</Button>
        </div>
      </Modal>

      <Table
        :loading="loading"
        border
        :columns="columns"
        :data="data"
        ref="table"
        sortable="custom"
        @on-sort-change="changeSort"
        @on-selection-change="showSelect"
      >
        <template slot-scope="{ row, index }" slot="tagList">
          <div v-for="(tag, index) in row.tagList" :key="'tag' + index" style="margin-top: 5px">
            <Tag color="red">{{tag.tagName}}</Tag>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="videoFileKey">
          <div class="play-text" @click="playVideo(row.videoFileKey, row.title)">点击播放</div>
        </template>
        <template slot-scope="{ row, index }" slot="recommend">
          <i-switch v-model="row.recommend" :before-change="() => handleBeforeChange(row)" true-color="#13ce66"/>
        </template>
        <template slot-scope="{ row, index }" slot="status">
          {{transStatus(row.status)}}
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button type="primary" size="small" style="margin-right: 5px" v-if="row.status === '99'" @click="openAuditing(row)">审核</Button>
          <Button type="error" size="small" style="margin-right: 5px" v-if="row.status === '1'" @click="openVideoDown(row)">下架</Button>
          <Button type="success" size="small" style="margin-right: 5px" v-else-if="row.status === '0'" @click="videoUp(row)">上架</Button>
        </template>
      </Table>

      <Row type="flex" justify="end" class="mt_10">
        <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>
  </div>
</template>

<script>
import {getVideos, recommendSet, getVideoById, auditingVideo, up, down} from "@/api/video";
import {getVideoTagList} from "@/api/videoTag";
import {getFilePreview} from "@/api/file";
import Editor from '@/components/editor/index.vue'
export default {
  name: "VideoList",
  components: {Editor},
  data() {
    return {
      videoDownForm: {
        id: '',
        reason: ''
      },
      videoDownRule: {
        reason: [
          {
            require: true,
            message: '请输入下架原因',
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (value === null || value === '') {
                callback(new Error('请输入下架原因'));
              } else {
                callback();
              }
            }
          }
        ]
      },
      videoDownShow: false, // 视频下架
      videoDownMsg: '', // 下架提示信息
      auditingForm: { // 审核表单
        id: null,
        result: null,
        reason: ''
      },
      auditingRule: {
        result: [
          {
            required: true,
            message: '请选择视频审核结果',
            trigger: 'change',
            validator: (rule, value, callback) => {
              if (value === null || value === undefined) {
                callback(new Error('请选择视频审核结果'));
              } else {
                callback();
              }
            }
          }
        ],
      },
      detail: {}, // 视频详情信息
      auditingShow: false, // 审核弹窗
      auditingLoading: false, // 审核弹窗
      playVideoShow: false, // 视频播放弹窗
      playVideoTitle: '', // 视频播放标题
      playVideoUrl: '', // 当前正在播放的视频地址
      modelShow: false, // 弹窗显隐
      modelTitle: '', // 弹窗title
      loading: false, // 表单加载状态
      searchForm: {
        // 搜索框初始化对象
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        title: '', // 标题
        tagList: [], // 标签
        status: '99'
      },
      tagList: [], // 标签列表
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: "标题",
          key: "title",
          minWidth: 240,
          tooltip: true,
        },
        {
          title: "作者",
          key: "authorName",
          width: 130,
          tooltip: true,
        },
        {
          title: "视频标签",
          key: "tagList",
          width: 180,
          slot: "tagList",
        },
        {
          title: "视频内容",
          key: "videoFileKey",
          width: 170,
          slot: "videoFileKey"
        },
        {
          title: "播放量",
          key: "playNum",
          width: 80,
          align: 'center'
        },
        {
          title: "收藏数",
          key: "collectNum",
          width: 80,
          align: 'center'
        },
        {
          title: "评论数",
          key: "commentNum",
          width: 80,
          align: 'center'
        },
        {
          title: "首页推荐",
          key: "recommend",
          slot: "recommend",
          width: 100,
          align: 'center'
        },
        {
          title: "权重",
          key: "weight",
          width: 170,
        },
        {
          title: "状态",
          key: "status",
          slot: "status",
          width: 120,
          align: 'center'
        },
        {
          title: "操作",
          key: "action",
          slot: "action",
          align: "center",
          width: 200,
        },
      ],
      data: [], // 表单数据
      total: 0, // 表单数据总数
      selectCount: 0, // 已选数量
      selectList: [], // 已选数据列表
    }
  },
  created() {
    this.getDataList();
    this.getTags('')
  },
  methods: {
    // 获取标签列表
    getTags(tagName) {
      let params = {
        'tagName': tagName
      }
      getVideoTagList(params).then(res => {
        this.tagList = res.data
      })
    },
    // 获取富文本编辑器的内容
    getReason(content) {
      this.videoDownForm.reason = content
    },
    // 视频上架
    videoUp(row) {
      this.$Modal.confirm({
        title: "操作确认",
        content: "您确认要上架视频【 " + row.title + "】吗?",
        loading: true,
        onOk: () => {
          up(row.id).then(res => {
            this.$Modal.remove();
            if (res.code == 200) {
              this.$Message.success("视频上架成功");
              this.getDataList();
            }
          });
        }
      });
    },
    // 视频下架
    videoDown() {
      this.$refs.videoDownForm.validate((valid) => {
        if (valid) {
          down(this.videoDownForm).then(res => {
            this.$Message.success("下架成功")
            this.closeVideoDown()
            this.getDataList()
          })
        }
      })
    },
    // 关闭视频下架
    closeVideoDown() {
      this.videoDownShow = false
      this.videoDownForm = {
        id: '',
        reason: ''
      }
      this.$refs.editor.setContent('')
    },
    // 视频下架
    openVideoDown(row) {
      this.videoDownForm.id = row.id
      this.videoDownShow = true
    },
    // 提交审核结果
    submitAuditing() {
      console.log(this.auditingForm, "sb")
      this.$refs.auditingForm.validate((valid) => {
        if (valid) {
          auditingVideo(this.auditingForm).then(res => {
            this.$Message.success("审核完成")
            this.closeAuditing()
            this.getDataList()
          })
        }
      })
    },
    // 审核结果变化
    resultChange(selected) {
      this.auditingForm.result = selected === '通过' ? 1 : 0
      console.log(this.auditingForm.result)
    },
    closeAuditing() {
      this.auditingForm = {
        id: null,
        result: null,
        reason: ''
      }
      this.detail = {}
      this.auditingShow = false
    },
    // 打开审核弹窗
    openAuditing(row) {
      this.auditingShow = true
      this.auditingLoading = true
      this.auditingForm.id = row.id
      getVideoById(row.id).then(res => {
        this.detail = res.data
        this.auditingLoading = false
      })
    },
    // 翻译状态
    transStatus(status) {
      switch (status) {
        case '99':
          return '待审核'
        case '1':
          return '已发布'
        case '0':
          return '已下架'
        case '-1':
          return '审核未通过'
        default:
          return '未知'
      }
    },
    // 开启或关闭推荐的方法
    handleBeforeChange(row) {
      let content = ""
      if (row.recommend) {
        content = '确认要关闭首页推荐吗？'
      } else {
        content = '确认要开启首页推荐吗？'
      }
      return new Promise((resolve) => {
        this.$Modal.confirm({
          title: '操作提醒',
          content: content,
          onOk: () => {
            recommendSet({id: row.id, recommend: !row.recommend}).then(res => {
              this.$Message.success(res.msg);
              resolve();
            })
          }
        });
      });
    },
    // 关闭视频播放
    playVideoClose() {
      this.playVideoTitle = '';
      this.playVideoUrl = '';
      this.playVideoShow = false
    },
    // 点击播放视频
    playVideo(fileKey, title) {
      this.playVideoTitle = title;

      getFilePreview(fileKey).then(res => {
        this.playVideoUrl = res.data
        this.playVideoShow = true
      })
    },
    // 搜索
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getDataList();
    },
    // 获取列表数据
    getDataList() {
      this.loading = true;
      getVideos(this.searchForm).then((res) => {
        console.log(res)
        this.loading = false;
        if (res.code == 200) {
          this.data = res.data;
          this.total = res.total;
        }
      });
      this.total = this.data.length;
      this.loading = false;
    },
    showSelect(e) {
      this.selectList = e.map(d => d.id);
      this.selectCount = e.length;
    },
    // 排序
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order == "normal") {
        this.searchForm.order = "";
      }
      this.getDataList();
    },
    // 分页 改变页码
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getDataList();
    },
    // 分页 改变页数
    changePageSize(v) {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = v;
      this.getDataList();
    },
  }
}
</script>

<style scoped>
.play-text {
  width: 100%;
  text-align: center;
  color: #2d8cf0;
}
.play-text:hover {
  cursor: pointer;
}
.video-warp {
  width: 786px;
  height: 432px;
}
.data-item {
  display: flex;
  align-items: center;
}
</style>