dy-admin-manager/src/views/teamBuild/signupList.vue

<template>
  <div class="sigup-container">
    <div class="topWrap">
      <div>
        <h2>
          <el-page-header @back="onCancel"
                          :content="teamName + '报名详情'">
          </el-page-header>
        </h2>
        <p style="margin-bottom:15px; font-size:18px;
             font-weight:400">报名截止时间:{{ applyExpireDate | formatTimer }} 缴费截止时间:{{ paymentExpireDate | formatTimer }} </p>
        <div class="btnList">
          <!-- <div class='newBand close'
               v-permission="'musicGroup/cancelMusicGroup'"
               @click="onClose">停止乐团</div> -->
          <div class='newBand'
               @click="payStart"
               v-permission="'musicGroup/openPay'"
               v-show="status=='APPLY'">开始缴费</div>
          <!-- v-show="status=='PAY'" -->
          <div class='newBand'
               v-permission="'musicGroup/found'"
               @click="onGoHome">确认开团</div>
          <div class='newBand'
               v-permission="'musicGroup/extensionPayment'"
               @click="extendTime(true)"
               v-show="status=='PAY'">延长缴费</div>
          <div class='newBand'
               v-permission="'musicGroup/extensionApplyExpireDate'"
               @click="extendTime(false)">延长报名</div>
          <div class='newBand'
               @click="onCreateQRCode">报名链接</div>
          <div class='newBand'
               @click="onCreateQRCode2">缴费详情</div>
          <div class='newBand'
               v-show="rightList.length > 0"
               v-permission="'studentRegistration/queryStudentApplyDetailExport'"
               @click='onDownLoadExecl'>报表导出</div>
        </div>
      </div>
      <!--  stepImgs: {
        APPLY: require('@/assets/images/base/clock.png'),
        PAY: require('@/assets/images/base/pay.png')
      }, -->
      <p class='msg'
         :class="status=='PAY'? 'pay' : '' "> <img :src="status=='APPLY'?stepImgs.APPLY:stepImgs.PAY"
             alt="">
        {{ status=='APPLY'?'报名中':'缴费中' }}</p>
    </div>
    <div class="searchList">
      <el-form :inline="true"
               :model="searchFrom">
        <el-form-item label="专业">
          <el-select v-model.trim="searchFrom.subject"
                     filterable
                     clearable>
            <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 label="是否允许调剂">
          <el-select v-model.trim="searchFrom.isAllowAdjust"
                     filterable
                     clearable>
            <el-option label="是"
                       value="1"></el-option>
            <el-option label="否"
                       value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名或手机号">
          <el-input v-model.trim="searchFrom.name"></el-input>
        </el-form-item>
        <!-- 专业actualSubjectId 调剂isAllowAdjust 手机号name -->
        <el-form-item>
          <el-button type='danger'
                     @click='search'>搜索</el-button>
          <el-button type='primary'
                     @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="sigup-core">
      <div class="left">
        <el-table :data='leftList'
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
          <el-table-column label="乐团声部"
                           prop="subjectName"
                           align='center'>
          </el-table-column>
          <el-table-column label="计划招生"
                           prop="expectedStudentNum"
                           align='center'>
            <template slot-scope="scope">
              <div>
                <p v-show="!isEdit">{{ scope.row.expectedStudentNum }}</p>

                <el-input v-show="isEdit"
                          v-model.trim="scope.row.expectedStudentNum"></el-input>

              </div>
            </template>
          </el-table-column>
          <el-table-column label="已报名"
                           prop='applyStudentNum'
                           align='center'>
          </el-table-column>
          <el-table-column label="已缴费"
                           prop='payNum'
                           align='center'>
          </el-table-column>
        </el-table>
        <div class="btnWrap"
             v-permission="'musicGroup/updateExpectedStudentNum'"
             style="margin-right:20px; margin-top:20px;">
          <el-button v-show="!isEdit"
                     @click="isEdit = true">编辑</el-button>
          <el-button v-show="isEdit"
                     @click="saveIsEdit">保存</el-button>
        </div>
      </div>
      <div class="right">
        <el-table :data='rightList'
                  ref="multipleTable"
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection"
                           width="55">
          </el-table-column>
          <el-table-column label="学员姓名"
                           prop="studentName"
                           align='center'>
          </el-table-column>
          <el-table-column label="家长姓名"
                           prop="parentsName"
                           align='center'>
          </el-table-column>
          <el-table-column label="年级班级"
                           align='center'>
            <template slot-scope="scope">
              <div>
                {{scope.row.currentGrade+scope.row.currentClass}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="性别"
                           prop="gender"
                           align='center'>
            <template slot-scope="scope">
              <div>
                {{scope.row.gender  | sex}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="服从调剂"
                           prop="isAllowAdjust"
                           align='center'>
            <template slot-scope="scope">
              <div>
                {{ scope.row.isAllowAdjust | isAllowAdjust}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="报名专业"
                           prop="subjectName"
                           align='center'>
          </el-table-column>
          <el-table-column label="调剂专业"
                           prop="actualSubjectName"
                           align='center'>
          </el-table-column>
          <el-table-column label="联系电话"
                           prop="parentsPhone"
                           align='center'>
          </el-table-column>
          <!-- v-show='status == "PAY"' -->
          <el-table-column label="学员状态"
                           fixed='right'
                           prop="paymentStatus"
                           align='center'>
            <template slot-scope="scope">
              <div>
                {{ scope.row.paymentStatus | paymentStatus }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作"
                           fixed='right'
                           width="240"
                           align='center'>
            <template slot-scope="scope">
              <div>
                <el-button type='text'
                           v-permission="'studentRegistration/batchUpdateSubject'"
                           v-show="scope.row.paymentStatus != 2"
                           @click='resetSubject(scope.row)'>修改专业</el-button>
                <!-- APPLY  status == "APPLY" || s-->
                <el-popover v-show='scope.row.remark'
                            placement="top-start"
                            title="备注"
                            width="200"
                            trigger="hover"
                            :content="scope.row.remark">
                  <el-button type="text"
                             slot="reference">备注</el-button>
                </el-popover>
                <!-- PAY -->
                <!-- &&  status == "PAY"-->
                <el-button type='text'
                           v-permission="'studentRegistration/queryFeeDetail'"
                           v-show='scope.row.paymentStatus==2'
                           @click='lookdetail(scope.row)'>查看</el-button>
                <el-button type='text'
                           v-permission="'musicGroupQuit/directQuitMusicGroup2'"
                           v-show='scope.row.paymentStatus==2'
                           @click='quitTeam(scope.row)'>退团退费</el-button>
                <el-button type="text"
                           v-show="permission('musicGroupQuit/directQuitMusicGroup3')&&scope.row.paymentStatus==2"
                           @click="quieTeams(scope.row)">退团</el-button>
                <el-button type="text"
                           v-show="permission('visit/add')"
                           @click="addVisit(scope.row)">新增回访</el-button>
                <el-button type="text"
                           v-show="scope.row.paymentStatus==2"
                           v-permission="'subjectChange/getStudentOriginal'"
                           @click="openChangeVoice(scope.row)">更改声部</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px; margin-bottom: 10px;"
             v-show="status=='APPLY'">
          <el-button @click="onSelectAll">全选/取消</el-button>
          <el-button style="background-color: #14928a;border: 1px solid #14928a;"
                     @click="onPartPayment"
                     v-permission="'studentRegistration/openPayment'"
                     type="primary">提前缴费</el-button>
          <!-- <div class='newBand' v-show="status=='APPLY'">允许缴费</div> -->
        </div>
        <pagination :total="rules.total"
                    :page.sync="rules.page"
                    :limit.sync="rules.limit"
                    :page-sizes="rules.page_size"
                    @pagination="getList" />
      </div>
    </div>
    <el-dialog title="修改专业"
               :visible.sync="subjectVisible"
               width="400px">
      <el-form :model="maskForm">
        <el-form-item label="选择专业">
          <el-select v-model.trim="maskForm.subject"
                     filterable
                     clearable>
            <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>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="subjectVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="okReset">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="!isPay?'延长报名':'延长缴费'"
               :visible.sync="extendPaymentStatus"
               destroy-on-close
               width="400px">
      <el-form :model="extendForm"
               ref="extendForm"
               :rules="extendRule">
        <el-form-item v-if="isPay"
                      label="延长缴费时间"
                      prop="expireDate">
          <el-date-picker v-model.trim="extendForm.expireDate"
                          value-format="yyyy-MM-dd"
                          type="date"
                          :picker-options="{
                            firstDayOfWeek:1
                          }"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="延长报名时间"
                      v-else
                      prop="expireDate">
          <el-date-picker v-model.trim="extendForm.expireDate"
                          value-format="yyyy-MM-dd"
                          type="date"
                          :picker-options="applyDates"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="extendPaymentStatus = false">取 消</el-button>
        <el-button type="primary"
                   v-if="isPay"
                   @click="onExtendPayment('extendForm',isPay)">确 定</el-button>
        <el-button v-else
                   type="primary"
                   @click="onExtendPayment('extendForm',isPay)">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="订单详情"
               :visible.sync="orderVisible"
               width="600px">
      <el-form :model="orderForm"
               :inline="true">
        <!--     name: '',
        totalAmount: '',
        subject: '',
        subjectFee: '',
        axe: '',
        axePrice: '',
        others: '',
        othersPrice: '' -->
        <el-form-item label="学员姓名">
          <el-input v-model.trim="orderForm.name"
                    disabled=""></el-input>
        </el-form-item>
        <el-form-item label="实缴金额">
          <el-input v-model.trim="orderForm.totalAmount"
                    disabled=""></el-input>
        </el-form-item>
        <el-form-item label="实际专业">
          <el-input v-model.trim="orderForm.subject"
                    disabled=""></el-input>
        </el-form-item>
        <el-form-item label="课程费用">
          <el-input v-model.trim="orderForm.subjectFee"
                    disabled=""></el-input>
        </el-form-item>
        <el-form-item label="选择乐器">
          <el-input v-model.trim="orderForm.axe"
                    disabled=""></el-input>
        </el-form-item>
        <el-form-item label="乐器价格">
          <el-input v-model.trim="orderForm.axePrice"
                    disabled=""></el-input>
        </el-form-item>
        <el-form-item label="教辅组合">
          <el-input v-model.trim="orderForm.others"
                    disabled=""></el-input>
        </el-form-item>
        <el-form-item label="组合价格">
          <el-input v-model.trim="orderForm.othersPrice"
                    disabled=""></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <!-- <el-button>取 消</el-button> -->
        <el-button type="primary"
                   @click="orderVisible = false">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="开始缴费"
               :visible.sync="paymentStatus"
               width="400px"
               destroy-on-close>
      <el-form ref="paymentForm"
               class="paymentForm"
               :model="paymentForm"
               label-position="top"
               :rules="paymentRules">
        <el-form-item label="请设置缴费截止日期"
                      prop="paymentExpireDate">
          <el-date-picker v-model.trim="paymentForm.paymentExpireDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          :picker-options="payDate()"
                          style="width: 100%"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="是否排乐团网管课"
                      :rules="[{ required: true, message: '请选择是否排乐团网管课'}]"
                      prop="feeType">
          <el-select v-model="paymentForm.feeType"
                     style="width: 100%!imoprtant">
            <el-option label="需要排线上课"
                       value="ONLINE"></el-option>
            <el-option label="只排线下课"
                       value="OFFLINE"></el-option>
          </el-select>
        </el-form-item> -->
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="paymentStatus = false">取 消</el-button>
        <el-button type="primary"
                   @click="onStartPayment('paymentForm')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="报名二维码"
               :visible.sync="qrcodeStatus"
               width="300px">
      <div class="left-code">
        <h2>学员报名连接</h2>
        <div id="qrcode"
             class="qrcode code"
             ref="qrCodeUrl"></div>
        <p class="code-url"
           v-show="codeUrl">{{ codeUrl }}</p>
      </div>
    </el-dialog>
    <el-dialog title="缴费详情二维码"
               :visible.sync="qrcodeStatus2"
               width="300px">
      <div class="right-code">
        <h2>报名缴费详情</h2>
        <div id="qrcode2"
             class="qrcode code"
             ref="qrCodeUrl"></div>
        <p class="code-url"
           v-show="codeUrl2">{{ codeUrl2 }}</p>
      </div>
    </el-dialog>

    <!-- 退团弹窗 -->
    <el-dialog title="退团信息确认"
               :destroy-on-close="true"
               width="640px"
               :visible.sync="quitVisible">
      <el-form :model="quitForm"
               ref="quitForm"
               :rules="quitRules">
        <el-form-item label="退还课程费用"
                      prop="isRefundCourseFee">
          <el-radio v-model.trim="quitForm.isRefundCourseFee"
                    :label="true">是</el-radio>
          <el-radio v-model.trim="quitForm.isRefundCourseFee"
                    :label="false">否</el-radio>
        </el-form-item>
        <el-form-item label="退还乐器费用"
                      prop="isRefundInstrumentFee">
          <el-radio v-model.trim="quitForm.isRefundInstrumentFee"
                    :label="true">是</el-radio>
          <el-radio v-model.trim="quitForm.isRefundInstrumentFee"
                    :label="false">否</el-radio>
        </el-form-item>
        <el-form-item label="退还教辅费用"
                      prop="isRefundTeachingAssistantsFee">
          <el-radio v-model.trim="quitForm.isRefundTeachingAssistantsFee"
                    :label="true">是</el-radio>
          <el-radio v-model.trim="quitForm.isRefundTeachingAssistantsFee"
                    :label="false">否</el-radio>
        </el-form-item>
        <el-form-item label="退团原因"
                      prop="reason">
          <el-input type="textarea"
                    v-model.trim="quitForm.reason"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="quitVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="chioseType">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 回访记录 -->
    <el-dialog title="新增回访"
               width="600px"
               destroy-on-close
               :close-on-click-modal='false'
               :visible.sync="visitVisiable">
      <el-form :model="visitForm"
               label-width="120px"
               label-position='right'
               ref='visitForm'
               :rules="visitRules">
        <el-form-item label="学生姓名">
          <p>{{visitForm.studentName}}</p>
        </el-form-item>
        <el-form-item label="回访类型"
                      prop='visitType'>
          <el-cascader expand-trigger="hover"
                       clearable
                       placeholder="请选择回访类型"
                       :options="visitChiose"
                       @change="handleChange"
                       style="width:220px!important;"
                       v-model="visitForm.visitType">
          </el-cascader>
        </el-form-item>
        <el-form-item label="回访日期"
                      prop='visitTime'>
          <el-date-picker v-model.trim="visitForm.visitTime"
                          align="right"
                          style="width:220px!important;"
                          type="date"
                          placeholder="选择日期"
                          :picker-options="pickerOptions"
                          value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="学员情况"
                      prop="overview">
          <el-input type="textarea"
                    v-model="visitForm.overview"
                    style="width:80%!important;"
                    :rows="3"
                    maxlength="50"
                    show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="家长反馈"
                      prop='feedback'>
          <el-input type="textarea"
                    v-model="visitForm.feedback"
                    style="width:80%!important;"
                    :rows="3"
                    maxlength="50"
                    show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="visitVisiable = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitAddVisit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="更改声部"
               :visible.sync="changeVoiceVisible"
               @close="closeChangeVoice"
               :destroy-on-close="true"
               width="600px">
      <changeVoice @close="closeChangeVoice"
                   @submited="getList"
                   :detail.sync="rowDetail"
                   :musicGroupId="id"
                   :voiceList="leftList" />
    </el-dialog>
  </div>
</template>
<script>
import pagination from '@/components/Pagination/index'
import { getintoClass, getStudentList, findSound, musicGroupOpenPay, openPayment, musicGroupFound, extensionPayment, extensionApplyExpire, resetPlanNum, cancelMusicGroup, getTeamBaseInfo, studentApplyDetailExport, StudentQuit } from '@/api/buildTeam'
import { resetStudentSubject, getStudentFeeDetail } from '@/api/studentManager'
import { vaildStudentUrl, vaildTeacherUrl } from '@/utils/validate'
import { addVisit } from "@/views/returnVisitManager/api.js"
import QRCode from 'qrcodejs2'
import { visitChiose } from '@/utils/searchArray'
import axios from 'axios'
import { getToken } from '@/utils/auth'
import load from '@/utils/loading'
import qs from 'qs'
import { permission } from "@/utils/directivePage";
import cleanDeep from 'clean-deep'
import changeVoice from './modals/change-voice'
export default {
  name: 'signupList',
  components: {
    pagination,
    changeVoice,
  },
  data () {
    return {
      multipleSelection: [], //
      isEdit: false,
      rowDetail: null,
      changeVoiceVisible: false,
      subjectVisible: false,
      orderVisible: false,
      quitVisible: false,
      leftList: [],
      rightList: [],
      searchFrom: {
        name: '',
        subject: '', // 专业
        isAllowAdjust: '' // 是否允许调剂
      },
      quitForm: {
        // 退团信息确认
        isRefundCourseFee: null,
        isRefundInstrumentFee: null,
        isRefundTeachingAssistantsFee: null,
        reason: ""
      },
      stepImgs: {
        APPLY: require('@/assets/images/base/clock.png'),
        PAY: require('@/assets/images/base/pay.png')
      },
      status: '',
      id: '',
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 30, 40] // 选择限制显示条数
      },
      teamName: '',
      maskForm: {
        subject: ''
      },
      activeId: '',
      soundList: [],
      orderForm: {
        name: '',
        totalAmount: '',
        subject: '',
        subjectFee: '',
        axe: '',
        axePrice: '',
        others: '',
        othersPrice: ''
      },
      paymentStatus: false,
      paymentForm: {
        paymentExpireDate: null,
        // feeType: null
      },
      paymentRules: {
        paymentExpireDate: [{ required: true, message: '请设置缴费截止日期', trigger: 'blur' }]
      },
      paymentNum: 0, // 缴费了多少人
      qrcodeStatus: false, // 生成二维码
      qrcodes: true,
      qrcode: null,
      codeUrl: null,
      qrcodeStatus2: false, // 生成二维码
      qrcodes2: true,
      qrcode2: null,
      codeUrl2: null,
      extendPaymentStatus: false,
      extendForm: {
        expireDate: null,
      },
      extendRule: {
        expireDate: [{ required: true, message: '请选择延长时间', trigger: 'change' }]
      },
      quitRules: {
        isRefundCourseFee: [
          { required: true, message: "请选择是否退还课程费用" }
        ],
        isRefundInstrumentFee: [
          { required: true, message: "选择是否退还乐器费用" }
        ],
        isRefundTeachingAssistantsFee: [
          { required: true, message: "选择是否退还教辅费用" }
        ],
        reason: [{ required: true, message: "请填写退团退费原因" }]
      },
      applyExpireDate: '',
      paymentExpireDate: '',
      activeRow: null,
      visitVisiable: false,
      visitForm: {
        musicGroupId: '',
        overview: '',
        purpose: '',
        studentId: '',
        type: '',
        visitTime: '',
        visitType: '',
        feedback: '',
        studentName: ''
      },

      visitChiose,
      visitRules: {
        overview: [{ required: true, message: "请输入学生近况" }],
        feedback: [{ required: true, message: "请输入家长反馈" }],
        visitTime: [{ required: true, message: "请输入回访时间" }],
        visitType: [{ required: true, message: "请选择回访类型" }]
      },
      isPay: false,
      applyDates: this.applyDate()
    }
  },
  created () {
    // 通过乐团状态判断显示隐藏的东西
    this.init()
  },
  activated () {

    this.init()

  },
  methods: {
    permission (str) {
      return permission(str);
    },
    init () {
      this.status = this.$route.query.status;
      // 通过乐团id 获取乐团招生状态
      this.id = this.$route.query.id;
      this.teamName = this.$route.query.name
      // 判断是否带缓存参数
      this.pickerOptions = this.beginDate(new Date());
      getTeamBaseInfo({ musicGroupId: this.id }).then(res => {
        if (res.code == 200) {
          this.applyExpireDate = res.data.musicGroup.applyExpireDate;
          this.paymentExpireDate = res.data.musicGroup.paymentExpireDate;
        }
      })

      // 根据乐团id获乐团声部
      findSound({ musicGroupId: this.id }).then(res => {
        if (res.code == 200) {
          this.soundList = res.data;
        }
      })
      // 通过乐团id获取乐团学生列表
      this.getList()
    },
    search () {
      this.rules.page = 1;
      this.getList();
    },
    onReset () {
      this.rules.page = 1
      this.rules.limit = 10
      this.searchFrom = {
        name: null,
        subject: null, // 专业
        isAllowAdjust: null // 是否允许调剂
      }
      this.getList()
    },
    onCancel () {
      this.$router.push({ path: '/business/teamDetail'})
    },
    payStart () {
      this.paymentStatus = true;
      getTeamBaseInfo({ musicGroupId: this.id }).then(res => {
        if (res.code == 200) {
          this.applyExpireDate = res.data.musicGroup.applyExpireDate;
          this.paymentExpireDate = res.data.musicGroup.paymentExpireDate;

        }
      })
    },
    getList () {
      let obj = {
        musicGroupId: this.id,
        actualSubjectId: this.searchFrom.subject || null,
        isAllowAdjust: this.searchFrom.isAllowAdjust || null,
        name: this.searchFrom.name || null,
        page: this.rules.page,
        rows: this.rules.limit
      }
      // 根据乐团id获取学团情况
      getintoClass({ musicGroupId: this.id }).then(res => {
        if (res.code == 200) {
          this.leftList = res.data;
        }
      })

      return getStudentList(obj).then(res => {
        if (res.code == 200) {
          res.data.rows.forEach(item => {
            // '未开启缴费', '开启缴费', '已缴费'
            if (item.paymentStatus == 2) {
              this.paymentNum += 1
            }
          })
          this.rightList = res.data.rows
          this.rules.total = res.data.total
          return res
        }
      })
    },
    onStartPayment (formName) { // 开启缴费
      this.$refs[formName].validate((valid) => {
        if (valid) {
          musicGroupOpenPay({
            musicGroupId: this.id,
            expireDate: this.paymentForm.paymentExpireDate,
            // feeType: this.paymentForm.feeType
          }).then(res => {
            if (res.code == 200) {
              this.$message.success('开启成功')
              this.paymentStatus = false
              this.$router.push({
                path: '/business/signupList',
                query: {
                  status: 'PAY',
                  id: this.$route.query.id,
                  name: this.$route.query.name
                }
              })
              this.status = 'PAY'
              this.paymentExpireDate = this.paymentForm.paymentExpireDate;
              this.getList();
            }
          })
        } else {
          return false;
        }
      })
      // this.id

    },
    onSelectAll () { // 选中全部
      this.$refs.multipleTable.toggleAllSelection()
    },
    onPartPayment () { // 部分缴费
      let selection = this.multipleSelection
      if (selection.length <= 0) {
        this.$message.success('您还没有选择学生')
        return false
      }
      let ids = []
      selection.forEach(item => {
        ids.push(item.id)
      })


      this.$confirm(`是否确认提前缴费?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        openPayment({
          ids: ids.join(',')
        }).then(res => {
          if (res.code == 200) {
            this.$message.success('开启成功')
            this.getList()
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => { })

    },
    onCreateQRCode () { // 生成报名二维码
      this.qrcodeStatus = true
      let id = this.id

      let teamName = this.$route.query.name
      setTimeout(() => {
        document.getElementById('qrcode').innerHTML = '';
        this.qrcode = new QRCode('qrcode', {
          width: 200,
          height: 200,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        })
        this.qrcode.makeCode(vaildStudentUrl() + '/#/login?musicGroupId=' + id)
        this.codeUrl = vaildStudentUrl() + '/#/login?musicGroupId=' + id
      }, 500)
    },
    onCreateQRCode2 () { // 生成报名二维码
      this.qrcodeStatus2 = true
      let id = this.id

      let teamName = this.$route.query.name

      setTimeout(() => {
        document.getElementById('qrcode2').innerHTML = '';
        this.qrcode2 = new QRCode('qrcode2', {
          width: 200,
          height: 200,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        })
        this.qrcode2.makeCode(vaildTeacherUrl() + '/#/order?musicGroupId=' + id + '&musicGroupName=' + teamName)
        this.codeUrl2 = vaildTeacherUrl() + '/#/order?musicGroupId=' + id + '&musicGroupName=' + teamName
      }, 500)

    },
    onDownLoadExecl () { // 报表导出
      let url = '/api-web/studentRegistration/queryStudentApplyDetailExport'
      let data = {
        musicGroupId: this.$route.query.id,
        page: 1,
        rows: 9999
      }
      const options = {
        method: 'POST',
        headers: {
          'Authorization': getToken()
        },
        data: qs.stringify(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.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
            type: 'application/vnd.ms-excel;charset=utf-8'
            //word文档为application/msword,pdf文档为application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;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 nowTime = new Date()
              let ymd = nowTime.getFullYear() + '' + (nowTime.getMonth() + 1) + '' + nowTime.getDate() + '' + nowTime.getHours() + '' + nowTime.getMinutes()
              let fname = this.$route.query.id + '-' + ymd //下载文件的名字
              link.href = objectUrl
              link.setAttribute("download", fname)
              document.body.appendChild(link)
              link.click()
            }
          })
          load.endLoading();
        }).catch(error => {
          this.$message.error('导出数据失败，请联系管理员');
          load.endLoading();
        })
      }).catch(() => { })
    },
    onGoHome () { // 确认开团
      // 判断是否有学生缴费
      if (this.paymentNum <= 0) {
        this.$message.error('当前缴费人数为0，无法开团')
        return
      }
      this.$confirm(`是否确认开团?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        musicGroupFound({
          musicGroupId: this.$route.query.id
        }).then(res => {
          if (res.code == 200) {
            let query = this.$route.query
            this.$message.success('开启成功')
            this.$router.push({
              path: '/business/teamDetail',
              query: {
               ...query
              }
            })
          }
        })
      }).catch(() => {
      })
    },
    onClose () { // 停止乐团
      this.$confirm('您确定停止乐团吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cancelMusicGroup({
          musicGroupId: this.$route.query.id
        }).then(res => {
          if (res.code == 200) {
            this.$message.success('停止成功')
            this.$router.push({
              path: '/business/teamDetail',
            })
          }
        })
      }).catch(() => {
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    // 修改专业
    resetSubject (row) {
      this.activeId = row.studentId
      this.subjectVisible = true;
      //   resetStudentSubject().then(res=>{]})
    },
    // 确认修改
    okReset () {
      if (!this.maskForm.subject) {
        this.$message.error('请选择调剂专业');
        return
      }
      resetStudentSubject({ musicGroupId: this.id, userId: this.activeId, subId: this.maskForm.subject }).then(res => {
        if (res.code == 200) {
          this.$message.success('修改成功');
          this.subjectVisible = false;
          this.maskForm.subject = '';
          getintoClass({ musicGroupId: this.id }).then(res => {
            if (res.code == 200) {
              this.leftList = res.data;
            }
          })
          this.getList();
        }
      })

    },
    onExtendPayment (formName, isPay) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (!isPay) {
            extensionApplyExpire({
              musicGroupId: this.id,
              expireDate: this.extendForm.expireDate
            }).then(res => {
              if (res.code == 200) {
                this.$message.success('延长报名成功')
                this.extendPaymentStatus = false
                getTeamBaseInfo({ musicGroupId: this.id }).then(res => {
                  if (res.code == 200) {
                    this.applyExpireDate = res.data.musicGroup.applyExpireDate;
                  }
                })
              } else {
                this.$message.error(res.msg);
              }
            })
          } else {
            extensionPayment({
              musicGroupId: this.id,
              expireDate: this.extendForm.expireDate
            }).then(res => {
              if (res.code == 200) {
                this.$message.success('延长缴费成功')
                this.extendPaymentStatus = false
                getTeamBaseInfo({ musicGroupId: this.id }).then(res => {
                  if (res.code == 200) {
                    this.paymentExpireDate = res.data.musicGroup.paymentExpireDate;
                  }
                })
              } else {
                this.$message.error(res.msg);
              }
            })
          }

        }
      })
    },
    lookdetail (row) {
      this.orderVisible = true;
      this.activeId = row.studentId;
      this.orderForm.name = row.studentName;
      this.orderForm.subject = row.subjectName;
      getStudentFeeDetail({ musicGroupId: this.id, studentId: row.studentId }).then(res => {
        if (res.code == 200) {
          if (res.data) {
            this.orderForm.totalAmount = res.data.totalAmount;
            // this.orderForm.subjectFee = res.data.courseFee;
            let goodStr = '';
            let goodPrice = 0;
            let otherStr = '';
            let othersPrice = 0;
            for (let i in res.data.goods) {
              if (res.data.goods[i].goodsType == 'INSTRUMENT') {
                goodStr += res.data.goods[i].goodsName + ',';
                goodPrice += parseFloat(res.data.goods[i].musicalFee);
                // this.orderForm.axe = res.data.goods[i].goodsName;
                // this.orderForm.axePrice = res.data.goods[i].musicalFee;
              } else if (res.data.goods[i].goodsType == 'ACCESSORIES') {
                otherStr += res.data.goods[i].goodsName + ',';
                othersPrice += parseFloat(res.data.goods[i].musicalFee);
                // this.orderForm.others = res.data.goods[i].goodsName;
                // this.orderForm.othersPrice = res.data.goods[i].musicalFee;
              } else if (res.data.goods[i].goodsType == 'COURSE') {
                this.orderForm.subjectFee = res.data.goods[i].musicalFee
              }
            }
            this.orderForm.others = otherStr.substring(0, otherStr.length - 1);
            this.orderForm.othersPrice = othersPrice;
            this.orderForm.axe = goodStr.substring(0, goodStr.length - 1);
            this.orderForm.axePrice = goodPrice;
          }

        }
      })

    },
    saveIsEdit () {
      // 提交数据
      this.isEdit = false;
      resetPlanNum(this.leftList).then(res => {

      })

    },
    quitTeam (row) {
      this.activeRow = row;
      this.quitVisible = true;
    },
    quieTeams (row) {
      this.$prompt("请输入退团原因", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /\S/,
        inputErrorMessage: '请输入退团原因',
        type: "warning"
      })
        .then((val) => {
          // 发请求 退团
          StudentQuit({
            musicGroupId: this.id,
            userId: row.studentId,
            reason: val.value,
            isRefundCourseFee: false,
            isRefundInstrumentFee: false,
            isRefundTeachingAssistantsFee: false
          }).then(res => {
            this.quitForm = {
              // 退团信息确认
              isRefundCourseFee: null,
              isRefundInstrumentFee: null,
              isRefundTeachingAssistantsFee: null,
              reason: ""
            };
            if (res.code == 200) {
              this.$message.success("退团成功");
              this.getList();
              this.quitVisible = false;
            }
          });
        })
        .catch(() => { });
    },
    chioseType () {
      this.$refs["quitForm"].validate(res => {
        if (res) {
          this.$confirm("确定退团?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              let row = this.activeRow;
              // 发请求 退团
              StudentQuit({
                musicGroupId: this.id,
                userId: row.studentId,
                reason: this.quitForm.reason,
                isRefundCourseFee: this.quitForm.isRefundCourseFee,
                isRefundInstrumentFee: this.quitForm.isRefundInstrumentFee,
                isRefundTeachingAssistantsFee: this.quitForm
                  .isRefundTeachingAssistantsFee
              }).then(res => {
                this.quitForm = {
                  // 退团信息确认
                  isRefundCourseFee: null,
                  isRefundInstrumentFee: null,
                  isRefundTeachingAssistantsFee: null,
                  reason: ""
                };
                if (res.code == 200) {
                  this.$message.success("退团成功");
                  this.getList();
                  this.quitVisible = false;
                }
              });
            })
            .catch(() => { });
        } else {
        }
      });

      // row.typeVisible = false;
    },
    addVisit (row) {
      this.visitForm.studentName = row.studentName;
      this.visitForm.musicGroupId = this.teamid
      this.visitForm.studentId = row.studentId
      this.visitVisiable = true;
    },
    openChangeVoice (row) {
      this.getList()
        .then(res => {
          for (const item of res.data.rows) {
            if (item.id === row.id) {
              this.rowDetail = { ...item }
              this.changeVoiceVisible = true
            }
          }
        })
    },
    closeChangeVoice () {
      this.changeVoiceVisible = false
      // this.rowDetail = null
    },
    handleChange (val) {
      this.visitForm.type = val[0]
      this.visitForm.purpose = val[1]
    },
    submitAddVisit () {
      this.$refs.visitForm.validate(res => {
        if (res) {
          this.visitForm.visitType = null;
          addVisit(cleanDeep(this.visitForm)).then(res => {
            if (res.code === 200) {
              this.$message.success('新增成功')
              this.visitVisiable = false
            }
          })
        }
      })
    },
    beginDate (date) {
      let self = this;
      return {
        firstDayOfWeek: 1,
        disabledDate (time) {
          return time.getTime() >= date.getTime(); //开始时间不选时，结束时间最大值小于等于当天
        }
      };
    },
    extendTime (isPay) {
      this.isPay = isPay

      if (isPay) {
        // 点击的延长缴费
        this.extendForm.expireDate = this.paymentExpireDate
      } else {
        // 点击的延长报名
        this.extendForm.expireDate = this.applyExpireDate
      }
      this.extendPaymentStatus = true
    },
    applyDate () {
      let self = this
      return {
        firstDayOfWeek: 1,
        disabledDate (time) {
          if (self.paymentExpireDate) {
            return time.getTime() > new Date(self.paymentExpireDate.replace(/-/g, "/")).getTime()
          } else {
            return false
          }

        }
      }
    },
    payDate () {
      let self = this
      return {
        firstDayOfWeek: 1,
        disabledDate (time) {
          if (self.applyExpireDate) {
            return time.getTime() <= new Date(self.applyExpireDate.replace(/-/g, "/")).getTime()
          } else {
            return false
          }

        }
      }
    },
  },
  watch: {
    orderVisible (val) {
      if (!val) {
        this.orderForm = {
          name: '',
          totalAmount: '',
          subject: '',
          subjectFee: '',
          axe: '',
          axePrice: '',
          others: '',
          othersPrice: ''
        }
      }
    },
    qrcodeStatus (val) {
      if (!val) {
        this.qrcode.clear()
      }
    },
    qrcodeStatus2 (val) {
      if (!val) {
        this.qrcode2.clear()
      }
    },
    paymentStatus (val) {
      if (!val) {
        this.paymentForm = {
          paymentExpireDate: null,
          // feeType: null
        }
      }
    },
    quitVisible (val) {
      if (!val) {
        this.quitForm = {
          // 退团信息确认
          isRefundCourseFee: null,
          isRefundInstrumentFee: null,
          isRefundTeachingAssistantsFee: null,
          reason: ""
        };
        this.$refs["quitForm"].resetFields();
      }
    },
    visitVisiable (val) {
      if (!val) {
        this.$refs["visitForm"].resetFields();
      }

    }
  }
}
</script>
<style lang="scss" scoped>
.sigup-container {
  margin-left: 12px;
  .topWrap {
    padding: 18px 58px;
    // height: 136px;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .msg.pay {
      color: #f85043;
    }
    .msg {
      text-align: right;
      color: #f97215;
      font-size: 32px;
      font-weight: bold;
      padding-top: 30px;
      box-sizing: border-box;
      img {
        width: 36px;
        height: 36px;
        position: relative;
        top: 5px;
        margin-right: 8px;
      }
    }
    h2 {
      height: 48px;
      line-height: 48px;
      position: relative;
      // padding-left: 30px;
      font-size: 32px;
      font-weight: 600;
      margin-bottom: 10px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      .term {
        height: 32px;
        line-height: 32px;
        border-radius: 24px;
        width: 100px;
        color: #14928a;
        border: 1px solid rgba(20, 146, 138, 1);
        font-size: 14px;
        text-align: center;
        margin-right: 12px;
        &:nth-child(1) {
          margin-left: 47px;
        }
      }
      .term.active {
        color: #fff;
        background-color: #14928a;
      }
      .squrt {
        position: absolute;
        left: -25px;
        top: 8px;
        height: 34px;
        width: 8px;
        background-color: #14928a;
      }
    }
    .btnList {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      div {
        margin-right: 15px;
      }
    }
    .newBand.close {
      background-color: #777;
      border: 1px solid #777;
    }
  }
  .searchList {
    background-color: #fff;
    padding: 0 58px;
  }
  .sigup-core {
    margin-top: 12px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    .left {
      width: 340px;
      background-color: #fff;
      height: 80vh;
      overflow: auto;
    }
    .right {
      width: calc(100% - 340px);
      margin-left: 12px;
      flex-grow: 1;
    }
  }
}
.el-dialog__body {
  overflow: hidden;
}
.left-code,
.right-code {
  // width: 50%;
  // float: left;
  h2 {
    font-size: 18px;
    text-align: center;
    padding-bottom: 8px;
  }

  .qrcode {
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      width: 200px;
      height: 200px;
      margin: 0 auto;
    }
  }
  .code-url {
    font-size: 18px;
    text-align: center;
    padding: 15px 15px 0 15px;
  }
}
.newBand {
  margin-bottom: 0;
}
/deep/.el-button--danger {
  background: #f85043;
}
.paymentForm {
  /deep/.el-input__inner,
  /deep/.el-input.el-input--suffix {
    width: 360px !important;
  }
}
</style>