|
|
@@ -1,347 +1,460 @@
|
|
|
<template>
|
|
|
- <div
|
|
|
- class="course-list"
|
|
|
- :class="{ courselistEn: this.$store.getters.getCurrentLaguage == 'en' }"
|
|
|
- >
|
|
|
- <!--課程加入成功-->
|
|
|
- <div
|
|
|
- class="warmMessage"
|
|
|
- v-if=" this.$store.getters.getMycID.coureseMessageOpen == true && this.$store.getters.getMycID.addSuccess == true " >
|
|
|
- <div class="messageCard animate__animated animate__fadeInDown">
|
|
|
- <div>
|
|
|
- <h3>課程加入成功</h3>
|
|
|
- <svg-icon icon-class="addCourseSuc" class="addCourseIcon" />
|
|
|
-
|
|
|
- <h3>
|
|
|
- <span class="typeMark">{{ this.$store.getters.getMycID.myCourseID[ this.$store.getters.getMycID.myCourseID.length - 1 ] }}</span
|
|
|
- ><span>新加課程名稱</span>
|
|
|
- </h3>
|
|
|
- <p>可於左側課程清單檢視課程簡介</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <loading :active.sync="isLoad"
|
|
|
+ :is-full-page="fullPage"
|
|
|
+ background-color="#000"
|
|
|
+ :opacity="opacity">
|
|
|
+ <template slot="default">
|
|
|
+ <svg-icon icon-class="loader" class="loader-icon" />
|
|
|
+ </template>
|
|
|
+ </loading>
|
|
|
+ <div class="course-list"
|
|
|
+ :class="{ courselistEn: this.$store.getters.getCurrentLaguage == 'en-us' }"
|
|
|
+ >
|
|
|
+ <!--課程加入成功-->
|
|
|
+ <div class="warmMessage"
|
|
|
+ v-if=" this.$store.getters.getMycID.coureseMessageOpen == true &&
|
|
|
+ this.$store.getters.getMycID.addSuccess == true "
|
|
|
+ >
|
|
|
+ <div class="messageCard animate__animated animate__fadeInDown">
|
|
|
+ <div>
|
|
|
+ <h3>課程加入成功</h3>
|
|
|
+ <svg-icon icon-class="addCourseSuc" class="addCourseIcon" />
|
|
|
|
|
|
- <!--課程已經加入-->
|
|
|
- <div
|
|
|
- class="warmMessage"
|
|
|
- v-if="
|
|
|
- this.$store.getters.getMycID.coureseMessageOpen == true &&
|
|
|
- this.$store.getters.getMycID.addSuccess == 'exist'
|
|
|
- "
|
|
|
- >
|
|
|
- <div class="messageCard animate__animated animate__fadeInDown">
|
|
|
- <div>
|
|
|
- <h3>課程已經加入</h3>
|
|
|
- <svg-icon icon-class="addCoursefail" class="addCourseIcon" />
|
|
|
- <p>可於左側課程清單檢視該課程簡介</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <h3>
|
|
|
+ <span class="typeMark">{{ this.$store.getters.getMycID.myCourseID[ this.$store.getters.getMycID.myCourseID.length - 1 ] }}</span>
|
|
|
+ <span>新加課程名稱</span>
|
|
|
+ </h3>
|
|
|
+ <p>可於左側課程清單檢視課程簡介</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!--課程加入失敗-->
|
|
|
- <div
|
|
|
- class="warmMessage"
|
|
|
- v-if=" this.$store.getters.getMycID.coureseMessageOpen == true && this.$store.getters.getMycID.addSuccess == false ">
|
|
|
- <div class="messageCard animate__animated animate__fadeInDown">
|
|
|
- <div>
|
|
|
- <h3>課程加入失敗</h3>
|
|
|
- <svg-icon icon-class="addCoursefail" class="addCourseIcon" />
|
|
|
- <p>查無所輸入代碼之課程，或該課程您未獲教師授權參與</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--課程加入失敗-->
|
|
|
+ <!--課程已經加入-->
|
|
|
+ <div class="warmMessage"
|
|
|
+ v-if="this.$store.getters.getMycID.coureseMessageOpen == true &&
|
|
|
+ this.$store.getters.getMycID.addSuccess == 'exist'"
|
|
|
+ >
|
|
|
+ <div class="messageCard animate__animated animate__fadeInDown">
|
|
|
+ <div>
|
|
|
+ <h3>課程已經加入</h3>
|
|
|
+ <svg-icon icon-class="addCoursefail" class="addCourseIcon" />
|
|
|
+ <p>可於左側課程清單檢視該課程簡介</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="list">
|
|
|
- <ul class="list-block">
|
|
|
- <Tabs
|
|
|
- :value="this.$store.getters.getMycID.addSuccess == true ? 'tab2' : 'tab1' " >
|
|
|
- <TabPane :label="$t('studentWeb.defaultClass')" name="tab1" :align="currentView=='table'?'center':'left'">
|
|
|
- <div class="listViewBtn" @click="changeView('list')" :class="{chooseView:currentView=='list'}"><svg-icon icon-class="list-text" /></div>
|
|
|
- <div class="tableViewBtn" @click="changeView('table')" :class="{chooseView:currentView=='table'}">
|
|
|
- <svg-icon icon-class="table" />
|
|
|
+ <!--課程加入失敗-->
|
|
|
+ <div class="warmMessage"
|
|
|
+ v-if="this.$store.getters.getMycID.coureseMessageOpen == true &&
|
|
|
+ this.$store.getters.getMycID.addSuccess == false"
|
|
|
+ >
|
|
|
+ <div class="messageCard animate__animated animate__fadeInDown">
|
|
|
+ <div>
|
|
|
+ <h3>課程加入失敗</h3>
|
|
|
+ <svg-icon icon-class="addCoursefail" class="addCourseIcon" />
|
|
|
+ <p>查無所輸入代碼之課程，或該課程您未獲教師授權參與</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
- <table class="courseTable" width="85%" style="table-layout: fixed" v-if="currentView=='table'">
|
|
|
- <tr>
|
|
|
- <th v-for="(item, index) in timetitle" :key="index">
|
|
|
- {{ item }}
|
|
|
- </th>
|
|
|
- </tr>
|
|
|
+ <div class="list">
|
|
|
+ <ul class="list-block">
|
|
|
+ <Tabs :value="onlyStu ? (this.$store.getters.getMycID.addSuccess == true ? 'tab2' : 'tab1') : 'tab2' ">
|
|
|
+ <!-- 表定课程 -->
|
|
|
+ <TabPane :label="$t('studentWeb.defaultClass')"
|
|
|
+ name="tab1"
|
|
|
+ :align="currentView=='table'?'center':'left'"
|
|
|
+ v-if="onlyStu"
|
|
|
+ >
|
|
|
+ <!-- <div class="listViewBtn" @click="changeView('list')" :class="{chooseView:currentView=='list'}">
|
|
|
+ <svg-icon icon-class="list-text" />
|
|
|
+ </div>
|
|
|
+ <div class="tableViewBtn" @click="changeView('table')" :class="{chooseView:currentView=='table'}">
|
|
|
+ <svg-icon icon-class="table" />
|
|
|
+ </div> -->
|
|
|
|
|
|
- <tr>
|
|
|
- <td class="table-time">08:00 ~10:00</td>
|
|
|
- <td
|
|
|
- @click="sentSelectedEventTitle(item)"
|
|
|
- v-for="(item, index) in courseList"
|
|
|
- :key="`a+${index}`"
|
|
|
- v-show="item.courseType == '表定' && index <= 4"
|
|
|
- class="courseName"
|
|
|
- :class="{ 'table-item-selected': selectedCondition(item) }"
|
|
|
- >
|
|
|
- {{ item.courseName }}
|
|
|
- <div class="list-item-typeMark">
|
|
|
- T{{ item.courseID.substr(0, 5) }}
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- <td
|
|
|
- @click="sentSelectedEventTitle(item)"
|
|
|
- v-for="(item, index) in courseList"
|
|
|
- :key="`b+${index}`"
|
|
|
- v-show="item.courseType == '臨時' && index < 5"
|
|
|
- class="courseName"
|
|
|
- :class="{ 'table-item-selected': selectedCondition(item) }"
|
|
|
- >
|
|
|
- {{ item.courseName }}
|
|
|
- <div class="list-item-typeMark">
|
|
|
- T{{ item.courseID.substr(0, 5) }}
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
+ <div class="list-table">
|
|
|
+ <Table :columns="courseTime"
|
|
|
+ :data="timeTable"
|
|
|
+ v-show="currentView == 'table'"
|
|
|
+ :disabled-hover="true"
|
|
|
+ >
|
|
|
+ <template slot-scope="{ row }" slot="time">
|
|
|
+ <p class="list-name">{{ row.time }}</p>
|
|
|
+ <p>{{ row.label }}</p>
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{ row }" slot="Mon">
|
|
|
+ <div v-for="(item, index) in row.fixList" :key="index">
|
|
|
+ <div v-if="item.timeWeek == 'MON'"
|
|
|
+ class="table-item"
|
|
|
+ @click="clickCell(row, index)"
|
|
|
+ :class="{'table-item-selected': unique == item.unique }"
|
|
|
+ >
|
|
|
+ <p class="list-name">{{ item.name}}</p>
|
|
|
+ <p>({{ item.teaName}})</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{ row }" slot="Tue">
|
|
|
+ <div v-for="(item, index) in row.fixList" :key="index">
|
|
|
+ <div v-if="item.timeWeek == 'TUE'"
|
|
|
+ class="table-item"
|
|
|
+ @click="clickCell(row, index)"
|
|
|
+ :class="{'table-item-selected': unique == item.unique }"
|
|
|
+ >
|
|
|
+ <p class="list-name">{{ item.name}}</p>
|
|
|
+ <p>({{ item.teaName}})</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{ row }" slot="Wed">
|
|
|
+ <div v-for="(item, index) in row.fixList" :key="index">
|
|
|
+ <div v-if="item.timeWeek == 'WED'"
|
|
|
+ class="table-item"
|
|
|
+ @click="clickCell(row, index)"
|
|
|
+ :class="{'table-item-selected': unique == item.unique }"
|
|
|
+ >
|
|
|
+ <p class="list-name">{{ item.name}}</p>
|
|
|
+ <p>({{ item.teaName}})</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{ row }" slot="Thu">
|
|
|
+ <div v-for="(item, index) in row.fixList" :key="index">
|
|
|
+ <div v-if="item.timeWeek == 'THU'"
|
|
|
+ class="table-item"
|
|
|
+ @click="clickCell(row, index)"
|
|
|
+ :class="{'table-item-selected': unique == item.unique }"
|
|
|
+ >
|
|
|
+ <p class="list-name">{{ item.name}}</p>
|
|
|
+ <p>({{ item.teaName}})</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{ row }" slot="Fri">
|
|
|
+ <div v-for="(item, index) in row.fixList" :key="index">
|
|
|
+ <div v-if="item.timeWeek == 'FRI'"
|
|
|
+ class="table-item"
|
|
|
+ @click="clickCell(row, index)"
|
|
|
+ :class="{'table-item-selected': unique == item.unique }"
|
|
|
+ >
|
|
|
+ <p class="list-name">{{ item.name}}</p>
|
|
|
+ <p>({{ item.teaName}})</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </Table>
|
|
|
+ </div>
|
|
|
|
|
|
- <tr>
|
|
|
- <td class="table-time">10:00 ~12:00</td>
|
|
|
- <td
|
|
|
- @click="sentSelectedEventTitle(item)"
|
|
|
- v-for="(item, index) in courseList"
|
|
|
- :key="`c+${index}`"
|
|
|
- v-show="item.courseType == '表定' && 5 < index && index <= 10"
|
|
|
- class="courseName"
|
|
|
- :class="{ 'table-item-selected': selectedCondition(item) }"
|
|
|
- >
|
|
|
- {{ item.courseName }}
|
|
|
- <div class="list-item-typeMark">
|
|
|
- T{{ item.courseID.substr(0, 5) }}
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- <td
|
|
|
- @click="sentSelectedEventTitle(item)"
|
|
|
- v-for="(item, index) in courseList"
|
|
|
- :key="`d+${index}`"
|
|
|
- v-show="item.courseType == '臨時' && 5 < index && index <= 10"
|
|
|
- class="courseName"
|
|
|
- :class="{ 'table-item-selected': selectedCondition(item) }"
|
|
|
- >
|
|
|
- {{ item.courseName }}
|
|
|
- <div class="list-item-typeMark">
|
|
|
- T{{ item.courseID.substr(0, 5) }}
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td class="table-time">13:00 ~15:00</td>
|
|
|
- <td
|
|
|
- @click="sentSelectedEventTitle(item)"
|
|
|
- v-for="(item, index) in courseList"
|
|
|
- :key="index"
|
|
|
- v-show=" item.courseType == '表定' && 10 < index && index <= 15 "
|
|
|
- class="courseName"
|
|
|
- :class="{ 'table-item-selected': selectedCondition(item) }"
|
|
|
- >
|
|
|
- {{ item.courseName }}
|
|
|
- <div class="list-item-typeMark">
|
|
|
- T{{ item.courseID.substr(0, 5) }}
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- <td
|
|
|
- @click="sentSelectedEventTitle(item)"
|
|
|
- v-for="(item, index) in courseList"
|
|
|
- :key="`e+${index}`"
|
|
|
- v-show=" item.courseType == '臨時' && 10 < index && index <= 15 "
|
|
|
- class="courseName"
|
|
|
- :class="{ 'table-item-selected': selectedCondition(item) }"
|
|
|
- >
|
|
|
- {{ item.courseName }}
|
|
|
- <div class="list-item-typeMark">
|
|
|
- T{{ item.courseID.substr(0, 5) }}
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td class="table-time">15:00 ~17:00</td>
|
|
|
- <td
|
|
|
- @click="sentSelectedEventTitle(item)"
|
|
|
- v-for="(item, index) in courseList"
|
|
|
- :key="`f+${index}`"
|
|
|
- v-show=" item.courseType == '表定' && 15 < index && index <= 20 "
|
|
|
- class="courseName"
|
|
|
- :class="{ 'table-item-selected': selectedCondition(item) }"
|
|
|
- >
|
|
|
- {{ item.courseName }}
|
|
|
- <div class="list-item-typeMark">
|
|
|
- T{{ item.courseID.substr(0, 5) }}
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- <td
|
|
|
- @click="sentSelectedEventTitle(item)"
|
|
|
- v-for="(item, index) in courseList"
|
|
|
- :key="`g+${index}`"
|
|
|
- v-show=" item.courseType == '臨時' && 15 < index && index <= 20 "
|
|
|
- class="courseName"
|
|
|
- :class="{ 'table-item-selected': selectedCondition(item) }"
|
|
|
- >
|
|
|
- {{ item.courseName }}
|
|
|
- <div class="list-item-typeMark">
|
|
|
- T{{ item.courseID.substr(0, 5) }}
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td class="table-time">17:00 ~18:00</td>
|
|
|
- <td
|
|
|
- @click="sentSelectedEventTitle(item)"
|
|
|
- v-for="(item, index) in courseList"
|
|
|
- :key="`h+${index}`"
|
|
|
- v-show="item.courseType == '表定' && 20 < index && index <= 25 "
|
|
|
- class="courseName"
|
|
|
- :class="{ 'table-item-selected': selectedCondition(item) }"
|
|
|
- >
|
|
|
- {{ item.courseName }}
|
|
|
- <div class="list-item-typeMark">
|
|
|
- T{{ item.courseID.substr(0, 5) }}
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- <td
|
|
|
- @click="sentSelectedEventTitle(item)"
|
|
|
- v-for="(item, index) in courseList"
|
|
|
- :key="`i+${index}`"
|
|
|
- v-show=" item.courseType == '臨時' && 20 < index && index <= 25 "
|
|
|
- class="courseName"
|
|
|
- :class="{ 'table-item-selected': selectedCondition(item) }"
|
|
|
- >
|
|
|
- {{ item.courseName }}
|
|
|
- <div class="list-item-typeMark">
|
|
|
- T{{ item.courseID.substr(0, 5) }}
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </table>
|
|
|
- <li
|
|
|
- class="list-item"
|
|
|
- v-for="(item, index) in courseList"
|
|
|
- @click="sentSelectedEventTitle(item)"
|
|
|
- :class="{ 'list-item-selected': selectedCondition(item) }"
|
|
|
- :key="index"
|
|
|
- v-show="item.courseType == '表定'&¤tView=='list'"
|
|
|
- >
|
|
|
- <ul>
|
|
|
- <li class="list-item-info">
|
|
|
- <p class="list-item-title">
|
|
|
- <span class="list-item-typeMark">T{{item.courseID.substr(0, 5)}}</span>
|
|
|
- {{item.courseName}}
|
|
|
- </p>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </li>
|
|
|
- </TabPane>
|
|
|
- <TabPane :label="$t('studentWeb.tempClass')" name="tab2">
|
|
|
- <!--剛加入的課程-->
|
|
|
- <li
|
|
|
- class="list-item"
|
|
|
- @click="
|
|
|
- sentSelectedEventTitle(
|
|
|
- courseList[courseList.length - index - 2]
|
|
|
- )
|
|
|
- "
|
|
|
- :class="{
|
|
|
- 'list-item-selected': selectedCondition(
|
|
|
- courseList[courseList.length - index - 2]
|
|
|
- ),
|
|
|
- }"
|
|
|
- v-for="(item,
|
|
|
- index) in this.$store.getters.getMycID.myCourseID
|
|
|
- .slice()
|
|
|
- .reverse()"
|
|
|
- :key="`c+${index}`"
|
|
|
- >
|
|
|
- <ul>
|
|
|
- <li class="list-item-info">
|
|
|
- <p class="list-item-title">
|
|
|
- <span class="list-item-typeMark">{{ item }}</span>
|
|
|
- {{ "新加課程名稱" }}
|
|
|
- </p>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </li>
|
|
|
- <!--剛加入的課程-->
|
|
|
- <li
|
|
|
- class="list-item"
|
|
|
- v-for="(item, index) in courseList"
|
|
|
- @click="sentSelectedEventTitle(item)"
|
|
|
- :class="{ 'list-item-selected': selectedCondition(item) }"
|
|
|
- :key="`j+${index}`"
|
|
|
- v-show="item.courseType == '臨時'"
|
|
|
- >
|
|
|
- <ul>
|
|
|
- <li class="list-item-info">
|
|
|
- <p class="list-item-title">
|
|
|
- <span class="list-item-typeMark"
|
|
|
- >T{{ item.courseID.substr(0, 5) }}</span
|
|
|
- >
|
|
|
- {{ item.courseName }}
|
|
|
- </p>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </li>
|
|
|
- </TabPane>
|
|
|
- </Tabs>
|
|
|
- </ul>
|
|
|
+ <!-- 表定 -->
|
|
|
+ <!-- <li class="list-item"
|
|
|
+ v-for="(item, index) in fixList"
|
|
|
+ @click="sentSelectedEventTitle(item)"
|
|
|
+ :class="{ 'list-item-selected': unique == item.unique }"
|
|
|
+ :key="index"
|
|
|
+ v-show="currentView == 'list'"
|
|
|
+ >
|
|
|
+ <ul>
|
|
|
+ <li class="list-item-info">
|
|
|
+ <p class="list-item-title">
|
|
|
+ <span class="list-item-typeMark">{{ item.no }}</span>
|
|
|
+ {{ item.name }}
|
|
|
+ </p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li> -->
|
|
|
+ </TabPane>
|
|
|
+ <!-- 临时课程 -->
|
|
|
+ <TabPane :label="$t('studentWeb.tempClass')" name="tab2">
|
|
|
+ <!--剛加入的課程-->
|
|
|
+ <!-- <li
|
|
|
+ class="list-item"
|
|
|
+ @click="
|
|
|
+ sentSelectedEventTitle(
|
|
|
+ courseList[courseList.length - index - 2]
|
|
|
+ )
|
|
|
+ "
|
|
|
+ :class="{
|
|
|
+ 'list-item-selected': selectedCondition(
|
|
|
+ courseList[courseList.length - index - 2]
|
|
|
+ ),
|
|
|
+ }"
|
|
|
+ v-for="(item,
|
|
|
+ index) in this.$store.getters.getMycID.myCourseID
|
|
|
+ .slice()
|
|
|
+ .reverse()"
|
|
|
+ :key="`c+${index}`"
|
|
|
+ >
|
|
|
+ <ul>
|
|
|
+ <li class="list-item-info">
|
|
|
+ <p class="list-item-title">
|
|
|
+ <span class="list-item-typeMark">{{ item }}</span>
|
|
|
+ {{ "新加課程名稱" }}
|
|
|
+ </p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li> -->
|
|
|
+ <!--剛加入的課程-->
|
|
|
+ <div v-if="personList.length > 0">
|
|
|
+ <div v-for="(item, index) in timeTable" :key="index">
|
|
|
+ <li
|
|
|
+ class="list-item"
|
|
|
+ v-for="(person, num) in item.personList"
|
|
|
+ @click="clickCell(item, num, 'list')"
|
|
|
+ :class="{ 'list-item-selected': unique == person.unique }"
|
|
|
+ :key="`j+${num}`"
|
|
|
+ >
|
|
|
+ <ul>
|
|
|
+ <li class="list-item-info">
|
|
|
+ <p class="list-item-title">
|
|
|
+ <span class="list-item-typeMark">{{ person.no }}</span>
|
|
|
+ {{ person.name }}（{{ person.teaName }}）
|
|
|
+ </p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else class="list-item-no">
|
|
|
+ 暂无课程
|
|
|
+ </div>
|
|
|
+ </TabPane>
|
|
|
+ </Tabs>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import Loading from "vue-loading-overlay";
|
|
|
+import "vue-loading-overlay/dist/vue-loading.css";
|
|
|
export default {
|
|
|
- name: "CourseList",
|
|
|
- data() {
|
|
|
- return {
|
|
|
- currentView: 'table',
|
|
|
- messageOpen: false,
|
|
|
- timetitle:
|
|
|
- localStorage.getItem("lang") == "tw"
|
|
|
- ? ["時間", "一", "二", "三", "四", "五"]
|
|
|
- : ["time", "Mon", "Tue", "Wed", "Thu", "Fri"],
|
|
|
- courseList: this.$api.studentWeb.courseList //moke数据
|
|
|
- };
|
|
|
- },
|
|
|
- created() {
|
|
|
- if (this.$store.getters.getIsSelectedNow == false) {
|
|
|
- this.sentFirstItemActive();
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- changeView(type) {
|
|
|
- this.currentView=type
|
|
|
+ name: "CourseList",
|
|
|
+ components: {
|
|
|
+ Loading
|
|
|
},
|
|
|
- sentFirstItemActive() {
|
|
|
- let tempArr = [];
|
|
|
- console.log(this.$api.studentWeb.courseList)
|
|
|
- for (let i = 0; i < this.courseList.length; i++) {
|
|
|
- if (this.courseList[i].courseType != "臨時") {
|
|
|
- tempArr.push(this.courseList[i]);
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isLoad: false,
|
|
|
+ fullPage: true,
|
|
|
+ opacity: 0.6,
|
|
|
+ currentView: 'table',
|
|
|
+ onlyStu: true, //是不是学生
|
|
|
+ courseTime: [
|
|
|
+ {
|
|
|
+ title: "time",
|
|
|
+ slot: "time",
|
|
|
+ width: "150"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "Mon",
|
|
|
+ slot: "Mon",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "Tue",
|
|
|
+ slot: "Tue"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "Wed",
|
|
|
+ slot: "Wed"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "Thu",
|
|
|
+ slot: "Thu"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "Fri",
|
|
|
+ slot: "Fri"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ courseList: this.$api.studentWeb.courseList, //moke数据
|
|
|
+ fixList: [],
|
|
|
+ personList: [],
|
|
|
+ nowClassInfor: {},
|
|
|
+ timeTable: [],
|
|
|
+ unique: '',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ period: {
|
|
|
+ type: Array,
|
|
|
+ default: []
|
|
|
+ },
|
|
|
+ teaList: {
|
|
|
+ type: Array,
|
|
|
+ default: []
|
|
|
}
|
|
|
- }
|
|
|
- this.sentSelectedEventTitle(tempArr[0]);
|
|
|
},
|
|
|
- // 跳转到当前课程
|
|
|
- sentSelectedEventTitle: function (item) {
|
|
|
- this.$router.push("/courseList#" + item.courseID);
|
|
|
- //改變ItemName的狀態 vuex mutations
|
|
|
- this.$store.commit("ChangeItemName", item);
|
|
|
- //螢幕寬度<767px時，直接關掉sidebar
|
|
|
- if (window.innerWidth <= 991) {
|
|
|
- this.$store.commit("ToggleSidebar", false);
|
|
|
- }
|
|
|
+ created() {
|
|
|
+ this.$store.state.userInfo.roles.map(item => {
|
|
|
+ if(item == "teacher") {
|
|
|
+ this.onlyStu = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.getClassList()
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ // console.log(this.timeTable);
|
|
|
},
|
|
|
- selectedCondition(item) {
|
|
|
- if (
|
|
|
- this.$store.getters.getIsSelectedNow == true &&
|
|
|
- this.$store.getters.getItemTitle.courseName == item.courseName
|
|
|
- ) {
|
|
|
- return true;
|
|
|
- } else return false;
|
|
|
+ methods: {
|
|
|
+ getClassList() {
|
|
|
+ this.isLoad = true
|
|
|
+ let param = {
|
|
|
+ userid: this.$store.state.userInfo.sub,
|
|
|
+ school: this.$store.state.userInfo.azp
|
|
|
+ }
|
|
|
+ this.$api.studentWeb.getClassList(param).then(res => {
|
|
|
+ if(res.courses.length > 0) {
|
|
|
+ // 表定课程
|
|
|
+ var fixList = []
|
|
|
+ // 临时课程
|
|
|
+ var personList = []
|
|
|
+ var list = res.courses
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
+ for (let j = 0; j < list[i].course.schedule.length; j++) {
|
|
|
+ // 有classId，表定课程
|
|
|
+ if(list[i].course.schedule[j].classId == list[i].stuCourse.classId[0]) {
|
|
|
+ if(list[i].course.schedule[j].time.length > 0) {
|
|
|
+ for (let m = 0; m < list[i].course.schedule[j].time.length; m++) {
|
|
|
+ var data = this._.cloneDeep(list[i].course)
|
|
|
+ delete data.schedule
|
|
|
+ data.school = list[i].stuCourse.school
|
|
|
+ data.scope = list[i].stuCourse.scope
|
|
|
+ // 拼接得到一个唯一的标识
|
|
|
+ data.unique = 'class' + list[i].course.no + list[i].course.schedule[j].time[m].week + list[i].course.schedule[j].time[m].id
|
|
|
+ fixList.push(this.getNewClass(data, list[i].course.schedule[j], m))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 有stulist，临时课程
|
|
|
+ else if (list[i].course.schedule[j].stulist) {
|
|
|
+ if(list[i].course.schedule[j].time.length > 0) {
|
|
|
+ for (let m = 0; m < list[i].course.schedule[j].time.length; m++) {
|
|
|
+ var data = this._.cloneDeep(list[i].course)
|
|
|
+ delete data.schedule
|
|
|
+ data.school = list[i].stuCourse.school
|
|
|
+ data.scope = list[i].stuCourse.scope
|
|
|
+ data.unique = 'person' + list[i].course.no + list[i].course.schedule[j].time[m].week + list[i].course.schedule[j].time[m].id
|
|
|
+ personList.push(this.getNewClass(data, list[i].course.schedule[j], m))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(fixList)
|
|
|
+ console.log(personList)
|
|
|
+ this.fixList = fixList
|
|
|
+ this.personList = personList
|
|
|
+ this.getClassTime()
|
|
|
+ }
|
|
|
+ }).finally(()=>{
|
|
|
+ this.isLoad = false
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ /* getNewClass(nowCourse, j) {
|
|
|
+ if(nowCourse.course.schedule[j].time.length > 0) {
|
|
|
+ var list = []
|
|
|
+ for (let m = 0; m < nowCourse.course.schedule[j].time.length; m++) {
|
|
|
+ var data = this._.cloneDeep(nowCourse.course)
|
|
|
+ delete data.schedule
|
|
|
+ data.school = nowCourse.stuCourse.school
|
|
|
+ data.scope = nowCourse.stuCourse.scope
|
|
|
+ // 拼接得到一个唯一的标识
|
|
|
+ data.unique = nowCourse.course.no + nowCourse.course.schedule[j].time[m].week + nowCourse.course.schedule[j].time[m].id
|
|
|
+ data.classId = nowCourse.course.schedule[j].classId
|
|
|
+ data.room = nowCourse.course.schedule[j].room
|
|
|
+ data.teacherId = nowCourse.course.schedule[j].teacherId
|
|
|
+ data.notice = nowCourse.course.schedule[j].notice
|
|
|
+ data.stuList = nowCourse.course.schedule[j].stulist
|
|
|
+ data.timeId = nowCourse.course.schedule[j].time[m].id
|
|
|
+ data.timeWeek = nowCourse.course.schedule[j].time[m].week
|
|
|
+ list.push(data)
|
|
|
+ }
|
|
|
+ console.log(list);
|
|
|
+ return list
|
|
|
+ }
|
|
|
+ }, */
|
|
|
+ // 新增数组
|
|
|
+ getNewClass(data, schedule, m) {
|
|
|
+ data.classId = schedule.classId
|
|
|
+ data.room = schedule.room
|
|
|
+ data.teacherId = schedule.teacherId
|
|
|
+ data.notice = schedule.notice
|
|
|
+ data.stuList = schedule.stulist
|
|
|
+ data.timeId = schedule.time[m].id
|
|
|
+ data.timeWeek = schedule.time[m].week
|
|
|
+ data.teaName = ""
|
|
|
+ // 获取老师名单
|
|
|
+ if(this.teaList.length > 0) {
|
|
|
+ this.teaList.map(item => {
|
|
|
+ if(item.id == schedule.teacherId) {
|
|
|
+ data.teaName = item.name
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return data
|
|
|
+ },
|
|
|
+ // 处理上课时间
|
|
|
+ getClassTime() {
|
|
|
+ if(this.period != undefined) {
|
|
|
+ // 选出该年级的上课时间
|
|
|
+ var grades = this._.cloneDeep(this.period)
|
|
|
+ for (let i = 0; i < grades.length; i++) {
|
|
|
+ // 所有的period.id 都一样，选定fixList[0]
|
|
|
+ if(grades[i].id == this.fixList[0].period.id) {
|
|
|
+ this.timeTable = grades[i].timetable
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 在时间中加入对应的课程
|
|
|
+ for (let j = 0; j < this.timeTable.length; j++) {
|
|
|
+ var newfixLis = []
|
|
|
+ var newpersonList = []
|
|
|
+ for (let i = 0; i < this.fixList.length; i++) {
|
|
|
+ if(this.timeTable[j].id == this.fixList[i].timeId) {
|
|
|
+ newfixLis.push(this.fixList[i])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ for (let i = 0; i < this.personList.length; i++) {
|
|
|
+ if(this.timeTable[j].id == this.personList[i].timeId) {
|
|
|
+ newpersonList.push(this.personList[i])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.timeTable[j].fixList = newfixLis
|
|
|
+ this.timeTable[j].personList = newpersonList
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 点击单节课，显示基本信息
|
|
|
+ /* row：timeTable的某一个
|
|
|
+ index：fixList/personList中的当前这一数据的下标
|
|
|
+ type：传'list'就是临时课程，不传就是表定课程
|
|
|
+ */
|
|
|
+ clickCell(row, index, type) {
|
|
|
+ this.nowClassInfor = this._.cloneDeep(row)
|
|
|
+ if(type) {
|
|
|
+ this.nowClassInfor.course = this._.cloneDeep(row.personList[index])
|
|
|
+ } else {
|
|
|
+ this.nowClassInfor.course = this._.cloneDeep(row.fixList[index])
|
|
|
+ }
|
|
|
+ this.unique = this.nowClassInfor.course.unique
|
|
|
+ this.sentSelectedEventTitle(this.nowClassInfor)
|
|
|
+ },
|
|
|
+ changeView(type) {
|
|
|
+ this.currentView = type
|
|
|
+ },
|
|
|
+ // 跳转到当前课程
|
|
|
+ sentSelectedEventTitle: function (item) {
|
|
|
+ // 改變ItemName的狀態 vuex mutations
|
|
|
+ this.$store.commit("ChangeItemName", item);
|
|
|
+ // 螢幕寬度<767px時，直接關掉sidebar
|
|
|
+ if (window.innerWidth <= 991) {
|
|
|
+ this.$store.commit("ToggleSidebar", false);
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
};
|
|
|
</script>
|
|
|
|
OnePsycho