irc_web/src/views/system/email/components/detail.vue

<template>
    <div class="detail">
        <div class="attachment" v-if="Array.isArray(info.AttachmentList) && info.AttachmentList.length > 0">
            <div class="box" v-for="item of info.AttachmentList" :key="item.AttachmentPath" @click="perview(item)">
                <i :class="`icon icon_file icon_${item.type}`" />
                <span>{{ item.AttachmentName }}</span>
            </div>
            <span class="downLoadTip" @click="downloadFile">{{ $t('system:email:tip:allDownLoad') }}</span>
        </div>
        <div class="content" v-html="info.Content"></div>
        <viewer ref="picture_perview" style="margin: 0 10px"
            v-if="rowData.type && ['png', 'jpg', 'jpeg'].includes(rowData.type.toLowerCase())"
            :images="[`${OSSclientConfig.basePath}${rowData.AttachmentPath}`]" :options="viewerOptions">

            <img v-show="false" :src="`${OSSclientConfig.basePath}${rowData.AttachmentPath}`" alt="Image" />
        </viewer>
    </div>
</template>
<script>
import { downLoadFile } from '@/utils/stream.js'
export default {
    name: "emailDetail",
    props: {
        info: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            rowData: {},
            viewerOptions: {
                toolbar: {
                    zoomIn: true,
                    zoomOut: true,
                    reset: true,
                    prev: false,
                    next: false,
                    rotateLeft: true,
                    rotateRight: true,
                    flipHorizontal: true,
                    flipVertical: true,
                }
            }
        }
    },
    methods: {
        //预览
        perview(data) {
            this.rowData = data
            if (['.ppt',
                '.pptx',
                '.doc',
                '.docx',
                '.xls',
                '.xlsx'].includes(`.${data.type.toLowerCase()}`)) {
                this.$onlyOffice({
                    path: data.AttachmentPath,
                    type: data.type,
                    title: data.AttachmentName
                })
            }
            if (['.jpg',
                '.jpeg',
                '.png'].includes(`.${data.type.toLowerCase()}`)) {
                this.$refs['picture_perview'].$viewer.show()
            }
            if (['.pdf'].includes(`.${data.type.toLowerCase()}`)) {
                this.$preview({
                    path: data.Path || data.AttachmentPath,
                    type: 'pdf',
                    title: data.AttachmentName,
                })
            }
        },
        async downloadFile() {
            try {
                let { files, name } = this.formatDownloadFile(this.info.AttachmentList)
                let res = await downLoadFile(files, name, 'zip')
            } catch (err) {
                console.log(err)
            }
        },
        // 格式化下载文件路径
        formatDownloadFile(list) {
            let files = [],
                name = `Attachment_${new Date().getTime()}.zip`
            list.forEach(item => {
                let obj = {
                    name: item.AttachmentName,
                    url: this.OSSclientConfig.basePath + item.AttachmentPath,
                }
                files.push(obj)
            })
            return { files, name }
        },
    }
}
</script>
<style lang="scss" scoped>
.attachment {
    border-bottom: 1px solid #EBEEF5;
    padding: 10px 0 0 0;
    display: flex;

    .box {
        padding: 5px 10px;
        display: flex;
        align-items: center;
        max-width: 400px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        border-radius: 5px;
        background-color: #E4E7ED;
        cursor: pointer;
        margin-right: 10px;
        margin-bottom: 10px;

        i {
            margin-right: 5px;
        }
    }

    .downLoadTip {
        cursor: pointer;
        font-size: 14px;
        color: #409EFF;
    }
}

.content {
    width: 100%;
    overflow: hidden;
}

.icon {
    height: 20px;
    width: 20px;
    padding: 0px;
    line-height: 20px;
    margin-right: 6px;
    margin-top: 6px;
}

/*文件*/
.icon_file {
    width: 16px !important;
    height: 16px !important;
    margin-right: 6px;
    background-size: inherit;
    background-image: url(@/assets/0.file-16.png);
    background-position: 0 0;
    margin-top: -2px;
    background-repeat: no-repeat;
    font-style: normal;
    display: inline-block;
    pointer-events: none;
    font-size: 85%;
}

/*文件夹*/
.icon_folder {
    background-image: url(@/assets/folder_win11_small.png);
    margin-top: -6px;
    margin-left: 2px;
    margin-right: 6px;
    background-repeat: no-repeat;
}

/*docx*/
.icon_docx {
    background-position: -81px -560px !important;
    margin-top: 0;
    margin-left: 2px;
}

/*doc*/
.icon_doc {
    background-position: -81px -592px !important;
    margin-top: 0;
    margin-left: 2px;
}

/*xlsx*/
.icon_xlsx {
    background-position: -81px -48px !important;
    margin-top: 0;
    margin-left: 2px;
}

/*pdf*/
.icon_pdf {
    background-position: -81px -352px !important;
    margin-top: 0;
    margin-left: 2px;
}

/*pptx*/
.icon_pptx {
    background-position: -81px -288px !important;
    margin-top: 0;
    margin-left: 2px;
}

/*zip*/
.icon_zip {
    background-position: 0 0 !important;
    margin-top: -2px;
    margin-left: 2px;
}

/*ppt*/
.icon_ppt {
    background-position: -81px -304px !important;
    margin-top: 0;
    margin-left: 2px;
}

/*xls*/
.icon_xls {
    background-position: -81px -96px !important;
    margin-top: 0;
    margin-left: 2px;
}
</style>