08/19 11:00

11

src/router/index.js

@@ -307,6 +307,6 @@ export const asyncRoutes = {
   // 考级报名列表
   levelManager: () => import('@/views/levelManager/levelManager'),
   // 日历课表
-  calendarList: () => import('@/views/teamDetail/calendarList')
+  calendarList: () => import('@/views/teacherManager/teacherDetail/components/calendarList')
 }
 export default router

src/utils/date.js

@@ -0,0 +1,21 @@
+export function setDate (date) {
+  let y = date.getFullYear();
+  let m = date.getMonth() + 1;
+  let d = date.getDate();
+  m = m < 10 ? "0" + m : m;
+  d = d < 10 ? "0" + d : d;
+  return y + "-" + m + "-" + d;
+}
+
+export function getCurrentMonthFirst (date) {
+  date.setDate(1);
+  return date;
+}
+
+export function getCurrentMonthLast (date) {
+  var currentMonth = date.getMonth();
+  var nextMonth = ++currentMonth;
+  var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
+  var oneDay = 1000 * 60 * 60 * 24;
+  return new Date(nextMonthFirstDay - oneDay);
+}

src/views/accompanyManager/accompanys.vue

@@ -845,7 +845,7 @@ export default {
        */
 
       this.maskForm.date = row.classDate;
-      this.startTime = row.startClassTimeStr;
+      this.startTime = row.startClassTimeStr.substring(0, 5);
       // this.maskForm.endTime = row.endClassTimeStr;
       this.maskForm.id = row.id;
       this.coursesExpireDate = row.coursesExpireDate;

src/views/teacherManager/teacherDetail/components/calendarList.vue

@@ -0,0 +1,302 @@
+<template>
+  <div class="m-container">
+    <el-calendar style="minWidth:810px">
+      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+      <template slot="dateCell"
+                slot-scope="scope">
+        <div @click="showDate(scope)">
+          <p>
+            {{scope.data.day.substring(8)}}
+          </p>
+          <div>
+            <span v-for="(item,index) in newList"
+                  class='newDot'
+                  :key="item.id"
+                  v-if="item.classDate.substring(0,10) === scope.data.day&&item.groupType==='PRACTICE'">
+              网
+            </span>
+            <span v-for="(item,index) in vipList"
+                  class='vipDot'
+                  :key="item.id"
+                  v-if="item.classDate.substring(0,10) === scope.data.day&&item.groupType==='VIP'">
+              vip
+            </span>
+            <span v-for="(item,index) in teamList"
+                  class='teamDot'
+                  :key="item.id"
+                  v-if="item.classDate.substring(0,10) === scope.data.day&&item.groupType==='MUSIC'">
+              乐
+            </span>
+
+          </div>
+        </div>
+
+      </template>
+    </el-calendar>
+    <div class="tableWrap"
+         v-if='tableList.length>0'>
+      <el-table :data="tableList"
+                :header-cell-style="{background:'#EDEEF0',color:'#444'}">
+        <el-table-column align="center"
+                         prop="organName"
+                         label="分部名称"></el-table-column>
+        <el-table-column align="center"
+                         width="130px"
+                         prop="musicGroupId"
+                         label="乐团/课程组编号"></el-table-column>
+        <el-table-column align="center"
+                         prop="id"
+                         label="课程编号"></el-table-column>
+        <el-table-column align="center"
+                         width="200px"
+                         label="时间">
+          <template slot-scope="scope">{{ scope.row.startClassTime ? scope.row.startClassTime.substr(0, 16) : '' }}-{{ scope.row.endClassTime ? scope.row.endClassTime.substr(11,5) : ''}}</template>
+        </el-table-column>
+        <!-- <el-table-column align="center" prop="groupName" label="乐团/VIP名"></el-table-column> -->
+        <!-- <el-table-column align="center" prop="classGroupName" label="班级名称"></el-table-column> -->
+        <el-table-column align="center"
+                         prop="studentId"
+                         label="学生ID">
+          <template slot-scope="scope">
+            <div v-if="scope.row.groupType != 'MUSIC'">{{scope.row.studentId}}</div>
+          </template>
+        </el-table-column>
+        <el-table-column align="center"
+                         prop="subjectName"
+                         label="声部"></el-table-column>
+        <el-table-column align="center"
+                         prop="name"
+                         label="课程名称"></el-table-column>
+        <el-table-column align="center"
+                         label="课程类型">
+          <template slot-scope="scope">
+            <div>{{ scope.row.type | coursesType}}</div>
+          </template>
+        </el-table-column>
+        <el-table-column align="center"
+                         label="教学模式">
+          <template slot-scope="scope">
+            <div>{{ scope.row.teachMode | teachMode}}</div>
+          </template>
+        </el-table-column>
+        <el-table-column align="center"
+                         prop="schoolName"
+                         label="教学点">
+          <template slot-scope="scope">
+            <div>{{scope.row.schoolName?scope.row.schoolName:'网络教室'}}</div>
+          </template>
+        </el-table-column>
+        <el-table-column align="center"
+                         prop="courseScheduleStatus"
+                         label="课程状态">
+          <template slot-scope="scope">
+            <div>{{ scope.row.status | coursesStatus }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column align="center"
+                         label="操作"
+                         fixed="right"
+                         width="120px">
+          <template slot-scope="scope">
+            <!-- v-if="permission('teamCourseList/details')" -->
+            <div>
+              <el-button type="text"
+                         v-if="scope.row.groupType ==='MUSIC'"
+                         @click="lookDetail(scope.row)">调整</el-button>
+              <el-button v-if="!scope.row.settlementTime && permission('courseSchedule/classStartDateAdjust')&&scope.row.groupType ==='MUSIC'"
+                         type="text"
+                         @click="resetClass(scope.row)">调整</el-button>
+              <el-button type="text"
+                         @click="lookDetail(scope.row)">调整</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination :total="rules.total"
+                  :page.sync="rules.page"
+                  :limit.sync="rules.limit"
+                  :page-sizes="rules.page_size"
+                  @pagination="getList" />
+    </div>
+  </div>
+</template>
+<script>
+import { superFindCourseSchedules, getTeacher } from "@/api/buildTeam";
+import { setDate, getCurrentMonthFirst, getCurrentMonthLast } from "@/utils/date"
+import pagination from "@/components/Pagination/index";
+export default {
+  components: { pagination },
+  data () {
+    return {
+
+      dataList: [],
+      value: new Date(),
+      teacherIdList: '',
+      vipList: [],
+      teamList: [],
+      newList: [],
+      tableList: [],
+      startTime: '',
+      endTime: '',
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
+      },
+
+    }
+  },
+  mounted () {
+    this.getCalendatList()
+    getTeacher().then(res => {
+      if (res.code == 200) {
+        this.teacherList = res.data;
+      }
+    });
+    this.$nextTick(() => {
+      // 点击上个月
+      let prevBtn1 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)');
+      prevBtn1.addEventListener('click', () => {
+        this.value = new Date(this.value.setMonth(this.value.getMonth() + -1, 1))
+        this.setCourseList(this.value)
+      })
+      // 点击今天
+      let prevBtn2 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)');
+      prevBtn2.addEventListener('click', () => {
+        this.value = new Date()
+        this.setCourseList(this.value)
+      })
+      // 点击下个月
+      let prevBtn3 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(3)');
+      prevBtn3.addEventListener('click', () => {
+        this.value = new Date(this.value.setMonth(this.value.getMonth() + 1, 1))
+        this.setCourseList(this.value)
+      })
+    })
+
+  },
+  activated () {
+
+  },
+  methods: {
+    getList () {
+      superFindCourseSchedules({
+        teacherIdList: this.teacherIdList, page: this.rules.page,
+        rows: this.rules.limit, startTime: this.startTime, endTime: this.endTime
+      }).then(res => {
+        if (res.code == 200) {
+          this.tableList = res.data.rows
+          this.rules.total = res.data.total
+        }
+      })
+    },
+    getCalendatList () {
+      this.teacherIdList = this.$route.query.teacherId
+      // 获取当前月第一天和最后一天
+      let startTime = setDate(getCurrentMonthFirst(this.value))
+      let endTime = setDate(getCurrentMonthLast(this.value))
+      superFindCourseSchedules({ teacherIdList: this.teacherIdList, rows: 9999, page: 1, startTime, endTime }).then(res => {
+        if (res.code === 200) {
+          this.dataList = res.data.rows
+          // 过滤数据
+          this.vipList = []
+          this.teamList = []
+          this.newList = []
+          for (let i in this.dataList) {
+            if (this.dataList[i].groupType === 'VIP') {
+              this.vipList.push(this.dataList[i])
+            }
+            if (this.dataList[i].groupType === 'MUSIC') {
+              this.teamList.push(this.dataList[i])
+            }
+            if (this.dataList[i].groupType === 'PRACTICE') {
+              this.newList.push(this.dataList[i])
+            }
+          }
+
+          this.vipList = this.reduceArray(this.vipList, 'classDate')
+          this.teamList = this.reduceArray(this.teamList, 'classDate')
+          this.newList = this.reduceArray(this.newList, 'classDate')
+        }
+      })
+    },
+    showDate (scope) {
+      this.startTime = scope.data.day
+      this.endTime = scope.data.day
+      this.getList()
+    },
+    reduceArray (array, str) {
+      let hash = {}
+      array = array.reduce(function (arr, current) {
+        hash[current[str]] ? '' : hash[current[str]] = true && arr.push(current);
+        return arr
+      }, [])
+      return array
+    },
+    setCourseList (val) {
+      this.getCalendatList()
+      this.startTime = setDate(val)
+      this.endTime = setDate(val)
+      this.getList()
+    }
+
+  }
+}
+</script>
+<style lang="scss" scoped>
+/deep/ .el-calendar-day {
+  box-sizing: border-box;
+  height: 80px !important;
+  min-width: 118px;
+}
+/deep/.current.is-selected {
+  border: 2px solid #137f79;
+
+  .el-calendar-day {
+    height: 76px !important;
+  }
+}
+// /deep/.current {
+//   border-bottom: 2px solid #ebeef5;
+//   border-right: 2px solid #ebeef5;
+// }
+
+.vipDot {
+  width: 30px;
+  height: 30px;
+  margin-top: 10px;
+  background-color: #2aaea6;
+  display: inline-block;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 30px;
+  color: #fff;
+  font-size: 14px;
+}
+.teamDot {
+  width: 30px;
+  height: 30px;
+  margin-top: 10px;
+  background-color: #5a79f6;
+  display: inline-block;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 30px;
+  color: #fff;
+  font-size: 14px;
+}
+.newDot {
+  width: 30px;
+  height: 30px;
+  margin-top: 10px;
+  background-color: #34b1f6;
+  display: inline-block;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 30px;
+  color: #fff;
+  font-size: 14px;
+}
+</style>

src/views/teacherManager/teacherDetail/index.vue

@@ -59,6 +59,11 @@
                      name="9">
           <serveStudentList v-if="activeName == 9" />
         </el-tab-pane>
+        <el-tab-pane label="日历课表"
+                     v-if="permissionList.calendarList"
+                     name="10">
+          <calendarList v-if="activeName == 10" />
+        </el-tab-pane>
       </el-tabs>
     </div>
   </div>
@@ -75,6 +80,7 @@ import timerList from "@/views/teacherManager/teacherDetail/components/timerList
 import outCourseList from "@/views/teacherManager/teacherDetail/components/outCourseList";
 import teacherNetwork from "@/views/teacherManager/teacherDetail/components/teacherNetwork";
 import serveStudentList from "@/views/teacherManager/teacherDetail/components/serveStudentList";
+import calendarList from '@/views/teacherManager/teacherDetail/components/calendarList'
 import { permission } from "@/utils/directivePage";
 export default {
   components: {
@@ -88,7 +94,8 @@ export default {
     timerList,
     outCourseList,
     teacherNetwork,
-    serveStudentList
+    serveStudentList,
+    calendarList
   },
   name: "teacherDetail",
   data () {
@@ -108,7 +115,7 @@ export default {
         outCourseList: permission("/teacherDetail/outCourseList"), // 
         teacherNetwork: permission("/teacherDetail/teacherNetwork"),
         serveStudentList: permission("/teacherDetail/serveStudentList"),
-
+        calendarList: permission("/teacherDetail/calendarList"),
       },
       Fsearch: null,
       Frules: null

src/views/teamDetail/calendarList.vue

@@ -1,53 +0,0 @@
-<template>
-  <div>
-    <el-calendar>
-      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
-      <template slot="dateCell"
-                slot-scope="scope">
-        <p @click="showDate(scope)">
-          {{scope.data.day}}
-          <span v-for="(item,index) in dataList"
-                :key="index"
-                v-if="item.classDate === scope.data.day">
-            {{ item.startClassTimeStr.substring(0,5) +'-'+item.endClassTimeStr.substring(0,5)}}
-          </span>
-        </p>
-      </template>
-    </el-calendar>
-  </div>
-</template>
-<script>
-import { getCourseSchedule } from "@/api/buildTeam";
-export default {
-  data () {
-    return {
-      dataList: []
-    }
-  },
-  mounted () {
-    console.log('来了')
-    getCourseSchedule({ musicGroupId: '20052813552500001', rows: 100, page: 1 }).then(res => {
-      if (res.code === 200) {
-        this.dataList = res.data.rows
-      }
-    })
-  },
-  activated () {
-
-  },
-  methods: {
-    showDate (scope) {
-      console.log(scope)
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-/deep/.el-calendar-day {
-  box-sizing: border-box;
-  height: 80px !important;
-  p {
-    height: 100%;
-  }
-}
-</style>