TEAMModelOS/TEAMModelOS/ClientApp/view/evaluation/index/TestPaper.vue

<template>
  <div class="paper-container">
    <div class="ev-header">
      <Icon type="md-paper" size="30" color="rgb(16, 171, 231)" />
      <span class="ev-title" @click="backToAdd">测试组卷</span>
      <span class="ev-length">共 {{paperInfo.ItemId.length}} 道题</span>
    </div>
    <!-- 试卷编辑工具栏 -->
    <div class="paper-toolbar filter-wrap">

      <!--<div class="filter-item">
        <span class="filter-title">测试用途:</span>
        <RadioGroup v-model="testAttr.testType" type="button" @on-change="filterTypeChange">
          <Radio label="0">正式考试</Radio>
          <Radio label="1">普通测试</Radio>
          <Radio label="2">统计</Radio>
        </RadioGroup>
      </div>
      <div class="filter-item">
        <span class="filter-title">测试情景:</span>
        <RadioGroup v-model="testAttr.testScene" type="button" @on-change="filterSceneChange">
          <Radio label="0">模拟</Radio>
          <Radio label="1">段考</Radio>
          <Radio label="2">周考</Radio>
          <Radio label="3">小考</Radio>
          <Radio label="4">自定义</Radio>
        </RadioGroup>
      </div>-->
      <!--<div class="filter-item">
        <span class="filter-title">测试对象:</span>
        <RadioGroup v-model="testAttr.testTarget" type="button" @on-change="filterTargetChange">
          <Radio label="0">同年级</Radio>
          <Radio label="1">跨年级</Radio>
          <Radio label="2">跨学校</Radio>
        </RadioGroup>
      </div>-->
      <!--<div class="filter-item">
        <span class="filter-title">创建方式:</span>
        <RadioGroup v-model="testAttr.createType" type="button" @on-change="filterCreateChange">
          <Radio label="0">自动组题</Radio>
          <Radio label="1">批量导入</Radio>
          <Radio label="2">题库挑选</Radio>
        </RadioGroup>
      </div>-->
      <div class="paper-tools">
        <Checkbox v-model="isShowAnswer" @on-change="changeShowAnswer">展示答案与解析</Checkbox>
      </div>
    </div>

    <!-- 试卷内容 -->
    <div class="paper-content">
      <!--<div class="paper-line">
        <div id="pui_seal" title="点击设置&quot;装订线&quot;" style="display: block;">
          <img alt="装订线" title="装订线" src="http://zujuan.xkw.com/resource/image/v2/peal_line.png" width="58" height="">
        </div>
      </div>-->
      <div class="paper-body">
        <!-- 试卷头部信息 -->
        <div class="paper-header flex-col-center">
          <p class="paper-title">{{paperInfo.title}}</p>
          <p class="paper-subTitle">{{paperInfo.subTitle}}</p>
          <p class="paper-info">考试时间：{{paperInfo.time}} 出卷人：{{paperInfo.builder}}</p>
        </div>
        <!-- 题目类型及列表 -->
        <div class="paper-part" v-for="(item,order) in paperInfo.parts">
          <div class="paper-content-section">{{numberConvertToUppercase(order)+'、'+item.name}}<span>(共6题，每题5分，共30分)</span></div>
          <div v-if="list.length == 0">暂无数据</div>
          <div class="content-wrap" v-else>
            <div class="exercise-item" v-for="(question,index) of item.questions" @mouseenter="exerciseMouseover($event)" @mouseleave="exerciseMouseleave($event)">
              <div class="item-tools">
                <div class="item-tools-t flex-row-center"><Icon type="ios-list-box-outline" />试题挑错</div>
                <div class="item-tools-t flex-row-center"><Icon type="ios-brush-outline" />编辑</div>
                <div class="item-tools-t flex-row-center"><Icon type="ios-archive-outline" />删除</div>
                <div class="item-tools-t flex-row-center"><Icon type="md-arrow-up" />上移</div>
                <div class="item-tools-t flex-row-center"><Icon type="md-arrow-down" />下移</div>
              </div>
              <div class="item-question">
                <p>{{index+1}} : <span v-html="question.question"></span></p>
              </div>
              <div v-for="(option,optionIndex) in question.option">
                <p>{{String.fromCharCode(64 + parseInt(optionIndex+1))}} : <span v-html="option.value"></span></p>
              </div>

              <!-- 如果是组合题 -->
              <div v-for="(childQuestion,childIndex) in question.children" v-if="question.children.length">
                <div class="item-question">
                  <p>{{childIndex+1}} : <span v-html="childQuestion.question"></span></p>
                </div>
                <div v-for="(childOption,childOptionIndex) in childQuestion.option">
                  <p>{{String.fromCharCode(64 + parseInt(childOptionIndex+1))}} : <span v-html="childOption.value"></span></p>
                </div>
                <div class="item-answer" v-show="isShowAnswer">
                  <span style="color:#01b4ef">【答案】:</span>
                  <span v-html="childQuestion.answer[0] || childQuestion.answer" v-if="childQuestion.type == 'Subjective'"></span>
                  <span :class="[ childQuestion.type == 'Complete' ? 'item-answer-item':'']" v-for="answer in childQuestion.answer" v-else-if="childQuestion.type == 'Complete'" v-html="answer"></span>
                  <span :class="[ childQuestion.type == 'Complete' ? 'item-answer-item':'']" v-for="answer in childQuestion.answer" v-else>{{answer}}</span>
                </div>
                <div class="item-explain" v-show="isShowAnswer">
                  <span style="color:#01b4ef">【解析】:</span>
                  <span v-html="childQuestion.explain"></span>
                </div>
              </div>


              <!-- 答案与解析部分选择是否展示 -->
              <div class="item-answer" v-show="isShowAnswer && question.type != 'Compose'">
                <span style="color:#01b4ef">【答案】:</span>
                <span v-html="question.answer[0] || question.answer" v-if="question.type == 'Subjective'"></span>
                <span :class="[ question.type == 'Complete' ? 'item-answer-item':'']" v-for="answer in question.answer" v-else-if="question.type == 'Complete'" v-html="answer"></span>
                <span :class="[ question.type == 'Complete' ? 'item-answer-item':'']" v-for="answer in question.answer" v-else>{{answer}}</span>
              </div>
              <div class="item-explain" v-show="isShowAnswer && question.type != 'Compose'">
                <span style="color:#01b4ef">【解析】:</span>
                <span v-html="question.explain"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="paper-footer">
      <Button type="primary">保存试卷</Button>
    </div>
  </div>
</template>
<script>
  
  import questions from './list.json'
  import paper from './paper.json'
  export default {
    data() {
      return {
        list: [],
        paperInfo: {},
        exersicesType: {
          single: "单选",
          multiple: "多选",
          judge: "判断",
          complete: "填空",
          subjective: "问答"
        },
        testAttr: {
          testScene: '0',
          testType: '0',
          testTarget: '0',
          testMode: '0',
          createType: '0',
          questionFilter: []
        },
        exersicesDiff: ["容易", "较易", "一般", "较难", "困难"],
        diffColors: ['#32CF74', '#E8BE15', '#F19300', '#EB5E00', '#D30000'],
        filterType: "0",
        filterDiff: "0",
        filterSort: "0",
        pageSize: 5,
        pageNum: 1,
        totalNum: 100,
        allList: questions.list,
        isShowAnswer: false
      }
    },
    created() {
      this.list = questions.list;
      this.paperInfo = paper;
      let flag = this.$route.params.flag;
      if (flag == 1) {
        console.log(JSON.parse(localStorage.getItem('questions')));
        this.paperInfo.parts[0].questions = JSON.parse(localStorage.getItem('questions'))
      }

    },
    methods: {

      //返回创建评测页面
      backToAdd() {
        this.$router.push({
          path: '/testPaperList',//或者路径跳转path: '/addCreditCards',
        })
      },

      //数字与中文转换
      numberConvertToUppercase(num) {
        num = Number(num + 1);
        var upperCaseNumber = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '百', '千', '万', '亿'];
        var length = String(num).length;
        if (length == 1) {
          return upperCaseNumber[num];
        } else if (length == 2) {
          if (num == 10) {
            return upperCaseNumber[num];
          } else if (num > 10 && num < 20) {
            return '十' + upperCaseNumber[String(num).charAt(1)];
          } else {
            return upperCaseNumber[String(num).charAt(0)] + '十' + upperCaseNumber[String(num).charAt(1)].replace('零', '');
          }
        }
      },

      //切换页码
      pageChange(page) {
        let start = this.pageSize * (page - 1);
        let end = this.pageSize * page;
        let list = questions.list;
        this.list = list.slice(start, end);
        window.scroll(0, 0);
      },

      //切换分页Size
      pageSizeChange(val) {
        this.pageSize = val;
        this.pageChange(1);
      },

      //题目鼠标滑过事件
      exerciseMouseover(e) {
        e.preventDefault();
        e.target.children[0].style.display = "block";
      },

      //题目鼠标移出事件
      exerciseMouseleave(e) {
        e.preventDefault();
        e.target.children[0].style.display = "none";
      },

      //测试用途
      filterTypeChange(val) {

      },

      //测试情景
      filterSceneChange(val) {

      },

      //测试对象
      filterTargetChange(val) {

      },

      //创建方式
      filterCreateChange(val) {

      },

      changeShowAnswer(val) {
        console.log(this.isShowAnswer);
      }

    },
    mounted() {

    }
  }
</script>
<style src="../index/ExercisesList.css" scoped></style>
<style src="../index/TestPaper.css" scoped></style>
<style>

  .content-wrap .exercise-item p {
    margin: 10px 0;
    display: inherit;
    word-break: break-all;
  }

  .complete-line {
    padding: 0 45px;
    border-bottom: 2px solid rgb(128, 128, 128);
  }
</style>