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
          } -->
          <statistic :span="4" :col="5">
            <statistic-item>
              <span>状态</span>
              <span>
                <p class="status"
                  style="color: #ff6a6a"
                  v-if="info.paymentStatus == 'OPEN'">
                  {{ "已开启" }}
                </p>
                <p class="status"
                  style="color: #ff6a6a"
                  v-if="info.paymentStatus == 'NO'">
                  {{ "未开始" }}
                </p>
                <p class="status"
                  style="color: #5ccdb8"
                  v-if="info.paymentStatus == 'OVER'">
                  {{ "已结束" }}
                </p>
              </span>
            </statistic-item>
            <statistic-item>
              <span>预计缴费日期</span>
              <span style="font-size: 16px">{{ info.startPaymentDate | formatTimer }} ~ {{ info.deadlinePaymentDate | formatTimer }}</span>
            </statistic-item>
            <statistic-item>
              <span>预计缴费人数</span>
              <span>{{ info.expectNum ? info.expectNum : 0 }}</span>
            </statistic-item>
            <statistic-item>
              <span>实际缴费人数</span>
              <span>{{ info.actualNum ? info.actualNum : 0 }}</span>
            </statistic-item>
            <statistic-item>
              <span>收款金额</span>
              <span>{{ info.sumActualAmount ? info.sumActualAmount : 0 }}</span>
            </statistic-item>
          </statistic>
    <!-- <div class="infoMsg">
      <div class="left">
        <p class="title">状态</p>

        <p class="status"
           style="color: #ff6a6a"
           v-if="info.paymentStatus == 'OPEN'">
          {{ "已开启" }}
        </p>
        <p class="status"
           style="color: #ff6a6a"
           v-if="info.paymentStatus == 'NO'">
          {{ "未开始" }}
        </p>
        <p class="status"
           style="color: #5ccdb8"
           v-if="info.paymentStatus == 'OVER'">
          {{ "已结束" }}
        </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.search"
                    @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="NON_PAYMENT"></el-option>
            <el-option label="缴费中"
                       value="PROCESSING"></el-option>
            <el-option label="已缴费"
                       value="PAID_COMPLETED"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model.trim="searchForm.musicGroupStatus"
                     style="width: 180px"
                     clearable
                     filterable
                     placeholder="请选择学员状态">
            <el-option label="在读"
                       value="NORMAL"></el-option>
            <el-option label="退团"
                       value="QUIT"></el-option>
            <el-option label="休学"
                       value="QUIT_SCHOOL"></el-option>
            <el-option label="报名"
                       value="APPLY"></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>
      <!--   NO: '未开启缴费',
  OPEN: '开启缴费',
  OVER: '缴费已结束', -->
      <div class="wrap">
        <div class="newBand"
             @click="detailVisible=true">缴费详情</div>
        <div class="newBand"
             @click="resetPay"
             v-permission="'musicGroupPaymentCalenderDetail/updateExpectAmount'">修改缴费金额</div>
        <div class="newBand"
             @click="startPay"
             v-if="info.paymentStatus != 'OPEN'"
             v-permission="'musicGroupPaymentCalenderDetail/openPayment'">开启缴费</div>

        <!-- <div
          class="newBand"
          @click="addStudentBtn"
          v-if="info.paymentStatus != 'OVER'"
          v-permission="'musicGroupPaymentCalenderDetail/add'"
        >
          新增学员
        </div> -->
        <!-- <div
          class="newBand"
          @click="delStudentBtn"
          v-if="info.paymentStatus == 'NO'"
          v-permission="'musicGroupPaymentCalenderDetail/batchDel'"
        >
          删除学员
        </div> -->
        <div class="newBand"
             v-permission="'export/musicGroupPaymentCalenderDetail'"
             @click="onMusicGroupPaymentCalenderDetail">
          缴费记录导出
        </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"
                           :selectable="checkSelect"
                           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"
                           label="学员状态">
            <template slot-scope="scope">
              <div v-if="scope.row.studentRegistration">
                {{
                  scope.row.studentRegistration.musicGroupStatus
                    | studentTeamStatus
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="studentId"
                           label="手机号">
            <template slot-scope="scope">
              <div v-if="scope.row.sysUser">
                {{ scope.row.sysUser.phone }}
              </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.startPaymentDateMgpc | formatTimer }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="缴费截止日期">
            <template slot-scope="scope">
              <div>
                {{ scope.row.deadlinePaymentDateMgpc | 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"
                           width="200px"
                           label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text"
                           :disabled="!checkSelect(scope.row)"
                           @click="resetPay(scope.row)">修改金额</el-button>
                <el-button type="text"
                           :disabled="!checkSelect(scope.row)"
                           @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"  @submit.native.prevent>
        <!-- <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>

    <el-dialog :visible.sync="studentVisible"
               width="600">
      <el-table :data="studentList"
                class="studenTable"
                ref="singleTable"
                highlight-current-row
                @current-change="handleCurrentChange">
        <!-- <el-table-column type="selection"
                         width="55">
        </el-table-column> -->
        <el-table-column property="userId"
                         align="center"
                         label="学员编号"></el-table-column>
        <el-table-column property="name"
                         align="center"
                         label="学员姓名"></el-table-column>
        <el-table-column property="phone"
                         align="center"
                         label="手机号"></el-table-column>
      </el-table>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="cancleAdd">取 消</el-button>
        <el-button type="primary"
                   @click="submitAddStudent">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog width="700px"
               title="查看缴费详情"
               :visible.sync="detailVisible">
      <studentPayDetail :msgList='msgList'
                        :titleForm='titleForm' />
    </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 cleanDeep from "clean-deep";
import qs from "qs";
import { courseType } from '@/utils/searchArray'
import { paymentPatternType } from '@/constant'
import studentPayDetail from '../modals/studentPayDetail'
import {
  findSound,
  getmusicGroupPaymentCalenderDetail,
  openMusicGroupPaymentCalenderDetailPayment,
  resetMusicGroupPaymentCalenderDetail,
  getMusicGroupPaymentCalenderDetail,
  queryCanAddStudent,
  addMusicGroupPaymentCalenderStudent,
  delMusicGroupPaymentCalenderStudent,
} from "@/api/buildTeam";

export default {
  components: { pagination, studentPayDetail },
  data () {
    return {
      searchForm: {
        search: null,
        subjectId: null,
        paymentStatus: null,
        musicGroupStatus: null,
      },
      teacherList: [],
      soundList: [],
      tableList: [{ studentId: 111 }],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      payVisible: false,
      resetPayVisible: false,
      studentVisible: false,
      chioseStudent: null,
      studentList: [],
      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,
      },

      msgList: [],
      detailVisible: false,
      titleForm: {
        paymentType: "",
        musicGroupOrganizationCourseSettingId: "",
        paymentPattern: "",
        paymentValidStartDate: "",
        paymentValidEndDate: "",
        calenderSettingsName: "",
      },
    };
  },
  //生命周期 - 创建完成（可以访问当前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.teamid = this.$route.query.id;
    findSound({ musicGroupId: this.teamid }).then((res) => {
      if (res.code == 200) {
        this.soundList = res.data;
      }
    });
    this.init();
  },
  methods: {
    init () {
      this.getList();
    },
    getList () {
      this.id = this.$route.query.paymentId;
      // 获取缴费状态
      getMusicGroupPaymentCalenderDetail({ id: this.id }).then((res) => {
        if (res.code == 200) {
          this.info = {
            paymentStatus: res.data.calender.status,
            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.titleForm = {
            paymentType: res.data.calender.paymentType,
            musicGroupOrganizationCourseSettingId: res.data.calenderSettingsName,
            paymentPattern: paymentPatternType[res.data.calender.paymentPattern],
            paymentValidStartDate: res.data.calender.paymentValidStartDate,
            paymentValidEndDate: res.data.calender.paymentValidEndDate,
            calenderSettingsName: res.data.calenderSettingsName,
          };
          this.msgList = res.data.musicGroupPaymentCalenderCourseSettings
        }
      });
      this.searchForm.id = this.id;
      this.searchForm.page = this.rules.page;
      this.searchForm.rows = this.rules.limit;
      getmusicGroupPaymentCalenderDetail(this.searchForm).then(
        (payment) => {
          if (payment.code == 200) {
            this.rules.total = payment.data.total;
            this.tableList = payment.data.rows;
          }
        }
      );
    },
    search () {
      this.rules.page = 1;
      this.getList();
    },
    onReSet () {
      this.searchForm = {
        search: null,
        subjectId: null,
        paymentStatus: null,
      };
      this.search();
    },
    checkSelect (val) {
      return val.paymentStatus == "NON_PAYMENT";
    },
    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;
      if (query.type == 'resetTeam') {
        sessionStorage.setItem('resetCode', '3')
      }
      this.$router.go(-1)
    },
    handleSelectionChange (val) {
      this.activeChiose = val;
      console.log(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(res.msg);
          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();
        }
      });
    },
    addStudentBtn () {
      console.log(
        "musicGroupId:",
        this.teamid,
        "musicGroupPaymentCalenderId:",
        this.id
      );
      // 获取无缴费学员
      queryCanAddStudent({
        musicGroupId: this.teamid,
        musicGroupPaymentCalenderId: this.id,
      }).then((res) => {
        if (res.code == 200) {
          this.studentList = res.data;
          this.studentVisible = true;
        }
      });
    },
    delStudentBtn () {
      if (this.activeChiose.length < 1) {
        this.$message.error("请至少选择一名学员");
        return;
      }
      this.$confirm(`是否删除此学员`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let musicGroupPaymentCalenderDetailIds = this.activeChiose
            .map((stu) => {
              return stu.id;
            })
            .join(",");
          delMusicGroupPaymentCalenderStudent({
            musicGroupPaymentCalenderDetailIds,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success(`删除成功`);
              this.getList();
            }
          });
        })
        .catch(() => { });
    },
    handleCurrentChange (val) {
      this.chioseStudent = val;
    },
    submitAddStudent () {
      if (!this.chioseStudent) {
        this.$message.error("请选择学员");
        return;
      }
      addMusicGroupPaymentCalenderStudent({
        musicGroupPaymentCalenderId: this.id,
        userId: this.chioseStudent.userId,
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("添加成功");
          this.studentVisible = false;
          this.getList();
        }
      });
    },
    onMusicGroupPaymentCalenderDetail () {
      let searchForm = this.searchForm;
      // 报表导出
      let url = "/api-web/export/musicGroupPaymentCalenderDetail";
      let data = {
        id: this.$route.query.paymentId,
        musicGroupId: this.$route.query.id,
      };
      const options = {
        method: "POST",
        headers: {
          Authorization: getToken(),
        },
        data: qs.stringify(cleanDeep(data)),
        url,
        responseType: "blob",
      };
      this.$confirm("您确定导出缴费记录", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          load.startLoading();
          axios(options)
            .then((res) => {
              let blob = new Blob([res.data], {
                type: "application/vnd.ms-excel;charset=utf-8",
              });
              let text = new Response(blob).text();
              text.then((res) => {
                // 判断是否报错
                if (res.indexOf("code") != -1) {
                  let json = JSON.parse(res);
                  this.$message.error(json.msg);
                } else {
                  let objectUrl = URL.createObjectURL(blob);
                  let link = document.createElement("a");
                  let fname = "缴费导出" + new Date().getTime(); //下载文件的名字
                  link.href = objectUrl;
                  link.setAttribute("download", fname);
                  document.body.appendChild(link);
                  link.click();
                }
              });

              load.endLoading();
            })
            .catch((error) => {
              this.$message.error("导出数据失败，请联系管理员");
              load.endLoading();
            });
        })
        .catch(() => { });
    },
    cancleAdd (row) {
      this.$refs.singleTable.setCurrentRow(row);
      this.studentVisible = false;
    },
  },
  watch: {
    payVisible (val) {
      if (!val) {
        this.payForm = {
          startDate: null,
        };
        this.$refs["payForm"].resetFields();
      }
    },
    resetPayVisible (val) {
      if (!val) {
        this.resetPayForm = {
          momey: null,
        };
      }
    },
  },

};
</script>
<style lang='scss' scoped>
.studenTable {
  height: 300px;
  overflow: auto;
}
.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;
    min-width: 100px;
  }
  .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;
  justify-content: flex-start;
  div {
    margin-right: 20px;
  }
}
.inputStyle {
  width: 180px;
}
</style>