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

<template>
  <div class="sigup-container">
    <div class="topWrap">
      <div>
        <div style="display: flex; justify-content: space-between">
          <div
            style="display: flex; margin-bottom: 15px; font-size: 18px; font-weight: 400"
          >
            <p v-if="applyExpireDate" style="margin-right: 10px">
              报名截止时间:{{ applyExpireDate | formatTimer }}
            </p>
            <p v-if="paymentExpireDate">
              缴费截止时间:{{ paymentExpireDate | formatTimer }}
            </p>
          </div>
        </div>

        <div class="btnList">
          <!-- <div class='newBand close'
               v-permission="'musicGroup/cancelMusicGroup'"
               @click="onClose">停止乐团</div>   v-show="status == 'APPLY'"-->
          <el-button
            v-if="status == 'APPLY'"
            v-permission="'musicGroup/openPay'"
            type="primary"
            class="newBand"
            @click="payStart"
          >
            开始缴费
          </el-button>
          <!-- v-show="status=='PAY'" -->
          <el-button
            v-if="status == 'APPLY' || status == 'PAY'"
            v-permission="'musicGroup/found'"
            type="primary"
            class="newBand"
            @click="onGoHome"
          >
            确认开团
          </el-button>
          <el-button
            v-show="
              status == 'APPLY' ||
                status == 'PAY' ||
                status == 'PROGRESS' ||
                status == 'PREPARE'
            "
            v-permission="'musicGroup/extensionApplyExpireDate'"
            type="primary"
            class="newBand"
            @click="extendTime(false)"
          >
            延长报名
          </el-button>

          <el-button
            v-show="
              status == 'APPLY' ||
                status == 'PAY' ||
                status == 'PROGRESS' ||
                status == 'PREPARE'
            "
            v-permission="'musicGroup/extensionPayment'"
            type="primary"
            class="newBand"
            @click="extendTime(true)"
          >
            延长缴费
          </el-button>

          <!-- 家长会 -->
          <auth
            v-if="status == 'PAY'"
            :auths="['musicGroup/sendParentMeetingNotice']"
            style="margin-top: 0; margin-right: 0"
          >
            <el-button
              type="primary"
              class="newBand"
              @click="meetingStatus = true"
            >
              家长会通知
            </el-button>
          </auth>
          <el-button
            v-show="
              (status == 'PAY' ||
                status == 'APPLY' ||
                status == 'PROGRESS' ||
                status == 'PREPARE') &&
                ischeckCanReg
            "
            type="danger"
            class="newBand"
            style="background-color: #f97215"
            @click="onCreateQRCode('payment')"
          >
            报名链接
          </el-button>
          <el-button
            v-show="
              (status == 'PAY' ||
                status == 'APPLY' ||
                status == 'PROGRESS' ||
                status == 'PREPARE') &&
                ischeckCanReg
            "
            type="danger"
            class="newBand"
            style="background-color: #f97215"
            @click="onCreateQRCode('rePayment')"
          >
            报名链接（无乐器）
          </el-button>
          <el-button
            type="primary"
            class="newBand"
            @click="onCreateQRCode('detail')"
          >
            缴费详情
          </el-button>
          <auth
            :auths="'studentRegistration/queryPreApplyList/4263'"
            style="margin-top: 0; margin-right: 0"
          >
            <el-button
              type="primary"
              class="newBand"
              @click="forecastVisible = true"
            >
              预报名名单
            </el-button>
          </auth>
          <!--    v-permission="getFullPermission('musicGroup/addMusicGroupRegs')" -->
          <el-button
            v-show="
              (status == 'PAY' ||
                status == 'APPLY' ||
                status == 'PROGRESS' ||
                status == 'PREPARE') &&
                ischeckCanReg
            "
            v-permission="'musicGroup/addMusicGroupRegs'"
            type="primary"
            class="newBand"
            @click="mergeVisible = true"
          >
            合并学员
          </el-button>

          <el-button
            v-permission="'studentRegistration/queryStudentApplyDetailExport'"
            type="primary"
            class="newBand"
            @click="onDownLoadExecl"
          >
            名单导出
          </el-button>
          <auth
            :auths="'studentRegistration/getRegisterOrPreList'"
            style="margin-top: 0; margin-right: 0"
          >
            <el-button
              type="primary"
              class="newBand"
              @click="newForecastVisible = true"
            >
              时间数据统计
            </el-button>
          </auth>
          <auth
            :auths="'subject/findSubApplyDetail'"
            style="margin-top: 0; margin-right: 0"
          >
            <el-popover placement="bottom" width="1000" trigger="click">
              <el-table
                style="width: 100% !important"
                :data="leftList"
                :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
              >
                <el-table-column
                  label="乐团声部"
                  prop="subjectName"
                  align="center"
                />
                <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"
                      />
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="已报名"
                  prop="applyStudentNum"
                  align="center"
                />
                <el-table-column label="已缴费" prop="payNum" align="center">
                  <template slot-scope="scope">
                    <div>
                      <el-button type="text" @click="getpayNum(scope.row)">
                        {{ scope.row.payNum }}
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="缴费中" prop="payingNum" align="center">
                  <template slot="header">
                    <p>
                      缴费中
                      <el-tooltip placement="top" popper-class="mTooltip">
                        <div slot="content">
                          提交订单尚未支付成功学员
                        </div>
                        <i
                          class="el-icon-question"
                          style="font-size: 18px; color: #f56c6c"
                        />
                      </el-tooltip>
                    </p>
                  </template>
                  <template slot-scope="scope">
                    <div>
                      <el-button type="text" @click="getpayingNum(scope.row)">
                        {{ scope.row.payingNum }}
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="审核中" prop="checkNum" align="center">
                  <template slot="header">
                    <p>
                      审核中
                      <el-tooltip placement="top" popper-class="mTooltip">
                        <div slot="content">
                          不购买云教练系统学员数量，不包含已缴费学员
                        </div>
                        <i
                          class="el-icon-question"
                          style="font-size: 18px; color: #f56c6c"
                        />
                      </el-tooltip>
                    </p>
                  </template>
                  <template slot-scope="scope">
                    <div>
                      <el-button type="text" @click="getCheckNum(scope.row)">
                        {{ scope.row.checkNum }}
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="购买云教练人数"
                  prop="buyCloudTeacherNum"
                  align="center"
                >
                  <template slot="header">
                    <p>
                      购买云教练人数
                      <el-tooltip placement="top" popper-class="mTooltip">
                        <div slot="content">
                          已缴费学员中购买了云教练系统的学员总数
                        </div>
                        <i
                          class="el-icon-question"
                          style="font-size: 18px; color: #f56c6c"
                        />
                      </el-tooltip>
                    </p>
                  </template>
                  <template slot-scope="scope">
                    <div>
                      <el-button
                        type="text"
                        @click="getCheckNum(scope.row, 'buyCloud')"
                      >
                        {{ scope.row.buyCloudTeacherNum }}
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="入团未购云教练"
                  prop="noCloudTeacherStudentNumOfNormal"
                  align="center"
                >
                  <template slot="header">
                    <p>
                      入团未购云教练
                      <el-tooltip placement="top" popper-class="mTooltip">
                        <div slot="content">
                          【在读】学员中，未购买【云教练系统】学员数量
                        </div>
                        <i
                          class="el-icon-question"
                          style="font-size: 18px; color: #f56c6c"
                        />
                      </el-tooltip>
                    </p>
                  </template>
                  <template slot-scope="scope">
                    <div>
                      <el-button
                        type="text"
                        @click="getCheckNum(scope.row, 'noCloud')"
                      >
                        {{ scope.row.noCloudTeacherStudentNumOfNormal }}
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="收费金额"
                  prop="totalAmount"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div>{{ scope.row.totalAmount | moneyFormat }}元</div>
                  </template>
                </el-table-column>
                <!-- <el-table-column label="购买乐器未入团人数" prop="cloudTeacherStudentNumOfApply" align="center">
                  <template slot="header">
                    <p>
                      购买乐器未入团人数
                      <el-tooltip placement="top" popper-class="mTooltip">
                        <div slot="content">
                          只购买乐器未解除限制学员数量（不包括退团学员）
                        </div>
                        <i
                          class="el-icon-question"
                          style="font-size: 18px; color: #f56c6c"
                        ></i>
                      </el-tooltip>
                    </p>
                  </template>
                  <template slot-scope="scope">
                    <div>
                      <el-button type="text" @click="getCheckNum(scope.row, 'cloudTeacher')">{{
                        scope.row.cloudTeacherStudentNumOfApply
                      }}</el-button>
                    </div>
                  </template>
                </el-table-column> -->
              </el-table>
              <div
                v-permission="'musicGroup/updateExpectedStudentNum'"
                class="leftbtnWrap"
                style="margin-right: 20px; margin-top: 20px"
              >
                <p style="color: red">
                  收费总额:{{ allSubjectTotal | moneyFormat }}元
                </p>
                <el-button
                  v-show="
                    !isEdit &&
                      (status == 'PAY' ||
                        status == 'APPLY' ||
                        status == 'PROGRESS' ||
                        status == 'PREPARE')
                  "
                  @click="isEdit = true"
                >
                  编辑
                </el-button>
                <el-button v-show="isEdit" @click="saveIsEdit">
                  保存
                </el-button>
              </div>
              <el-button slot="reference" type="primary" class="newBand">
                人数统计
              </el-button>
            </el-popover>
          </auth>

          <el-button
            v-show="
              (status == 'PAY' ||
                status == 'APPLY' ||
                status == 'PROGRESS' ||
                status == 'PREPARE') &&
                ischeckCanReg
            "
            type="primary"
            class="newBand"
            style="margin-top: 0"
            @click="downloadTemplateReportOut"
          >
            下载回访模板
          </el-button>
          <el-upload
            v-if="
              (status == 'PAY' ||
                status == 'APPLY' ||
                status == 'PROGRESS' ||
                status == 'PREPARE') &&
                ischeckCanReg
            "
            v-permission="'import/studentToMusicGroup'"
            style="margin-top: 0; margin-right: 0"
            :action="`/api-web/import/importMusicVisit`"
            :show-file-list="false"
            :before-upload="beforeUpload"
            accept=".xlsx,.xls"
            :headers="headers"
            :on-error="handleError"
            :on-success="handleSuccessReport"
          >
            <el-button type="primary" class="newBand">
              导入回访
            </el-button>
          </el-upload>
        </div>
      </div>
      <el-dialog
        title="选择合并乐团"
        :visible.sync="mergeVisible"
        width="950px"
      >
        <mergeMusic
          v-if="mergeVisible"
          style="padding: 0 20px"
          :organ-id="organId"
          @close="mergeVisible = false"
          @submited="getList"
        />
      </el-dialog>
      <el-dialog
        title="时间数据统计"
        :visible.sync="newForecastVisible"
        width="1100px"
      >
        <newForecastList
          v-if="newForecastVisible"
          @close="newForecastVisible = false"
        />
      </el-dialog>
      <el-dialog
        title="预报名名单"
        :visible.sync="forecastVisible"
        width="1150px"
      >
        <forecastList v-if="forecastVisible" @close="forecastVisible = false" />
      </el-dialog>
      <!--  stepImgs: {
        APPLY: require('@/assets/images/base/clock.png'),
        PAY: require('@/assets/images/base/pay.png')
      }, -->
    </div>
    <div class="searchList">
      <save-form
        :inline="true"
        :model="searchFrom"
        @submit="search"
        @reset="onReset"
      >
        <el-form-item>
          <el-select
            v-model.trim="searchFrom.subject"
            filterable
            clearable
            placeholder="请选择专业"
          >
            <el-option
              v-for="(item, index) in soundList"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchFrom.isAllowAdjust"
            filterable
            placeholder="请选择是否允许调剂"
            clearable
          >
            <el-option label="是" value="1" />
            <el-option label="否" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model.trim="searchFrom.name"
            placeholder="请输入用户名或手机号"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <!-- <el-input v-model.trim="searchFrom.currentGrade" placeholder="请输入年级" clearable></el-input> -->
          <el-select
            v-model.trim="searchFrom.currentGrade"
            filterable
            clearable
            placeholder="请输入年级"
          >
            <el-option
              v-for="(item, index) in gradeList"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchFrom.paymentStatus"
            clearable
            filterable
            placeholder="报名缴费"
          >
            <el-option label="未开启缴费" value="0" />
            <el-option label="开启缴费" value="1" />
            <el-option label="已缴费" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchFrom.visited"
            clearable
            filterable
            placeholder="是否回访"
          >
            <el-option label="否" value="false" />
            <el-option label="是" value="true" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchFrom.hasCloudTeacher"
            clearable
            filterable
            placeholder="是否购买云教练"
          >
            <el-option label="是" :value="1" />
            <el-option label="否" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchFrom.noneNeedCloudTeacher"
            clearable
            filterable
            placeholder="是否解除限制"
          >
            <el-option label="是" :value="1" />
            <el-option label="否" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchFrom.payingStatus"
            clearable
            filterable
            placeholder="订单状态"
          >
            <el-option label="缴费中" :value="1" />
            <el-option label="审核中" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item prop="studentStatus">
          <el-select
            v-model.trim="searchFrom.studentStatus"
            clearable
            filterable
            placeholder="学员状态"
          >
            <el-option label="在读" value="NORMAL" />
            <!-- <el-option label="请假" value="LEAVE"></el-option>
            <el-option label="退团" value="QUIT"></el-option> -->
            <el-option label="报名" value="APPLY" />
          </el-select>
        </el-form-item>
        <!-- 专业actualSubjectId 调剂isAllowAdjust 手机号name -->
        <el-form-item>
          <el-button type="danger" native-type="search">
            搜索
          </el-button>
          <el-button type="primary" native-type="reset">
            重置
          </el-button>
        </el-form-item>
      </save-form>
    </div>
    <div v-if="status == 'PAY'" class="btnList" style="margin-bottom: 20px">
      <el-button
        v-permission="'import/downloadTemplate4907'"
        type="primary"
        @click="onDownload"
      >
        下载学员模板
      </el-button>
      <el-upload
        v-permission="'import/studentToMusicGroup'"
        style="display: inline-block; margin-left: 10px"
        :action="`/api-web/import/studentToMusicGroup?musicGroupId=${id}`"
        :show-file-list="false"
        :before-upload="beforeUpload"
        accept=".xlsx,.xls"
        :headers="headers"
        :on-error="handleError"
        :on-success="handleSuccess"
      >
        <el-button type="primary">
          学员导入
        </el-button>
      </el-upload>
    </div>
    <div>
      <el-table
        ref="multipleTable"
        :data="rightList"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          :selectable="checkboxSelect"
        />
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" class="demo-table-expand">
              <el-row style="margin-left: 64px">
                <el-col :span="4">
                  <el-form-item label="入团年份">
                    <span>
                      {{ props.row.createTime | dayjsFormat("YYYY年") }}</span
                    >
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="报名专业">
                    <span>{{ props.row.subjectName }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="服从调剂:">
                    <span>{{ props.row.isAllowAdjust | isAllowAdjust }}</span>
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="4">
                  <el-form-item label="是否购买云教练:">
                    <span>{{
                      props.row.hasCloudTeacher == 1 ? "是" : "否"
                    }}</span>
                  </el-form-item></el-col
                > -->

                <el-col :span="4">
                  <!-- <el-form-item> -->
                  <!-- <template slot="label"> -->
                  <div class="hiddenwrap">
                    <p
                      style="position: relative; display: flex; align-items: center"
                    >
                      解除限制
                      <el-tooltip placement="top" popper-class="mTooltip">
                        <div slot="content">
                          学员是否受到不购买团练宝的缴费限制
                        </div>
                        <i
                          class="el-icon-question"
                          style="font-size: 18px; color: #f56c6c"
                        />:
                      </el-tooltip>
                    </p>
                    <!-- </template> -->

                    <span>
                      {{ props.row.noneNeedCloudTeacher == 1 ? "是" : "否" }}
                    </span>
                  </div>
                  <!-- </el-form-item>-->
                </el-col>
                <!-- <el-col :span="4">
                  <el-form-item label="备注:">
                    <overflow-text
                      :text="props.row.remark"
                    ></overflow-text> </el-form-item
                ></el-col> -->
              </el-row>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="姓名"
          prop="studentName"
          align="center"
          width="150px"
        >
          <template slot-scope="scope">
            <div>
              <p class="courseYellow left">
                学员: {{ scope.row.studentName }}({{ scope.row.gender | sex }})
              </p>
              <p class="left">家长: {{ scope.row.parentsName }}</p>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="家长姓名" prop="parentsName" align="center">
        </el-table-column> -->

        <!-- <el-table-column align="left" label="入团年份">
          <template slot-scope="scope">
            <div>
              {{ scope.row.createTime | dayjsFormat("YYYY年") }}
            </div>
          </template>
        </el-table-column> -->
        <el-table-column
          label="联系电话"
          prop="parentsPhone"
          align="center"
          width="180px"
        >
          <template slot-scope="scope">
            <div>
              <p class="left">学员编号：{{ scope.row.studentId }}</p>
              <p class="left">联系电话：{{ scope.row.parentsPhone }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="学员状态" prop="studentStatus" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.studentStatus | musicGroupStudentType }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="年级班级" align="center">
          <template slot-scope="scope">
            <div v-if="gradeListObj[scope.row.currentGrade]">
              {{
                gradeListObj[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"
        >
          <template slot-scope="scope">
            <div>
              <p>
                {{ scope.row.actualSubjectName }}
              </p>
              <!-- <p>报名:{{ scope.row.subjectName }}</p> -->
            </div>
          </template>
        </el-table-column>

        <el-table-column label="是否回访" prop="paymentStatus" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.visitNum ? "是" : "否" }}
            </div>
          </template>
        </el-table-column>
        <!-- visited -->
        <!-- v-show='status == "PAY"' -->
        <el-table-column
          label="报名缴费/订单状态"
          prop="paymentStatus"
          align="center"
        >
          <template slot-scope="scope">
            <div>
              <p>{{ scope.row.paymentStatus | paymentStatus }}</p>
              <p>{{ scope.row.payingStatus | filtersPayingStatus }}</p>
            </div>
          </template>
        </el-table-column>

        <!-- <el-table-column label="订单状态" prop="payingStatus" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.payingStatus | filtersPayingStatus }}
            </div>
          </template>
        </el-table-column> -->
        <el-table-column
          label="是否购买会员"
          prop="hasCloudTeacher"
          align="center"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.hasCloudTeacher == 1 ? "是" : "否" }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="解除限制"
          fixed="right"
          prop="noneNeedCloudTeacher"
          align="center"
        >
          <template slot="header">
            <p style="position: relative; display: flex">
              解除限制
              <el-tooltip placement="top" popper-class="mTooltip">
                <div slot="content">学员是否受到不购买云教练的缴费限制</div>
                <i
                  class="el-icon-question"
                  style="font-size: 18px; color: #f56c6c"
                ></i>
              </el-tooltip>
            </p>
          </template>
          <template slot-scope="scope">
            <div>
              {{ scope.row.noneNeedCloudTeacher == 1 ? "是" : "否" }}
            </div>
          </template>
        </el-table-column> -->
        <el-table-column label="备注" prop="remark" align="center">
          <template slot-scope="scope">
            <div>
              <overflow-text :text="scope.row.remark" />
            </div>
          </template>
        </el-table-column>
        <!-- {{ status }} -->
        <el-table-column
          v-if="
            status == 'PAY' ||
              status == 'APPLY' ||
              status == 'PROGRESS' ||
              status == 'PREPARE'
          "
          label="操作"
          width="200px"
          align="center"
        >
          <!--  v-show="
              status == 'PAY' || status == 'PROGRESS' || status == 'PREPARE' || status=='APPLY'
            " -->
          <template slot-scope="scope">
            <div>
              <auth :auths="'studentRegistration/batchUpdateSubject'">
                <el-button
                  v-show="scope.row.paymentStatus != 2"
                  type="text"
                  @click="resetSubject(scope.row)"
                >
                  修改专业
                </el-button>
              </auth>

              <!-- 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"-->
              <auth
                v-show="scope.row.paymentStatus == 2"
                :auths="'studentRegistration/queryFeeDetail'"
              >
                <el-button type="text" @click="lookdetail(scope.row)">
                  查看
                </el-button>
              </auth>
              <auth
                v-show="scope.row.paymentStatus == 2 && isManage"
                :auths="'musicGroupQuit/apply2'"
              >
                <el-button type="text" @click="quitTeam(scope.row)">
                  退团
                </el-button>
              </auth>
              <!-- <auth
                :auths="'musicGroupQuit/directQuitMusicGroup3'"
                v-show="scope.row.paymentStatus == 2"
              >
                <el-button type="text" @click="quieTeams(scope.row)"
                  >退团</el-button
                >
              </auth> -->
              <auth
                v-if="scope.row.visitNum <= 0"
                :auths="'visit/add/teamSignupList'"
              >
                <el-button type="text" @click="addVisit(scope.row)">
                  新增回访
                </el-button>
              </auth>
              <auth
                v-show="scope.row.paymentStatus == 2"
                v-if="status != 'PROGRESS'"
                :auths="'subjectChange/getStudentOriginal'"
              >
                <el-button type="text" @click="openChangeVoice(scope.row)">
                  更改声部
                </el-button>
              </auth>
              <!--  -->
              <auth
                v-show="
                  scope.row.payingStatus == 2 &&
                    scope.row.noneNeedCloudTeacher == 0
                "
                :auths="'studentRegistration/setNoneCloudTeacher'"
              >
                <el-button type="text" @click="relieve(scope.row)">
                  解除预约限制
                </el-button>
              </auth>
              <auth :auths="'studentRegistration/setCloudTeacherToFailed'">
                <el-button
                  v-if="scope.row.payingStatus == 2"
                  type="text"
                  @click="failedRelieve(scope.row)"
                >
                  拒绝审核
                </el-button>
              </auth>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div
        v-show="
          status == 'APPLY' || status == 'PROGRESS' || status == 'PREPARE'
        "
        style="margin-top: 10px; margin-bottom: 10px"
      >
        <el-button @click="onSelectAll">
          全选/取消
        </el-button>
        <auth :auths="'studentRegistration/openPayment'">
          <el-button type="primary" @click="onPartPayment">
            提前缴费
          </el-button>
        </auth>
        <!-- <div class='newBand' v-show="status=='APPLY'">允许缴费</div> -->
      </div>
      <pagination
        sync
        :total.sync="rules.total"
        :page.sync="rules.page"
        :limit.sync="rules.limit"
        :page-sizes="rules.page_size"
        @pagination="getList"
      />
    </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-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
      v-if="extendPaymentStatus"
      :title="!isPay ? '延长报名' : '延长缴费'"
      :visible.sync="extendPaymentStatus"
      width="400px"
    >
      <el-form ref="extendForm" :model="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="payDate()"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item v-else label="延长报名时间" prop="expireDate">
          <el-date-picker
            v-model.trim="extendForm.expireDate"
            value-format="yyyy-MM-dd"
            type="date"
            :picker-options="applyDates"
            placeholder="选择日期"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="extendPaymentStatus = false">
          取 消
        </el-button>
        <el-button
          v-if="isPay"
          type="primary"
          @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="800px">
      <template v-if="orderForm.length > 0">
        <descriptions :column="2">
          <template v-for="(item, index) in orderForm">
            <descriptions-item :key="index" :label="item.name">
              {{ item.price | moneyFormat }}元
            </descriptions-item>
            <descriptions-item :key="index" label="缴费时间">
              {{ item.createTime }}
            </descriptions-item>
          </template>
        </descriptions>
      </template>
      <el-row v-else>
        <el-col :span="24">
          <empty desc="暂无订单详情" />
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="orderVisible = false">
          确 定
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      v-if="paymentStatus"
      title="开始缴费"
      :visible.sync="paymentStatus"
      width="400px"
    >
      <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-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>

    <!-- 预报名链接 -->
    <qr-code v-model="codeStatus" :title="codeTitle" :code-url="qrCodeUrl" />

    <!-- 退团弹窗 -->
    <el-dialog
      v-if="quitVisible"
      title="退团信息确认"
      width="700px"
      :visible.sync="quitVisible"
    >
      <quiteTeam ref="quitForm" :quit-form="quitForm" :active-row="activeRow" />
      <p style="color: red; paddingleft: 150px">
        退费金额暂不进入账户余额
      </p>
      <span slot="footer" class="dialog-footer question">
        <div>
          <el-popover placement="right" width="500" trigger="click">
            <div class="popoverWrap">
              <p>乐团退团退费规则：</p>
              <p>退还云教练费用：报名缴费时缴费的云教练费用</p>
              <p>退还课程费用：缴费总额-已结束课时单价之和</p>
              <p>退还乐器费用：报名缴费时缴纳的乐器费用（团购、租金）</p>
              <p>退还教辅费用：报名缴费时缴费的教辅费用</p>
              <p v-if="$helpers.tenantId == 1">
                退还乐保费用：报名缴费时缴费的乐保费用
              </p>
            </div>
            <el-button
              slot="reference"
              type="text"
              icon="el-icon-question"
              style="color: red"
              >退团退费说明</el-button
            >
          </el-popover>
        </div>
        <div>
          <el-button @click="quitVisible = false">取 消</el-button>
          <el-button type="primary" @click="chioseType">确 定</el-button>
        </div>
      </span>
    </el-dialog>
    <!-- 回访记录 -->
    <el-dialog
      v-if="visitVisiable"
      title="新增回访"
      width="760px"
      :close-on-click-modal="false"
      :visible.sync="visitVisiable"
    >
      <visit
        v-if="visitVisiable && detail"
        :detail="detail"
        @close="visitVisiable = false"
        @submited="getList"
      />
    </el-dialog>
    <el-dialog
      v-if="changeVoiceVisible"
      title="更改声部"
      :visible.sync="changeVoiceVisible"
      width="600px"
    >
      <changeVoice
        :detail.sync="rowDetail"
        :course-view-type="courseViewType"
        :music-group-id="id"
        :voice-list="leftList"
        @close="closeChangeVoice"
        @submited="getList"
      />
    </el-dialog>
    <!-- 家长会通知 -->
    <el-dialog
      title="预报名家长会通知"
      :visible.sync="meetingStatus"
      width="400px"
      @close="onCloseMeet('extendForm')"
    >
      <parentsMeeting
        v-if="meetingStatus"
        ref="meetingForm"
        :extend-form="meetingForm"
        :sys-msg-str="sysMsgStr"
        :msg="'确认后该短信将发送给已缴费的学员'"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="meetingStatus = false">
          取 消
        </el-button>
        <el-button type="primary" @click="onMeetingPayment('extendForm')">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import qrCode from "@/components/QrCode/index";

import {
  getintoClass,
  getStudentList,
  findSound,
  musicGroupOpenPay,
  openPayment,
  musicGroupFound,
  extensionPayment,
  extensionApplyExpire,
  resetPlanNum,
  cancelMusicGroup,
  getTeamBaseInfo,
  studentApplyDetailExport,
  StudentQuit,
  getMusicGroupGradeList,
  checkCanReg,
  getRefundsDetail,
  applyMusicGroupQuit,
  getAgreement
} from "@/api/buildTeam";
import {
  setNoneCloudTeacher,
  setCloudTeacherToFailed,
  sendParentMeetingNotice,
  getSysMessageConfig
} from "./api";
import mergeMusic from "./components/merge-music";
import forecastList from "./components/forecast-list";
import newForecastList from "./components/newForecast-list";
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, getTenantId } 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";
import visit from "@/views/withdrawal-application/modals/visit";
import quiteTeam from "@/views/teamDetail/components/modals/quite-team";
import { courseType } from "@/constant/index";
import parentsMeeting from "./modals/parentsMeeting";
import { Export } from "@/utils/downLoadFile";
export default {
  name: "SignupList",
  components: {
    pagination,
    qrCode,
    changeVoice,
    mergeMusic,
    forecastList,
    visit,
    newForecastList,
    quiteTeam,
    parentsMeeting
  },
  filters: {
    filtersPayingStatus(val) {
      let obj = {
        0: "--",
        1: "缴费中",
        2: "审核中"
      };
      return obj[val];
    }
  },
  data() {
    return {
      headers: {
        Authorization: getToken(),
        tenantId: getTenantId()
      },
      multipleSelection: [], //
      forecastVisible: false, // 预报名状态
      newForecastVisible: false,
      isEdit: false,
      rowDetail: null,
      mergeVisible: false,
      changeVoiceVisible: false,
      subjectVisible: false,
      orderVisible: false,
      quitVisible: false,
      leftList: [],
      rightList: [],
      searchFrom: {
        name: "",
        subject: "", // 专业
        isAllowAdjust: "", // 是否允许调剂
        currentGrade: null, // 入学年级
        paymentStatus: "",
        visited: "",
        hasCloudTeacher: null, // 是否购买云教练
        payingStatus: null,
        noneNeedCloudTeacher: null,
        studentStatus: null
      },
      quitForm: {
        // 退团信息确认
        isRefundCourseFee: null,
        isRefundInstrumentFee: null,
        isRefundTeachingAssistantsFee: null,
        courseViewType: null,
        hasMaintenance: null,
        studentName: null,
        musicGroupName: null,
        isVisit: false,
        reason: "",
        userComment: null
      },
      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: [],
      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,
      codeStatus: false,
      codeTitle: null,
      qrCodeUrl: null,
      organId: "",
      extendPaymentStatus: false,
      extendForm: {
        expireDate: null
      },
      extendRule: {
        expireDate: [
          { required: true, message: "请选择延长时间", trigger: "change" }
        ]
      },
      quitRules: {
        isCloudTeacherAmount: [{ required: true, message: "请输入云教练费用" }],
        cloudTeacherAmount: [
          { required: true, message: "请输入云教练金额", trigger: "blur" }
        ],
        isRefundCourseFee: [
          { required: true, message: "请选择是否退还课程费用" }
        ],
        isRefundInstrumentFee: [
          { required: true, message: "选择是否退还乐器费用" }
        ],
        isRefundTeachingAssistantsFee: [
          { required: true, message: "选择是否退还教辅费用" }
        ],
        isMaintenanceFee: [{ required: true, message: "选择是否退还乐保费用" }],
        maintenanceFee: [{ required: true, message: "请输入退还乐保金额" }],
        reason: [{ required: true, message: "请填写退团退费原因" }]
      },
      applyExpireDate: "",
      paymentExpireDate: "",
      activeRow: { hasMaintenance: false },
      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(),
      detail: null,
      gradeList: [],
      ischeckCanReg: false,
      courseViewType: null, // 乐团模式
      isManage: false,
      gradeListObj: {},
      meetingStatus: false,
      meetingForm: {
        meetingDate: null,
        address: null
      },
      sysMsg: "",
      submitList: []
    };
  },
  computed: {
    sysMsgStr() {
      let strArr = this.sysMsg.split("{}");
      if (strArr.length == 3) {
        return `${strArr[0]}<span style="color:red">"${
          this.meetingForm.meetingDate ? this.meetingForm.meetingDate : "--"
        }"</span>${strArr[1]}<span style="color:red">"${
          this.meetingForm.address ? this.meetingForm.address : "--"
        }"</span>
        ${strArr[2]}`;
      } else {
        return ``;
      }
    },
    allSubjectTotal() {
      let allConut = 0;
      this.leftList.forEach(item => {
        allConut += Number(item.totalAmount);
      });
      return allConut;
    }
  },
  watch: {
    "quitForm.isMaintenanceFee"(val) {
      if (val) {
        this.quitForm.maintenanceFee = 300;
      } else {
        this.quitForm.maintenanceFee = 0;
      }
    },
    orderVisible(val) {
      if (!val) {
        this.orderForm = [];
      }
    },
    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,
          courseViewType: null,
          hasMaintenance: null,
          studentName: null,
          musicGroupName: null,
          isVisit: false,
          reason: "",
          userComment: null
        };
        this.$refs["quitForm"].$refs["quitForm"].resetFields();
      }
    }

    // visitVisiable(val) {
    //   if (!val) {
    //     this.$refs["visitForm"].resetFields();
    //   }
    // },
  },
  created() {},
  async mounted() {
    // 通过乐团状态判断显示隐藏的东西
    let isSuperAdmin = this.$store.getters.isSuperAdmin;
    let roles = this.$store.getters.roles;
    if (isSuperAdmin) {
      this.isManage = "super";
    } else {
      if (roles.indexOf("1") != -1) {
        this.isManage = "manage";
      }
      if (roles.indexOf("2") != -1) {
        this.isManage = "staff";
      }
    }
    if (roles.indexOf("1") != -1 && roles.indexOf("2") != -1) {
      this.isManage = "super";
    }

    // 获取短信模板
    const rus = await getSysMessageConfig({
      type: "STUDENT_SMS_IM_MUSIC_GROUP_PARENT_MEETING_NOTICE"
    });
    this.sysMsg = rus.data?.content || "";

    this.init();
  },
  activated() {
    this.init();
  },
  methods: {
    permission(str) {
      return permission(str);
    },
    async init() {
      this.status = this.$route.query.team_status;
      // 通过乐团id 获取乐团招生状态
      this.id = this.$route.query.id;
      this.teamName = this.$route.query.name;
      // 判断是否带缓存参数
      this.pickerOptions = this.beginDate(new Date());
      // checkCanReg
      try {
        this.ischeckCanReg = await (await checkCanReg({
          musicGroupId: this.id
        })).data;
      } catch (e) {
        console.log(e);
      }
      await this.getAgreement();
      getMusicGroupGradeList({ musicGroupId: this.id }).then(res => {
        let result = res.data;
        this.gradeListObj = res.data;
        if (res.code == 200 && result) {
          for (let i in result) {
            this.gradeList.push({
              value: i,
              label: result[i]
            });
          }
        }
      });

      getTeamBaseInfo({ musicGroupId: this.id }).then(res => {
        if (res.code == 200) {
          this.organId = res.data.musicGroup.organId;
          this.courseViewType = res.data.musicGroup.courseViewType;
          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();
    },
    downloadTemplateReportOut() {
      window.location.href =
        "https://oss.dayaedu.com/%E4%B9%90%E5%9B%A2%E5%AD%A6%E5%91%98%E5%9B%9E%E8%AE%BF%E6%A8%A1%E6%9D%BF.xlsx";
    },
    onDownload() {
      // 下载模板
      // // 报表导出
      Export(this, {
        url: "/api-web/import/downloadTemplate",
        params: {
          templateType: "EXTERNAL_STUDENT_IMPORT_MUSIC_GROUP"
        },
        fileName: "学员导入模板.xls"
      });
    },
    beforeUpload(file) {
      load.startLoading();
    },
    handleError(err, file, fileList) {
      load.endLoading();
    },
    handleSuccess(response, file, fileList) {
      // 导入商品
      // 报表导出
      load.endLoading();
      if (response.code == 200) {
        this.$message.success("导入成功");
        this.getList();
      } else if (response.code == 0) {
        let str = this.fomatStr(response.msg);
        this.$alert(str, "导入结果", {
          confirmButtonText: "确定",
          dangerouslyUseHTMLString: true,
          callback: action => {
            this.getList();
          }
        });
      } else {
        console.log("response", response);
        this.$message.error(response.msg);
      }
    },
    handleSuccessReport(response, file, fileList) {
      // 导入商品
      // 报表导出
      load.endLoading();
      if (response.code == 200) {
        this.$message.success("导入成功");
      } else if (response.code == 0) {
        let str = this.fomatStr(response.msg);
        this.$alert(str, "导入结果", {
          confirmButtonText: "确定",
          dangerouslyUseHTMLString: true,
          callback: action => {}
        });
      } else {
        this.$message.error(response.msg);
      }
    },
    async getAgreement() {
      try {
        const res = await getAgreement();
        if (!res.data) {
          this.submitList.push("agreement");
        }
      } catch (e) {}
      if (this.submitList.length > 0) {
        this.$bus.$emit("showguide", this.submitList);
      }
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    onReset() {
      this.rules.page = 1;
      this.rules.limit = 10;
      this.searchFrom = {
        name: null,
        subject: null, // 专业
        isAllowAdjust: null, // 是否允许调剂
        currentGrade: null,
        paymentStatus: null,
        visited: null,
        hasCloudTeacher: null,
        payingStatus: null,
        studentStatus: null,
        noneNeedCloudTeacher: null
      };
      this.getList();
    },
    onCancel() {
      this.$store.dispatch("delVisitedViews", this.$route);
      this.$router.push({ path: "/teamList" });
    },
    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,
        currentGrade: this.searchFrom.currentGrade || null,
        paymentStatus: this.searchFrom.paymentStatus || null,
        visited: this.searchFrom.visited || null,
        hasCloudTeacher: this.searchFrom.hasCloudTeacher,
        payingStatus: this.searchFrom.payingStatus,
        studentStatus: this.searchFrom.studentStatus,
        noneNeedCloudTeacher: this.searchFrom.noneNeedCloudTeacher,
        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.$store.dispatch("delVisitedViews", this.$route);
              this.$router.push({
                path: "/teamList"
              });
              this.status = "PAY";
              this.paymentExpireDate = this.paymentForm.paymentExpireDate;
              this.getList();
            }
          });
        } else {
          return false;
        }
      });
    },
    onSelectAll() {
      // 选中全部
      this.$refs.multipleTable.toggleAllSelection();
    },
    onPartPayment() {
      // 部分缴费
      let selection = this.multipleSelection;
      if (selection.length <= 0) {
        this.$message.error("您还没有选择学生");
        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(type) {
      // 生成报名二维码
      let id = this.id;
      this.codeStatus = true;
      let tenantConfig = sessionStorage.getItem("tenantConfig");
      tenantConfig = tenantConfig ? JSON.parse(tenantConfig) : {};
      const tenantId = tenantConfig.tenantId || 0;
      if (type == "payment") {
        this.codeTitle = "学员报名链接";
        this.qrCodeUrl =
          vaildStudentUrl() +
          "/#/login?musicGroupId=" +
          id +
          "&organId=" +
          this.organId +
          "&tenantId=" +
          tenantId;
      } else if (type == "detail") {
        let teamName = this.$route.query.name;
        this.codeTitle = "报名缴费详情";
        this.qrCodeUrl =
          vaildTeacherUrl() +
          "/#/order?musicGroupId=" +
          id +
          "&musicGroupName=" +
          teamName;
      } else if (type == "rePayment") {
        this.codeTitle = "学生报名链接（无乐器）";
        this.qrCodeUrl =
          vaildStudentUrl() +
          "/#/login?musicGroupId=" +
          id +
          "&organId=" +
          this.organId +
          "&tenantId=" +
          tenantId +
          "&instrument=1";
      }
    },
    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(),
          tenantId: getTenantId()
        },
        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);
                  if (json.code == 403) {
                    this.$message.error(`登录过期，请重新登录！`);
                    setTimeout(() => {
                      this.$store.dispatch("user/resetToken").then(() => {
                        location.reload();
                      });
                    }, 1000);
                    return;
                  }
                  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 + ".xls"; //下载文件的名字
                  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: "/teamList",
              //   query: {
              //     ...query,
              //   },
              // });
              this.onCancel();
            }
          });
        })
        .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.$store.dispatch("delVisitedViews", this.$route);
              this.$router.push({
                path: "/teamList"
              });
            }
          });
        })
        .catch(() => {});
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 修改专业
    resetSubject(row) {
      this.activeId = row.studentId;
      this.maskForm.subject = row.actualSubjectId;
      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);
              }
            });
          }
        }
      });
    },
    async lookdetail(row) {
      await getStudentFeeDetail({
        musicGroupId: this.id,
        studentId: row.studentId
      }).then(res => {
        if (res.code == 200) {
          const paymentList = res.data || [];
          paymentList.forEach(item => {
            if (item.type == "MAINTENANCE") {
              item.name = "乐器保养";
            } else if (
              item.type == "CLOUD_TEACHER" ||
              item.type == "CLOUD_TEACHER_PLUS"
            ) {
              item.name = "云教练";
            } else if (item.type == "COURSE") {
              item.name = "课程";
            } else if (item.type == "ORGAN_SHARE_PROFIT") {
              item.name = "乐器分润";
            }
            if (courseType[item.type]) {
              item.name = courseType[item.type];
            }
          });
          this.orderForm = paymentList;
        }
      });

      this.activeId = row.studentId;
      this.orderVisible = true;
    },
    saveIsEdit() {
      // 提交数据
      this.isEdit = false;
      resetPlanNum(this.leftList).then(res => {});
    },
    async quitTeam(row) {
      try {
        const res = await getRefundsDetail({
          musicGroupId: this.$route.query.id,
          userId: row.studentId
        });
        this.quitForm = {
          ...this.quitForm,
          ...res.data,
          courseViewType: this.courseViewType,
          studentName: row.studentName,
          musicGroupName: this.teamName,
          hasMaintenance: row.hasMaintenance
        };

        this.activeRow = { ...row, ...res.data };

        this.activeRow.courseViewType = this.courseViewType;
        this.quitVisible = true;
        // this.quitForm.cloudTeacherAmount = row.cloudTeacherAmount;
      } catch (e) {
        console.log(e);
      }
      //  查询退团费用
    },
    // 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,
    //         isRefundMemberFee: false,
    //       }).then((res) => {
    //         this.quitForm = {
    //           // 退团信息确认
    //           isRefundCourseFee: null,
    //           isRefundInstrumentFee: null,
    //           isRefundTeachingAssistantsFee: null,
    //           isMaintenanceFee: null,
    //           cloudTeacherAmount: null,
    //           isCloudTeacherAmount: null,
    //           maintenanceFee: 0,
    //           reason: "",
    //         };
    //         if (res.code == 200) {
    //           this.$message.success("退团成功");
    //           this.getList();
    //           this.quitVisible = false;
    //         }
    //       });
    //     })
    //     .catch(() => {});
    // },
    chioseType() {
      this.$refs["quitForm"].$refs["quitForm"].validate(res => {
        if (res) {
          this.$confirm("确定退团?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              let row = this.activeRow;

              let params = {
                ...this.quitForm,
                musicGroupId: this.id,
                userId: row.studentId,
                reason: this.quitForm.reason,
                isRefundCourseFee: this.quitForm.isRefundCourseFee,
                isRefundInstrumentFee: this.quitForm.isRefundInstrumentFee,
                isRefundTeachingAssistantsFee: this.quitForm
                  .isRefundTeachingAssistantsFee,
                maintenanceFee: this.quitForm.maintenanceFee,
                isRefundMemberFee: this.quitForm.isRefundMemberFee
              };
              params.returnFeeDto = {
                accessoriesFee: params.accessoriesFee,
                courseFee: params.courseFee,
                isReturnAccessoriesFee: params.isReturnAccessoriesFee,
                isReturnCourseFee: params.isReturnCourseFee,
                isReturnMaintenanceFee: params.isReturnMaintenanceFee,
                isReturnMemberFee: params.isReturnMemberFee,
                isReturnMusicalFee: params.isReturnMusicalFee,
                maintenanceFee: params.maintenanceFee,
                memberFee: params.memberFee,
                musicalFee: params.musicalFee
              };
              if (this.isManage != "staff") {
                params.status = "APPROVED";
              } else {
                params.status = "PROCESSING";
              }
              // 发请求 退团
              applyMusicGroupQuit(params).then(res => {
                if (res.code == 200) {
                  this.quitForm = {
                    // 退团信息确认
                    isRefundCourseFee: null,
                    isRefundInstrumentFee: null,
                    isRefundTeachingAssistantsFee: null,
                    reason: "",
                    courseViewType: null,
                    hasMaintenance: null,
                    studentName: null,
                    musicGroupName: null,
                    isVisit: false,
                    reason: "",
                    userComment: null
                  };
                  if (this.isManage == "super") {
                    this.$message.success("退团成功");
                  } else {
                    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;
      row.userId = row.studentId;
      this.detail = row;
      this.detail.musicGroupId = this.$route.query.id;
      this.visitVisiable = true;
    },
    openChangeVoice(row) {
      this.getList().then(res => {
        for (const item of res.data.rows) {
          if (item.id === row.id) {
            this.rowDetail = { ...item, userId: item.studentId };
            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;
          this.visitForm.musicGroupId = this.id;
          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;
    },
    payDate() {
      let self = this;
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() + 86400000 < new Date().getTime();
        }
      };
    },
    applyDate() {
      let self = this;
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() + 86400000 < new Date().getTime();
        }
      };
    },
    checkboxSelect(row) {
      return row.paymentStatus == 0;
    },
    relieve(row) {
      this.$confirm("操作后该学员即可不购买云教练缴费入团", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        try {
          const res = await setNoneCloudTeacher({ id: row.id });
          console.log("code", res.code);
          if (res.code == 200) {
            this.$message.success("解除预约成功");
            this.getList();
          } else if (res.code == 100) {
            this.$confirm(res.msg, "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(async some => {
              const res = await setNoneCloudTeacher({
                id: row.id,
                isContinue: true
              });
              if (res.code == 200) {
                this.$message.success("解除预约成功");
                this.getList();
              }
            });
          }
        } catch (e) {
          console.log("错误", e);
        }
      });
    },
    failedRelieve(row) {
      this.$confirm("拒绝后学员需购买会员方可入团", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        try {
          const res = await setCloudTeacherToFailed({ id: row.id });
          this.$message.success("操作成功");
          this.getList();
        } catch (e) {
          console.log(e);
        }
      });
    },
    getCheckNum(row, type) {
      this.rules.page = 1;
      this.rules.limit = 10;
      this.searchFrom = {
        name: null,
        subject: null, // 专业
        isAllowAdjust: null, // 是否允许调剂
        currentGrade: null,
        paymentStatus: null,
        visited: null,
        hasCloudTeacher: null,
        payingStatus: null,
        studentStatus: null,
        noneNeedCloudTeacher: null
      };
      this.searchFrom.subject = row.subjectId;
      if (type == "buyCloud") {
        this.searchFrom.hasCloudTeacher = 1;
      } else if (type == "noCloud") {
        this.searchFrom.hasCloudTeacher = 0;
        this.searchFrom.studentStatus = "NORMAL";
      } else {
        this.searchFrom.payingStatus = 2;
        this.searchFrom.hasCloudTeacher = 0;
      }
      this.search();
    },
    getpayingNum(row) {
      this.rules.page = 1;
      this.rules.limit = 10;
      this.searchFrom = {
        name: null,
        subject: null, // 专业
        isAllowAdjust: null, // 是否允许调剂
        currentGrade: null,
        paymentStatus: null,
        visited: null,
        hasCloudTeacher: null,
        payingStatus: null,
        studentStatus: null,
        noneNeedCloudTeacher: null
      };
      this.searchFrom.subject = row.subjectId;
      this.searchFrom.payingStatus = 1;
      this.search();
    },
    getpayNum(row) {
      this.rules.page = 1;
      this.rules.limit = 10;
      this.searchFrom = {
        name: null,
        subject: null, // 专业
        isAllowAdjust: null, // 是否允许调剂
        currentGrade: null,
        paymentStatus: null,
        visited: null,
        hasCloudTeacher: null,
        payingStatus: null,
        studentStatus: null,
        noneNeedCloudTeacher: null
      };
      this.searchFrom.subject = row.subjectId;
      this.searchFrom.paymentStatus = 2 + "";
      this.search();
    },
    onCloseMeet() {
      this.meetingForm = {
        meetingDate: null,
        address: null
      };
    },
    onMeetingPayment(formName) {
      console.log(this.$refs.meetingForm.$refs[formName]);
      this.$refs.meetingForm.$refs[formName].validate(async valid => {
        if (valid) {
          try {
            await this.$confirm("您是否确定发送家长会通知?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            });
            await sendParentMeetingNotice({
              ...this.meetingForm,
              musicGroupId: this.id
            });
            this.$message.success("家长会通知已发送");
            this.meetingStatus = false;
          } catch (error) {}
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.courseYellow {
  color: #ff802c;
}

.hiddenwrap {
  display: flex;
  flex-direction: row;
  align-items: center;

  p {
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    box-sizing: border-box;
    font-weight: 700;
  }
}

.auth {
  display: inline-block;

  & + .auth {
    margin-left: 0px;
  }
}

.dialog-footer.question {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.sigup-container {
  margin-left: 12px;

  .topWrap {
    padding: 18px 58px 18px 0;
    // 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: var(--color-primary);
        border: 1px solid var(--color-primary);
        font-size: 14px;
        text-align: center;
        margin-right: 12px;

        &:nth-child(1) {
          margin-left: 47px;
        }
      }

      .term.active {
        color: #fff;
        background-color: var(--color-primary);
      }

      .squrt {
        position: absolute;
        left: -25px;
        top: 8px;
        height: 34px;
        width: 8px;
        background-color: var(--color-primary);
      }
    }

    .btnList {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;

      & > div {
        margin-right: 15px;
        margin-top: 10px;
      }
    }

    .newBand.close {
      background-color: #777;
      border: 1px solid #777;
    }
  }

  .searchList {
    background-color: #fff;
    padding: 0 58p 0 0px;
  }

  .sigup-core {
    margin-top: 12px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;

    .left {
      width: 400px;
      background-color: #fff;
      height: 80vh;
      overflow: auto;
    }

    .right {
      width: calc(100% - 400px);
      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: 10px;
  max-width: inherit;
  margin-left: 0;
  margin-right: 10px;
}

.paymentForm {
  ::v-deep .el-input__inner,
  ::v-deep .el-input.el-input--suffix {
    width: 360px !important;
  }
}

.popoverWrap {
  p {
    line-height: 25px;
  }
}

::v-deep .description-title {
  margin-bottom: 0;
}

::v-deep .description-label {
  white-space: normal !important;
}

.left {
  text-align: left;
}

.leftbtnWrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
</style>