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

<template>
  <div class="t-container">
    <!-- 头部展示 -->
    <!-- <div class="headWrap" style="padding:0;">

    </div> -->

    <!-- 搜索类型 -->
    <save-form
      :inline="true"
      :save-key="saveKey"
      class="searchForm"
      :model="searchForm"
      @submit="search"
    >
      <!-- <el-form-item>
        <el-select v-model.trim="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
          placeholder="老师姓名 编号 手机号"
          clearable
          v-model.trim="searchForm.search"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button native-type="submit" type="danger">搜索</el-button>
      </el-form-item>
      <!-- 可以直接去老师考勤列表里面查 -->
      <!-- <el-form-item style="float: right">
        <div class="right newBand" style="margin-bottom: 0" @click="gotoRecord">
          上课记录
        </div>
      </el-form-item> -->
    </save-form>

    <!-- 列表 -->
    <div class="tableWrap">
      <el-table
        :data="tableList"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
      >
        <el-table-column align="center" prop="teacherId" label="老师编号">
          <template slot-scope="scope">
            <copy-text>
              {{ scope.row.teacherId }}
            </copy-text>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="teacherName" label="老师姓名">
          <template slot-scope="scope">
            <copy-text>
              {{ scope.row.teacherName }}
            </copy-text>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="teacherPhone" label="联系电话">
          <template slot-scope="scope">
            <copy-text>
              {{ scope.row.teacherPhone }}
            </copy-text>
          </template>
        </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="name"
                         label="合奏班">
        </el-table-column> -->
        <el-table-column align="center" prop="classGroupName" 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
      :save-key="saveKey"
      sync
        :total.sync="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 {
  name: "tteacherList",
  data() {
    return {
      searchForm: {
        // 搜索框
        status: "", // 工作类型
        teachingClass: "", // 合奏班
        attendance: "", // 出勤次数
        search: "",
      },
      searchLsit: [],
      tableList: [], //
      mixCourseList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 30, 40], // 选择限制显示条数
      },
    };
  },
  components: {
    pagination,
  },
  mounted() {
    this.teamid = this.$route.query.id;
    this.getList();
    // getAllClass({ musicGroupId: this.teamid }).then((res) => {
    //   if (res.code == 200) {
    //     this.mixCourseList = res.data;
    //   }
    // });
  },
  activated() {
    this.teamid = this.$route.query.id;
    this.getList();
    // getAllClass({ musicGroupId: this.teamid }).then(res => {
    //   if (res.code == 200) {
    //     this.mixCourseList = res.data;
    //   }
    // })
  },
  computed:{
    saveKey(){
      return 'teamDetails-teacherList|id|' + this.$route.query.id
    }
  },
  methods: {
    search() {
      this.rules.page = 1;
      this.getList();
    },
    getList() {
      // this.teamid
      // 'classGroupName': '',
      //  'jobNature': '',
      getTeamTeacherList({
        musicGroupId: this.teamid,
        page: this.rules.page,
        rows: this.rules.limit,
        search: this.searchForm.search || null,
      }).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,
          status: this.$route.query.status,
          name: this.$route.query.name,
        },
      });
    },
  },
};
</script>
<style lang="scss" scope>
.t-container {
  .topFrom {
    margin: 20px 30px 0;
    width: 1000px;
  }
  // .searchForm {
  // }
}
</style>