dy-admin-manager/src/views/arrearage-students/modals/list.vue

<template>
  <div>
    <el-button
      type="primary"
      :disabled="disabled"
      @click="openPay"
      v-permission="'musicGroupPaymentCalenderDetail/openPayment?page=ArrearageStudents'"
    >开启缴费</el-button>
    <el-button
      type="primary"
      :disabled="disabled"
      @click="removeUser"
      v-permission="'musicGroupPaymentCalenderDetail/batchDel?page=ArrearageStudents'"
    >删除学员</el-button>
    <el-table
      :data="list"
      style="width: 100%;margin-top: 20px;"
      max-height="400px"
      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection"
        :selectable="checkSelect"
        width="55"
      />
      <el-table-column
        prop="id"
        label="缴费编号"
      >
        <copy-text slot-scope="scope">
          {{ scope.row.id }}
        </copy-text>
      </el-table-column>
      <el-table-column
        prop="startPaymentDateMgpc"
        label="缴费开始日期"
      >
        <div slot-scope="scope">
          {{ scope.row.startPaymentDateMgpc | formatTimer }}
        </div>
      </el-table-column>
      <el-table-column
        prop="deadlinePaymentDateMgpc"
        label="缴费截止日期"
      >
        <div slot-scope="scope">
          {{ scope.row.deadlinePaymentDateMgpc | formatTimer }}
        </div>
      </el-table-column>
      <el-table-column
        prop="expectAmount"
        label="预计缴费金额"
      >
        <div slot-scope="scope">
          {{ scope.row.expectAmount | moneyFormat }}
        </div>
      </el-table-column>
      <el-table-column
        prop="open"
        label="是否开启缴费"
      >
        <div slot-scope="scope">
          {{ scope.row.open ? '是' : '否' }}
        </div>
      </el-table-column>
      <el-table-column
        prop="paymentStatus"
        label="缴费类型"
      >
        <div slot-scope="scope">
          {{ scope.row.paymentType | userPaymentTypeFormat }}
        </div>
      </el-table-column>
      <el-table-column
        prop="paymentStatus"
        label="缴费状态"
      >
        <div slot-scope="scope">
          {{ scope.row.paymentStatus | paymentStatusDetall }}
        </div>
      </el-table-column>
      <el-table-column
        prop="payTime"
        label="支付时间"
      >
        <div slot-scope="scope">
          {{ scope.row.payTime | dateForMinFormat }}
        </div>
      </el-table-column>
      <el-table-column
        prop="ctrls"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button v-if="scope.row.paymentStatus == 'NON_PAYMENT'" type="text" @click="openCode(scope.row)">查看二维码</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total.sync="rules.total"
      :page.sync="rules.page"
      :limit.sync="rules.limit"
      :page-sizes="rules.page_size"
      @pagination="FetchList"
    />
    <qr-code v-model="codeStatus" :codeUrl="codeUrl" />

    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <el-button @click="$emit('close')">关闭</el-button>
    </div>
  </div>
</template>
<script>
import { vaildStudentUrl } from '@/utils/validate'
import qrCode from '@/components/QrCode/index';
import pagination from "@/components/Pagination/index";
import {
  getmusicGroupPaymentCalenderDetail,
  openMusicGroupPaymentCalenderDetailPayment,
  delMusicGroupPaymentCalenderStudent
} from '@/api/buildTeam'
export default {
  props: ['userId', 'musicGroupId'],
  components: { pagination, qrCode },
  data() {
    return {
      list: [],
      activeChiose: [],
      codeStatus: false,
      codeUrl: '',
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
    }
  },
  computed: {
    disabled() {
      return !this.activeChiose.length
    }
  },
  mounted() {
    this.FetchList()
  },
  methods: {
    handleSelectionChange (val) {
      this.activeChiose = val
    },
    checkSelect (val) {
      return val.paymentStatus == 'NON_PAYMENT'
    },
    openCode(row) {
      this.codeStatus = true
      this.codeUrl = vaildStudentUrl() + '/#/musicGroupRenew?calenderId=' + row.musicGroupPaymentCalenderId + '&id=' + this.musicGroupId
    },
    async removeUser() {
      try {
        await this.$confirm('是否确认删除学员?', '提示', {
          type: 'warning'
        })
        await delMusicGroupPaymentCalenderStudent({
          musicGroupPaymentCalenderDetailIds: this.activeChiose.map(item => item.id).join(',')
        })
        this.$message.success('删除成功')
        this.FetchList()
      } catch (error) {}
    },
    async openPay() {
      try {
        await this.$confirm('是否确认开启缴费?', '提示', {
          type: 'warning'
        })
        await openMusicGroupPaymentCalenderDetailPayment({
          ids: this.activeChiose.map(item => item.id).join(',')
        })
        this.$message.success('开启成功')
        this.FetchList()
      } catch (error) {}
    },
    async FetchList() {
      try {
        const res = await getmusicGroupPaymentCalenderDetail({
          musicGroupId: this.musicGroupId,
          userId: this.userId,
          page: this.rules.page,
          rows: this.rules.limit,
        })
        this.rules.total = res.data.total;
        this.list = res.data.rows
      } catch (error) {}
    }
  }
}
</script>