GCLS_Page_Learn/src/views/main/curricula_list/student.vue

<template>
  <div class="curricula-student">
    <MainMenu cur-tab="CurriculaList" />
    <!-- 查询条件 -->
    <div class="curricula-student-search">
      <div class="curricula-student-search-condition">
        <el-input v-model="search" prefix-icon="el-icon-search" @change="queryMyCourseList">
          <el-button slot="append" @click="queryMyCourseList">
            {{ $t('Key131') }}
          </el-button>
        </el-input>
      </div>
      <div class="curricula-student-search-button">
        <el-select v-model="teacher_id" @change="queryMyCourseList">
          <el-option :label="`-${$t('Key295')}-`" value="" />
          <el-option
            v-for="item in teacher_list"
            :key="item.teacher_id"
            :label="item.teacher_name"
            :value="item.teacher_id"
          />
        </el-select>
        <el-select v-model="finish_status" @change="queryMyCourseList">
          <el-option :label="`-${$t('Key295')}-`" :value="-1" />
          <el-option
            v-for="item in finish_status_list"
            :key="item.finish_status"
            :label="item.name"
            :value="item.finish_status"
          />
        </el-select>
        <el-select v-model="buy_status" @change="queryMyCourseList">
          <el-option :label="`-${$t('Key295')}-`" :value="-1" />
          <el-option v-for="item in buy_status_list" :key="item.status" :label="item.name" :value="item.status" />
        </el-select>
        <el-button type="primary" @click="queryMyCourseList">
          {{ $t('Key168') }}
        </el-button>
      </div>
    </div>
    <!-- 课程列表 -->
    <div class="curricula-student-container">
      <div class="curricula-student-container-title">
        <div>
          <span class="tip">
            {{ $t('Key627') }} <a @click="goLearningCenter">{{ $t('Key7') }}</a> {{ $t('Key628') }}
          </span>
        </div>
      </div>
      <div class="curricula-student-container-list">
        <el-table :data="list">
          <el-table-column prop="course_name" :label="$t('Key203')" width="300" />
          <el-table-column :label="$t('Key617')" prop="teacher_name_desc" width="360" />
          <el-table-column :label="$t('Key250')" width="280">
            <template slot-scope="{ row }"> <i class="el-icon-date"></i> {{ row.date_space_view_text }} </template>
          </el-table-column>
          <el-table-column :label="$t('Key614')" width="140">
            <template slot-scope="{ row }">
              <span class="status-name" :style="{ 'background-color': statusColor(row.finish_status) }"></span>
              <span :style="{ color: statusColor(row.finish_status) }">
                {{ row.finish_status_name }}
              </span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('Key804')">
            <template slot-scope="{ row }">
              <span>{{ row.buy_status_name }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-pagination
      background
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="page_capacity"
      layout="prev, pager, next, total, sizes, jumper"
      :total="total_count"
      :current-page="cur_page"
      @prev-click="changePage($event, queryMyCourseList)"
      @next-click="changePage($event, queryMyCourseList)"
      @current-change="changePage($event, queryMyCourseList)"
      @size-change="changePageSize($event, queryMyCourseList)"
    />
  </div>
</template>

<script>
export default {
  name: 'CurriculaStudent'
};
</script>

<script setup>
import { ref, watch, onActivated } from 'vue';
import { PageQueryMyJoinCourseList_Student } from '@/api/table';
import {
  GetFinishStatusList_Course,
  GetMyJoinCourseTeacherList_Student,
  GetStudentCourseBuyStatusList
} from '@/api/select';
import { useList } from '@/utils/list';
import i18n from '@/locales/i18n';

import MainMenu from '../components/MainMenu.vue';

const props = defineProps({
  courseId: {
    type: String,
    required: true
  }
});

const emits = defineEmits(['restoreId']);

// 列表及查询条件
let { page_capacity, cur_page, total_count, list, changePage, changePageSize } = useList();
let search = ref('');
let finish_status = ref(-1);
let buy_status = ref(-1);
let teacher_id = ref('');
function queryMyCourseList(course_id = '', type) {
  PageQueryMyJoinCourseList_Student({
    teacher_id: teacher_id.value,
    finish_status: finish_status.value,
    course_name: search.value,
    course_id: type === 'select' ? course_id : '',
    page_capacity: page_capacity.value,
    cur_page: cur_page.value,
    buy_status: buy_status.value
  }).then(({ course_list, total_count: total }) => {
    list.value = course_list;
    total_count.value = total;
    if (type === 'select' && course_id.length > 0) emits('restoreId');
  });
}
queryMyCourseList(props.courseId, 'select');

onActivated(() => {
  if (props.courseId.length > 0) queryMyCourseList(props.courseId, 'select');
});

let finish_status_list = ref([]); // 完成状态列表
function getFinishStatusList_Course() {
  GetFinishStatusList_Course().then(({ finish_status_list: list }) => {
    finish_status_list.value = list;
  });
}
getFinishStatusList_Course();

let buy_status_list = ref([]); // 加入状态列表
function getStudentCourseBuyStatusList() {
  GetStudentCourseBuyStatusList().then(({ status_list }) => {
    buy_status_list.value = status_list;
  });
}
getStudentCourseBuyStatusList();

watch(
  () => i18n.locale,
  () => {
    getStudentCourseBuyStatusList();
    getFinishStatusList_Course();
  }
);

let teacher_list = ref([]);
GetMyJoinCourseTeacherList_Student().then(({ teacher_list: list }) => {
  teacher_list.value = list;
});

function statusColor(val) {
  let color = '';
  switch (val) {
    case 50:
      color = '#FF5050';
      break;
    case 51:
      color = '#2ECE5B';
      break;
    case 52:
      color = '#68CEFA';
      break;
    default:
      break;
  }
  return color;
}

function goLearningCenter() {
  window.location.href = `/GCLS-LC/#/EnterSys`;
}
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin';

.curricula-student {
  @include pagination;

  &-search {
    display: flex;
    justify-content: space-between;

    &-condition {
      > .el-input {
        width: 528px;
      }
    }

    &-button {
      .el-button {
        width: 114px;
      }

      .el-select {
        width: 160px;
        margin-right: 12px;
      }
    }
  }

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

    &-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 88px;
      padding: 24px 32px;

      .title {
        margin-right: 36px;
        font: {
          size: 20px;
          weight: 700;
        }
      }

      .tip {
        color: #aaa;

        > a {
          color: $basic-color;
        }
      }

      .create {
        width: 138px;

        div {
          display: flex;
          justify-content: space-around;
        }
      }
    }

    &-list {
      @include list;

      margin-top: 0;

      .el-dropdown {
        cursor: pointer;

        .svg-icon {
          font-size: 19px;
        }
      }

      .status-name {
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-right: 8px;
        margin-bottom: 1px;
        border-radius: 50%;
      }
    }
  }
}
</style>