dy-admin-manager/src/views/resetTeaming/modals/pay-items.vue

<template>
  <div>
    <el-table
      :data="list"
      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
    >
      <el-table-column
        align="center"
        prop="id"
        width="120"
        label="缴费单号"
      >
      <template slot-scope="scope">
          <div>
            <copy-text>{{ scope.row.id }}</copy-text>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="batchNo"
        width="200"
        label="缴费批次"
      >
      <template slot-scope="scope">
          <div>
            <copy-text>{{ scope.row.batchNo }}</copy-text>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="paymentType" label="缴费类型">
        <template slot-scope="scope">
          <div>
            {{ scope.row.paymentType | userPaymentTypeFormat }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="status" width="120" label="缴费状态">
        <template slot-scope="scope">
          <div>
            {{ scope.row.status | payTypeStatus }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="expectNum"
        width="200"
        label="缴费人数(预计/实际)"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.expectNum }}/{{ scope.row.actualNum }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="paymentPattern" label="缴费方式">
        <template slot-scope="scope">
          <div>
            {{ scope.row.paymentPattern | teamPayStatus }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="paymentValidStartDate"
        width="200"
        label="缴费有效期"
      >
        <template slot-scope="scope">
          <div>
            {{ scope.row.paymentValidStartDate | formatTimer }} ~
            {{ scope.row.paymentValidEndDate | formatTimer }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="memo" label="备注" width="200" class-name="table-btns">
        <template slot-scope="scope">
          <overflow-text :text="scope.row.memo"></overflow-text>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="200">
        <template slot-scope="scope">
          <div>
            <el-button
              type="text"
              @click="toDetail(scope.row)"
              v-permission="'musicGroupPaymentCalender/auditListDetail'"
              >查看</el-button
            >
            <!-- <el-button
              type="text"
              @click="$listeners.openChioseStudent(scope.row)"
              v-if="
                scope.row.status != 'REJECT' &&
                scope.row.status != 'AUDITING' &&
                teamStatus &&
                scope.row.paymentType != 'MUSIC_APPLY' &&
                scope.row.paymentType != 'ADD_STUDENT'
              "
              v-permission="'musicGroupPaymentCalenderDetail/batchAdd'"
              >添加学员</el-button
            > -->
            <!-- <el-button
              type="text"
              v-if="scope.row.status == 'REJECT' && teamStatus"
              v-permission="'musicGroupPaymentCalender/update'"
              @click="$listeners.resetPay(scope.row)"
              >修改</el-button
            > -->
            <el-button type="text"
                        v-if="$listeners.lookUserList"
                        @click="$listeners.lookUserList(scope.row)"
                        v-permission="'musicGroupPaymentCalender/queryPage'">学员列表</el-button>
            <el-button
              type="text"
              v-permission="'musicGroupPaymentCalender/makesureSchoolePaid'"
              v-if="scope.row.status == 'OPEN' && teamStatus == 'resetTeam'"
              @click="$listeners.commmitGetMoney(scope.row)"
              >确认收款</el-button
            >
            <el-button
              type="text"
              v-if="
                !isNewGropu &&
                teamStatus &&
                scope.row.paymentType != 'MUSIC_APPLY' &&
                payUserType === 'STUDENT'
              "
              @click="$listeners.onCreateQRCode(scope.row)"
              >续费二维码</el-button
            >
            <el-button
              type="text"
              v-if="$listeners.onPreview && payUserType === 'STUDENT' && scope.row.paymentType == 'MUSIC_APPLY'"
              v-permission="'musicGroup/findMusicGroupSubjectInfo/966'"
              @click="$listeners.onPreview(scope.row)"
              >预览</el-button
            >
            <!-- <el-button type="text" v-if="!isNewGropu" @click="onCreateQRCode(scope.row)">续费二维码</el-button> -->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="rules.total"
      :page.sync="rules.page"
      :limit.sync="rules.limit"
      :page-sizes="rules.page_size"
      @pagination="getList"
    />
    <div slot="footer" class="dialog-footer">
      <el-button @click="$listeners.close">取 消</el-button>
    </div>
  </div>
</template>
<script>
import { addMusicGroupPaymentCalender, getMusicGroupPaymentCalender, resetMusicGroupPaymentCalender, delMusicGroupPaymentCalender, findMusicGroupSubjectInfo } from "@/api/buildTeam";
import { musicGroupPaymentCalenderDetailDel } from '../api'
import loading from '@/utils/loading'
import pagination from "@/components/Pagination/index";
export default {
  props: ["batchNo", "teamStatus", "teamType", "payUserType", "isNewGropu"],
  components: {
    pagination,
  },
  data() {
    return {
      list: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      try {
        const res = await getMusicGroupPaymentCalender({
          batchNo: this.batchNo,
          page: "1",
          rows: 10,
        });
        this.list = res.data.rows;
      } catch (error) {}
    },
    toDetail(row) {
      if (this.payUserType === 'STUDENT') {
        this.$listeners.close();
      }
      this.$nextTick(() => {
          this.$listeners.lookDetail(row)
      })
    },
  }
};
</script>
<style lang="less" scoped>
.dialog-footer {
  margin-top: 20px;
  display: block;
  text-align: right;
}
</style>