dy-admin-manager/src/views/resetTeaming/components/giveMemberList.vue

<template>
  <div class="m-core">
    <el-form :inline="true" :model="searchForm">
      <el-form-item>
        <el-input
          v-model.trim="searchForm.queryCondition"
          @keyup.enter.native="queryCondition"
          clearable
          placeholder="学生姓名/编号/电话"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model.trim="searchForm.subjectId"
          style="width: 180px"
          clearable
          filterable
          placeholder="请选择声部"
        >
          <el-option
            v-for="(item, index) in soundList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="search" type="danger">搜索</el-button>
        <el-button @click="onReSet" type="primary">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- <div class="newBand"
         @click="resetPays"
         v-permission="'musicGroupStudentFee/batchUpdateCourseFee'">修改缴费金额</div> -->
    <el-button @click="addMember" type="primary" style="margin-bottom: 20px">激活会员</el-button>

    <div class="tableWrap">
      <el-table
        style="width: 100%"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        :data="tableList"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          align="center"
          prop="studentId"
          label="学员编号"
        ></el-table-column>
        <el-table-column align="center" prop="name" label="学员姓名">
        </el-table-column>
        <el-table-column align="center" prop="phone" label="手机号">
        </el-table-column>
        <el-table-column
          align="center"
          prop="subjectName"
          label="学员声部"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="type"
          label="团练宝类型"
        >
          <template slot-scope="scope">
            {{ scope.row.type | memberEnumType }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="time"
          label="数量"
        ></el-table-column>
        <el-table-column
          align="center"
          label="缴费金额(元)"
        >
          <template slot-scope="scope">
            {{ scope.row.amount | hasMoneyFormat }}
          </template>
        </el-table-column>
        <!-- <el-table-column align="center"
                         label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type="text"
                         v-permission="'musicGroupStudentFee/batchUpdateCourseFee'"
                         @click="resetPay(scope.row)">修改金额</el-button>
            </div>
          </template>
        </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="getList"
      />
    </div>

    <el-dialog
      title="激活会员"
      :visible.sync="giveMemberVisible"
      width="1000px"
      v-if="giveMemberVisible"
      append-to-body
    >
      <giveMemberModel :tableList="selectStudentList" @getList="getList" @close="giveMemberVisible = false" />
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import { findSound } from '@/api/buildTeam'
import { queryInactive } from '../api'
import giveMemberModel from "../modals/giveMemberModel";
export default {
  components: { pagination, giveMemberModel },
  data() {
    let musicGroupId = this.$route.query.id;
    return {
      musicGroupId,
      giveMemberVisible: false,
      searchForm: {
        queryCondition: "",
        subjectId: "",
      },
      soundList: [],
      tableList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      selectStudentList: [], // 选中的学生列表
    };
  },
  mounted() {
    this.__init()
    this.getList()
  },
  methods: {
    async __init() {
      try {
        let res = await findSound({ musicGroupId: this.musicGroupId })
        if (res.code == 200) {
          this.soundList = res.data;
        }
      } catch(e) {}
    },
    async getList() {
      try {
        const res = await queryInactive({
          ...this.searchForm,
          musicGroupId: this.musicGroupId,
          page: this.rules.page,
          rows: this.rules.limit,
        });
        this.rules.total = res.data.total;
        this.tableList = res.data.rows;
      } catch (e) { }
      queryInactive
    },
    handleSelectionChange(val) {
      this.selectStudentList = val || []
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    onReSet() {
      this.searchForm = { search: "", subjectId: "" };
    },
    addMember(){
      if(this.selectStudentList.length <= 0) {
        this.$message.error('至少选择一名学生')
        return
      }
      this.giveMemberVisible = true
    }
  },
};
</script>