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

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

    <div class="teacher-task-detail-main">
      <div class="student-finish-situation">
        <div>学员完成情况</div>
        <div class="student-list" :style="{ height: student_list_height + 'px' }">
          <ul>
            <li
              v-for="item in student_list"
              :key="item.student_id"
              :class="['student-item', { active: item.student_id === curStudentId }]"
              @click="getTaskStudentExecuteInfo(item.student_id)"
            >
              <span>{{ item.student_name }}</span>
              <svg-icon v-if="item.is_finished === 'true'" icon-class="check-mark" />
            </li>
          </ul>
        </div>
      </div>
      <div class="finish-detail">
        <div class="student-info">
          <div>
            <el-avatar :src="curFinishDetail.student_image_url" :size="32" icon="el-icon-user-solid" />
            <span class="student-info-name">{{ curFinishDetail.student_name }}</span>
          </div>
          <span class="finish-time">{{ curFinishDetail.finish_time_view_txt }}</span>
        </div>
        <div ref="situation" class="finish-situation">
          <div class="title">课件任务</div>
          <div class="courseware-list">
            <el-tag
              v-for="item in curFinishDetail.courseware_list"
              :key="item.courseware_id"
              color="#fff"
              :title="item.courseware_name"
              @click="showCompletionView(item.courseware_id, item.is_finished)"
            >
              <div class="courseware">
                <svg-icon icon-class="courseware" />
                <span class="courseware_name">{{ item.courseware_name }}</span>
                <svg-icon v-if="item.is_finished === 'true'" class="check-mark" icon-class="check-mark-circle" />
              </div>
            </el-tag>
          </div>
          <div class="title">文档列表</div>
          <div>
            <el-tag v-for="item in accessory_list" :key="item.file_id" :title="item.file_name">
              <span @click="viewFile(item.file_name, item.file_id)">{{ item.file_name }}</span>
            </el-tag>
          </div>
          <div class="title">作业列表</div>
          <div>
            <el-tag
              v-for="item in curFinishDetail.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 class="title">学生留言</div>
          <div>{{ curFinishDetail.student_message }}</div>
          <template v-if="teaching_type === 10">
            <div class="title">学员课后评价</div>
            <div>{{ student_remark }}</div>
            <div class="title">
              <span>学员课后评分</span>
              <el-rate v-model="student_score" disabled />
            </div>
          </template>
          <div class="title">
            <span>教师点评</span>
            <el-rate v-model="teacher_score" />
          </div>
          <div>
            <el-input v-model="teacher_remark" type="textarea" resize="none" :rows="6" />
          </div>
          <div class="confirm">
            <el-button type="primary" @click="remarkTaskStudentExecuteInfo_Teacher">提交</el-button>
            <el-button v-if="student_list.length > 1" @click="next">
              {{ buttonName() }} <i class="el-icon-right" />
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <completion-view
      :task-id="id"
      :cur-student-id="curStudentId"
      :cur-courseware-id="curCoursewareId"
      :dialog-visible="dialogVisible"
      @dialogClose="dialogClose"
    />

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

<script>
import CompletionView from '@/components/course/CompletionView.vue';
import ShowFile from '@/common/show_file';
import TaskTop from '../TaskTop.vue';
import { GetTaskInfo, GetTaskStudentExecuteInfo, RemarkTaskStudentExecuteInfo_Teacher } from '@/api/course';

export default {
  components: { CompletionView, TaskTop, ShowFile },
  data() {
    return {
      id: this.$route.params.id,
      name: '',
      teaching_type: '',
      itemInfo: {
        course_name: '',
        cs_item_name: '',
        cs_item_learning_material_list: [],
        courseware_list: [],
        time_space_view_txt: ''
      },
      time_type: '',
      task_mode: '',
      time_space_view_txt: '',
      courseware_list: [],
      accessory_list: [],
      file_list: [],
      student_list: [],
      curStudentId: '',
      // 当前学生完成详情
      curFinishDetail: {
        student_name: '',
        student_image_url: '',
        courseware_list: [],
        homework_list: [],
        student_message: '',
        finish_time_view_txt: ''
      },
      teacher_remark: '',
      teacher_score: 0,
      student_remark: '',
      student_score: 0,
      dialogVisible: false,
      curCoursewareId: '',
      loading: false,
      student_list_height: 490,
      showCurFileName: '',
      showCurFileId: ''
    };
  },
  created() {
    this.loading = true;
    GetTaskInfo({
      id: this.id,
      is_contain_cs_item_learning_material: true,
      is_contain_student: true
    })
      .then(
        ({
          name,
          teaching_type,
          time_type,
          course_name,
          courseware_list,
          cs_item_name,
          accessory_list,
          cs_item_learning_material_list,
          task_mode,
          time_space_view_txt,
          student_list
        }) => {
          this.itemInfo = {
            time_space_view_txt,
            course_name,
            cs_item_name,
            cs_item_learning_material_list,
            courseware_list
          };
          this.name = name;
          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.student_list = student_list;
          if (student_list.length > 0) this.getTaskStudentExecuteInfo(student_list[0].student_id);
        }
      )
      .finally(() => {
        this.loading = false;
      });
  },
  methods: {
    getTaskStudentExecuteInfo(student_id) {
      GetTaskStudentExecuteInfo({
        task_id: this.id,
        student_id
      }).then(
        ({
          courseware_list,
          homework_list,
          student_message,
          student_name,
          student_image_url,
          finish_time_view_txt,
          teacher_remark,
          teacher_score,
          student_remark,
          student_score
        }) => {
          this.curStudentId = student_id;
          this.teacher_remark = teacher_remark;
          this.teacher_score = teacher_score;
          this.student_remark = student_remark;
          this.student_score = student_score;
          this.curFinishDetail = {
            courseware_list,
            homework_list,
            student_message,
            student_name,
            student_image_url,
            finish_time_view_txt
          };
          this.$nextTick(() => {
            this.student_list_height = this.$refs.situation.clientHeight;
          });
        }
      );
    },

    showCompletionView(id, is_finished) {
      if (is_finished === 'false') return this.$message.warning('该课件没有被完成');
      this.curCoursewareId = id;
      this.dialogVisible = true;
    },

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

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

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

    buttonName() {
      let list = this.student_list;
      if (list.length <= 0) return '';
      return list[list.length - 1].student_id === this.curStudentId ? '上一个' : '下一个';
    },

    remarkTaskStudentExecuteInfo_Teacher() {
      RemarkTaskStudentExecuteInfo_Teacher({
        task_id: this.id,
        student_id: this.curStudentId,
        teacher_score: this.teacher_score,
        teacher_remark: this.teacher_remark
      }).then(() => {
        this.$message.success('点评成功');
      });
    },

    next() {
      let list = this.student_list;
      if (list.length <= 0) {
        return this.$message.warning('当前学生列表为空');
      }
      let curIndex = list.findIndex(item => item.student_id === this.curStudentId);
      let nextList = list.length - 1 === curIndex ? list[curIndex - 1] : list[curIndex + 1];
      if (nextList) this.getTaskStudentExecuteInfo(nextList.student_id);
    }
  }
};
</script>

<style lang="scss">
@import '~@/styles/mixin';
$bor-color: #d9d9d9;

.teacher-task-detail {
  @include container;
  @include dialog;

  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 {
    display: flex;
    min-height: calc(100vh - 390px);
    margin-top: 16px;
    background-color: #fff;
    border-radius: 8px;

    .student-finish-situation {
      flex: 3;
      padding: 24px 0;

      > div:first-child {
        padding: 0 32px;
        margin-bottom: 24px;
        font-weight: 700;
      }
      // 学员列表
      .student-list {
        overflow: auto;

        ul {
          cursor: pointer;

          .student-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 32px;

            &.active {
              background-color: #f2f2f2;
            }
          }
        }
      }
    }

    // 完成详情
    .finish-detail {
      flex: 7;
      border-left: 1px solid #dbdbdb;

      .student-info {
        display: flex;
        justify-content: space-between;
        height: 89px;
        padding: 28px 32px;
        line-height: 32px;
        border-bottom: 1px solid #dbdbdb;

        &-name {
          display: inline-block;
          height: 32px;
          margin-left: 24px;
          line-height: 32px;
          vertical-align: text-bottom;
        }

        .finish-time {
          color: #999;
        }
      }

      // 完成情况
      .finish-situation {
        width: 100%;
        padding: 24px 32px;

        .el-rate {
          display: inline-block;
          margin-left: 42px;
        }

        .title {
          font-size: 18px;
          font-weight: bold;

          + div {
            padding: 16px 0;
          }
        }

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

            .courseware {
              overflow: hidden;

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

              .check-mark {
                position: relative;
                top: 2px;
                margin: 0 0 0 12px;
              }

              &_name {
                display: inline-block;
                max-width: 120px;
              }
            }
          }
        }

        // 学员详情按钮
        .confirm {
          display: flex;
          justify-content: space-between;

          .el-button {
            width: 110px;
          }
        }
      }
    }
  }
}
</style>