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

<template>
  <div class='t-container'>
    <!-- 头部展示 -->
    <div class="headWrap">
      <!-- <div class="left">
        <div class="headItem">
          <p>教学主管: <span> 张三，李四</span></p>
        </div>
      </div> -->
      <div></div>
      <div class="right newBand"
           @click="gotoRecord">
        上课记录
      </div>
    </div>

    <!-- 搜索类型 -->
    <el-form :inline="true"
             class="searchForm"
             v-model="searchForm">
      <el-form-item>
        <el-select v-model="searchForm.status"
                   placeholder="合奏班">
          <el-option v-for='(item,index) in mixCourseList'
                     :key="index"
                     :value="item.id"
                     :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchForm.search"></el-input>
      </el-form-item>
      <el-form-item>
        <div class="searchBtn"
             @click="getList">搜索</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'
                         prop="teacherId"
                         label="老师编号">
        </el-table-column>
        <el-table-column align='center'
                         prop="teacherName"
                         label="老师姓名">
        </el-table-column>
        <el-table-column align='center'
                         prop="teacherPhone"
                         label="联系电话">
        </el-table-column>
        <el-table-column align='center'
                         prop="jobNature"
                         label="工作类型">
          <template slot-scope="scope">
            <div>
              {{ scope.row.jobNature|jobNature}}
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center'
                         prop="classGroupName"
                         label="合奏班">
        </el-table-column>
        <el-table-column align='center'
                         prop="courseScheduleName"
                         label="执教班级">
        </el-table-column>
        <el-table-column align='center'
                         prop="num"
                         label="出勤次数">
        </el-table-column>
        <!-- <el-table-column align='center'
                         label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type="text"
                         size="small">全职</el-button>
              <el-button type="text"
                         size="small">兼职</el-button>
              <el-button type="text"
                         size="small">全职试用</el-button>
              <el-button type="text"
                         size="small">兼职试用</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 pagination from '@/components/Pagination/index'
import { getTeamTeacherList, getAllClass } from '@/api/buildTeam'
export default {
  props: {
    teamid: {
      type: String,
      required: true
    },
  },
  data () {
    return {
      searchForm: { // 搜索框
        status: '', // 工作类型
        teachingClass: '', // 合奏班
        attendance: '', // 出勤次数
        search: ''
      },
      searchLsit: [],
      tableList: [], //
      mixCourseList: [],
      rules: {
        // 分页规则
        limit: 2, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [2, 4, 6, 8] // 选择限制显示条数
      },
    }
  },
  components: {
    pagination
  },
  mounted () {
    // console.log(this.teamid)
    this.getList();
    getAllClass({ musicGroupId: this.teamid }).then(res => {
      if (res.code == 200) {
        this.mixCourseList = res.data;
      }
    })
  },
  methods: {
    getList () {
      // this.teamid
      getTeamTeacherList({
        'classGroupName': '',
        'jobNature': '',
        'musicGroupId': this.teamid,
        page: this.rules.page,
        rows: this.rules.limit,
        search: this.searchForm.search

      }).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          this.rules.total = res.data.total;
        }
      })
    },
    gotoRecord () {
      this.$router.push({ path: `/business/teamTeacherRecord`, query: { id: this.teamid } })
    }
  }
}
</script>
<style lang="scss" scope>
.t-container {
  .topFrom {
    margin: 20px 30px 0;
    width: 1000px;
  }
  // .searchForm {
  // }
}
</style>