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

<template>
    <el-dialog title="个性化提升手册" :visible="visible" width="530px" @abort="handleClose">
        <div class="box">
            <div class="item" :class="{ active: active === 1 }" @click="changeAnswer(1)">答案解析在每题后</div>
            <div class="item" :class="{ active: active === 2 }" @click="changeAnswer(2)">答案解析在尾部</div>
            <div class="item" :class="{ active: active === 0 }" @click="changeAnswer(0)">无答案解析</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 {
            active: 1
        };
    },

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

        changeAnswer(value) {
            this.active = value;
        },

        download() {
            const loadingInstance = CreateLoadingInstance()
            let isAnswer = this.active;

            if (this.active === 1 || this.active === 2) {
                isAnswer = 1;
            }

            downloadStudentErrorQuestion({
                examId: this.examId,
                subjectCode: this.subjectCode,
                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;
    padding: 20px 0;

    .item {
        text-align: center;
        font-size: 14px;
        line-height: 22px;
        color: #909399;
        padding: 15px 20px;
        background: #EDEFF6;
        border-radius: 4px;
        cursor: pointer;

        &.active {
            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;
            }

            /* 对勾图形（使用伪元素并旋转） */
            &::before {
                content: '√';
                color: #fff;
                position: absolute;
                right: 5px;
                bottom: -5px;
                border-top-color: transparent;
                border-left-color: transparent;
                // transform: rotate(45deg);
                z-index: 1;
            }
        }
    }
}
</style>