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">
        <div class="my_dialog_itemHeader">媒体文件</div>
        <div style="width: 100%;padding-top: 10px; margin-bottom: 10px;">
            <div v-for="itemFile in fileList" class="item-file-wrapper">
                <img v-if="isImageFile(itemFile.suffix)" :src="itemFile.fileUrl" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'doc' || itemFile.suffix == 'docx'" :src="iconDoc"
                    class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'xls' || itemFile.suffix == 'xlsx'" :src="iconXls"
                    class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'ppt' || itemFile.suffix == 'pptx'" :src="iconPpt"
                    class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'zip'" :src="iconZip" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'pdf'" :src="iconPdf" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'mp3'" :src="iconVideo" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'mp4'" :src="iconMove" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'txt'" :src="iconTxt" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else :src="iconOther" class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
                <div class="filesName">{{ itemFile.fileName }}</div>
            </div>
        </div>
        <div class="my_dialog_itemHeader">媒体图片</div>
        <div style="width: 100%;padding-top: 10px; margin-bottom: 10px;">
            <div v-for="itemFile in fileList" class="item-file-wrapper">
                <img v-if="isImageFile(itemFile.suffix)" :src="itemFile.fileUrl" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'doc' || itemFile.suffix == 'docx'" :src="iconDoc"
                    class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'xls' || itemFile.suffix == 'xlsx'" :src="iconXls"
                    class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'ppt' || itemFile.suffix == 'pptx'" :src="iconPpt"
                    class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'zip'" :src="iconZip" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'pdf'" :src="iconPdf" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'mp3'" :src="iconVideo" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'mp4'" :src="iconMove" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'txt'" :src="iconTxt" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else :src="iconOther" class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
                <div class="filesName">{{ itemFile.fileName }}</div>
            </div>
        </div>

        <div class="my_dialog_itemHeader">媒体视频</div>
        <div style="width: 100%;padding-top: 10px; margin-bottom: 10px;">
            <div v-for="itemFile in fileList" class="item-file-wrapper">
                <img v-if="isImageFile(itemFile.suffix)" :src="itemFile.fileUrl" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'doc' || itemFile.suffix == 'docx'" :src="iconDoc"
                    class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'xls' || itemFile.suffix == 'xlsx'" :src="iconXls"
                    class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'ppt' || itemFile.suffix == 'pptx'" :src="iconPpt"
                    class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'zip'" :src="iconZip" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'pdf'" :src="iconPdf" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'mp3'" :src="iconVideo" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'mp4'" :src="iconMove" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'txt'" :src="iconTxt" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else :src="iconOther" class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
                <div class="filesName">{{ itemFile.fileName }}</div>
            </div>
        </div>

        <div class="my_dialog_itemHeader">刊例照片</div>
        <div style="width: 100%;padding-top: 10px; margin-bottom: 10px;">
            <div v-for="itemFile in fileList" class="item-file-wrapper">
                <img v-if="isImageFile(itemFile.suffix)" :src="itemFile.fileUrl" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'doc' || itemFile.suffix == 'docx'" :src="iconDoc"
                    class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'xls' || itemFile.suffix == 'xlsx'" :src="iconXls"
                    class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'ppt' || itemFile.suffix == 'pptx'" :src="iconPpt"
                    class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'zip'" :src="iconZip" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'pdf'" :src="iconPdf" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'mp3'" :src="iconVideo" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'mp4'" :src="iconMove" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'txt'" :src="iconTxt" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else :src="iconOther" class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
                <div class="filesName">{{ itemFile.fileName }}</div>
            </div>
        </div>

        <div class="my_dialog_itemHeader">媒体链条</div>
        <div style="width: 100%;padding-top: 10px; margin-bottom: 10px;">
            <div v-for="itemFile in fileList" class="item-file-wrapper">
                <img v-if="isImageFile(itemFile.suffix)" :src="itemFile.fileUrl" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'doc' || itemFile.suffix == 'docx'" :src="iconDoc"
                    class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'xls' || itemFile.suffix == 'xlsx'" :src="iconXls"
                    class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'ppt' || itemFile.suffix == 'pptx'" :src="iconPpt"
                    class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'zip'" :src="iconZip" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'pdf'" :src="iconPdf" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'mp3'" :src="iconVideo" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'mp4'" :src="iconMove" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'txt'" :src="iconTxt" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else :src="iconOther" class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
                <div class="filesName">{{ itemFile.fileName }}</div>
            </div>
        </div>

        <div class="my_dialog_itemHeader">资质文件</div>
        <div style="width: 100%;padding-top: 10px; margin-bottom: 10px;">
            <div v-for="itemFile in fileList" class="item-file-wrapper">
                <img v-if="isImageFile(itemFile.suffix)" :src="itemFile.fileUrl" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'doc' || itemFile.suffix == 'docx'" :src="iconDoc"
                    class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'xls' || itemFile.suffix == 'xlsx'" :src="iconXls"
                    class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'ppt' || itemFile.suffix == 'pptx'" :src="iconPpt"
                    class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'zip'" :src="iconZip" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'pdf'" :src="iconPdf" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'mp3'" :src="iconVideo" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'mp4'" :src="iconMove" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'txt'" :src="iconTxt" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else :src="iconOther" class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
                <div class="filesName">{{ itemFile.fileName }}</div>
            </div>
        </div>

        <div class="my_dialog_itemHeader">盖章刊例</div>
        <div style="width: 100%;padding-top: 10px; margin-bottom: 10px;">
            <div v-for="itemFile in fileList" class="item-file-wrapper">
                <img v-if="isImageFile(itemFile.suffix)" :src="itemFile.fileUrl" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'doc' || itemFile.suffix == 'docx'" :src="iconDoc"
                    class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'xls' || itemFile.suffix == 'xlsx'" :src="iconXls"
                    class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'ppt' || itemFile.suffix == 'pptx'" :src="iconPpt"
                    class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'zip'" :src="iconZip" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'pdf'" :src="iconPdf" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'mp3'" :src="iconVideo" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'mp4'" :src="iconMove" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else-if="itemFile.suffix == 'txt'" :src="iconTxt" class="avatar iconFile"
                    @click.stop="handleDownFile(itemFile)" />
                <img v-else :src="iconOther" class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
                <div class="filesName">{{ itemFile.fileName }}</div>
            </div>
        </div>
        <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, defineEmits, 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'


const downFileOpen = ref(false)
const fileList = ref([
    { type: 1, fileName: 'XXXXX文档', suffix: 'doc' },
    { type: 1, fileName: 'XXXXX文件', suffix: 'doc' },
    { type: 1, fileName: 'XXXXX文件', suffix: 'doc' },
    { type: 1, fileName: 'XXXXX文件', suffix: 'doc' },
    { type: 1, fileName: 'XXXXX文档', suffix: 'doc' },
    { type: 1, fileName: 'XXXXX文件', suffix: 'doc' },
    { type: 1, fileName: 'XXXXX文件', suffix: 'doc' },
    { type: 1, fileName: 'XXXXX文件', suffix: 'doc' },
    { type: 1, fileName: 'XXXXX文档', suffix: 'doc' },
    { type: 1, fileName: 'XXXXX文件', suffix: 'doc' },
    { type: 1, fileName: 'XXXXX文件', suffix: 'doc' },
    { type: 1, fileName: 'XXXXX文件', suffix: 'doc' }
])
// 判断是否为图片文件
const isImageFile = (suffix) => {
    console.log('是否图片', suffix, ['jpeg', 'jpg', 'png'].includes(suffix.toLowerCase()))
    return ['jpeg', 'jpg', 'png'].includes(suffix.toLowerCase())
}
const handleDownFile = () => {

}
const handleDownAllFile = () => {

}
const getList = () => {

}

// 暴露方法\属性给父组件
defineExpose({
    downFileOpen,
    getList
});
</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>