GCLS_Page_Learn/src/views/main/TaskList.vue

<template>
  <div class="tasks">
    <div class="tasks-left">
      <!-- 菜单 -->
      <main-menu cur-tab="TaskList" />
      <!-- 日历 -->
      <monthly-calendar ref="calendar" @changeTimeUnit="changeTimeUnit" @changeDate="changeDate" />
      <!-- 通知 -->
      <div class="notice">
        <div class="notice-title">
          <svg-icon icon-class="task-notification" class-name="svg-normal" />
          <span>通知</span>
          <span class="notice-title-link" @click="goPersonal">全部 <i class="el-icon-arrow-right" /></span>
        </div>
        <!-- 通知列表 -->
        <div class="notice-container">
          <ul>
            <li v-for="{ id, is_read, content, send_time, source_entity_id, message_type } in message_list" :key="id">
              <span class="is-read" v-text="is_read === 'false' ? 'new' : ''" />
              <span
                class="notice-content"
                :style="{
                  color: is_read === 'true' ? '#8c8c8c' : '#000',
                  cursor: message_type === 201 ? 'text' : 'pointer'
                }"
                :title="content"
                @click="readMyMessage(id, source_entity_id, message_type)"
              >
                {{ content }}
              </span>
              <span class="send-time">{{ send_time }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="tasks-right">
      <div class="task-title">
        <svg-icon icon-class="task-list" class-name="svg-normal" /><span class="task-title-name">任务列表</span>
        <div class="curricula-type">
          <span
            v-for="{ constant, name } in taskTimeList"
            :key="constant"
            :class="['curricula-type-item', timeType === constant ? 'active' : '']"
            @click="changeTaskTime(constant)"
          >
            {{ name }}
          </span>
        </div>
        <span class="select-prefix">
          <svg-icon icon-class="schedule" class-name="svg-normal" />
        </span>
        <el-select v-model="course_id" class="select-course" @change="changeCourse">
          <el-option label="全部" value="" />
          <el-option v-for="{ id, name } in course_list" :key="id" :label="name" :value="id" />
        </el-select>
      </div>

      <div class="task-container">
        <ul v-for="({ task_list, date_stamp }, i) in task_group_list" :key="i" class="task-list">
          <li v-if="time_unit === 'MONTH'" class="date-stamp">
            {{ date_stamp }}
          </li>
          <li
            v-for="(
              { id, cs_item_name, time_type, course_name, teaching_type, time_space_view_txt, name }, j
            ) in task_list"
            :key="id"
            class="task-item"
            :style="{
              'background-color': colorMatching[i % 7].background,
              color: colorMatching[i % 7].main,
              border: `1px solid ${colorMatching[i % 7].border}`
            }"
            @click="taskLink_outside(id)"
          >
            <div class="task-item-top">
              <svg-icon icon-class="arrival" :style="{ color: colorMatching[i % 7].main }" />
              <span class="cs-item-name">{{ cs_item_name }} - {{ name }}</span>
              <span
                class="task-button"
                :style="{ 'background-color': buttonColorList[j % 3] }"
                @click.stop="taskLink(teaching_type, id)"
              >
                {{ getTimeTypeName(time_type) }}任务
              </span>
            </div>
            <div class="task-item-bottom">
              <div>
                {{ course_name }}
              </div>
              <div class="time-txt">
                {{ time_space_view_txt }}
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import MainMenu from './components/MainMenu.vue';
import { PageQueryMyMessageList, GetMyTaskList } from '@/api/table';
import { CreateEnterLiveRoomSession } from '@/api/live';
import { ReadMyMessage } from '@/api/user';
import { colorMatching, getMenuList, buttonColorList } from './data';
import { taskTimeList } from '@/common/data';
import { GetMyCourseList_TaskBelong } from '@/api/list';
import MonthlyCalendar from './components/MonthlyCalendar.vue';

export default {
  name: 'TaskList',
  components: {
    MonthlyCalendar,
    MainMenu
  },
  data() {
    return {
      colorMatching,
      buttonColorList,
      taskTimeList,
      course_id: '',
      selected: '',
      timeType: -1,
      menuList: getMenuList(),
      task_group_list: [],
      message_list: [],
      course_list: []
    };
  },
  computed: {
    time_unit() {
      return this.$refs.calendar.time_unit;
    }
  },
  created() {
    PageQueryMyMessageList({
      read_status: -1,
      message_type: -1,
      page_capacity: 4,
      cur_page: 1
    }).then(({ message_list }) => {
      this.message_list = message_list;
    });
  },
  mounted() {
    this.init();
  },
  methods: {
    getTimeTypeName(type) {
      if (type === 0) return '课前';
      if (type === 1) return '课中';
      if (type === 2) return '课后';
      return '';
    },

    getMyCourseList_TaskBelong() {
      let { curYear, curMonth, focusDate } = this.$refs.calendar;
      GetMyCourseList_TaskBelong({
        time_unit: this.time_unit,
        date_stamp: `${curYear}-${curMonth}-${focusDate}`,
        month_stamp: `${curYear}-${curMonth}`
      }).then(({ course_list }) => {
        this.course_list = course_list;
      });
    },

    getMyTaskList() {
      let { curYear, curMonth, focusDate } = this.$refs.calendar;
      GetMyTaskList({
        time_unit: this.time_unit,
        date_stamp: `${curYear}-${curMonth}-${focusDate}`,
        month_stamp: `${curYear}-${curMonth}`,
        time_type: this.timeType,
        course_id: this.course_id
      }).then(({ task_group_list }) => {
        this.task_group_list = task_group_list;
      });
    },

    // 改变任务时间类型
    changeTaskTime(constant) {
      this.timeType = constant;
      this.getMyTaskList();
    },

    changeTimeUnit() {
      this.init();
    },

    changeDate() {
      this.init();
    },

    init() {
      this.course_id = '';
      this.getMyTaskList();
      this.getMyCourseList_TaskBelong();
    },

    changeCourse() {
      this.getMyTaskList();
    },

    taskLink(type, task_id) {
      let userType = this.$store.state.user.user_type;
      if (type === 10) {
        CreateEnterLiveRoomSession({
          task_id
        }).then(({ live_room_sys_user_id, room_id, session_id, room_user_id }) => {
          this.$router.push({
            path: `/live/${userType === 'TEACHER' ? 'teacher' : 'student'}`,
            query: { live_room_sys_user_id, room_id, session_id, task_id, room_user_id }
          });
        });
      } else {
        this.$router.push(`/task_detail/${userType === 'STUDENT' ? 'student' : 'teacher'}/${task_id}`);
      }
    },

    taskLink_outside(task_id) {
      this.$router.push(
        `/task_detail/${this.$store.state.user.user_type === 'STUDENT' ? 'student' : 'teacher'}/${task_id}`
      );
    },

    readMyMessage(id, source_entity_id, message_type) {
      if (message_type === 201) return;
      ReadMyMessage({ id }).then(() => {
        this.taskLink_outside(source_entity_id);
      });
    },

    goPersonal() {
      window.location.href = `/GCLS-Personal/#/EnterSys`;
    }
  }
};
</script>

<style lang="scss" scoped>
.tasks {
  display: flex;

  &-left {
    width: 392px;
    margin-right: 16px;

    // 日历
    .monthly-calendar {
      min-height: 498px;
      padding: 32px;
      margin-bottom: 16px;
      background-color: #fff;
      border-radius: 8px;
    }

    .notice {
      height: calc(100vh - 705px);
      min-height: 210px;
      padding: 32px;
      background: #fff;
      border-radius: 8px;

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

        > span:first-of-type {
          flex: 1;
          padding-left: 16px;
        }

        &-link {
          color: #bababa;
        }
      }

      &-container {
        height: 100%;
        overflow: auto;

        ul {
          margin-top: 16px;

          li {
            display: flex;
            padding: 8px 0;
            border-bottom: 1px solid $border-color;

            .is-read {
              width: 80px;
              color: $basic-color;
            }

            .notice-content {
              position: relative;
              width: 230px;
              max-height: 3.45em;
              margin-right: 16px;
              overflow: hidden;
              word-break: break-all;

              // 多行文本隐藏
              &::after {
                position: absolute;
                top: 2em;
                right: 0;
                padding-left: 40px;
                font-size: 18px;
                content: '...';
                background: linear-gradient(to right, transparent, #fff 55%);
              }
            }

            .send-time {
              color: #8c8c8c;
            }
          }
        }
      }
    }
  }

  &-right {
    width: 802px;
    min-height: calc(100vh - 119px);
    padding: 16px 24px;
    background-color: #fff;
    border-radius: 8px;

    .task-title {
      display: flex;
      align-items: center;
      padding-bottom: 16px;
      border-bottom: 1px solid #d9d9d9;

      &-name {
        margin-left: 8px;
        font-weight: 600;
      }

      .curricula-type {
        display: flex;
        align-items: center;
        height: 40px;
        margin: 0 16px;
        color: #8c8c8c;
        background-color: $bac-color;
        border: 1px solid $border-color;
        border-radius: 8px;

        &-item {
          height: 100%;
          padding: 8px;
          line-height: 24px;
          cursor: pointer;

          &.active {
            color: #000;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px $border-color;
          }
        }
      }

      .select-prefix {
        height: 40px;
        padding: 6px;
        margin-right: -1px;
        border: 1px solid $border-color;
        border-radius: 8px 0 0 8px;
      }

      .el-select {
        width: calc(100% - 360px);
      }
    }

    .task-container {
      min-height: calc(100% - 50px);

      .task-list {
        li.date-stamp {
          margin-top: 16px;
          margin-bottom: -8px;
          font-weight: 700;
        }

        .task-item {
          padding: 16px 24px;
          margin-top: 16px;
          cursor: pointer;
          border-radius: 8px;

          &-top {
            display: flex;
            margin-bottom: 8px;

            .cs-item-name {
              flex: 1;
              margin-left: 10px;
            }

            .task-button {
              padding: 4px 8px;
              color: #fff;
              border-radius: 8px;
            }
          }

          &-bottom {
            font-size: 14px;
            color: #808080;

            .time-txt {
              margin-top: 8px;
              color: #000;
            }
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
.tasks {
  .el-select.select-course {
    .el-input__inner {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
}
</style>