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

<!--  -->
<template>
  <div class="m-container">
    <el-page-header @back="goBack"
                    content="学员缴费记录">
    </el-page-header>
    <!--    this.info = {
            paymentStatus: res.data.calender.paymentStatus,
            startPaymentDate: res.data.calender.startPaymentDate,
            deadlinePaymentDate: res.data.calender.deadlinePaymentDate,
            expectNum: res.data.calender.expectNum,
            actualNum: res.data.calender.actualNum,
            sumActualAmount: res.data.sumActualAmount
          } -->
    <div class="infoMsg">
      <div class="left">
        <p class="title">状态</p>
        <p class="status"
           style="color:#ff6a6a"
           v-if="info.paymentStatus == 1">{{'已开启'}}</p>
        <p class="status"
           style="color:#5ccdb8"
           v-if="info.paymentStatus == 2">{{'已完成'}}</p>
      </div>
      <div class="right">
        <div class="expectBox first">
          <p class="title">预计缴费日期</p>
          <p class="status">{{info.startPaymentDate|formatTimer}}~{{info.deadlinePaymentDate|formatTimer}}</p>
        </div>
        <div class='expectBox'>
          <p class="title">预计缴费人数</p>
          <p class="status">{{info.expectNum?info.expectNum:0}}</p>
        </div>
        <div class='expectBox'>
          <p class="title">实际缴费人数</p>
          <p class="status">{{info.actualNum?info.actualNum:0}}</p>
        </div>
        <div class='expectBox'>
          <p class="title">收款金额</p>
          <p class="status">{{info.sumActualAmount?info.sumActualAmount:0}}</p>
        </div>
      </div>
    </div>
    <div class="m-core">

      <el-form :inline="true"
               :model="searchForm">
        <el-form-item>
          <el-input v-model.trim="searchForm.userId"
                    @keyup.enter.native="search"
                    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-select v-model.trim="searchForm.paymentStatus"
                     style="width:180px"
                     clearable
                     filterable
                     placeholder="请选择状态">
            <el-option label="未缴费"
                       value="0"></el-option>
            <el-option label="缴费中"
                       value="1"></el-option>
            <el-option label="已缴费"
                       value="2"></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="wrap">
        <div class="newBand"
             @click="resetPay"
             v-permission="'musicGroupPaymentCalenderDetail/updateExpectAmount'">修改缴费金额</div>
        <div class="newBand"
             @click="startPay"
             v-permission="'musicGroupPaymentCalenderDetail/openPayment'">开启缴费</div>
      </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="userId"
                           label="学员编号"></el-table-column>
          <el-table-column align="center"
                           prop="studentId"
                           label="学员姓名">
            <template slot-scope="scope">
              <div v-if="scope.row.sysUser">
                {{scope.row.sysUser.username}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="学员声部">
            <template slot-scope="scope">
              <div v-if="scope.row.studentRegistration">
                {{scope.row.studentRegistration.subjectName}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="expectAmount"
                           label="预计缴费金额"></el-table-column>
          <el-table-column align="center"
                           label="缴费开始日期">
            <template slot-scope="scope">
              <div>
                {{scope.row.startPaymentDate | formatTimer}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="缴费截止日期">
            <template slot-scope="scope">
              <div>
                {{scope.row.deadlinePaymentDate | formatTimer}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="是否开启缴费">
            <template slot-scope="scope">
              <div>
                {{scope.row.open?'是':'否'}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="缴费状态">
            <template slot-scope="scope">
              <div>
                {{scope.row.paymentStatus | paymentStatusDetall}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="studentId"
                           label="支付时间">
            <template slot-scope="scope">
              <div>
                {{scope.row.payTime | dateForMinFormat}}
              </div>
            </template>
          </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="submitReset">确 定</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, getmusicGroupPaymentCalenderDetail, openMusicGroupPaymentCalenderDetailPayment, resetMusicGroupPaymentCalenderDetail, getMusicGroupPaymentCalenderDetail } from "@/api/buildTeam";

export default {
  components: { pagination },
  data () {
    return {
      searchForm: {
        userId: null,
        subjectId: null,
        paymentStatus: 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: [],
      id: null,
      ids: null,
      info: {
        paymentStatus: null,
        startPaymentDate: null,
        deadlinePaymentDate: null,
        expectNum: null,
        actualNum: null,
        sumActualAmount: null
      }
    };
  },
  //生命周期 - 创建完成（可以访问当前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.id = this.$route.query.paymentId
      // 获取缴费状态
      getMusicGroupPaymentCalenderDetail({ id: this.id }).then(res => {
        if (res.code == 200) {
          this.info = {
            paymentStatus: res.data.calender.paymentStatus,
            startPaymentDate: res.data.calender.startPaymentDate,
            deadlinePaymentDate: res.data.calender.deadlinePaymentDate,
            expectNum: res.data.calender.expectNum,
            actualNum: res.data.calender.actualNum,
            sumActualAmount: res.data.sumActualAmount
          }
          this.getList()
        }
      })

    },
    getList () {
      this.searchForm.id = this.id;
      this.searchForm.page = this.rules.page;
      this.searchForm.rows = this.rules.limit
      getmusicGroupPaymentCalenderDetail(this.searchForm).then(res => {
        if (res.code == 200) {
          this.rules.total = res.data.total;
          this.tableList = res.data.rows;
          if (this.info.paymentStatus == 1) {
            this.tableList = this.tableList.map(item => {
              item.startPaymentDate = this.info.startPaymentDate
              item.deadlinePaymentDate = this.info.deadlinePaymentDate
              item.open = 1;
              return item;
            })
          }
        }
      })
    },
    search () {
      this.rules.page = 1;
      this.getList()
    },
    onReSet () {
      this.searchForm = {
        userId: null,
        subjectId: null,
        paymentStatus: null
      }
      this.search()
    },
    startPay () {
      if (this.activeChiose.length < 1) {
        this.$message.error('请至少选择一名学生')
        return
      }
    },
    resetPay () {
      // this.activeRow = row;
      if (this.activeChiose.length < 1) {
        this.$message.error('请至少选择一名学生')
        return
      }
      let ids = this.activeChiose.map(item => {
        return item.id
      })
      this.ids = ids.join(',')
      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;
    },
    startPay () {
      if (this.activeChiose.length < 1) {
        this.$message.error('请至少选择一名学生')
        return
      }

      // console.log(this.activeChiose)
      let ids = this.activeChiose.map(item => {
        return item.id
      })
      ids = ids.join(',')
      // console.log(ids)
      openMusicGroupPaymentCalenderDetailPayment({ ids }).then(res => {
        if (res.code == 200) {
          this.$message.success('开启成功')
          this.getList();
        }
      })
    },
    submitReset () {
      let obj = {};
      obj.expectAmount = this.resetPayForm.momey;
      obj.ids = this.ids;
      resetMusicGroupPaymentCalenderDetail(obj).then(res => {
        if (res.code == 200) {
          this.$message.success('修改成功')
          this.resetPayVisible = false;
          this.getList();
        }
      })
    }
  }, 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;
    }
  }
}
.wrap {
  display: flex;
  flex-direction: row;
  div {
    margin-right: 20px;
  }
}
</style>