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

<template>
  <div>
    <div v-if="has" class="assess-div">
      <div>
        <div class="assess-info">课程满意度计算方式：{{info.countType}}；</div>
        <div class="assess-info">满意度：{{info.countText}}</div>
        <hr />
        <div v-if="info.items">
          <div v-for="(ass,assIdx) in info.items" :key="assIdx">
            <div class="assess-info">{{assIdx+1}}.{{ass.question}}</div>
            <div v-if="ass.qType==1" class="assess-info" style="height: 20px">
              <span style="float: left">{{ass.minText}}</span>
              <span style="float: right">{{ass.maxText}}</span>
            </div>
            <div v-if="ass.qType==1" class="assess-info">
              <el-radio-group v-model="ass.answer" class="assessRadio1">
                <el-radio-button :label="1">1</el-radio-button>
                <el-radio-button :label="2">2</el-radio-button>
                <el-radio-button :label="3">3</el-radio-button>
                <el-radio-button :label="4">4</el-radio-button>
                <el-radio-button :label="5">5</el-radio-button>
                <el-radio-button :label="6">6</el-radio-button>
                <el-radio-button :label="7">7</el-radio-button>
                <el-radio-button :label="8">8</el-radio-button>
                <el-radio-button :label="9">9</el-radio-button>
                <el-radio-button :label="10">10</el-radio-button>
              </el-radio-group>
            </div>
            <div v-if="ass.qType==9" class="assess-info">
              <el-input type="textarea" rows="4" show-word-limit maxlength="255" v-model="ass.answer" placeholder="请输入作业内容(限255个字)"></el-input>
            </div>
          </div>
        </div>

      </div>
      <div v-if="allowSubmit && showSubmit" style="text-align: center; margin-bottom: 15px" >
          <el-button type="primary" @click="submitAsscess">提交</el-button>
      </div>
    </div>
    <div v-else style="text-align: center;padding-top: 20px;color: red;">此课程无评估</div>
  </div>
</template>

<script>
  import apiCourseStudy from '@/api/modules/courseStudy.js';
  export default{
    props:{
        studyId: {
          type: String,
        },
        showRecord:{
          type:Boolean,
          default:true
        },
        showSubmit:{
          type:Boolean,
          default:true
        },
        content:{
          type: Object,
          default:()=>{}
        }
    },
    data(){
      return {
        has:true,//是否有评估信息
        allowSubmit:true,//是否可以提交评估
        info:{},//评估信息
        studyItemId:'',//学习内容id
      }
    },
    mounted() {
      this.loadAssessInfo();
    },
    watch:{
      content(newVal){
        this.loadAssessInfo();
      }
    },
    methods:{
      loadAssessInfo(){//评估保存失败
        if(this.content.content!='' && this.content.content.length>10){
          let json=JSON.parse(this.content.content);
          if(json){
             json.items.forEach(item=>{
               if(item.qType==1){
                  item.answer=0;
               }else{
                 item.answer='';
               }
             })
          }
          //console.log(json,"info")
          this.info=json;
          if(this.showRecord){
            this.loadHistory();
          }
        }
      },
      loadHistory(){
        if(this.studyId==''){
          return;
        }
        let params={
          studyId:this.studyId,
          contentId:this.content.id
        }
        apiCourseStudy.myAssessList(params).then(res=>{
          if(res.status==200){
            if(res.result.length>0){
              this.allowSubmit=false;
              this.info=JSON.parse(res.result[0].asContent);
              //回调处理
              this.$emit("success", this.info);
            }
          }else{
            this.$message.error(res.message);
          }
        })
      },
      submitAsscess() {
        let dataJson=JSON.stringify(this.info);
        //计算评估得分
        let countStr=this.info.resultCount;
        let countScore=0;
        let pass=true;
        this.info.items.forEach((item,idx)=>{
          if(item.qType==1){
            if(item.answer==0){
              pass=false;
            }
            var str='[q'+(idx+1)+']';
            countStr=countStr.replace(str,item.answer);
          }
        });
        if(!pass){
          this.$message.error("请填写完整再提交");
          return
        }
        //console.log(countStr);
        countScore=eval(countStr);
        //console.log(countScore,"countScore");
        let pamars = {
          studyItemId: this.studyItemId,//学习内容记录id,
          studyId: this.studyId,//学习id,
          courseId: this.content.courseId,//课程id,
          contentId: this.content.id,//内容id,
          asContent: dataJson,//内容
          asScore: countScore//评估得分
        }
        apiCourseStudy.saveAssess(pamars).then(res=>{
            if(res.status==200){
              this.allowSubmit=false;
              this.$message.success("提交成功，谢谢您的评估");
              this.content.status=9;
              //this.content.status=
            }else{
              this.$message.error(res.message);
            }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .assess-div {
    border: 1px solid #dadada;
    min-height: 500px;
    padding: 20px;
    text-align: left;
    font-size: 14px;
    .assess-info {
      margin-bottom: 10px;
    }
  }
</style>