FE_exam_client/src/pages/wrongBook/do/index.vue

<template>
    <div>
        <breadcrumb :data="'我的练习/练习'"></breadcrumb> 
        <div class="box">
            <div class="page left">
                <div>
                    <div class="item" style="border-top: 0">
                        <p class="type">单选题(共{{singleCount}}题，合计{{singlePoint}}分)</p>
                        <div class="nums">
                            <span v-for="n in singleCount" :class="{active: n <= singleAnsweredCount}" :key="n">{{n}}</span>
                        </div>
                    </div>
                    <div class="item">
                        <p class="type">多选题(共{{multipleCount}}题，合计{{multipleChoiceScore}}分)</p>
                        <div class="nums">
                            <span v-for="n in multipleCount" :class="{active: n <= multipleAnsweredCount}" :key="n">{{n}}</span>
                        </div>
                    </div>
                    <div class="item">
                        <p class="type">判断题(共{{judgeCount}}题，合计{{judgeScore}}分)</p>
                        <div class="nums">
                            <span v-for="n in judgeCount" :class="{active: n <= judgeAnsweredCount}" :key="n">{{n}}</span>
                        </div>
                    </div>
                    <div class="item">
                        <p class="type">填空题(共{{fillBlankCount}}题，合计{{fillBlanksScore}}分)</p>
                        <div class="nums">
                            <span v-for="n in fillBlankCount" :class="{active: n <= fillBlankAnsweredCount}" :key="n">{{n}}</span>
                        </div>
                    </div>
                    <div class="item">
                        <p class="type">简答题(共{{briefAnswerCount}}题，合计{{briefAnswerScore}}分)</p>
                        <div class="nums">
                            <span v-for="n in briefAnswerCount" :class="{active: n <= briefAnswerAnsweredCount}" :key="n">{{n}}</span>
                        </div>
                    </div>
                    <div class="btn">
                        <el-button size="mini" type="primary" @click="save">提交练习</el-button>
                    </div>
                </div>
            </div>

            <div class="page right">
                <template v-for="(subject,k) in subjects">
                    <div class="item" v-if="subject.length" :key="k">
                        <p v-if="subjects[k].length" class="title">{{questionType[k]}}（共{{subjects[k].length}}题，合计{{scoreList[k]}}分）</p>
                        <div class="ques-wrap">
                            <div class="ques" v-for="(item,index) in subject" :key="index">
                                <div class="name-wrap">
                                    <span class="index">{{index+1}}.</span>
                                    <div class="name" :class="'stem' + k + index" v-html="item.questionStem"></div>
                                </div>
                                <div class="media" :id="item.mediaEleId"></div>
                                <div class="options">
                                    <template v-if="item.name == '单项选择' || item.name == '判断题'">
                                        <div class="option">
                                            <el-radio-group v-model="item.val" @change.once="updateProgress">
                                                <el-radio v-for="(option,i) in item.options" :key="i" :label="i">
                                                    {{i}}.{{item.options[i]}}
                                                </el-radio>
                                            </el-radio-group>
                                        </div>
                                    </template>
                                    <template v-if="item.name == '多项选择'">
                                        <el-checkbox-group v-model="item.val" @change="updateProgress">
                                            <el-checkbox class="option-check" :label="i" v-for="(option,i) in item.options" :key="i">
                                                {{i}}.{{item.options[i]}}
                                            </el-checkbox>
                                        </el-checkbox-group>
                                    </template>
                                    <template v-if="item.name == '简答题'">
                                        <el-input type="textarea" rows="5" v-model="item.val" @input="updateProgress"></el-input>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>

        <el-dialog title="成绩详情" :visible.sync="resultVisible" width="30%" :close-on-click-modal="false" :show-close="false">
            <el-table :data="resultData">
                <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
                <el-table-column label="正误" min-width="45" align="center">
                    <template slot-scope="scope">
                        <img v-if="scope.row.true" src="../../../assets/img/true.png" alt="">
                        <img v-else src="../../../assets/img/false.png" alt="">
                    </template>
                </el-table-column>
                <el-table-column prop="answer" label="正确答案" min-width="70" align="center"></el-table-column>
                <el-table-column prop="userAnswer" label="你的答案" min-width="70" align="center"></el-table-column>
                <el-table-column prop="answerAnalysis" label="解析" min-width="80"></el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" size="small" @click="back">返回</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapState,mapGetters,mapActions } from 'vuex'
import examDo from '@/mixins/examDo'
import util from '@/libs/util'
import breadcrumb from '@/components/breadcrumb'
export default {
    mixins: [ examDo ],
    data() {
        return {
            subjects: [],
            singleCount: 0,
            multipleCount: 0,
            judgeCount: 0,
            fillBlankCount: 0,
            briefAnswerCount: 0,

            singleAnsweredCount: 0,
            multipleAnsweredCount: 0,
            judgeAnsweredCount: 0,
            fillBlankAnsweredCount: 0,
            briefAnswerAnsweredCount: 0,
            
            singlePoint: 0,
            multipleChoiceScore: 0,
            judgeScore: 0,
            fillBlanksScore: 0,
            briefAnswerScore: 0,
            scoreList: [],
            questionType: ['单选题','多选题','判断题','填空题','简答题'],
            resultVisible: false,
            resultData: []
        };
    },
    components: {breadcrumb},
    computed: {
        ...mapState('user', [
            'userId','clientId'
        ]),
        ...mapState('wrongBook', [
            'qid','type'
        ]),
    },
    beforeDestroy(){
        window.updateProgress = null
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData() {
            if(this.qid){
                this.$post(`${this.api.previewPaper}?qid=${this.qid}`)
                .then(res => {
                    let data = res.data
                    let subjects = [
                        [...data.list1],
                        [...data.list2],
                        [...data.list4],
                        [...data.list3],
                        [...data.list5],
                    ]
                    
                    this.singleCount = data.list1.length
                    this.multipleCount = data.list2.length
                    this.fillBlankCount = data.list3.length
                    this.judgeCount = data.list4.length
                    this.briefAnswerCount = data.list5.length

                    this.singlePoint = data.list1.length ? data.list1[0].singleChoiceScore * this.singleCount : 0
                    this.multipleChoiceScore = data.list2.length ? data.list2[0].multipleChoiceScore * this.multipleCount : 0
                    this.judgeScore = data.list4.length ? data.list4[0].judgeScore * this.judgeCount : 0
                    this.fillBlanksScore = data.list3.length ? data.list3[0].fillBlanksScore * this.fillBlankCount : 0
                    this.briefAnswerScore = data.list5.length ? data.list5[0].briefAnswerScore * this.briefAnswerCount : 0
                    this.scoreList = [this.singlePoint,this.multipleChoiceScore,this.fillBlanksScore,this.briefAnswerScore,this.briefAnswerScore]

                    window.updateProgress = (item) => {
                        this.updateProgress(item,1)
                    }
                    let index = 0
                    subjects.forEach((e,i) => {
                        e.forEach((n,j) => {
                            index++
                            n.mediaEleId = `player${index}`
                            if(i == 1){
                                this.$set(n,'val',[])
                            }else if(i == 3){
                                n.questionStem = n.questionStem.replace(/\(\)\(\)\(\)/g,`<input class="input" data-index="${j}" oninput="updateProgress(this)"></input>`)
                            }else{
                                this.$set(n,'val','')
                            }
                            if(!n.options){
                                let options = {}
                                for(let i in n){
                                    if(i.includes('option') && n[i]){
                                        options[i.replace('option','')] = n[i]
                                    }
                                }
                                n.options = options
                            }
                            n.questionStatus = 0
                        })
                    })
                    this.subjects = subjects
                }).catch(err => {})
            }
        },
        save(){
            let subjects = this.subjects
            let result = []
            subjects.map((e,i) => {
                e.map((n,k) => {
                    let right = true
                    let val = n.val
                    let answer = n.answer
                    if(n.name == '单项选择' || n.name == '判断题'){
                        if(val != n.answer) right = false
                    }else if(n.name == '多项选择'){
                        val = n.val.join('')
                        if(val != n.answer) right = false
                    }else if(n.name == '填空题'){
                        let options = [...document.querySelectorAll(`.stem${i}${k} input`)].map(n => n.value)
                        let answers = []
                        for(let i in n.options){
                            answers.push(n.options[i])
                        }
                        answers.map((n,i) => {
                            if(n != options[i]) right = false
                        })
                        val = options.filter(n => n).join()
                        answer = answers.join()
                    }
                    // if(right) this.$post(`${this.api.removes}?qid=${quesInfo.questionId}&userId=${this.userId}&type=${this.type}`).then(res => {}).catch(err => {})
                    result.push({
                        true: right,
                        answer: answer,
                        userAnswer: val,
                        answerAnalysis: n.answerAnalysis,
                    })
                })
            })
            this.resultData = result
            this.resultVisible = true
        },
        back(){
            this.$router.back()
        }
    },
}
</script>

<style lang="scss" scoped>
    @import "@/styles/pages/exam.scss";
</style>