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

<template>
 <div>
   <div v-if="has" class="homework-div">
     <div>
       <div class="homework-title">作业名称</div>
       <div class="homework-content">{{info.name}}</div>
     </div>
     <div>
       <div class="homework-title">内容</div>
       <div class="homework-content">{{info.content}}</div>
     </div>
     <div v-if="info.file">
       <div class="homework-title">附件</div>
       <div class="homework-content" style="color: blue">
           <a :href="fileBaseUrl+info.file" target="_blank">下载作业附件</a></div>
     </div>
     <div>
       <div class="homework-title">截止时间</div>
       <div class="homework-content" :style="{color:close? 'red':''}">{{info.deadTime}}</div>
     </div>
     <div v-show="!close && showSubmit">
       <div v-if="info.submitMode>1">
         <div class="homework-title">作业内容</div>
         <div class="homework-content">
           <el-input type="textarea" rows="5" show-word-limit maxlength="255" v-model="answer" placeholder="(限255个字)"></el-input>
          </div>
       </div>
       <div v-if="info.submitMode==1 || info.submitMode==3">
           <div class="homework-title">上传作业</div>
           <div class="homework-content">
               <div v-if="filePath!=''">
                 <el-tag closable type="success" @close="removeHomeworkFile">作业附件</el-tag><span style="margin-left: 10px;">请点击下面的提交</span>
               </div>
               <div v-else >
                 <file-upload dir="files" :isShowTip="false" @success="uploadHomeworkFile" @remove="removeHomeworkFile"></file-upload>
               </div>
           </div>
       </div>
       <div style="text-align: center;padding-bottom: 10px;">
           <el-button type="primary" :disabled="isSubmit" @click="submitHomework()">{{records.length>0?'重新提交':'提交'}}</el-button>
       </div>
     </div>
     <div v-show="showRecord"><!--作业提交记录-->
      <el-table :data="records" style="width: 100%" border>
         <el-table-column prop="endTime" label="提交时间" width="100" align="center"></el-table-column>
         <el-table-column  label="内容">
           <template slot-scope="scope">
             <div>{{scope.row.hwAnswer}}</div>
             <div style="padding-top: 5px;" v-if="scope.row.filePath!=''">
               <a :href="fileBaseUrl+scope.row.filePath" target="_blank">下载上传的作业文件</a>
             </div>
           </template>
         </el-table-column>
       </el-table>
     </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';
import apiCourse from '@/api/modules/course.js';
import FileUpload from '@/components/FileUpload/index.vue';
export default {
  components: { FileUpload },
  props:{
      studyId: {
        type: String,
      },
      showRecord:{
        type:Boolean,
        default:true
      },
      showSubmit:{
        type:Boolean,
        default:true
      },
      content: {
        type: Object,
        default:()=>{}
      }
  },
  data() {
    return {
      fileBaseUrl:process.env.VUE_APP_FILE_BASE_URL,
      has:true,
      info:{},
      studyItemId:'',
      studyItemIdOnce: '',
      filePath:'',
      answer:'',
      close:false,
      records:[],//作业记录
      isSubmit:false,
    };
  },
  mounted() {
    this.loadHomeworkInfo();
  },
  watch:{
    content(newVal){
      this.loadHomeworkInfo();
    }
  },
  methods: {
    loadHomeworkInfo(){
      apiCourse.getHomework(this.content.id).then(res=>{
         if(res.status==200){
             this.info=res.result;
             //检查是否过期
            if(res.result.deadTime!=''){
               var d = new Date(res.result.deadTime);
               var now=new Date();
               if(now.getTime() > d.getTime()){
                  this.close=true;
               } else {
                  this.close=false;
               }
            }
             if(!this.showTest && this.showRecord){
               this.loadRecord();
             }
         }else if(res.status==404){
            //没有找到作业信息
         }else{
           this.$message.error(res.message);
         }
      });
      //
    },
    loadRecord(){
      let params={
        studyId:this.studyId,
        contentId:this.content.id
      }
      apiCourseStudy.myHomeworkList(params).then(rs=>{
        if(rs.status==200){
          this.studyItemId = ''
          this.records=rs.result;
          if(rs.result.length>0){
            this.studyItemIdOnce = rs.result[rs.result.length - 1].id;
          }
        }
      })
    },
    //作业上传
    uploadHomeworkFile(res) {
      this.filePath = res.result.filePath;
    },
    removeHomeworkFile(){
       this.$confirm('您确定要删除已上传的附件吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.filePath='';
                //从服务器端删除
                this.$message({ type: 'success',  message: '删除成功!' });
              })

    },
    submitHomework() {//提交作业
      if(this.content.submitMode==1){
        if(this.filePath==''){
          this.$message.error('请上传作业内容');
          return;
        }
      }else if(this.content.submitMode==2){
        if(this.answer==''){
          this.$message.error('请先填写作业内容');
          return;
        }
      }else{
        if(this.answer=='' && this.filePath==''){
          this.$message.error('请填写或上传作业');
          return;
        }
      }
      this.isSubmit = true
      let pamars = {
        studyItemId: this.studyItemId || this.studyItemIdOnce,//学习内容记录id,
        studyId: this.studyId,//学习id,
        courseId: this.content.courseId,//课程id,
        contentId: this.content.id,//内容id,
        hwId:this.info.id,//作业的id
        hwName: this.info.name,//作业的名称
        //hwContent: this.homeworkInfo.info.content,//作业的内容,先不要此字段了
        filePath:  this.filePath,//文件的路径，可以为空，
        hwAnswer: this.answer,//文本提交的信息
        score: 0
      }
      apiCourseStudy.saveHomework(pamars).then(res=>{
        this.isSubmit = false
         if(res.status==200){
            this.$message.success("作业已提交");
            this.filePath='';
            this.answer='';
            this.studyItemId=res.result.id;
            this.records=[res.result];
            this.$emit("submit", this.content);
         }else {
            this.$message.error(res.message);
         }

      })
    },
  }
};
</script>

<style scoped lang="scss">
  .homework-div {
    border: 1px solid #dadada;
    min-height: 500px;
    padding: 20px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    >div{
      width: 100%;
      text-align: left;
      .homework-title {
        margin-bottom: 10px;
        font-weight: 600;
      }
      .homework-content {
        color: #666;
        margin-bottom: 10px;
        width: 100%;
      }
    }

  }
</style>