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

<template>
  <div class="task-detail">
    <div class="task-detail-top">
      <div class="title">
        <span class="title-name">{{ name }}</span>
        <span class="title-time">{{ time_space_view_txt }}</span>
      </div>
      <div class="course_name">{{ course_name }}</div>
      <div class="learning-material">
        <div class="learning-material-title">学习资料</div>
        <el-tag
          v-for="item in learning_material_list"
          :key="item.file_id"
          color="#fff"
          :title="item.file_name"
        >
          <span>{{ item.file_name }}</span>
        </el-tag>
      </div>
    </div>
    <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>
        <el-tag
          v-for="item in courseware_list"
          :key="item.courseware_id"
          color="#fff"
          :title="item.courseware_name"
        >
          <span>{{ item.courseware_name }}</span>
        </el-tag>
      </div>
      <div class="accessory-list">
        <span class="label">文档列表</span>
        <el-tag
          v-for="item in accessory_list"
          :key="item.file_id"
          color="#fff"
          :title="item.file_name"
        >
          <span>{{ item.file_name }}</span>
        </el-tag>
      </div>
      <div class="submit-homework">
        <span class="label">提交作业</span>
        <el-upload action="no" :http-request="upload" multiple :show-file-list="false" accept="*">
          <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"></el-input>
      </div>
      <div class="submit-button">
        <el-button type="primary" @click="fillTaskExecuteInfo_Student">完成任务</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { fileUpload, FileDownload } from '@/api/app';
import { GetTaskInfo, FillTaskExecuteInfo_Student } from '@/api/course';

export default {
  data() {
    return {
      id: this.$route.params.id,
      student_message: '',
      name: '',
      teaching_type: '',
      time_type: '',
      course_name: '',
      content: '',
      begin_time: '',
      end_time: '',
      task_mode: '',
      time_space_view_txt: '',
      courseware_list: [],
      accessory_list: [],
      learning_material_list: [],
      file_list: []
    };
  },
  computed: {
    timeType() {
      switch (this.time_type) {
        case 0:
          return '课前';
        case 1:
          return '课中';
        case 2:
          return '课后';
        default:
          return '';
      }
    }
  },
  created() {
    GetTaskInfo({
      id: this.id
    }).then(
      ({
        name,
        teaching_type,
        time_type,
        course_name,
        begin_time,
        end_time,
        courseware_list,
        accessory_list,
        learning_material_list,
        task_mode,
        content,
        time_space_view_txt
      }) => {
        this.name = name;
        this.course_name = course_name;
        this.content = content;
        this.teaching_type = teaching_type;
        this.time_type = time_type;
        this.begin_time = begin_time;
        this.end_time = end_time;
        this.courseware_list = courseware_list;
        this.accessory_list = accessory_list;
        this.task_mode = task_mode;
        this.learning_material_list = learning_material_list;
        this.time_space_view_txt = time_space_view_txt;
      }
    );
  },
  methods: {
    upload(file) {
      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);
      });
    },

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

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

.task-detail {
  @include container;

  .el-tag {
    @include el-tag;

    border-radius: 4px;
    border-color: $bor-color;
  }

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

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;

      &-name {
        font-size: 24px;
        font-weight: 700;
      }

      &-time {
        color: #737373;
      }
    }

    .course_name {
      margin: 8px 0 24px;
    }

    .learning-material {
      border-top: 1px solid $bor-color;
      padding-top: 24px;
      margin-bottom: 16px;

      &-title {
        font-size: 18px;
      }
    }
  }

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

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

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

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

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

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

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

      .label {
        margin-top: 8px;
      }

      .el-textarea {
        width: 1010px;
      }
    }

    .task-require,
    .task-courseware,
    .accessory-list,
    .submit-homework,
    .leave-message {
      margin-bottom: 16px;

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

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