spfm-market-front/src/pages/main/iptv/uploadDown.vue

<template>
    <div class="back-box">
        <div v-for="item in infolist" :key="item.id" @click="downcheck(item)">
            <i class="iconfont icon-word" v-if="item.type === 'word'"></i>
            <i class="iconfont icon-excel" v-if="item.type === 'excel'"></i>
            <i class="iconfont icon-ppt" v-if="item.type === 'ppt'"></i>
            <i class="iconfont icon-wenjian" v-if="item.type === 'wenjian'"></i>
            <i class="el-icon-picture" v-if="item.type === 'png'"></i>
            <el-tooltip class="item" effect="dark" :content="item.fileName" placement="right" :enterable="false">
                <span class="tab-long">{{ item.fileName }}</span>
            </el-tooltip>
            <div class="seedown" v-if="datalist.type === 2">
                <a @click="uploaddown(item)">下载</a>
            </div>
        </div>
        <div class="if-box-top" v-if="ifrshow" @keyup.esc="ifrshow = false">
            <i class="el-icon-close" @click="ifrshow = false"></i>
            <iframe height="100%" width="100%" :src="srcsc">
            </iframe>
        </div>
    </div>
</template>
<script>
import getConfig from '../../../config/dev.js'
export default {
    props: ['datalist', 'dialogStatus'],
    data() {
        return {
            infolist: [],
            status: false,
            srcsc: '',
            ifrshow: false,
        }
    },
    methods: {
        downcheck(v) {
            if (this.datalist.type === 1) {
                this.uploaddown(v);
            }
        },
        uploadsee(v) {
            let url = encodeURIComponent(Base64.encode(v.callPath));
            this.srcsc = getConfig().KNOWLEDGE_URL + '/onlinePreview?url=' + url;
            this.ifrshow = true;
            // window.open('http://114.215.71.182:8012/onlinePreview?url=' + url);
        },
        //下载e
        uploaddown(v) {
            let fileData = v;
            this.$http({
                url: this.datalist.url,
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                responseType: "blob",
                data: { "id": fileData.id, "fileName": fileData.fileName },
            }).then((response) => {
                if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                    let blob = new Blob([response.data], {
                        type: 'application/vnd.ms-excel'
                    });
                    window.navigator.msSaveOrOpenBlob(blob, fileData.fileName);
                } else {
                    /* 火狐谷歌的文件下载方式 */
                    var blob = new Blob([response.data])
                    var downloadElement = document.createElement('a')
                    var href = window.URL.createObjectURL(blob);
                    downloadElement.href = href;
                    downloadElement.download = fileData.fileName;
                    document.body.appendChild(downloadElement);
                    downloadElement.click();
                    document.body.removeChild(downloadElement);
                    window.URL.revokeObjectURL(href);
                }
            });
        },
        dataHandle() {
            this.infolist = this.datalist.attList;
            if (this.infolist) {
                for (let i = 0; i < this.infolist.length; i++) {
                    let f = this.infolist[i].fileName.split(".");
                    let type = f[f.length - 1];
                    if (type === 'doc' || type === 'docx') {
                        this.infolist[i].type = 'word';
                    } else if (type === 'ppt') {
                        this.infolist[i].type = 'ppt';
                    } else if (type === 'xlsx' || type === 'xls') {
                        this.infolist[i].type = 'excel';
                    } else if (type === 'png' || type === 'jpg' || type === 'svg' || type === 'gif' || type === 'psd') {
                        this.infolist[i].type = 'png';
                    } else {
                        this.infolist[i].type = 'wenjian';
                    }
                }
            }
        }
    },
    mounted() {

    },
    created() {
        this.dataHandle();
    },
    watch: {
        dialogStatus() {
            this.$forceUpdate()
            let _this = this;
            _this.dataHandle();
        }
    }
}
</script>
<style scoped lang="scss">
.if-box-top {
    background: #fff;
    width: 80vw;
    height: 80vh;
    margin-top: 10vh;
    margin-left: 10vw;
}

.iconfont {
    font-size: 42px;
}

.icon-excel {
    color: #67DB63;
}

.icon-word {
    color: #FF654E;
}

.icon-ppt {
    color: #FF8943;
}

.icon-wenjian {
    color: #ccc;
}

.el-icon-picture {
    font-size: 36px;
    color: #ccc;
    background: #fff;
    padding: 4px 2px;
    margin-bottom: 2px;
    border-radius: 3px;
}

.back-box {
    margin-top: 20px;
    background: #F2F2F2;
    padding: 20px;

    div {
        display: inline-block;
        text-align: center;
        margin-right: 20px;
        cursor: pointer;

        span {
            display: block;
            width: 80px;
            overflow: hidden;
            padding-top: 5px;
            margin: 0 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            /* 将对象作为弹性伸缩盒子模型显示 */
            -webkit-line-clamp: 1;
            /* 控制最多显示几行 */
            -webkit-box-orient: vertical;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
        }
    }

    .seedown {
        margin: 0;
        margin-top: 5px;

        a {
            font-size: 12px;
            padding: 2px 5px;
            border: 1px solid transparent;
            color: #999;
        }

        a:hover {
            color: #0b82ff;
        }
    }
}
</style>