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>
    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 = 'http://10.230.15.228:8012/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>