mediaAll/src/view/allMedia/imageProcessing/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.url"
              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="address" label="操作">
          <template #default="scope">
            <el-button
              size="small"
              v-if="scope.row.statusCode !== 'info'"
              @click="detail(scope.row)"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <br />
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="currentChange"
        :current-page="page_data.page"
        :page-size="page_data.pageSize"
        :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 { storeImg, historyImg } 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 (/^image\//.test(file.type)) return true;
  ElMessage.error('请选择图片文件');
  return false;
}

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

function getList() {
  historyImg({
    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({
    name: 'imageProcessing_detail'
  });
}

function currentChange(page) {
  page_data.value.page = page;
  getList();
}
</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>