dy-admin-manager/src/views/studentManager/components/studentPayList.vue

<template>
  <div>
    <!-- 搜索类型 -->
    <el-form :inline="true"
             class="searchForm"
             v-model="searchForm">
      <el-form-item>
        <el-select v-model="searchForm.classGroupType" placeholder="课程类型">
          <el-option v-for="(item, index) in courseArray" :key="index" 
            :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="searchForm.attendanceStatus" placeholder="考勤状态">
          <el-option v-for="(item, index) in att" :key="index" 
            :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="班级名称" v-model="searchForm.classGroupName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getList" type="danger">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="onReSet" type="primary">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <div class="tableWrap">
      <el-table :data='tableList'>
        <el-table-column align='center'
                         label="上课时间">
        </el-table-column>
        <el-table-column align='center'
                         label="课程类型">
        </el-table-column>
        <el-table-column align='center'
                         label="班级名称">
        </el-table-column>
        <el-table-column align='center'
                         label="当前课次">
        </el-table-column>
        <el-table-column align='center'
                         label="考勤状态">
        </el-table-column>
        <el-table-column align='center'
                         label="总计缴费">
        </el-table-column>
        <el-table-column align='center'
                         label="本次扣费">
        </el-table-column>
        <el-table-column align='center'
                         label="课程余额">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import pagination from '@/components/Pagination/index'
import { findStudentAttendances } from '@/api/studentManager'
export default {
  components: { pagination },
  data () {
    return {
      searchForm: {
        userId: this.$route.query.userId,
        classGroupType: null,
        attendanceStatus: null,
        classGroupName: null,
      },
      courseArray: [
        { label: '单技课', value: 'NORMAL' },
        { label: '合奏课', value: 'MIX' },
        { label: '小班课', value: 'HIGH' },
        { label: 'VIP课', value: 'VIP' },
        { label: '试听课', value: 'DEMO' }
      ],
      att: [
        // { value: "NORMAL", label: "正常" },
        // { value: "TRUANT", label: "旷课" },
        // { value: "LEAVE", label: "请假" },
        // { value: "QUIT_SCHOOL", label: "休学" },
        // { value: "DROP_OUT", label: "退学" }
        { value: "NORMAL", label: "正常" },
        { value: "TRUANT", label: "旷课" },
        { value: "LEAVE", label: "请假" },
        { value: "DROP_OUT", label: "休学" },
      ],
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      tableList: []
    }
  },
  methods: {
    getList () {
      let params = this.searchForm
      params.rows = this.pageInfo.limit
      params.page = this.pageInfo.page
      // findStudentAttendances(params).then(res => {
      //   if(res.code == 200) {
      //     this.tableList = res.data.rows
      //     this.pageInfo.total = res.data.total
      //   }
      // })
    },
    onReSet() { // 重置搜索
      this.searchForm = {
        userId: this.$route.query.userId,
        classGroupType: null,
        attendanceStatus: null,
        classGroupName: null
      }
      this.getList()
    },
  }
}
</script>
<style lang="scss">
</style>