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

<template>
  <div class="m-container">
    <h2>
      <!-- <div class='squrt'></div>
      {{name}} -->
      <el-page-header @back="onCancel"
                      :content="name"></el-page-header>
    </h2>
    <p style="margin-bottom:20px;">老师上课记录</p>
    <!-- 搜索类型 -->
    <el-form :inline="true"
             class="searchForm"
             v-model.trim="searchForm">
      <!-- <el-form-item>
        <el-select v-model.trim="searchForm.teacher">
          <el-option v-for='(item,index) in teacherList'
                     :key="index"
                     :value="item.id"
                     :label="item.name"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-input v-model="searchForm.teacher"
                  @keyup.enter.native='search'
                  placeholder="请输入老师姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model.trim="searchForm.timer"
                        style="width:420px;"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="{
        firstDayOfWeek: 1
    }">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-input v-model.trim="searchForm.teacher"
                  @keyup.enter.native='search'
                  placeholder="请输入老师姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <div class="searchBtn"
             @click="search">搜索</div>
      </el-form-item>
    </el-form>
    <div class="tableList">
      <el-table :data='tableList'>
        <el-table-column align='center'
                         prop="classDate"
                         label="时间">
          <template slot-scope="scope">
            {{ scope.row.classDate }} {{ scope.row.startClassTime ? scope.row.startClassTime.substr(0, 5) : '' }}
          </template>
        </el-table-column>
        <el-table-column align='center'
                         prop="courseScheduleName"
                         label="课程名称">
        </el-table-column>
        <el-table-column align='center'
                         prop="realName"
                         label="老师名称">
        </el-table-column>
        <el-table-column align='center'
                         prop="signInStatus"
                         label="签到">
          <template slot-scope="scope">
            <div>
              {{ scope.row.signInStatus|attendanceType}}
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center'
                         prop="signOutStatus"
                         label="签退">
          <template slot-scope="scope">
            <div>
              {{ scope.row.signOutStatus|attendanceOutType}}
            </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 { findMusicGroupClassTeacher, getTeacheerRecord } from '@/api/buildTeam'
import pagination from '@/components/Pagination/index'
export default {
  components: {
    pagination
  },
  data () {
    const query = this.$route.query
    return {
      name: query.name,
      searchForm: {
        teacher: '',
        timer: []
      },
      teamId: '',
      teacherList: [],
      tableList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 30, 40] // 选择限制显示条数
      },
    }
  },
  // created () {
  //   this.teamId = this.$route.query.id;
  // },
  mounted () {
    // this.name = localStorage.getItem('teamName');
    // findMusicGroupClassTeacher({ musicGroupId: this.teamId }).then(res => {
    //   if (res.code == 200) {
    //     this.teacherList = res.data;
    //   }
    // })
    this.teamId = this.$route.query.id;
    this.getList()
  },
  activated () {

    this.getList()
  },
  methods: {
    onCancel () {
      // window.history.back()
      let params = this.$route.query
      this.$router.push({
        path: '/business/teamDetails',
        query: {
          id: params.id,
          status: params.status,
          name: params.name,
          checkIndex: "2"
        }
      })
    },
    search () {
      this.rules.page = 1;
      this.getList();
    },
    reset () {
      this.rules.page = 1
      this.rules.limit = 10
      this.searchForm = {
        teacher: '',
        timer: []
      }
      this.getList()
    },
    getList () {
      //musicGroupId: this.teamId
      this.searchForm.timer = this.searchForm.timer || [];
      let obj = {
        page: this.rules.page,
        rows: this.rules.limit,
        musicGroupId: this.teamId,
        teacherName: this.searchForm.teacher || null,
        startTime: this.searchForm.timer[0] || null,
        endTime: this.searchForm.timer[1] || null,
      }
      getTeacheerRecord(obj).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          this.rules.total = res.data.total
        }
      })
    }
  },
}
</script>
<style lang="scss">
</style>