rt-sim-training-client/src/views/competitionManage/theoryReview.vue

<template>
  <el-dialog fullscreen :visible.sync="dialogVisible" :before-close="handleClose" style="height: 100%;" title="理论试题预览" :show-close="showClose" center>
    <el-container class="quiz">
      <el-container class="quiz__container">
        <el-header class="quiz__container-header layer-center">
          <div class="title">{{ formModel.name }}</div>
          <div class="notes">{{ formModel.description }}</div>
        </el-header>
        <el-main class="quiz__container-main layer-center">
          <div v-for="(el,i) in sortedList" :id="'anchor__lst-'+i" :key="i" class="section">
            <template v-if="el.children.length">
              <div class="caption">{{ index2UnicodeList[i] }}、{{ el.title }} </div>
              <question v-for="(item,j) in el.children" :id="'anchor__lst-'+item.type+'-'+item.index" :key="j" v-model="item.answer" class="context" :option="item" @save="onSave" />
            </template>
          </div>
        </el-main>
        <el-footer class="quiz__container-footer layer-center" @click="returnTop">
          <el-button-group class="buttons">
            <el-button v-loading="loading" type="primary" @click="handleClose">返回</el-button>
          </el-button-group>
        </el-footer>
      </el-container>
    </el-container>
  </el-dialog>

</template>

<script>
import Question from '@/views/jsxt/competition/theory/quiz/question';

export default {
    components: {
        Question
    },
    mixins: [
        // WindowResizeHandler
    ],
    props: {
        theoryQuestionList: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {
            index: 0,
            height: 0,
            loading: false,
            showClose: false,
            dialogVisible: false,
            formModel: {
                description: '',
                duration: 10,
                name: '',
                status: '',
                totalScore: 0,
                passScore: 10
            },
            examQuestions: [
                {
                    topic: 'PH玻璃电极只能在5~60℃范围内使用，而且还应通过温度校正装置来消除影响。',
                    type: 'judge',
                    optionList: [
                        {id: '160', content: '√', correct: true},
                        {id: '161', content: '×', correct: false}
                    ]
                },
                {
                    topic: '调度工作是（ ___ ）工作中的一个重要组成部分。',
                    type: 'select',
                    optionList: [
                        {id: '40', content: '<span style="color: windowtext;">煤矿管理</span>', correct: false},
                        {id: '41', content: '<span style="color: windowtext;">企业管理</span>', correct: true},
                        {id: '42', content: '<span style="color: windowtext;">安全生产</span>', correct: false},
                        {id: '43', content: '<span style="color: windowtext;">生产组织</span>', correct: false}
                    ]
                }
            ]
        };
    },
    computed: {
        examId() {
            return this.$route.params.examId;
        },
        userExamId() {
            return this.$route.params.userExamId;
        },
        question() {
            return this.theoryQuestionList[this.index] || {};
        },
        index2UnicodeList() {
            return ['一', '二', '三', '四'];
        },
        sortedList() {
            return [
                {
                    title: '判断题',
                    children: this.theoryQuestionList.filter(el => { return el.type === 'judge'; })
                },
                {
                    title: '选择题',
                    children: this.theoryQuestionList.filter(el => { return el.type === 'select'; })
                }
            ];
        }
    },
    watch: {
        '$router': function() {
            this.loadInitData();
        }
    },
    methods: {
        loadInitData() {
            console.log('获取试题详情');
        },
        doShow() {
            this.dialogVisible = true;
            this.loadInitData();
        },
        resizeHandler() {
            this.height = this._clientHeight;
        },
        appendIndex(str, index) {
            return `${index + 1}. ${str}`;
        },
        goAnchor(selector) {
            const anchor = this.$el.querySelector(selector);
            const el = this.$el.querySelector('.el-main');
            if (anchor && el) {
                el.scrollTop = anchor.offsetTop;
            }
        },
        returnTop() {
            document.querySelector('.el-header').scrollIntoView(true);
        },
        onSave(data) {
            console.log(data, '问答题');
        },
        handleClose() {
            this.dialogVisible = false;
        }
    }
};

</script>
<style lang="scss" scoped>
	.layer-center {
		width: 900px;
		height: 100%;
		margin: auto;
		background: #fff;
	}

	.quiz {
		background: #eee;
		height: 100%;

		&::-webkit-scrollbar {
			display:none
		}

		&__card {
			height: 100%;
			.dir-item {
				padding-left: 25px;
			}

			.dir-caption {
				padding-left: 10px;
				line-height: 26px;
				background: #f1f1f1;
			}

		}

		&__container {
			height: 100%;

			&-header {
				height: auto !important;

				.title {
					font-size: 24px;
					line-height: 60px;
					font-weight: bold;
					text-align: center;
				}

				.notes {
					color:#606266;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin:  0 20px;
				}
			}

			&-main {
				.section {
					padding: 5px 20px;
					.caption {
						line-height: 26px;
					}
					.context {
					}
				}
			}

			&-footer {
				text-align: right;
				position: sticky;
				bottom: 0px;
				padding: 40px ;
				.buttons {
					position: relative;
					bottom: 20px;
				}
			}
		}
	}
	/deep/
	.el-dialog__body {
		height: calc(100% - 24px);
		padding: 0;
	}
	/deep/
	.el-dialog__header {
		padding: 0;
		background: #409EFF;
		height: 24px;
	}
</style>