dy-admin-manager/src/views/resetTeaming/components/archicesComponents/modals/studentMaster.vue

<template>
  <div>
    <el-form
      ref="searchForm"
      :inline="true"
      class="searchForm"
      :model="searchForm"
    >
      <el-form-item prop="search">
        <el-input
          v-model.trim="searchForm.search"
          clearable
          placeholder="学生姓名或电话"
          @keyup.enter.native="search"
        ></el-input>
      </el-form-item>
      <el-form-item prop="subjectId">
        <el-select
          v-model.trim="searchForm.subjectId"
          clearable
          filterable
          placeholder="请选择声部"
        >
          <el-option
            v-for="(item, index) in soundList"
            :key="index"
            :value="item.id"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="currentGradeNum">
        <el-select
          v-model.trim="searchForm.currentGradeNum"
          filterable
          clearable
          placeholder="请选择年级"
        >
          <el-option
            v-for="(item, index) in gradeList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="isBuyInstrumentsInsurance">
        <el-select
          v-model="searchForm.isBuyInstrumentsInsurance"
          clearable
          filterable
          placeholder="是否购买乐保"
        >
          <el-option label="否" value="0"></el-option>
          <el-option label="是" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button  type="danger" @click="search">搜索</el-button>
        <el-button type="primary" @click="onReSet">重置</el-button>
        <!-- <el-button
          type="primary"
          v-permission="'export/musicGroupStudent'"
          @click="onMusicGroupExport"
          >导出</el-button
        > -->
      </el-form-item>
    </el-form>
    <el-table
      :data="tableList"
      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
    >
      <el-table-column label="学员编号" width="120px;" prop="userId">
      </el-table-column>
      <el-table-column label="学员姓名" width="120px;" prop="name">
      </el-table-column>
      <el-table-column align="center" prop="phone" label="联系电话">
        <template slot-scope="scope">
          <copy-text>
            {{ scope.row.phone }}
          </copy-text>
        </template>
      </el-table-column>
      <el-table-column align="center" label="声部" prop="subjectName">
        <template slot-scope="scope">
          <copy-text>
            {{ scope.row.subjectName }}
          </copy-text>
        </template>
      </el-table-column>
      <el-table-column align="center" label="年级">
        <template slot-scope="scope">
          <div>{{getGrade(scope.row.currentGradeNum)  }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="乐器品牌">
        <template slot-scope="scope">
          <div>{{ scope.row.goodsBrand }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="乐器型号">
        <template slot-scope="scope">
          <div>{{ scope.row.specification }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="购买日期">
        <template slot-scope="scope">
          <div>{{ scope.row.goodsBuyTime | formatTimer }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否购买乐保">
        <template slot-scope="scope">
          <div>{{ scope.row.insuranceStartTime ? "是" : "否" }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="乐保有效期" width="100px">
        <template slot-scope="scope">
          <div>{{ scope.row.insuranceStartTime | formatTimer }}~{{ scope.row.insuranceEndTime | formatTimer }}</div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total.sync="rules.total"
      :page.sync="rules.page"
      :limit.sync="rules.limit"
      :page-sizes="rules.page_size"
      @pagination="getList"
    />
  </div>
</template>
<script>
import { getStudentList } from "../api"
import pagination from "@/components/Pagination/index";
export default {
  props: ["searchForm", "soundList", "gradeList","gradeMap"],
  components:{pagination},
  data() {
    return {
      tableList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
      async getList(){
        try{
          const res = await  getStudentList({...this.searchForm,page:this.rules.page,rows:this.rules.limit, musicGroupId: this.$route.query.id})
          //  res.data.rows
          this.tableList = res.data.rows
          this.rules.total = res.data.total
        }catch(e){

        }

       },
    onMusicGroupExport() {},
    search() {
      this.rules.page = 1;
      this.getList()
    },
    onReSet() {
      this.$refs.searchForm.resetFields()
      this.search()
    },
    getGrade(id){
      return this.gradeMap[id]
    }
  },
};
</script>