|
|
@@ -0,0 +1,320 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="m-container">
|
|
|
+ <el-page-header @back="goBack"
|
|
|
+ content="学员缴费记录">
|
|
|
+ </el-page-header>
|
|
|
+ <div class="infoMsg">
|
|
|
+ <div class="left">
|
|
|
+ <p class="title">状态</p>
|
|
|
+ <p class="status">未开始</p>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="expectBox first">
|
|
|
+ <p class="title">预计缴费日期</p>
|
|
|
+ <p class="status">2020-05-18~2020-05-19</p>
|
|
|
+ </div>
|
|
|
+ <div class='expectBox'>
|
|
|
+ <p class="title">预计缴费人数</p>
|
|
|
+ <p class="status">188</p>
|
|
|
+ </div>
|
|
|
+ <div class='expectBox'>
|
|
|
+ <p class="title">实际缴费人数</p>
|
|
|
+ <p class="status">188</p>
|
|
|
+ </div>
|
|
|
+ <div class='expectBox'>
|
|
|
+ <p class="title">收款金额</p>
|
|
|
+ <p class="status">188</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="m-core">
|
|
|
+
|
|
|
+ <el-form :inline="true"
|
|
|
+ :model="searchForm">
|
|
|
+ <el-form-item>
|
|
|
+ <el-input v-model.trim="searchForm.search"
|
|
|
+ @keyup.enter.native="search"
|
|
|
+ placeholder='学生编号'></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-select v-model.trim="searchForm.sound"
|
|
|
+ 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-select v-model.trim="searchForm.status"
|
|
|
+ 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="resetPay">修改缴费金额</div>
|
|
|
+ <div class="tableWrap">
|
|
|
+ <el-table style="width: 100%"
|
|
|
+ :header-cell-style="{background:'#EDEEF0',color:'#444'}"
|
|
|
+ :data="tableList"
|
|
|
+ @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="studentId"
|
|
|
+ label="学员姓名"></el-table-column>
|
|
|
+ <el-table-column align="center"
|
|
|
+ prop="studentId"
|
|
|
+ label="学员声部"></el-table-column>
|
|
|
+ <el-table-column align="center"
|
|
|
+ prop="studentId"
|
|
|
+ label="预计缴费金额"></el-table-column>
|
|
|
+ <el-table-column align="center"
|
|
|
+ prop="studentId"
|
|
|
+ label="缴费状态"></el-table-column>
|
|
|
+ <el-table-column align="center"
|
|
|
+ prop="studentId"
|
|
|
+ label="支付时间"></el-table-column>
|
|
|
+ <!-- <el-table-column align="center"
|
|
|
+ label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div>
|
|
|
+ <el-button type="text"
|
|
|
+ @click="resetPay(scope.row)">修改金额</el-button>
|
|
|
+ <el-button type="text"
|
|
|
+ @click="startPay(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>
|
|
|
+ </div>
|
|
|
+ <el-dialog :visible.sync="payVisible"
|
|
|
+ width="500px"
|
|
|
+ title="修改缴费时间">
|
|
|
+ <el-form :model="payForm"
|
|
|
+ ref='payForm'>
|
|
|
+ <el-form-item label="缴费开始日期"
|
|
|
+ :rules="[{ required: true, message: '请设置缴费开始日期',trigger: 'blur'}]"
|
|
|
+ prop="startDate">
|
|
|
+ <el-date-picker v-model.trim="payForm.startDate"
|
|
|
+ type="date"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ placeholder="开始日期"></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer"
|
|
|
+ class="dialog-footer">
|
|
|
+ <el-button @click="payVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary"
|
|
|
+ @click="">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <el-dialog :visible.sync="resetPayVisible"
|
|
|
+ width="500px"
|
|
|
+ title="修改缴费金额">
|
|
|
+ <el-form :model="resetPayForm"
|
|
|
+ :inline="true"
|
|
|
+ label-width="120px"
|
|
|
+ label-position="right"
|
|
|
+ ref='resetPayForm'>
|
|
|
+ <!-- <el-form-item label="学生姓名"
|
|
|
+ :rules="[{ required: true, message: '学生姓名',trigger: 'blur'}]"
|
|
|
+ prop="startDate">
|
|
|
+ <el-input disabled
|
|
|
+ value="张三"></el-input>
|
|
|
+ </el-form-item> -->
|
|
|
+ <el-form-item label="预计缴费金额"
|
|
|
+ :rules="[{ required: true, message: '请输入预计缴费金额',trigger: 'blur'},{pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确的金额',trigger: 'blur' }]"
|
|
|
+ prop="momey">
|
|
|
+ <el-input v-model="resetPayForm.momey"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer"
|
|
|
+ class="dialog-footer">
|
|
|
+ <el-button @click="resetPayVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary"
|
|
|
+ @click="">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import axios from "axios";
|
|
|
+import { getToken } from "@/utils/auth";
|
|
|
+import pagination from "@/components/Pagination/index";
|
|
|
+import load from "@/utils/loading";
|
|
|
+import { findSound, } from "@/api/buildTeam";
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: { pagination },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ searchForm: {
|
|
|
+ search: null,
|
|
|
+ sound: null,
|
|
|
+ status: null
|
|
|
+ },
|
|
|
+ teacherList: [],
|
|
|
+ soundList: [],
|
|
|
+ tableList: [{ studentId: 111 }],
|
|
|
+ rules: {
|
|
|
+ // 分页规则
|
|
|
+ limit: 10, // 限制显示条数
|
|
|
+ page: 1, // 当前页
|
|
|
+ total: 0, // 总条数
|
|
|
+ page_size: [10, 20, 40, 50] // 选择限制显示条数
|
|
|
+ },
|
|
|
+ payVisible: false,
|
|
|
+ resetPayVisible: false,
|
|
|
+ pickerOptions: {
|
|
|
+ disabledDate (time) {
|
|
|
+ return time.getTime() + 86400000 <= new Date().getTime();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ payForm: {
|
|
|
+ startDate: null
|
|
|
+ },
|
|
|
+ resetPayForm: {
|
|
|
+ momey: null
|
|
|
+ },
|
|
|
+ activeChiose: [],
|
|
|
+
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created () { },
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted () {
|
|
|
+ // 获取声部
|
|
|
+ this.teamid = this.$route.query.id;
|
|
|
+ findSound({ musicGroupId: this.teamid }).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.soundList = res.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 获取分部
|
|
|
+
|
|
|
+ this.init();
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ activated () {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init () {
|
|
|
+ this.isInit = true;
|
|
|
+ this.isInit = false;
|
|
|
+ },
|
|
|
+ getList () { },
|
|
|
+ search () {
|
|
|
+ this.rules.page = 1;
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ onReSet () { },
|
|
|
+ startPay (row) { },
|
|
|
+ resetPay () {
|
|
|
+ // this.activeRow = row;
|
|
|
+ if (this.activeChiose.length < 1) {
|
|
|
+ this.$message.error('请至少选择一名学生')
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ this.resetPayVisible = true
|
|
|
+ },
|
|
|
+ // resetTime () {
|
|
|
+ // this.payVisible = true;
|
|
|
+ // },
|
|
|
+ goBack () {
|
|
|
+ let query = this.$route.query
|
|
|
+ sessionStorage.setItem('resetCode', 3)
|
|
|
+ this.$router.push({ path: '/business/resetTeaming', query })
|
|
|
+ },
|
|
|
+ handleSelectionChange (val) {
|
|
|
+ this.activeChiose = val;
|
|
|
+ }
|
|
|
+ }, watch: {
|
|
|
+ payVisible (val) {
|
|
|
+ if (!val) {
|
|
|
+ this.payForm = {
|
|
|
+ startDate: null
|
|
|
+ }
|
|
|
+ this.$refs['payForm'].resetFields()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='scss' scoped>
|
|
|
+.infoMsg {
|
|
|
+ margin: 30px 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-start;
|
|
|
+ text-align: center;
|
|
|
+ .title {
|
|
|
+ color: #999;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+ .status {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ .left {
|
|
|
+ width: 200px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ height: 60px;
|
|
|
+ margin-right: 200px;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ text-align: center;
|
|
|
+ height: 60px;
|
|
|
+ line-height: 30px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-start;
|
|
|
+ .expectBox {
|
|
|
+ width: 220px;
|
|
|
+ border-right: 1px solid #ccc;
|
|
|
+ &:nth-last-child(1) {
|
|
|
+ border-right: none !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .expectBox.first {
|
|
|
+ width: 300px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
