learning-system-portal/src/components/Exam/EditPaper.vue

<template>
  <!--编辑试卷-->
  <div >
    <el-dialog title="修改试卷" :visible.sync="editShow" width="800px" >
      <!--试卷的标题，可以编辑-->
      <div class="paper-title">
         <div>{{title}}</div>
      </div>
      <!--查询项-->
      <!-- <div>
        <el-form :inline="true" size="mini">
          <el-form-item>
            <el-select clearable v-model="qpaper.qtype" placeholder="请选择题型" class="search-width-120">
              <el-option label="单选题" :value="1"></el-option>
              <el-option label="多选题" :value="2"></el-option>
              <el-option label="判断题" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item><el-input class="search-width-120" v-model="qpaper.keyword" clearable placeholder="题干"></el-input></el-form-item>
          <el-form-item>
            <el-button type="primary" @click="selectQuery()">搜索</el-button>
            <el-button type="primary" @click="resetQuery()">重置</el-button>
          </el-form-item>
          <el-form-item></el-form-item>
        </el-form>
      </div> -->
      <div style="display: flex;justify-content: space-between;line-height:30px;">
        <div>
          <el-checkbox v-model="optionShow">显示选项</el-checkbox>
        </div>
        <div>
          双击题干或选项编辑
        </div>
        <div style="text-align: right;font-size: 14px;">
          本卷共
          <span class="bigred">{{paperLength}}</span>
          题, 总分
          <span class="bigred">{{totalScore}}</span>
          分
        </div>
      </div>
      <!--试卷内容-->
      <div class="paper-box">
        <div v-if="qitems.length>0" v-for="(item,idx) in qitems" :key="idx">
          <div v-if="item.type < 900">
            <div style="display: flex;justify-content: space-between;background-color: #dcf1ff;padding: 5px;">
              <div>
                <!-- <span style="padding-right: 5px;" v-if="paperQEdit"><el-checkbox v-model="item.checked"  @change="checkedChange"></el-checkbox></span> -->
                <span v-if="item.type == 1">单选题</span>
                <span v-if="item.type == 2">多选题</span>
                <span v-if="item.type == 3">判断题</span>
                <span style="padding-left: 5px;">难度[{{item.difficulty == 1? '简单' : item.difficulty == 2? '中等': '困难'}}]</span>
                <!-- <span style="padding-left: 5px;">知识点[{{item.analysis}}]</span> -->
              </div>
              <div>
                <el-input @input="changeInput($event)" v-model="item.defaultScore" style="width: 120px;"   size="mini"  placeholder="分数" @blur="paperCalculation()">
                  <template slot="append">分</template>
                </el-input>
                <el-button v-if="paperQEdit" icon="el-icon-delete" @click="checkDelete(idx)" size="mini"></el-button>
              </div>
            </div>
            <div style="padding: 15px;">
              <div style="font-weight: 700px;padding-bottom: 10px;cursor: pointer;" @dblclick="showCellEdit(idx,-1)">
                  <div> {{ item.title }}</div>
                  <div v-if="item.images" class="qimg"><img class="qimg-fit" :src="imageBaseUrl + item.images" alt=""> </div>
              </div>
              <div v-if="optionShow">
                <div v-if="item.type == 3">
                    <div class="opt" @click="setJudgeAnswer(item,'true')" :class="{optanswer:item.answer=='true'}"><span class="optanswer-span">{{item.answer=='true'? '√':''}}  </span> 1. 正确 </div>
                    <div class="opt" @click="setJudgeAnswer(item,'false')" :class="{optanswer:item.answer=='false'}"><span class="optanswer-span">{{item.answer=='false'? '√':''}}  </span> 2. 错误 </div>
                </div>
                <div v-else v-for="(opt, optIdx) in item.optionList" :key="optIdx" class="opt" @click="setOptAnswer(item,opt)" @dblclick="showCellEdit(idx,optIdx)">
                  <div :class="{optanswer:opt.isAnswer}"><span class="optanswer-span">{{opt.isAnswer? '√':''}}  </span> {{ optIdx + 1 }}, {{ opt.content }}</div>
                  <div v-if="opt.images" class="qimg"><img class="qimg-fit" :src="imageBaseUrl + opt.images" alt=""> </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="item.type > 900">
            <div style="height: 25px;">
              <span style="float: right;margin-top: -5px;cursor: pointer;" class="el-icon-delete" @click="checkDelete(idx)"></span>
              <div style="border-bottom: 2px dotted #000000;margin-right: 50px;"></div>
            </div>
          </div>
        </div>
      </div>
    <span slot="footer" class="dialog-footer">
       <el-button :loading="loading" type="primary" @click="save()"> 保 存 </el-button>
       <el-button @click="cancel()"> 取消 </el-button>
    </span>
    </el-dialog>
    <el-dialog :title="cellData.title" :visible.sync="cellData.show" width="500px">
        <div>
          <div><el-input type="textarea" rows="2" v-model="cellData.text"></el-input> </div>
          <div style="height: 160px;padding-top: 10px;">
            <imgupload :value="cellData.img" @success="cellImageSuccss" @remove="cellImageRemove"></imgupload>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
           <el-button :loading="loading" type="primary" @click="cellConfirm()"> 确定 </el-button>
           <el-button @click="cellCancel()"> 取消 </el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  import apiPaper from '@/api/modules/paper.js';
  import imgupload from '@/components/ImageUpload/single.vue';
  import apiExamTask from '@/api/modules/examTask.js';
  import examQuestionApi from "@/api/modules/question";
  import {numberToLetter, deepCopy} from '../../utils/tools.js';
  export default {
    name: 'comEditPaper',
    components:{imgupload},
    props:{
       id:{
         type:String,
         default:''
       }
    },
    data() {
      return {
        editShow:false,
        loading:false,
        paperId:'',
        imageBaseUrl:process.env.VUE_APP_FILE_BASE_URL,
        title:'',
        optionShow:false,
        qpaper:{qtype:'',keyword:''},
        paperLength:0,
        totalScore:0,
        qitems:[],
        tempItems:[],
        paper: {
          id:'',
          testName: '',
          remark: '',
          difficulty: ''
        },
        paperQEdit:false,
        cellData:{
           show:false,
           title:'修改题干',
           item:null,
           optIndex:-1,
           text:'',
           img:''
        }
      }
    },
    mounted() {
        if(this.id){
          this.paperId=this.id;
        }
    },
    methods:{
        loadTestPaper(){
          if(this.paperId){
            this.editShow=true;
            this.loading=true;
            apiPaper.detail(this.paperId).then(res=>{
              if(res.status === 200) {
                  this.paper=res.result;
                  //转化试题
                  this.qitems=JSON.parse(res.result.paperContent);
                  //console.log(this.qitems,this.qitems)
                  this.tempItems=this.qitems;
                  this.paperCalculation();
              } else {
                  this.$message.error(res.message);
              }
              this.loading=false;
            })
          }
        },
        show(paperId){
          this.paperId=paperId;
          this.editShow=true;
          this.loadTestPaper();
        },
        selectQuery(){
            this.qitems=this.tempItems;
            if(this.qpaper.qtype == '' && this.qpaper.keyword == '') {
              this.$forceUpdate();
              return
            }
            // let data = deepCopy(this.paperData);
            if(this.qpaper.qtype) {
              this.qitems=this.qitems.filter(item=>{
                if(item.type === this.qpaper.qtype){
                  return true;
                }else{
                  return false;
                }
              })
            }
            if(this.qpaper.keyword) {
                this.qitems = this.qitems.filter(item => {
                  return item.title.toLowerCase().indexOf(this.qpaper.keyword.toLowerCase()) > -1;
                });
            }
            //this.paper.data = data;
            this.$forceUpdate();
        },
        resetQuery(){
          this.qpaper.qtype='';
          this.qpaper.keyword='';
          this.qitems=this.tempItems;
        },
        checkedChange(){
          this.$forceUpdate();
        },
        changeInput(e){
          this.$forceUpdate();
        },
        setJudgeAnswer(item,flag){
           item.answer=flag;
        },
        setOptAnswer(item,opt){
          if(item.type!=2){//单选的情况，先清空
            item.optionList.forEach(op=>{
              op.isAnswer=false;
            })
          }
          if(opt.isAnswer){
             opt.isAnswer=false;
          }else{
             opt.isAnswer=true;
          }
        },
        paperCalculation() {
          this.totalScore=0;
          this.paperLength=0;
          this.qitems.forEach(item=>{
                if(item.type < 900) {
                  this.paperLength++;
                  this.totalScore += Number(item.defaultScore);
                }
              })
        },
        save(){
            this.loading=true;
            this.paper.paperContent=JSON.stringify(this.qitems);
            apiPaper.update(this.paper).then((res)=>{
                if(res.status === 200) {
                  this.$message.success('保存成功！')
                  this.editShow=false;
                } else {
                  this.$message.error(res.message);
                }
                this.loading=false;
            })
        },
        cancel(){
            this.editShow=false;
        },
        showCellEdit(itemIdx,optIdx){
            this.cellData.item=this.qitems[itemIdx];
            this.cellData.optIndex=optIdx;
            this.cellData.img='';
            if(optIdx==-1){
               this.cellData.text=this.cellData.item.title;
               this.cellData.img=this.cellData.item.images;
               this.cellData.title="修改题干";
            }else{
               this.cellData.text=this.cellData.item.optionList[this.cellData.optIndex].content;
               this.cellData.img=this.cellData.item.optionList[this.cellData.optIndex].images;
               this.cellData.title="修改选项";
            }
            //console.log(this.cellData,'this.cellData');
            this.cellData.show=true;
        },
        cellConfirm(){
            if(this.cellData.optIndex==-1){
               this.cellData.item.title=this.cellData.text;
               this.cellData.item.images=this.cellData.img;
            }else{
               this.cellData.item.optionList[this.cellData.optIndex].content=this.cellData.text;
               this.cellData.item.optionList[this.cellData.optIndex].images=this.cellData.img;
            }
            this.cellData.show=false;
        },
        cellCancel(){
          this.cellData.show=false;
        },
        cellImageSuccss(res){
          //console.log(res,'res');
          this.cellData.img=res.result.filePath;
        },
        cellImageRemove(){
          this.cellData.img='';
        }
    }
  }
</script>

<style scoped lang="scss">

  .paper-title{
      text-align: center;
      font-size: 18px;
  }
  .paper-box{
     max-height: 500px;
     overflow-y: auto;
  }
  .bigred {
    color: red;
    font-size: 20px;
  }
  .opt{
    padding-top:10px;cursor: pointer;
  }
  .optanswer{
    color: green;
    background-color: #fffaf7;
  }
  .optanswer-span{
    color: green;
    display: inline-block;
    width: 20px;
  }

  .qimg{
    padding-left: 30px;
    max-width: 200px;
    .qimg-fit{
      width:100%;
      object-fit:scale-down
    }
  }
</style>