添加欠费学员列表

src/components/QrCode/index.vue

@@ -4,6 +4,7 @@
         <el-dialog :title="title"
                :visible.sync="status"
                @close="onDialogClose"
+               append-to-body
                width="300px">
             <div class="left-code">
                 <vue-qr :text="codeUrl" style="width: 100%" :margin="0"></vue-qr>

src/views/arrearage-students/index.vue

@@ -35,6 +35,21 @@
         </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.schoolId"
             clearable
             filterable
@@ -134,8 +149,9 @@
           prop="ctrls"
           label="操作"
           fixed="right"
+          v-if="permission('musicGroupPaymentCalenderDetail/queryPage?page=ArrearageStudents')"
         >
-          <el-button type="text" @click="view">查看</el-button>
+          <el-button slot-scope="scope" type="text" @click="view(scope.row)">查看</el-button>
         </el-table-column>
       </el-table>
       <pagination
@@ -147,26 +163,40 @@
         @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 { queryArrearageStudents } from './api'
+import { queryArrearageStudents, getNoPaymentStudentMusicGroups } from './api'
 const initSearch = {
   search: '',
   eduTeacherId: null,
   organId: null,
   branchs: null,
+  musicGroupId: null,
 }
 export default {
   components: {
     pagination,
+    'list-dialog': list
   },
   data() {
     return {
       list: [],
+      visible: false,
+      detail: null,
+      musicList: [],
       searchForm: {
         search: null,
       },
@@ -183,6 +213,7 @@ export default {
     this.$store.dispatch('setBranchs')
     this.$store.dispatch('setSchools')
     this.FetchList()
+    this.FetchMusicList()
   },
   methods: {
     permission,
@@ -196,9 +227,13 @@ export default {
 
         this.rules.total = res.data.total;
         this.list = res.data.rows
-      } catch (error) {
-        console.log(error)
-      }
+      } catch (error) {}
+    },
+    async FetchMusicList() {
+      try {
+        const res = await getNoPaymentStudentMusicGroups()
+        this.musicList = res.data
+      } catch (error) {}
     },
     submit() {
       this.rules.page = 1
@@ -208,7 +243,10 @@ export default {
       this.searchForm = {...initSearch}
       this.submit();
     },
-    view() {},
+    view(row) {
+      this.detail = row
+      this.visible = true
+    },
   }
 }
 </script>

src/views/arrearage-students/modals/list.vue

@@ -0,0 +1,190 @@
+<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.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
+      sync
+      :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.id + '&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>