GCLS_Page_Learn/src/views/teacher/main/TaskList.vue

<template>
  <div class="tasks">
    <div class="tasks-top">
      <el-calendar v-model="date" />
      <div class="tasks-top-notification">
        <div class="tasks-top-notification-title">
          <div>
            <svg-icon icon-class="task-notification" />
            <span class="title">任务通知</span>
          </div>
          <div></div>
        </div>
        <div class="tasks-top-notification-container"></div>
      </div>
    </div>
    <div class="tasks-container">
      <div class="tasks-container-title">
        <div class="tasks-container-title-left">
          <svg-icon icon-class="clock" />
          <span class="title">时间轴</span>
          <span class="date">{{ dateTime }}</span>
          <i class="el-icon-arrow-left" @click="dateSkip(-1)" />
          <i class="el-icon-arrow-right" @click="dateSkip(1)" />
        </div>
        <div>
          <el-select v-model="selected"></el-select>
        </div>
      </div>
      <div class="tasks-container-main">
        <div v-for="(item, i) in task_group_list" :key="i" class="tasks-group">
          <div class="tasks-group-top">
            <span class="tasks-group-top-time">{{ item.begin_time_view_text }}</span>
            <span class="tasks-group-top-line"></span>
          </div>
          <div class="tasks-group-list">
            <div v-for="list in item.task_list" :key="list.id" class="tasks-group-list-info">
              <div class="tasks-group-list-info-name">
                {{ timeType(list.time_type) }}任务：{{ list.name }}
                <el-link
                  class="task-link"
                  :underline="false"
                  @click="taskLink(list.teaching_type, list.id)"
                >
                  {{ teachingType(list.teaching_type) }}
                </el-link>
              </div>
              <div class="tasks-group-list-info-item-name">{{ list.cs_item_name }}</div>
              <div class="tasks-group-list-info-time">{{ list.time_space_view_txt }}</div>
              <div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GetMyDayTaskList } from '@/api/table';
import { CreateEnterLiveRoomSession } from '@/api/live';
import { parseTime, formatDate } from '@/utils';

export default {
  name: 'TaskList',
  data() {
    return {
      date: new Date(),
      selected: '',
      task_group_list: []
    };
  },
  computed: {
    dateTime: function () {
      return parseTime(this.date, '{m}-{d}');
    }
  },
  watch: {
    date: function () {
      this.getTaskList();
    }
  },
  mounted() {
    this.getTaskList();
  },
  methods: {
    timeType(type) {
      switch (type) {
        case 0:
          return '课前';
        case 1:
          return '课中';
        case 2:
          return '课后';
        default:
          return '';
      }
    },
    teachingType(type) {
      switch (type) {
        case 10:
          return '进入直播间';
        default:
          return '查看';
      }
    },
    taskLink(type, task_id) {
      if (type === 10) {
        CreateEnterLiveRoomSession({
          task_id
        }).then(({ live_room_sys_user_id, room_id, session_id, room_user_id }) => {
          this.$router.push({
            path: `/live/${this.$store.state.user.user_type === 'TEACHER' ? 'teacher' : 'student'}`,
            query: { live_room_sys_user_id, room_id, session_id, task_id, room_user_id }
          });
        });
      } else {
        this.$message.warning('暂未实现');
      }
    },
    dateSkip(num) {
      let day = 24 * 60 * 60 * 1000 * num;
      this.date = new Date(this.date.getTime() + day);
    },
    getTaskList() {
      GetMyDayTaskList({ date_stamp: formatDate(this.date) }).then(response => {
        this.task_group_list = response.task_group_list;
      });
    }
  }
};
</script>

<style lang="scss">
.tasks {
  &-top {
    display: flex;
    justify-content: space-between;

    .el-calendar {
      width: 334px;
      height: 300px;

      &__header .el-button {
        padding: 7px 10px;
      }

      &-table div.el-calendar-day {
        height: 29px;
      }

      &__body {
        thead th {
          padding: 0 0 4px 0;
        }
      }
    }

    &-notification {
      background-color: #fff;
      flex: 1;
      height: 300px;
      margin-left: 16px;
      padding: 20px 24px;

      &-title {
        height: 56px;

        & .title {
          display: inline-block;
          margin-left: 10px;
        }
      }
    }
  }

  &-container {
    margin-top: 16px;
    border-radius: 8px;
    width: 100%;
    min-height: calc(100vh - 522px);
    background-color: #fff;

    &-title {
      display: flex;
      justify-content: space-between;
      padding: 16px;

      &-left {
        line-height: 40px;

        .title {
          margin-left: 8px;
        }

        .date {
          margin-left: 24px;
          color: #a6a6a6;
          vertical-align: middle;
        }

        .el-icon-arrow-right {
          cursor: pointer;
        }

        .el-icon-arrow-left {
          @extend .el-icon-arrow-right;

          margin: 0 26px 0 33px;
        }
      }
    }

    &-main {
      margin: 0 24px 8px 40px;

      .tasks-group {
        margin-top: 8px;

        &-top {
          display: flex;
          justify-content: space-between;
          align-items: center;

          &-time {
            color: #808080;
          }

          &-line {
            width: calc(100% - 78px);
            height: 1px;
            background-color: #d9d9d9;
          }
        }

        &-list {
          margin-left: 78px;

          &-info {
            display: inline-block;
            padding: 16px 24px;
            border: 1px solid #ccc;
            border-radius: 8px;
            margin: 10px 15px 10px 0;
            background-color: #fff4e3;

            > div {
              margin: 8px 0;
            }

            &-name {
              .task-link {
                font-size: 16px;
                vertical-align: top;
                margin-left: 8px;
                color: $basicColor;
              }
            }

            &-item-name {
              font-size: 14px;
              color: #727280;
            }

            &-time {
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
</style>