dy-admin-manager/src/views/teamDetail/components/courseList.vue

<template>
  <div class='cl-container'>
    <!-- 搜索类型 -->
    <el-form :inline="true"
             class="searchForm"
             v-model="searchForm">
      <el-form-item label="课程类型">
        <el-select v-model="searchForm.courseStatus"
                   clearable
                   placeholder="课程类型">
          <el-option label="基础技能班"
                     value="HIGH"></el-option>
          <el-option label="综合课"
                     value="COMPREHENSIVE"></el-option>
          <el-option label="课堂课"
                     value="CLASSROOM"></el-option>
          <el-option label="合奏课"
                     value="MIX"></el-option>
          <el-option label="集训合奏课"
                     value="TRAINING_MIX"></el-option>
          <el-option label="集训单技课"
                     value="TRAINING_SINGLE"></el-option>
          <el-option label="单技课"
                     value="SINGLE"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="课程状态">
        <el-select v-model="searchForm.classStatus"
                   clearable
                   placeholder="课程状态">
          <el-option label="未开始"
                     value="NOT_START"></el-option>
          <el-option label="进行中"
                     value="UNDERWAY"></el-option>
          <el-option label="已结束"
                     value="OVER"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择日期">
        <el-date-picker v-model="searchForm.timer"
                        style="width:420px;"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <div class='searchBtn'
             @click="search">搜索</div>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <div class="tableWrap">
      <el-table :data='tableList'
                :header-cell-style="{background:'#EDEEF0',color:'#444'}">
        <el-table-column align='center'
                         label="时间">
          <template slot-scope="scope">
            {{ scope.row.classDate }} {{ scope.row.startClassTime ? scope.row.startClassTime.substr(0, 5) : '' }}-{{ scope.row.endClassTime ? scope.row.endClassTime.substr(0, 5) : '' }}
          </template>
        </el-table-column>
        <el-table-column align='center'
                         prop="classGroupName"
                         label="班级名称">
        </el-table-column>
        <!-- <el-table-column align='center'
                         prop="mixClassGroupName"
                         label="合奏班">
        </el-table-column> -->
        <el-table-column align='center'
                         prop="courseScheduleType"
                         label="课程类型">
          <template slot-scope="scope">
            <div>
              {{ scope.row.courseScheduleType | coursesType}}
            </div>
          </template>
        </el-table-column>

        <el-table-column align='center'
                         prop="courseScheduleStatus"
                         label="课程状态">
          <template slot-scope="scope">
            <div>
              {{ scope.row.courseScheduleStatus | coursesStatus }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center'
                         label="老师签到">
          <template slot-scope="scope">
            <div>
              {{ scope.row.signInStatus | attendanceType}}
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center'
                         label="老师签退">
          <template slot-scope="scope">
            <div>
              {{ scope.row.signOutStatus | attendanceOutType}}
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center'
                         prop="masterTeacherName"
                         label="指导老师">
        </el-table-column>
        <!-- <el-table-column align='center'
                         prop="subTeacherName"
                         label="助教老师">
        </el-table-column> -->
        <el-table-column align='center'
                         label="操作">
          <template slot-scope="scope">
            <div>
              <el-button v-if="scope.row.courseScheduleStatus != 'OVER'"
                         type="text"
                         @click="resetClass(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>
    <el-dialog title="课程调整"
               width="400px"
               :before-close="handleClose"
               :visible.sync="courseVisible">
      <el-form :model="maskForm"
               ref="maskForm"
               :rules="maskRules"
               label-position="right"
               label-width="80px;"
               :inline="true">
        <el-form-item label="主教老师"
                      prop="teacher">
          <el-select v-model="maskForm.teacher"
                     filterable>
            <el-option v-for="(item,index) in teacherList"
                       :key="index"
                       :value="item.id"
                       :label="item.realName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="助教老师"
                      prop="assistant">
          <el-select v-model="maskForm.assistant"
                     filterable
                     multiple
                     collapse-tags>
            <el-option v-for="(item,index) in teacherList"
                       :key="index"
                       :value="item.id"
                       :label="item.realName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上课日期"
                      prop="date">
          <el-date-picker v-model="maskForm.date"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="开始时间"
                      prop="startTime">
          <el-time-select placeholder="起始时间"
                          v-model="maskForm.startTime"
                          :picker-options="{
                            start: '04:30',
                            step: '00:05',
                            end: '23:30'
                            }">
          </el-time-select>
        </el-form-item>
        <el-form-item label="结束时间"
                      prop="endTime">
          <el-time-select placeholder="结束时间"
                          v-model="maskForm.endTime"
                          :picker-options="{
                            start: '04:30',
                            step: '00:05',
                            end: '23:30',
                            minTime: maskForm.startTime
                          }">
          </el-time-select>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="courseVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitResetClass">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import pagination from '@/components/Pagination/index'
import { getCourseList, findMusicGroupClassTeacher, resetCourse, getTeacher } from '@/api/buildTeam'
export default {
  props: {
    teamid: {
      type: String,
      required: true
    },
  },
  data () {
    return {
      courseVisible: false,
      searchForm: {
        courseStatus: '', // 课程类型
        classStatus: '', // 课程状态
        timer: [] // 时间
      },
      tableList: [],
      searchLsit: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      maskForm: {
        teacher: '',
        assistant: '',
        date: '',
        startTime: '',
        endTime: '',
        id: ''
      },
      maskRules: {
        teacher: [{ required: true, message: '请选择主教老师名称', trigger: 'blur' },],
        date: [{ required: true, message: '请选择上课时间', trigger: 'blur' },],
        startTime: [{ required: true, message: '请选择上课开始时间', trigger: 'blur' },],
        endTime: [{ required: true, message: '请选择上课结束时间', trigger: 'blur' },],
      },
      teacherList: []
    }
  },
  components: {
    pagination
  },
  mounted () {
    this.getList();
    // 获取所有老师
    // findMusicGroupClassTeacher({ musicGroupId: this.teamid }).then(res => {
    //   if (res.code == 200) {
    //     this.teacherList = res.data;
    //   }
    // })
    getTeacher().then(res => {
      if (res.code == 200) {
        this.teacherList = res.data;
      }
    })
  },
  methods: {
    /**
     *  courseStatus: '', // 课程类型
        classStatus: '', // 课程状态
        timer:[] // 时间
     * 
     */
    search () {
      this.rules.page = 1;
      this.getList();
    },
    getList () {
      if (!this.searchForm.timer) {
        this.searchForm.timer = []
      }
      let obj = {
        classScheduleStatus: this.searchForm.classStatus || null,
        classScheduleType: this.searchForm.courseStatus || null,
        musicGroupId: this.teamid,
        startTime: this.searchForm.timer[0] || null,
        endTime: this.searchForm.timer[1] || null,
        page: this.rules.page, rows: this.rules.limit

      }
      getCourseList(obj).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          this.rules.total = res.data.total;
        }
      })
    },
    resetClass (row) {
      this.maskForm.teacher = parseInt(row.masterTeacherId);
      this.maskForm.assistant = []
      for (let i in row.teachingTeachers) {
        if (row.teachingTeachers[i].teacherRole == 'TEACHING') {
          this.maskForm.assistant.push(row.teachingTeachers[i].userId)
        }
      }
      this.maskForm.date = row.classDate;
      this.maskForm.startTime = row.startClassTimeStr;
      this.maskForm.endTime = row.endClassTimeStr;
      this.maskForm.id = row.courseScheduleId;
      // 修改课时
      this.courseVisible = true;
      // let obj = {
      //   actualTeacherId: this.maskForm.teacher,
      //   classDate: this.maskForm.date,
      //   classGroupId: row.id
      // }


    },
    submitResetClass () {
      let obj = {
        actualTeacherId: this.maskForm.teacher,
        startClassTimeStr: this.maskForm.startTime,
        endClassTimeStr: this.maskForm.endTime,
        id: this.maskForm.id,
        teachingTeacherIdList: this.maskForm.assistant.join(',') || null,
        classDate: this.maskForm.date
      }
      resetCourse(obj).then(res => {
        if (res.code == 200) {
          this.$message.success('修改成功')
          this.getList();
          this.courseVisible = false;
        }
      })
    },
    handleClose () {
      this.courseVisible = false;
      this.$refs['maskForm'].resetFields()
    }
  }
}
</script>
<style lang="scss" scope>
.cl-container {
  .topFrom {
    margin: 20px 30px 0;
    .classlist {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      ul {
        li {
          list-style: none;
        }
      }
    }
  }
  .searchForm {
    margin: 0 30px;
  }
}
</style>