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']" :moreKeys="['organId']"/>
    </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.organIds"
            clearable
            filterable
            multiple
            collapse-tags
            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.musicGroupId"
            clearable
            filterable
            placeholder="请选择乐团"
          >
            <el-option
              v-for="(item, index) in musicList"
              :key="index"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchForm.cooperationOrganId"
            clearable
            filterable
            placeholder="请选择合作单位"
          >
            <el-option
              v-for="(item, index) in cooperations"
              :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-button @click="onExport" type="primary" v-permission="'export/arrearageStudents'">导出</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"
          v-if="permission('musicGroupPaymentCalenderDetail/queryPage/list')"
        >
          <el-button slot-scope="scope" type="text" @click="view(scope.row)">查看</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>
    <el-dialog width="1000px" title="缴费记录" :visible.sync="visible">
      <list-dialog
        v-if="visible && detail"
        @close="visible = false"
        :musicGroupId="detail.musicGroupId"
        :userId="detail.userId"
      />
    </el-dialog>
  </div>
</template>

<script>
import pagination from "@/components/Pagination/index";
import list from './modals/list'
import { permission } from '@/utils/directivePage'
import { getCooperation } from '@/api/buildTeam'
import { queryArrearageStudents, getNoPaymentStudentMusicGroups } from './api'
import { Export } from '@/utils/downLoadFile'
import qs from 'qs'
const initSearch = {
  search: '',
  eduTeacherId: null,
  organIds: [],
  branchs: null,
  musicGroupId: null,
  cooperationOrganId: null,
}
export default {
  components: {
    pagination,
    'list-dialog': list
  },
  data() {
    return {
      list: [],
      visible: false,
      detail: null,
      musicList: [],
      searchForm: {
        ...initSearch
      },
      cooperations: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
    }
  },
  mounted() {
    const { query } = this.$route
    if (query.organId) {
      this.searchForm.organIds = [Number(query.organId)]
    }
    if(query.result) {
      this.searchForm.eduTeacherId = Number(query.result)
    }
    getCooperation({ rows: 1000 }).then((res) => {
      this.cooperations = res.data.rows
    })
    this.$store.dispatch('setBranchs')
    this.$store.dispatch('setSchools')
    this.FetchList()
    this.FetchMusicList()
  },
  methods: {
    permission,
    async FetchList() {
      try {
        const { organIds, ...rest} = this.searchForm
        const res = await queryArrearageStudents({
          page: this.rules.page,
          rows: this.rules.limit,
          organIds: organIds.join(','),
          ...rest,
        })

        this.rules.total = res.data.total;
        this.list = res.data.rows
      } catch (error) {}
    },
    async FetchMusicList() {
      try {
        const res = await getNoPaymentStudentMusicGroups()
        this.musicList = res.data
      } catch (error) {}
    },
    submit() {
      this.rules.page = 1
      this.FetchList()
    },
    onReSet() {
      this.searchForm = {...initSearch}
      this.submit();
    },
    view(row) {
      this.detail = row
      this.visible = true
    },
    onExport() {
      const { organIds, ...rest} = this.searchForm
      Export(this, {
        url: '/api-web/export/arrearageStudents',
        fileName: '欠费学员.xlsx',
        method: 'post',
        params: qs.stringify({ organIds: organIds.join(','), ...rest })
      }, '您确定导出欠费学员列表?')
    }
  }
}
</script>