frontend/src/components/controlMainPage/docList/QuestionList.vue

<style src="@/components/doTest/doTest.scss" lang="scss" scoped></style>
<style lang="scss" scoped>
.index-area,.change-area{
  display: inline-block;
  vertical-align: top;
  height: 100%;
}
.index-area{
  width: 60px;
  border-right: solid 1px #e6e6e6;
  overflow: auto;
  /deep/.el-collapse-item__header{
    padding-left: 5px;
  }
  /deep/.el-collapse-item__content{
    padding-bottom: 0;
  }
  ul{
    margin-bottom: 0;
    cursor: pointer;
    li{
      text-align: center;
      padding: 5px 0;
      &:hover,&.choose{
        background: #e6e6e6;
      }
    }
  }
}
.change-area{
  width: calc(100% - 60px);
  &>div{
    display: inline-block;
    vertical-align: top;
    padding: 15px;
    textarea{
      width: 100%;
      min-height: 50px;
      margin: 10px;
      font-size: 16px;
      &:first-child{
        min-height: 200px;
      } 
    }
  }
  .material-part{
    width: 400px;
  }
  .question-part{
    width: 100%;
    &.halfScreen{
      width: calc(100% - 400px);
    }
  }
}
/deep/.el-drawer__header{
  background: #fafafa;
  padding: 30px;
  margin-bottom: 0; 
}
/deep/.el-drawer__body{
  height: calc(100% - 60px);
}
.dialog-style{
  div{
    text-align: center;
    margin: 5px;
    /deep/ .el-input{
      display: inline-block;
      width: 200px;
    }
  }
}
</style>
<template>
<div>
  <div class="index-area">
    <el-collapse v-model="currentSection" accordion>
      <el-collapse-item v-for="(item,index) in paper.sections" :key="index" :title="'M' + String(index + 1)" :name="index + 1">
        <ul>
          <li v-for="(ques,i) in paper.questions" :key="i" v-show="currentSection == ques.section || currentSection == ques.section * -1" 
          :class="{'choose':currentQuestion == i}" @click="changePage(i)">{{i+1}}</li>
        </ul>
      </el-collapse-item>
    </el-collapse>
  </div>
  <div class="change-area">
    <div class="material-part" v-if="paper.sections[currentSection - 1].hasMaterial">

    </div>
    <div class="question-part" :class="{'halfScreen':paper.sections[currentSection - 1].hasMaterial}">
      <textarea v-model="paper.questions[currentQuestion].content"></textarea>
      <textarea v-for="answer in paper.questions[currentQuestion].options" :key="answer.id" v-model="answer.content"></textarea>
      <el-button @click="drawer = true" type="primary">查看</el-button>
      <el-button @click="updateQuestion" type="warning">保存</el-button>
    </div>
  </div>
  <el-drawer
    :visible.sync="drawer"
    :size="'900px'"
    :show-close="false"
    v-if="currentSection != ''">
    <div class="exam">
      <div class="material-part" v-if="paper.sections[currentSection - 1].hasMaterial">
          <div class="triangle-top"><span>材</span><span>料</span></div>
          <div>
              <div v-html="paper.sections[currentSection - 1].material" class="material-html"></div>
          </div>
      </div>
      <div class="scroll-part" :class="{'halfScreen':paper.sections[currentSection - 1].hasMaterial}">
          <div class="content-part">
              <div class="question-area">
                  <div class="triangle-top"><span>#{{currentQuestion - indexRange[currentSection - 1].min + 1}}</span></div>
                  <div class="question-html">
                      <div v-html="paper.questions[currentQuestion].content" class="content-html"></div>
                  </div>
              </div>
              <div>
                  <div class="answer-area2" v-for="answer in paper.questions[currentQuestion].options" :key="answer.id">
                      <div :class="{'correct':answer.choose}">
                          <i :class="{'multiChooseType':paper.questions[currentQuestion].correctNum > 1}">
                              <img src="@/images/doTest/tick-up.png" v-if="answer.choose">
                          </i>
                          <label>{{allOptionList[answer.oindex]}}</label>
                      </div>
                      <div v-html="answer.content" class="answer-html" ref="htmlContent">
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <div class="page-part">
          <button @click="changePage(currentQuestion - 1)">
              <span id="preLeft"><img src="@/images/doTest/pre.png"></span>
              <label>上一题</label>
          </button>
          <button @click="changePage(currentQuestion + 1)">
              <label>下一题</label>
              <span id="nextRight"><img src="@/images/doTest/next.png"></span>
          </button>
      </div>
    </div>
  </el-drawer>
  <el-dialog
    title="提示"
    :visible.sync="visibleDelete"
    width="200px">
    <p class="center-text">确认删除?</p>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visibleDelete = false">取 消</el-button>
      <el-button type="primary" >确 定</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
import { getPaperById , updateQuestion } from "@/api/exam";
import { OPTION_LIST } from '@/services/constant';

export default {
  name: 'QuestionList',
  components: {
  },
  data () {
      return {
        paper: {            //整张试卷数据
            questions: [{}],
            sections: [{}],
        },
        currentQuestion: 0,
        currentSection: 1,
        indexRange:[{min: 0,max: 1}],
        allOptionList: OPTION_LIST,
        drawer:false,
        visibleDelete:false,
      }
  },
  created() {
    const oScript = document.createElement('script');
    oScript.type = 'text/javascript';
    oScript.src = 'mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML';
    document.body.appendChild(oScript);
    this.getQuestion(this.$route.params.pid);
  },
  methods: {
    getQuestion(pid){
      getPaperById(pid).then((result) => {
        Object.assign(this.paper,result);
        this.setIndexRange();
        this.changePage(0);
      })
    },
    setIndexRange() {
        this.indexRange = []; 
        let list = this.paper.sectionNums.split(',').map(Number);
        list.forEach((item,index) => {
            if(index != 0) {list[index] = item + list[index - 1];}
            this.indexRange.push({
                min: index == 0?0:list[index - 1],
                max: list[index] - 1
            })
        })
    },
    changePage(page) {
      if(page >= 0 && page < this.paper.questions.length){
        this.currentQuestion = page;
        setTimeout(() => {
            MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
        },100);
      }
    },
    updateQuestion(){
      updateQuestion(this.paper.questions[this.currentQuestion]).then((result) => {
        alert(result.message);
        this.getQuestion(this.$route.params.pid);
        this.changePage(this.currentQuestion);
      })
    },
  },
}
</script>