dy-admin-manager/src/views/arrearage-students/index.vue

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>欠费学员列表 <filter-search @reload="FetchList" :keys="['visitFlag']"/>
    </h2>
    <div class="m-core">
      <save-form
        :inline="true"
        @submit="submit"
        @reset="onReSet"
        ref="searchForm"
        :model.sync="searchForm"
      >
        <el-form-item>
          <el-input
            v-model.trim="searchForm.search"
            clearable
            placeholder="学员(乐团)编号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchForm.organId"
            clearable
            filterable
            placeholder="请选择所属分部"
          >
            <el-option
              v-for="(item, index) in selects.branchs"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchForm.schoolId"
            clearable
            filterable
            placeholder="请选择教学点"
          >
            <el-option
              v-for="(item, index) in selects.schools"
              :key="index"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <remote-search
            :commit="'setEducations'"
            v-model="searchForm.eduTeacherId"
          />
        </el-form-item>
        <el-form-item>
          <el-button native-type="submit" type="danger">搜索</el-button>
          <el-button native-type="reset" type="primary">重置</el-button>
        </el-form-item>
      </save-form>
      <el-table
        :data="list"
        style="width: 100%"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
      >
        <el-table-column
          prop="userId"
          label="学员编号"
        >
          <copy-text slot-scope="scope">{{scope.row.userId}}</copy-text>
        </el-table-column>
        <el-table-column
          prop="studentName"
          label="学员姓名"
        >
          <copy-text slot-scope="scope">{{scope.row.studentName}}</copy-text>
        </el-table-column>
        <el-table-column
          prop="organName"
          label="所属分部"
        >
          <copy-text slot-scope="scope">{{scope.row.organName}}</copy-text>
        </el-table-column>
        <el-table-column
          prop="cooperationName"
          label="合作单位"
        >
          <copy-text slot-scope="scope">{{scope.row.cooperationName}}</copy-text>
        </el-table-column>
        <el-table-column
          prop="musicGroupName"
          label="所在乐团"
        >
          <copy-text slot-scope="scope">{{scope.row.musicGroupName}}</copy-text>
        </el-table-column>
        <el-table-column
          prop="eduTeacherName"
          label="乐团主管"
        >
          <copy-text slot-scope="scope">{{scope.row.eduTeacherName}}</copy-text>
        </el-table-column>
        <el-table-column
          prop="subjectName"
          label="声部"
        >
          <copy-text slot-scope="scope">{{scope.row.subjectName}}</copy-text>
        </el-table-column>
        <el-table-column
          prop="gender"
          label="性别"
        >
          <span slot-scope="scope">{{scope.row.gender | sex}}</span>
        </el-table-column>
        <el-table-column
          prop="parentName"
          label="家长姓名"
        >
          <copy-text slot-scope="scope">{{scope.row.parentName}}</copy-text>
        </el-table-column>
        <el-table-column
          prop="phone"
          label="家长联系电话"
        >
          <copy-text slot-scope="scope">{{scope.row.phone}}</copy-text>
        </el-table-column>
        <el-table-column
          prop="noPaymentAmount"
          label="欠费金额"
        >
          <span style="color: red;" slot-scope="scope">{{scope.row.noPaymentAmount | moneyFormat}}</span>
        </el-table-column>
        <el-table-column
          prop="ctrls"
          label="操作"
          fixed="right"
        >
          <el-button type="text" @click="view">查看</el-button>
        </el-table-column>
      </el-table>
      <pagination
        sync
        :total.sync="rules.total"
        :page.sync="rules.page"
        :limit.sync="rules.limit"
        :page-sizes="rules.page_size"
        @pagination="FetchList"
      />
    </div>
  </div>
</template>

<script>
import pagination from "@/components/Pagination/index";
import { permission } from '@/utils/directivePage'
import { queryArrearageStudents } from './api'
const initSearch = {
  search: '',
  eduTeacherId: null,
  organId: null,
  branchs: null,
}
export default {
  components: {
    pagination,
  },
  data() {
    return {
      list: [],
      searchForm: {
        search: null,
      },
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
    }
  },
  mounted() {
    this.$store.dispatch('setBranchs')
    this.$store.dispatch('setSchools')
    this.FetchList()
  },
  methods: {
    permission,
    async FetchList() {
      try {
        const res = await queryArrearageStudents({
          page: this.rules.page,
          rows: this.rules.limit,
          ...this.searchForm,
        })

        this.rules.total = res.data.total;
        this.list = res.data.rows
      } catch (error) {
        console.log(error)
      }
    },
    submit() {
      this.rules.page = 1
      this.FetchList()
    },
    onReSet() {
      this.searchForm = {...initSearch}
      this.submit();
    },
    view() {},
  }
}
</script>