GCLS_Page_Learn/src/views/new_task_view/components/common/FileView.vue

<template>
  <div class="preview-file">
    <div class="preview-file-header">
      <div class="type-list">
        <div
          v-for="{ type, name } in fileTypeList"
          :key="type"
          :class="['type-item', { active: type === curFileType }]"
          @click="changeFileType(type)"
        >
          {{ name }}
        </div>
      </div>
      <div class="file-download" @click="allDownload">
        <svg-icon icon-class="course-download" />
        全部下载
      </div>
    </div>
    <div class="preview-file-content">
      <div
        v-for="{ file_id, file_name } in accessoryList"
        v-show="curFileType === fileTypeList[0].type || curFileFormat.includes(getFileType(file_name))"
        :key="file_id"
        class="file-item"
      >
        <div class="file-item-image">
          <div class="file-operation">
            <svg-icon icon-class="course-preview" @click="showFileVisible(file_name, file_id)" />
            <span class="vertical-bar"></span>
            <svg-icon icon-class="course-download" @click="downloadFileUrl(file_id, file_name)" />
          </div>
          <img :src="getFileImage(getFileType(file_name))" />
        </div>
        <span class="nowrap-ellipsis" :title="file_name">{{ file_name }}</span>
      </div>
    </div>
    <hr />
    <div class="student-download">
      <div class="student-download-title">学生上传：</div>
      <template v-if="!isTeacher">
        <div class="select-file">
          <el-upload action="no" :http-request="uploadHomework" multiple :show-file-list="false">
            <el-button size="small">选择文件</el-button>
          </el-upload>
          <span class="tip">支持批量上传，上传格式支持mp3; mp4; jpg; png文件</span>
        </div>
      </template>
      <div class="preview-file-content">
        <div
          v-for="{ file_id, file_name } in homeworkList"
          v-show="curFileType === fileTypeList[0].type || curFileFormat.includes(getFileType(file_name))"
          :key="file_id"
          class="file-item"
        >
          <div class="file-item-image">
            <div class="file-operation student">
              <svg-icon icon-class="course-preview" @click="showFileVisible(file_name, file_id)" />
              <span class="vertical-bar"></span>
              <svg-icon icon-class="course-download" @click="downloadFileUrl(file_id, file_name)" />
              <span class="vertical-bar"></span>
              <svg-icon icon-class="delete-current" @click="deleteHomework(file_id)" />
            </div>
            <img :src="getFileImage(getFileType(file_name))" />
          </div>
          <span class="nowrap-ellipsis" :title="file_name">{{ file_name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PreviewFile'
};
</script>

<script setup>
import { computed, inject, ref } from 'vue';
import { allowFormat, documentFormat, pictureFormat, videoFormat, audioFormat, compressFormat } from '@/utils/file.js';
import { getFileType } from '@/utils/filter';
import { downloadFileUrl } from '@/utils/common';
import { isAllowFileType, fileTypeSizeLimit } from '@/utils/validate';
import { Message } from 'element-ui';
import { fileUpload } from '@/api/app';

const props = defineProps({
  accessoryList: {
    type: Array,
    required: true
  },
  homeworkList: {
    type: Array,
    required: true
  },
  addHomework: {
    type: Function,
    default: () => {}
  },
  deleteHomework: {
    type: Function,
    default: () => {}
  }
});

const fileTypeList = [
  {
    name: '全部',
    type: 'all',
    format: allowFormat
  },
  {
    name: '文档',
    type: 'document',
    format: documentFormat
  },
  {
    name: '图片',
    type: 'image',
    format: pictureFormat
  },
  {
    name: '视频',
    type: 'video',
    format: videoFormat
  },
  {
    name: '音频',
    type: 'audio',
    format: audioFormat
  },
  {
    name: '压缩包',
    type: 'compress',
    format: compressFormat
  }
];

let curFileType = ref(fileTypeList[0].type);
let curFileFormat = computed((newVal) => {
  return fileTypeList.find(({ type }) => curFileType.value === type).format;
});

function changeFileType(type) {
  curFileType.value = type;
}

function getFileImage(type) {
  if (type === 'txt') {
    return require('@/assets/file/txt.png');
  }
  if (type === 'pdf') {
    return require('@/assets/file/pdf.png');
  }
  if (/^xlsx?$/.test(type)) {
    return require('@/assets/file/execl.png');
  }
  if (/^pptx?$/.test(type)) {
    return require('@/assets/file/ppt.png');
  }
  if (/^docx?$/.test(type)) {
    return require('@/assets/file/word.png');
  }
  return require('@/assets/file/base.png');
}

const showFileVisible = inject('showFileVisible');
const isTeacher = inject('isTeacher');
const $t = inject('$t');

// 全部下载
function allDownload() {
  props.accessoryList.forEach(({ file_id, file_name }) => {
    downloadFileUrl(file_id, file_name);
  });
}

/**
 *  提交作业
 * @param {Object} file
 */
function uploadHomework(file) {
  const fileName = file.file.name;
  if (!isAllowFileType(fileName)) {
    Message.error(`【${fileName}】${$t('Key335')}`);
    return;
  }

  if (fileTypeSizeLimit(file.file.name, file.file.size)) {
    return Message.error(`${fileName}文件大小超出限制`);
  }

  fileUpload('Mid', file).then(({ file_info_list }) => {
    if (file_info_list.length > 0) {
      const { file_id, file_name, file_url } = file_info_list[0];
      props.addHomework({ file_id, file_name, file_url });
    }
  });
}
</script>

<style lang="scss" scoped>
.preview-file {
  &-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px dashed $border-color;

    .type-list {
      display: flex;
      column-gap: 40px;

      .type-item {
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;

        &.active {
          color: #1890ff;
        }
      }
    }

    .file-download {
      color: #979797;
      cursor: pointer;
    }
  }

  &-content {
    display: flex;
    flex-wrap: wrap;
    row-gap: 16px;
    column-gap: 8px;
    padding-top: 16px;

    .file-item {
      display: flex;
      flex-direction: column;
      row-gap: 8px;
      width: 112px;
      height: 142px;

      &-image {
        position: relative;
        width: 112px;
        height: 112px;
        cursor: pointer;
        border: 1px solid #ccc;

        .file-operation {
          position: absolute;
          top: 0;
          left: 0;
          display: none;
          width: 100%;
          height: 100%;
          color: #fff;
          background-color: rgba(0, 0, 0, 60%);
          border-radius: 3px;

          .svg-icon {
            width: 16px;
            height: 16px;
          }

          .vertical-bar {
            width: 1px;
            height: 16px;
            background-color: #fff;
          }
        }

        &:hover .file-operation {
          display: flex;
          column-gap: 16px;
          align-items: center;
          justify-content: center;

          &.student {
            column-gap: 8px;
          }
        }
      }
    }
  }

  .student-download {
    &-title {
      padding-bottom: 8px;
      font-weight: bold;
    }

    .select-file {
      display: flex;
      column-gap: 24px;
      align-items: center;
    }
  }
}
</style>