bigDataStudent/src/views/analysisReport/wrongQuestion/Download.vue

<template>
    <el-dialog title="个性化提升手册" class="mm_dialog" :visible="visible" width="360px" @close="handleClose">
        <div class="box">
            <div class="item" :class="{ isAnswer: isAnswer === 1 }" @click="isAnswer = 1">
                有答案解析
                <i class="iconfont icon_Check" v-if="isAnswer === 1"></i>
            </div>
            <div class="item" :class="{ isAnswer: isAnswer === 0 }" @click="isAnswer = 0">
                无答案解析
                <i class="iconfont icon_Check" v-if="isAnswer === 0"></i>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="download">下载</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { downloadStudentErrorQuestion } from '../../../http/api/errorQuestion';
import { ExtractFilename, DownloadFile, CreateLoadingInstance } from './tools'

export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        examId: {
            type: [String, Number],
            required: true
        },
        subjectCode: {
            type: [String, Number],
            required: true
        }
    },

    data() {
        return {
            isAnswer: 1
        };
    },

    methods: {
        handleClose() {
            this.$emit('update:visible', false);
        },

        download() {
            const loadingInstance = CreateLoadingInstance()
            downloadStudentErrorQuestion({
                examId: this.examId,
                subjectCode: this.subjectCode,
                isAnswer: this.isAnswer
            }).then(response => {
                const blob2 = new Blob([response.data], {
                    type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
                });

                const contentDisposition = response.headers['content-disposition'];
                const fileName = ExtractFilename(contentDisposition)
                DownloadFile(blob2, fileName)
            }).catch(error => {
                this.$message.error('下载失败，请稍后重试');
            }).finally(() => {
                loadingInstance.close();
            });
        }
    }
};
</script>

<style scoped lang="scss">
.box {
    display: flex;
    justify-content: space-between;

    .item {
        width: 150px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 14px;
        color: #909399;
        background: #EDEFF6;
        border-radius: 4px;
        cursor: pointer;

        &.isAnswer {
            color: #2B65FF;
            background: #fff;
            border: 2px solid #2B65FF;
            box-shadow: 0 2px 6px rgba(43, 101, 255, 0.12);
            position: relative;

            /* 右下角的蓝色三角与对勾 */
            &::after {
                content: '';
                position: absolute;
                right: 0;
                bottom: 0;
                border: 12px solid #2B65FF;
                border-top-color: transparent;
                border-left-color: transparent;
            }

            .iconfont {
                position: absolute;
                right: 0;
                bottom: -18px;
                font-size: 16px;
                color: #ffffff;
                z-index: 1;
            }
        }
    }
}
</style>