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

<template>
  <div>
    <save-form
      ref="searchForm"
      :inline="true"
      save-key="studentMaster"
      class="searchForm"
      @submit="search"
      @reset="onReSet"
      :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="major">
        <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="currentGrade">
        <el-select
          v-model.trim="searchForm.currentGrade"
          filterable
          clearable
          placeholder="请选择年级"
        >
          <el-option
            v-for="(item, index) in gradeList"
            :key="index"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="oweFlag">
        <el-select
          v-model.trim="searchForm.oweFlag"
          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 native-type="submit" type="danger">搜索</el-button>
        <el-button type="primary" native-type="reset">重置</el-button>
        <el-button
          type="primary"
          v-permission="'export/musicGroupStudent'"
          @click="onMusicGroupExport"
          >导出</el-button
        >
      </el-form-item>
    </save-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="realName">
      </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.regSubjectName }}
          </copy-text>
        </template>
      </el-table-column>
      <el-table-column align="center" label="年级">
        <template slot-scope="scope">
          <div>{{ scope.row.currentGrade + scope.row.currentClass }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="乐器品牌">
        <template slot-scope="scope">
          <div>{{ scope.row.paymentStatus | paymentStatus }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="乐器型号">
        <template slot-scope="scope">
          <div>{{ scope.row.paymentStatus | paymentStatus }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="购买日期">
        <template slot-scope="scope">
          <div>{{ scope.row.paymentStatus | paymentStatus }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否购买月保">
        <template slot-scope="scope">
          <div>{{ scope.row.isActive ? "是" : "否" }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="月保有效期">
        <template slot-scope="scope">
          <div>{{ scope.row.hasCourse ? "是" : "否" }}</div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      save-key="studentMaster"
      sync
      :total.sync="rules.total"
      :page.sync="rules.page"
      :limit.sync="rules.limit"
      :page-sizes="rules.page_size"
      @pagination="getList"
    />
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
export default {
  props: ["searchForm", "soundList", "gradeList"],
  components:{pagination},
  data() {
    return {
      tableList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
    };
  },
  mounted() {},
  methods: {
       getList(){},
    onMusicGroupExport() {},
    search() {},
    onReSet() {},
  },
};
</script>