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">
        <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">{{ file_name }}</span>
      </div>
    </div>
    <hr />
    <div class="student-download">
      <div class="student-download-title">学生上传：</div>
      <div class="select-file">
        <el-button size="small">选择文件</el-button>
        <span class="tip">支持批量上传，上传格式支持mp3; mp4; jpg; png文件</span>
      </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';

defineProps({
  accessoryList: {
    type: Array,
    required: true
  }
});

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');
  }
}

const showFileVisible = inject('showFileVisible');
</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;

        .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-download {
    &-title {
      padding-bottom: 8px;
      font-weight: bold;
    }

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