GCLS_Page_Learn/src/views/task_details/student/index.vue

<template>
  <div v-loading="loading" class="task-detail">
    <task-top :item-info="itemInfo" @viewFile="viewFile" />

    <div class="task-detail-main">
      <div class="time-type">{{ timeType }}任务 {{ name }}</div>
      <div class="time-interval">{{ time_space_view_txt }}</div>
      <div class="task-require"><span class="label">任务要求</span>{{ content }}</div>
      <div class="task-courseware">
        <span class="label">课件任务</span>
        <div>
          <el-tag
            v-for="item in courseware_list"
            :key="item.courseware_id"
            color="#fff"
            :title="item.courseware_name"
            @click="finishTask(item.courseware_id, item.is_finished)"
          >
            <svg-icon icon-class="courseware" /> <span>{{ item.courseware_name }}</span>
            <svg-icon v-if="item.is_finished === 'true'" class="check-mark" icon-class="check-mark" />
          </el-tag>
        </div>
      </div>
      <div class="accessory-list">
        <span class="label">文档列表</span>
        <div>
          <el-tag v-for="item in accessory_list" :key="item.file_id" color="#fff" :title="item.file_name">
            <span @click="viewFile(item.file_name, item.file_id)">{{ item.file_name }}</span>
          </el-tag>
        </div>
      </div>
      <!-- 完成评价 -->
      <template v-if="my_execute_info.is_finished === 'true'">
        <div class="teacher-commenting">
          <div class="single-line">
            <span class="label">作业</span>
            <div>
              <el-tag
                v-for="item in my_execute_info.homework_list"
                :key="item.file_id"
                color="#fff"
                :title="item.file_name"
              >
                <span @click="viewFile(item.file_name, item.file_id)">{{ item.file_name }}</span>
              </el-tag>
            </div>
          </div>
          <div v-if="teaching_type === 10" class="single-line">
            <span class="label">学员课后评价</span>
            <el-input v-model="my_execute_info.student_remark" disabled type="textarea" resize="none" :rows="6" />
          </div>
          <div v-if="teaching_type === 10" class="single-line">
            <span class="label">学员课后评分</span>
            <el-rate v-model="my_execute_info.student_score" disabled />
          </div>
          <div class="single-line">
            <span class="label">给教师留言</span>
            <el-input v-model="my_execute_info.student_message" disabled type="textarea" resize="none" :rows="6" />
          </div>
          <div class="single-line">
            <span class="label">教师点评</span>
            <el-rate v-model="my_execute_info.teacher_score" disabled />
            <span class="teacher_remark">{{ my_execute_info.teacher_remark }}</span>
          </div>
        </div>
      </template>
      <!-- 直播评价 -->
      <template v-else-if="teaching_type === 10">
        <div class="live-info">
          <div class="single-line">
            <span class="enter-live" @click="enterLive"><svg-icon icon-class="video-red" /> 点击进入直播间</span>
          </div>
          <div class="single-line">
            <span class="label">学员课后评价</span>
            <el-input v-model="student_remark" type="textarea" resize="none" :rows="6" />
          </div>
          <div class="single-line">
            <span class="label">学员课后评分</span>
            <el-rate v-model="student_score" />
          </div>
          <div class="confirm single-line">
            <el-button type="primary" @click="fillTaskExecuteInfo_Student_live">提交</el-button>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="submit-homework">
          <span class="label">提交作业</span>
          <el-upload action="no" :http-request="upload" multiple :show-file-list="false">
            <el-button><svg-icon icon-class="upload" /> 上传文件</el-button>
          </el-upload>
        </div>
        <div class="file-list">
          <el-tag
            v-for="(item, i) in file_list"
            :key="item.file_id"
            color="#fff"
            closable
            :title="item.file_name"
            @close="deleteFile(i)"
          >
            <span>{{ item.file_name }}</span>
          </el-tag>
        </div>
        <div class="leave-message">
          <span class="label">给教师留言</span>
          <el-input v-model="student_message" type="textarea" resize="none" :rows="6" />
        </div>
        <div class="submit-button">
          <el-button type="primary" @click="fillTaskExecuteInfo_Student">完成任务</el-button>
        </div>
      </template>
    </div>

    <completion-view
      :task-id="id"
      :cur-student-id="$store.state.user.user_code"
      :cur-courseware-id="curCoursewareId"
      :dialog-visible="dialogVisible_completion"
      @dialogClose="dialogClose_completion"
    />

    <finish-courseware
      :id="id"
      :courseware-id="coursewareId"
      :dialog-visible="dialogVisible"
      @dialogClose="dialogClose"
    />

    <show-file
      ref="file"
      :file-name="showCurFileName"
      :file-id="showCurFileId"
      @dialogShowFileClose="dialogShowFileClose"
    />
  </div>
</template>

<script>
import TaskTop from '../TaskTop.vue';
import FinishCourseware from '@/components/course/FinishCourseware.vue';
import CompletionView from '@/components/course/CompletionView.vue';
import ShowFile from '@/common/show_file';
import { fileUpload, FileDownload } from '@/api/app';
import { CreateEnterLiveRoomSession } from '@/api/live';
import { GetTaskInfo, FillMyTaskExecuteInfo_Student } from '@/api/course';
import { isAllowFileType } from '@/utils/validate';

export default {
  components: {
    FinishCourseware,
    TaskTop,
    CompletionView,
    ShowFile
  },
  data() {
    return {
      // 任务 ID
      id: this.$route.params.id,
      itemInfo: {
        course_name: '',
        cs_item_name: '',
        cs_item_learning_material_list: [],
        time_space_view_txt: ''
      },
      student_message: '',
      name: '',
      teaching_type: '',
      time_type: '',
      content: '',
      task_mode: '',
      time_space_view_txt: '',
      courseware_list: [],
      accessory_list: [],
      file_list: [],
      dialogVisible: false,
      coursewareId: '',
      curCoursewareId: '',
      dialogVisible_completion: false,
      my_execute_info: {},
      student_remark: '',
      student_score: 0,
      loading: false,
      showCurFileName: '',
      showCurFileId: ''
    };
  },
  computed: {
    timeType() {
      switch (this.time_type) {
        case 0:
          return '课前';
        case 1:
          return '课中';
        case 2:
          return '课后';
        default:
          return '';
      }
    }
  },
  created() {
    this.loading = true;
    GetTaskInfo({
      id: this.id,
      is_contain_cs_item_learning_material: true,
      is_contain_my_execute_info: true
    })
      .then(
        ({
          name,
          teaching_type,
          time_type,
          course_name,
          cs_item_name,
          courseware_list,
          accessory_list,
          cs_item_learning_material_list,
          task_mode,
          content,
          time_space_view_txt,
          my_execute_info
        }) => {
          this.itemInfo = {
            time_space_view_txt,
            course_name,
            cs_item_name,
            cs_item_learning_material_list
          };

          this.name = name;
          this.content = content;
          this.teaching_type = teaching_type;
          this.time_type = time_type;
          this.courseware_list = courseware_list;
          this.accessory_list = accessory_list;
          this.task_mode = task_mode;
          this.time_space_view_txt = time_space_view_txt;
          this.my_execute_info = my_execute_info;
        }
      )
      .finally(() => {
        this.loading = false;
      });
  },
  methods: {
    upload(file) {
      let fileName = file.file.name;
      if (!isAllowFileType(fileName)) {
        this.$message.warning(`文件：【${fileName}】文件类型，不允许上传`);
        return;
      }

      fileUpload('Open', file).then(({ file_info_list }) => {
        if (file_info_list.length > 0) {
          let { file_id, file_name, file_url } = file_info_list[0];
          this.file_list.push({ file_id, file_name, file_url });
        }
      });
    },

    deleteFile(i) {
      this.file_list.splice(i, 1);
    },

    download(FileID) {
      FileDownload(FileID).then(data => {
        console.log(data);
      });
    },

    viewFile(fileName, fileId) {
      this.showCurFileName = fileName;
      this.showCurFileId = fileId;
      this.$refs.file.showDialog();
    },

    dialogShowFileClose() {
      this.showCurFileName = '';
      this.showCurFileId = '';
    },

    fillTaskExecuteInfo_Student() {
      let homework_file_id_list = [];
      this.file_list.forEach(item => {
        homework_file_id_list.push(item.file_id);
      });
      FillMyTaskExecuteInfo_Student({
        task_id: this.id,
        homework_file_id_list,
        student_message: this.student_message,
        is_finished: true
      }).then(() => {
        this.$message.success('任务完成成功');
        this.$router.go(0);
      });
    },

    fillTaskExecuteInfo_Student_live() {
      FillMyTaskExecuteInfo_Student({
        task_id: this.id,
        is_finished: true,
        student_remark: this.student_remark,
        student_score: this.student_score
      }).then(() => {
        this.$message.success('提交成功');
        this.$router.go(0);
      });
    },

    enterLive() {
      CreateEnterLiveRoomSession({
        task_id: this.id
      }).then(({ live_room_sys_user_id, room_id, session_id, room_user_id }) => {
        this.$router.push({
          path: `/live/student`,
          query: { live_room_sys_user_id, room_id, session_id, task_id: this.id, room_user_id }
        });
      });
    },

    // 完成任务
    finishTask(id, is_finished) {
      if (this.my_execute_info.is_finished === 'true' && is_finished === 'false') {
        return this.$message.warning('该课件没有被完成');
      }
      if (is_finished === 'true') {
        this.dialogVisible_completion = true;
        this.curCoursewareId = id;
      } else {
        this.dialogVisible = true;
        this.coursewareId = id;
      }
    },

    dialogClose() {
      this.dialogVisible = false;
      this.coursewareId = '';
    },

    dialogClose_completion() {
      this.dialogVisible_completion = false;
      this.curCoursewareId = '';
    }
  }
};
</script>

<style lang="scss">
@import '~@/styles/mixin';

$bor-color: #d9d9d9;

.task-detail {
  @include container;

  min-height: calc(100vh - 130px);
  margin-top: 56px;

  .el-tag {
    @include el-tag;

    margin: 0 8px 6px 0;
    border-color: $bor-color;
    border-radius: 4px;

    > span {
      cursor: pointer;
    }
  }

  &-main {
    padding: 24px 32px;
    margin-top: 16px;
    background-color: #fff;
    border-radius: 8px;

    .time-type {
      font-size: 20px;
      font-weight: 500;
    }

    .time-interval {
      padding: 16px 0;
      color: #737373;
    }

    %submit-homework,
    .submit-homework {
      display: flex;
      align-items: center;
      padding-top: 24px;
      border-top: 1px solid $bor-color;
    }

    %teacher-commenting,
    .teacher-commenting {
      @extend %submit-homework;

      flex-direction: column;

      > .single-line {
        display: flex;
        width: 100%;

        + div {
          margin-top: 24px;
        }

        .teacher_remark {
          margin-left: 24px;
        }
      }
    }

    .live-info {
      @extend %teacher-commenting;

      .enter-live {
        padding: 8px 26px;
        color: #ff6868;
        cursor: pointer;
        border: 1px solid #ff6868;
        border-radius: 20px;
      }

      .confirm {
        padding-left: 120px;
      }
    }

    .file-list {
      padding-left: 120px;
      margin-bottom: 16px;

      > .el-tag {
        padding: 0 10px;
        color: #409eff;
        border-color: #d9ecff;
      }
    }

    .leave-message {
      display: flex;
      align-items: flex-start;

      .label {
        margin-top: 8px;
      }
    }

    .task-courseware .el-tag {
      cursor: pointer;

      .svg-icon {
        margin-right: 8px;
        font-size: 18px;
      }

      .check-mark {
        position: relative;
        top: 2px;
        right: -20px;
        margin-left: 12px;
      }
    }

    .task-require,
    .task-courseware,
    .accessory-list,
    .submit-homework,
    .leave-message,
    .live-info,
    .teacher-commenting {
      display: flex;
      margin-bottom: 16px;

      .label {
        display: inline-block;
        width: 120px;
        min-width: 120px;
      }
    }

    .submit-button {
      padding-left: 120px;
    }
  }
}
</style>