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"
        :date-stamp="dateStamp"
        @changeTimeUnit="changeTimeUnit"
        @changeDate="changeDate"
      />
      <!-- 通知 -->
      <div class="notice">
        <div class="notice-title">
          <svg-icon icon-class="task-notification" class-name="svg-normal" />
          <span>{{ $t('Key291') }}</span>
          <span class="notice-title-link" @click="goPersonal">
            {{ $t('Key110') }}
            <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">
          {{ $t('Key278') }}
        </span>
        <div class="curricula-type">
          <span
            v-for="{ constant, name } in taskTimeList"
            :key="constant"
            :class="['curricula-type-item', timeType === constant ? 'active' : '']"
            @click="changeTaskTime(constant)"
          >
            {{ $t(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="$t('Key110')" 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_id: cid,
              course_name,
              teaching_type,
              time_space_view_txt,
              name
            } in task_list"
            :key="id"
            class="task-item"
            :style="getItemStyle(cid)"
            @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 v-if="teaching_type === 10" class="enter-live" @click.stop="taskLink(teaching_type, id)">
                  {{ $t('Key616') }} >
                </span>
              </span>
              <span
                class="task-button"
                :style="{ 'background-color': buttonColorList.get(time_type) }"
                @click.stop="taskLink(teaching_type, id)"
              >
                {{ $t(getTimeTypeName(time_type)) }}{{ $t('Key289') }}
              </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, GetMyBookBuyStatus_CurTaskCoursewareBook } from '@/api/user';
import { colorMatching, 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() {
    const date = this.$route.query.dateStamp;
    return {
      dateStamp: date ? new Date(date) : undefined,
      colorMatching,
      buttonColorList,
      taskTimeList,
      course_id: '',
      selected: '',
      timeType: -1,
      task_group_list: [],
      message_list: [],
      course_list: [],
      // 课程 id 列表，用于颜色显示
      courseIdList: []
    };
  },
  computed: {
    time_unit() {
      return this.$refs.calendar.time_unit;
    }
  },
  created() {
    PageQueryMyMessageList({
      read_status: -1,
      message_type: -1,
      page_capacity: 5,
      cur_page: 1
    }).then(({ message_list }) => {
      this.message_list = message_list;
    });
  },
  mounted() {
    this.init();
  },
  methods: {
    getTimeTypeName(type) {
      if (type === 0) return 'Key292';
      if (type === 1) return 'Key293';
      if (type === 2) return 'Key294';
      return '';
    },

    getMyCourseList_TaskBelong() {
      const { 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() {
      const { 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) {
      const userType = this.$store.state.user.user_type;
      GetMyBookBuyStatus_CurTaskCoursewareBook({ task_id }).then(({ is_buy_all }) => {
        if (is_buy_all === 'false' && userType === 'STUDENT') {
          return this.$message.warning(this.$i18n.t('Key635'));
        }

        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) {
      GetMyBookBuyStatus_CurTaskCoursewareBook({ task_id }).then(({ is_buy_all }) => {
        const userType = this.$store.state.user.user_type;
        if (is_buy_all === 'false' && userType === 'STUDENT') {
          return this.$message.warning(this.$i18n.t('Key635'));
        }
        this.$router.push(`/task_detail/${userType === '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);
      });
    },

    getItemStyle(id) {
      if (!this.courseIdList.includes(id)) {
        this.courseIdList.push(id);
      }
      const i = this.courseIdList.indexOf(id) % 7;
      return {
        'background-color': colorMatching[i].background,
        color: colorMatching[i].main,
        border: `1px solid ${colorMatching[i].border}`
      };
    },

    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: 424px;
      padding: 32px;
      line-height: 1.5;
      background: #fff;
      border-radius: 8px;

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

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

        &-link {
          color: #bababa;
        }
      }

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

        ul {
          margin-top: 16px;

          li {
            display: flex;
            padding: 8px 0;

            &:not(:first-child) {
              border-top: 1px solid $border-color;
            }

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

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

              // 多行文本隐藏
              &::after {
                position: absolute;
                top: 1.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 {
        flex: 1;
      }
    }

    .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;

              .enter-live {
                margin-left: 12px;
                color: #808080;
              }
            }

            .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>