learning-system-portal/src/components/Course/simpleTestPaper.vue

<template>
  <div>
    <!--简单的试卷内容,传入参数字符串，传出参数字符串-->
    <div style="display: flex;justify-content: space-between; padding: 5px;">
        <div>
          <el-button-group>
            <el-button type="primary" size="mini" @click="addQuestion(101)" icon="el-icon-plus">单选</el-button>
            <el-button type="primary" size="mini" @click="addQuestion(102)" icon="el-icon-plus">多选</el-button>
            <el-button type="primary" size="mini" @click="addQuestion(103)" icon="el-icon-plus">判断</el-button>
          </el-button-group>
        </div>
        <div style="padding-top: 10px;color: #919191; ">点题干编辑</div>
        <div style="line-height:40px; text-align: center;font-size: 16px;">
          <el-checkbox v-model="optShow">显示选项</el-checkbox>
          <span style="margin-left: 8px;">共<span class="bigred"> {{data.items.length}} </span>题，<span class="bigred">{{total}}</span> 分</span>
        </div>
    </div>
    <div class="paper">
      <div v-for="(item, idx) in data.items" :key="idx" class="paper-item">
          <div style="display: flex;justify-content: space-between;padding: 5px;">
              <div style="flex:1;padding-right: 5px;">
                  <div v-if="editIndex!=idx" @mouseenter="showOptions(item)" @mouseleave="hideOptions(item)">
                      <div style="cursor: pointer;" @click="handleEditItem(item,idx)">
                       {{idx+1}}.【
                        <span v-if="item.type == 101">单选题</span>
                        <span v-if="item.type == 102">多选题</span>
                        <span v-if="item.type == 103">判断题</span>
                        】{{ item.content }}
                      </div>
                      <div  v-if="optShow || item.optShow" style="padding: 5px;">
                          <div class="paper-opt" v-for="(opt, optIdx) in item.options" :key="optIdx" @click="setOptAnswer(item,opt)" :class="{'paper-opt-yes':opt.answer}">
                           {{ optIdx + 1 }}, {{ opt.content }} <i v-if="opt.answer" class="el-icon-check"></i>
                          </div>
                      </div>
                  </div>
                  <div v-if="editIndex==idx">
                      <div><el-input v-model="item.content" placeholder="试题的内容"></el-input> </div>
                      <div style="color: red;">注：一行就一个选项</div>
                      <div><el-input :rows="5" type="textarea" v-model="curTextOptions" placeholder="试题的内容"></el-input> </div>
                      <div><el-button @click="handleSaveItem(item)" type="warning" size="small"> 编辑完成 </el-button> </div>
                  </div>
              </div>
              <div style="width: 110px;">
                  <el-input style="width: 50px;" size="mini" v-model="item.score" placeholder="分数"></el-input>
                  <el-button @click="removeQuestion(idx)" style="margin-left: 6px;" type="danger" icon="el-icon-delete" size="mini"></el-button>
              </div>
         </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {snowflakeGenerator} from 'snowflake-id-js';
  export default {
    name: 'articleItems',
    props:{
      data:{
        type:Object,
        default(){
          return {
            generator:null,
            items:[]
          }
        }
      }
    },
    data() {
      return {
        editIndex:-1,//当前编辑的项
        curTextOptions:'',
        optShow:true,
        qdata: [
          {
            id: '1',
            type: 101,
            score: 5,
            checked: false,
            optShow:false,
            content: '点击编辑试题内容',
            options: [
              { id: '11', content: '选项',answer:false },
              { id: '12', content: '选项',answer:true},
              { id: '13', content: '选项',answer:false},
              { id: '14', content: '选项',answer:false},
            ]
          }
        ]
      }
    },
    mounted() {
      var seed=Math.floor(Math.random() * (50 - 1 + 1) + 1);
      this.generator= snowflakeGenerator(seed);
      this.initItem();
    },
    computed:{
      total(){
        var t=0;
        this.data.items.forEach(item=>{
            t+=parseFloat(item.score);
        });
        return t;
      }
    },
    methods:{
      initItem(){
        let $this=this;
        //添加测试数据
        if(this.data.items.length==0){
          this.qdata.forEach(item=>{
            $this.data.items.push(item);
          })
        }
      },
      showOptions(item){
        item.optShow=true;
      },
      hideOptions(item){
        item.optShow=false;
      },
      setOptAnswer(item,opt){
        if(item.type!=102){//单选的情况，先清空
          item.options.forEach(op=>{
            op.answer=false;
          })
        }
        if(opt.answer){
           opt.answer=false;
        }else{
           opt.answer=true;
        }
      },
      handleEditItem(item,idx){
        this.editIndex=idx;
        var txt='';
        item.options.forEach(function(q){
            if(txt.length>1){
              txt+='\n';
            }
            txt+=q.content;
         });
         this.curTextOptions=txt;
      },
      handleSaveItem(item){
        var txt = this.curTextOptions;
        if(txt==''){
          return;
        }
        var txtArray=txt.split("\n");
        //保存选中的
        var answerRows=[];
        item.options.forEach((op,opidx)=>{
          if(op.answer){
            answerRows.push(opidx);
          }
        })
        //重新指定
        let $this=this;
        var newOptions=[];
        txtArray.forEach(function(t,i){
            var newOpt={ id:$this.generator.next().value, content: t,answer:false };
            answerRows.some(an=>{
              if(an==i){
                newOpt.answer=true;
                return true;
              }else{
                return false;
              }
            })
            newOptions.push(newOpt);

        });
        item.options=newOptions;
        this.editIndex=-1;
      },
      addQuestion(t){
        //let gen= snowflakeGenerator(512).next().value;
        //let qid=snowflakeGenerator(512).next().value;
        let qid=this.generator.next().value;
        //console.log(qid);
        let q={
          id: qid,
          type: t,
          score: 5,
          checked: false,
          optShow:false,
          content: '点击编辑试题内容',
          options: []
        }
        if(t==101 || t==102){
          q.options.push({id:this.generator.next().value,content:'选项',answer:false});
          q.options.push({id:this.generator.next().value,content:'选项',answer:false});
          q.options.push({id:this.generator.next().value,content:'选项',answer:false});
        }else{
          q.options.push({id:this.generator.next().value,content:'正确',answer:false});
          q.options.push({id:this.generator.next().value,content:'错误',answer:false});
        }
        this.data.items.push(q)
      },
      removeQuestion(idx){
        this.data.items.splice(idx,1);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .paper{
    border: 1px solid #dfdfdf;
    padding: 5px 0px;
    height: 500px;
    overflow: auto;
    .paper-item{
      padding: 5px 10px;
      border-bottom: 1px solid #CCCCCC;
      .paper-opt{
        line-height: 25px;
        cursor: pointer;
      }
      .paper-opt-yes{
        color: green;
      }
    }
  }
  .bigred {
    color: red;
    font-size: 20px;
  }
</style>