YouKeChuanMei_VUE/src/views/mediaLibrary/downFiles.vue

<template>
    <!-- 文件下载对话框 -->
    <el-dialog title="下载" v-model="downFileOpen" width="850px" class="my_dialog" align-center :destroy-on-close="true"
        :close-on-click-modal="false">
        <template v-for="itemType in fileTypeArr">
            <template v-if="itemType.typeFileList.length > 0">
                <div class="my_dialog_itemHeader">{{ itemType.fileTypeName }}</div>
                <div style="width: 100%;padding-top: 10px; margin-bottom: 10px;">
                    <div v-for="itemFile in itemType.typeFileList" class="item-file-wrapper">
                        <img v-if="isImageFile(itemFile.suffix)" :src="itemFile.fileUrl" class="avatar iconFile"
                            @click.stop="handleDownFile(itemFile.fileUrl, itemFile.originalFileName)" />
                        <img v-else-if="itemFile.suffix == 'doc' || itemFile.suffix == 'docx'" :src="iconDoc"
                            class="avatar iconFile"
                            @click.stop="handleDownFile(itemFile.fileUrl, itemFile.originalFileName)" />
                        <img v-else-if="itemFile.suffix == 'xls' || itemFile.suffix == 'xlsx'" :src="iconXls"
                            class="avatar iconFile"
                            @click.stop="handleDownFile(itemFile.fileUrl, itemFile.originalFileName)" />
                        <img v-else-if="itemFile.suffix == 'ppt' || itemFile.suffix == 'pptx'" :src="iconPpt"
                            class="avatar iconFile"
                            @click.stop="handleDownFile(itemFile.fileUrl, itemFile.originalFileName)" />
                        <img v-else-if="itemFile.suffix == 'zip'" :src="iconZip" class="avatar iconFile"
                            @click.stop="handleDownFile(itemFile.fileUrl, itemFile.originalFileName)" />
                        <img v-else-if="itemFile.suffix == 'pdf'" :src="iconPdf" class="avatar iconFile"
                            @click.stop="handleDownFile(itemFile.fileUrl, itemFile.originalFileName)" />
                        <img v-else-if="itemFile.suffix == 'mp3'" :src="iconVideo" class="avatar iconFile"
                            @click.stop="handleDownFile(itemFile.fileUrl, itemFile.originalFileName)" />
                        <img v-else-if="itemFile.suffix == 'mp4'" :src="iconMove" class="avatar iconFile"
                            @click.stop="handleDownFile(itemFile.fileUrl, itemFile.originalFileName)" />
                        <img v-else-if="itemFile.suffix == 'txt'" :src="iconTxt" class="avatar iconFile"
                            @click.stop="handleDownFile(itemFile.fileUrl, itemFile.originalFileName)" />
                        <img v-else :src="iconOther" class="avatar iconFile"
                            @click.stop="handleDownFile(itemFile.fileUrl, itemFile.originalFileName)" />
                        <div class="filesName">{{ itemFile.originalFileName }}</div>
                    </div>
                </div>
            </template>
        </template>
        <template #footer>
            <div class="dialog-footer">
                <el-button class="my-downAllFile-btn" type="primary" @click="handleDownAllFile">下载所有文件</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { onMounted, defineExpose, nextTick, ref } from 'vue'
import iconDoc from '@/assets/images/iconDoc.png'
import iconOther from '@/assets/images/iconOther.png'
import iconPdf from '@/assets/images/iconPdf.png'
import iconVideo from '@/assets/images/iconVideo.png'
import iconXls from '@/assets/images/iconXls.png'
import iconZip from '@/assets/images/iconZip.png'
import iconMove from '@/assets/images/iconMove.png'
import iconTxt from '@/assets/images/iconTxt.png'
import iconPpt from '@/assets/images/iconPpt.png'
import { mediaFiles } from "@/api/mediaLibrary"
import { downFile } from "@/api/common"
import { addBusDownloadRecord } from "@/api/mediaDownRecord"

const { proxy } = getCurrentInstance()
const emit = defineEmits(['downBack']);
const downFileOpen = ref(false)
// 全量媒体文件列表
const allFileList = ref([])
// 批文文件-1,独家授权文件-2,媒体行业授权文件-3,媒体归属附件-4,曾经媒体照片-5,图片上传-6,视频上传-7,盖章刊例-8, 资质文件-9, 媒体链条-10, 刊例照片-11,MR和制作要求-12
const fileTypeArr = ref([
    { fileType: 1, fileTypeName: '批文文件', typeFileList: [] },
    { fileType: 2, fileTypeName: '独家授权文件', typeFileList: [] },
    { fileType: 3, fileTypeName: '媒体行业授权文件', typeFileList: [] },
    { fileType: 4, fileTypeName: '媒体归属附件', typeFileList: [] },
    { fileType: 5, fileTypeName: '曾经媒体照片', typeFileList: [] },
    { fileType: 6, fileTypeName: '媒体图片', typeFileList: [] },
    { fileType: 7, fileTypeName: '媒体视频', typeFileList: [] },
    { fileType: 8, fileTypeName: '盖章刊例', typeFileList: [] },
    { fileType: 9, fileTypeName: '资质文件', typeFileList: [] },
    { fileType: 10, fileTypeName: '媒体链条', typeFileList: [] },
    { fileType: 11, fileTypeName: '刊例照片', typeFileList: [] },
    { fileType: 12, fileTypeName: 'MR和制作要求', typeFileList: [] }
])

const downloadRecords = ref([])

// 判断是否为图片文件
const isImageFile = (suffix) => {
    return ['jpeg', 'jpg', 'png'].includes(suffix.toLowerCase())
}
// 单个文件下载
const handleDownFile = (fileUrl, downLoadName) => {
    downFile(fileUrl).then(res => {
        // 通过a标签打开新页面下载文件
        const a = document.createElement('a')
        a.href = URL.createObjectURL(res)
        // a标签里有download属性可以自定义文件名
        a.setAttribute('download', downLoadName)
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
    })
}
// 多文件下载
const handleDownAllFile = () => {
    allFileList.value.forEach(item => {
        downloadRecords.value.push({ filePath: item.fileUrl, fileName: item.originalFileName, state: 0 })
    })
    if (downloadRecords.value.length > 0) {
        addBusDownloadRecord({ downloadRecordList: downloadRecords.value }).then(res => {
            if (res.code == 200) {
                downloadRecords.value = []
                emit('downBack')
                downFileOpen.value = false
            }
        })
    }
}
// 按类型获取媒体文件列表
const getMediaFileList = (_mediaId, itemFileType) => {
    mediaFiles({ mediaId: _mediaId, fileType: itemFileType.fileType }).then(res => {
        if (res.code == 200) {
            itemFileType.typeFileList = res.data
            allFileList.value = allFileList.value.concat(res.data)
        }
    })
}
// 对外暴漏方法
const initFileList = (_open, _mediaId) => {
    downFileOpen.value = true
    allFileList.value = []
    nextTick(() => {
        fileTypeArr.value.forEach(item => {
            getMediaFileList(_mediaId, item)
        });
    })
}

// 暴露方法\属性给父组件
defineExpose({
    initFileList
});
</script>
<style lang='scss'>
.my_dialog_itemHeader {
    width: 100%;
    height: 36px;
    background: #1a75e630;
    padding: 6px 20px;
    font-family: Microsoft YaHei;
    font-weight: 600;
    font-size: 18px;
    color: #000000;
}

.item-file-wrapper {
    width: 120px;
    height: 80px;
    margin: 20px 10px;
    overflow: hidden;
    display: inline-block;
    text-align: center;
    cursor: pointer;
}

.iconFile {
    width: 44px;
    height: 54px;
}

.filesName {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>