mediaAll/src/view/allMedia/videoProcessing/index.vue

<template>
  <div>
    <header_local />
    <div class="main">
      <el-row class="head">
        <el-col :span="12"> 视频审核 </el-col>
        <el-col style="text-align: right" :span="12">
          <el-input
            v-model="page_data.title"
            placeholder="请输入文件名"
            style="width: 250px; margin-right: 5px"
          >
            <template #append>
              <el-button type="primary" @click="getList"> 检索 </el-button>
            </template>
          </el-input>
          <el-button
            type="primary"
            :icon="UploadFilled"
            @click="dialogVisible = true"
          >
            上传审核内容
          </el-button>
        </el-col>
      </el-row>

      <el-table :data="tableData">
        <el-table-column align="center" type="index" width="50" />
        <el-table-column align="center" prop="name" label="封面">
          <template #default="scope">
            <el-image
              style="width: 40px; height: 40px; border-radius: 5px"
              :src="scope.row.cover"
              fit="cover"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="title" label="标题">
        </el-table-column>
        <el-table-column
          align="center"
          prop="createTime"
          label="上传时间"
        ></el-table-column>
        <el-table-column align="center" prop="statusCode" label="审核状态">
          <template #default="scope">
            <el-tag :type="scope.row.statusCode">{{
              scope.row.statusDesc
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="statusCode" label="审核结果">
          <template #default="scope">
            {{ scope.row.reviewResult ? scope.row.reviewResult.labelDesc : '-' }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="address" label="操作">
          <template #default="scope">
            <el-button
              size="small"
              v-if="scope.row.statusCode == 'success'"
              @click="detail(scope.row)"
            >
              查看详情
            </el-button>
            <el-popconfirm
              title="确定要删除该文件吗?"
              @confirm="deleteRow(scope.row)"
            >
              <template #reference>
                <el-button size="small" type="danger"> 删除 </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <br />
      <el-pagination
        background
        @current-change="currentChange"
        :current-page="page_data.page"
        :page-size="page_data.pageSize"
        layout="prev, pager, next"
        :total="page_data.total"
      />

      <el-dialog v-model="dialogVisible" title="选择文件">
        <div>文件名称</div>
        <br />
        <el-input v-model="input" placeholder="请输入文件名称" clearable />
        <br />
        <br />
        <el-upload
          v-model:file-list="fileList"
          class="upload-demo"
          ref="upload_ele"
          :on-error="upError"
          :limit="1"
          :on-exceed="handleExceed"
          :headers="{ Authorization }"
          :on-progress="upProgress"
          :before-upload="upload"
          :action="config.base.videoProcessing + '/review/img/upload'"
        >
          <el-button type="primary" :icon="UploadFilled"> 选择文件 </el-button>
        </el-upload>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="submit"> 提交 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import header_local from '../components/header.vue';
import { UploadFilled } from '@element-plus/icons-vue';
import { ElMessage, genFileId } from 'element-plus';
import { storeVideo, historyVideo, deleteRowVideo } from '@/api/processing';
import { ref } from 'vue';
import config from '../../../config/index';
import { useRouter } from 'vue-router';
const route = useRouter();

const Authorization = localStorage.getItem('token') || '';

const dialogVisible = ref(false);
const upload_ele = ref(null);
const fileList = ref([]);
const input = ref('');
const page_data = ref({
  page: 1,
  pageSize: 10,
  title: '',
  total: 0
});
const tableData = ref([]);
getList();

function upProgress(par) {
  // 上传进度
  console.log(par);
}

function handleExceed(files) {
  upload_ele.value.clearFiles();
  const file = files[0];
  file.uid = genFileId();
  upload_ele.value.handleStart(file);
  upload_ele.value.submit();
}

function upError() {
  ElMessage.error('请稍后重新选择文件！');
}

function upload(file) {
  if (/^video\//.test(file.type)) return true;
  ElMessage.error('请选择视频文件');
  return false;
}

function submit() {
  if (!fileList.value[0]) return ElMessage.error('请选择视频文件');
  storeVideo({
    data: {
      title: input.value || '',
      url: fileList.value[0].response.data.url
    }
  })
    .then(r => {
      dialogVisible.value = false;
      input.value = '';
      getList();
    })
    .catch(e => {
      dialogVisible.value = false;
      input.value = '';
    });
}

function getList() {
  historyVideo({
    data: page_data.value
  }).then(r => {
    tableData.value = (r.records || []).map(v => {
      return {
        ...v,
        createTime: v.createTime.replace('T', ' ')
      };
    });
    page_data.value.total = r.total;
  });
}

function detail(row) {
  sessionStorage.setItem('Processing_detail', JSON.stringify(row));
  route.push({
    path: '/main_home/videoProcessing_detail',
    params: {
      item: JSON.stringify(row)
    }
  });
}

function currentChange(page) {
  page_data.value.page = page;
  getList();
}

function deleteRow(row) {
  deleteRowVideo({ id: row.id }).then(r => {
    getList();
    ElMessage.success('删除成功');
  });
}
</script>

<style>
.main {
  padding: 1em;
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
}

.main .head {
  background: #f9fafc;
  height: 42px;
  line-height: 42px;
  padding: 0 22px;
}
</style>