CostumingPlatform/ant-design-vue-jeecg/src/views/exam/modules/MarkingPaperModal.vue

<template>
  <div>
    <el-drawer title="阅卷中" :visible.sync="drawer" :direction="direction" size="100%">
      <div id="dvBody">
        <div style="width:20%;height: 100%;">

        </div>
        <div id="dv1">
          <el-card v-for="item in ans[0]" :key="item.key" style="margin:10px 20px;">
            <p style="font-size:20px;font-weight:600">{{item.titleNumber}}.<i class="el-icon-s-order"
                                                                              style="font-size:30px"></i>[{{item.typeName}}]
              ({{item.points}}分)</p>
            <p style="font-size:20px;font-weight:600">{{item.questionContent.title}}</p>
            <!-- <el-radio-group v-model="radio" v-if="item.typeId == 1||item.typeId==2">
                       <el-radio  v-for="(ite,index) in item.questionContent.choiceList" :key="ite" :label="ite" style="display:block;margin-bottom:12px">
                           <span style="font-size:17px;">{{index}}. {{ite}}</span></el-radio>
            </el-radio-group> -->
            <!-- <el-radio-group v-model="radio" v-if="item.typeId == 3">
                 <el-radio :label="true" style="display:block;">对</el-radio>
                 <el-radio :label="false" style="display:block;">错</el-radio>
            </el-radio-group> -->
            <el-input v-if="item.typeId !=1 &&item.typeId !=2 &&item.typeId !=3 " type="textarea" :rows="5"
                      placeholder="请输入内容" v-model="item.myanswer" disabled>
            </el-input>
            <p style="margin:0px 10px;font-size:20px">
              <el-tag style="margin:0px 10px;margin-top:12px ;" size="medium">答案</el-tag>
              {{item.answer}}
            </p>
            <p style="margin:0px 10px;font-size:20px">
              <el-tag style="margin:0px 10px;margin-top:12px ;" size="medium" type="warning">学生</el-tag>
              {{item.username}}
            </p>
            <p style="margin:0px 10px;font-size:20px;">
              <el-tag style="margin:0px 10px;margin-top:12px ;" size="medium" type="success">您的评分为<span
                style="font-size:20px;color:red;">{{item.knowledage_id}}</span>分
              </el-tag>

            </p>
            <el-rate v-model="item.knowledage_id" :max="item.points"
                     @change="change(item.questionId,item.knowledage_id)"
                     style="margin:0px 19px;font-size:20px;"></el-rate>
            <!-- <p style="margin:5px 10px;font-size:15px"><el-tag style="margin:10px;margin-bottom:12px" size="medium" type="warning">分析</el-tag>{{item.info}}</p>
            <p style="margin:5px 18px;font-size:20px"><el-tag size="medium" type="success">知识点</el-tag></p> -->
          </el-card>
        </div>
        <div style="width:20%;height: 100%;">
          <i style="font-size:100px;position:absolute;top:45%;left:85%;" class="el-icon-arrow-right"
             @click="nextStu"></i>
          <el-button type="primary" style="position:absolute;top:87%;left:93%;" @click="putaddPointInfo">提交</el-button>
        </div>

      </div>
    </el-drawer>
  </div>

</template>
<script>
export default {
  data() {
    return {
      direction: 'btt',
      drawer: false,
      ans: [],
      oneAns: [],
      addPointInfo: {
        paperId: '',
        questionContent: {
          choiceList: {}
        },
        studentId: ''
      }
    }
  },
  methods: {
    startMarked(paperId) {
      console.log(paperId)
      this.ans = []
      this.addPointInfo.paperId = paperId
      this.$axios.get('/jeecg-boot/ex/exHistory/HistorypaperList?paperId=' + paperId)
        .then((res) => {
          this.ans = res.data.result
          if (this.ans.length!=0){
            console.log(this.ans.length)
            this.oneAns = res.data.result[0]
            this.addPointInfo.studentId = this.oneAns[0].studentId
            console.log(this.oneAns[0].studentId)
            this.drawer = true
          }else {
            this.$message.error("阅卷已完成")
          }
        })
    },
    change(id, value) {
      this.setKeyAndValue(id, value)
      console.log(this.addPointInfo)
      console.log(Object.getOwnPropertyNames(this.addPointInfo.questionContent.choiceList).length)
    },
    setKeyAndValue(key, value) {
      this.addPointInfo.questionContent.choiceList[key] = value
    },
    putaddPointInfo() {
      if (Object.getOwnPropertyNames(this.addPointInfo.questionContent.choiceList).length - 1 != this.ans[0].length) {
        // console.log(Object.getOwnPropertyNames(this.addPointInfo.questionContent.choiceList).length-1 != this.ans[0].length)
        this.$alert('有未赋分的题目，请确认是否有未赋值的题目', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `已取消`
            });
          }
        });
      } else {
        this.$axios.post('/jeecg-boot/ex/exHistory/addPoint', this.addPointInfo)
          .then((res) => {
            console.log(res)
          })
        this.drawer = false
      }

    },
    nextStu() {
      if (Object.getOwnPropertyNames(this.addPointInfo.questionContent.choiceList).length - 1 != this.ans[0].length) {
        // console.log(Object.getOwnPropertyNames(this.addPointInfo.questionContent.choiceList).length-1 != this.ans[0].length)
        this.$alert('有未赋分的题目，请确认是否有未赋值的题目', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `已取消`
            });
          }
        });
      } else {
        this.$confirm('是否提交?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '提交成功!'
          });
          this.$axios.post('/jeecg-boot/ex/exHistory/addPoint', this.addPointInfo)
            .then((res) => {
              console.log(res)
              this.startMarked(this.addPointInfo.paperId)
            })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  }
}
</script>
<style scoped>
#dvBody {
  display: flex;
  justify-content: center;
}

#dv1 {
  width: 50%;
  height: 90vh;
  overflow: scroll;
}

.el-icon-arrow-right:hover {
  font-weight: 700;
  animation: text-shadow-drop-top 0.6s both;
}

@keyframes text-shadow-drop-top {
  0% {
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    text-shadow: 0 -6px 18px rgba(0, 0, 0, 0.35);
  }
}
</style>