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

<!--  -->
<template>
  <div class="m-core">
    <save-form
      :inline="true"
      save-key="resetPayList"
      @submit="getList"
      :model="searchForm"
    >
      <el-form-item>
        <el-select
          placeholder="缴费种类"
          v-model="searchForm.payUserType"
          clearable
          filterable
        >
          <el-option
            v-for="(item, index) in payUserTypeList"
            :label="item.label"
            :value="item.value"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          placeholder="缴费类型"
          v-model="searchForm.paymentType"
          clearable
          filterable
        >
          <el-option
            v-for="(item, index) in payOrderTypeList"
            :label="item.label"
            :value="item.value"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="danger" native-type="submit">搜索</el-button>
        <!-- <el-button @click="onReSet" type="primary">重置</el-button> -->
      </el-form-item>
    </save-form>
    <div class="topWrap">
      <div
        class="newBand"
        @click="newUserPay"
        v-if="teamStatus"
        v-permission="'musicGroupPaymentCalender/createCalender/3895'"
      >
        新建学员缴费
      </div>
      <div
        class="newBand"
        @click="newSchoolPay"
        v-if="teamStatus"
        v-permission="'musicGroupPaymentCalender/createCalender/4359'"
      >
        新建学校缴费
      </div>
      <div
        class="newBand"
        @click="newGoodsPay"
        v-if="teamStatus"
        v-permission="'musicGroupPaymentCalender/createCalender/4459'"
      >
        新建商品采购
      </div>
      <div
        class="newBand"
        v-permission="'musicGroup/extensionPayment'"
        @click="extendTime"
      >
        延长缴费
      </div>
      <!-- <div class="newBand"
           v-if="teamStatus"
           v-permission="'/studentPayBase'"
           @click="setStudentPay">学员缴费设置</div> -->
      <!-- <div class="newBand"
      v-if="!isNewGropu"
           @click="onCreateQRCode">续费二维码</div> -->
    </div>
    <div class="tableWrap">
      <el-table
        style="width: 100%"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        :data="tableList"
      >
        <el-table-column
          align="center"
          prop="batchNo"
          width="200"
          label="缴费批次"
        >
          <template slot-scope="scope">
            <div>
              <copy-text>{{ scope.row.batchNo }}</copy-text>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="paymentType" label="缴费种类">
          <template slot-scope="scope">
            <div>
              {{ scope.row.payUserType | payUserTypeFormat }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="paymentType" label="缴费类型">
          <template slot-scope="scope">
            <div>
              {{ scope.row.paymentType | userPaymentTypeFormat }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="auditStatus"
          label="审核状态"
          width="100px"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.status | auditType }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column
          align="center"
          prop="addCourseTotalTime"
          width="150px"
          label="加课总时长"
        >
        </el-table-column> -->
        <!-- <el-table-column
          align="center"
          prop="courseCurrentPrice"
          label="课程费用"
        >
          <template slot-scope="scope">
            <div>
              {{
                (scope.row.paymentType === "SPAN_GROUP_CLASS_ADJUST"
                  ? scope.row.courseOriginalPrice
                  : scope.row.courseCurrentPrice) | moneyFormat
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="courseCurrentPrice"
          label="会员费用"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.memberPaymentAmount | moneyFormat }}
            </div>
          </template>
        </el-table-column> -->
        <el-table-column align="center" prop="status" label="缴费人数">
          <template slot-scope="scope">
            <div v-if="scope.row.payUserType == 'STUDENT'">
              {{ scope.row.actualNum }}/{{ scope.row.expectNum }}
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="currentTotalAmount"
          label="缴费金额(元)"
        >
        </el-table-column>
        <el-table-column align="center" prop="memo" width="200px" label="备注">
          <template slot-scope="scope">
            <overflow-text width="200px" :text="scope.row.memo" />
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" min-width="200px">
          <template slot-scope="scope">
            <div>
              <auth auths="musicGroupPaymentCalender/queryPage/4315">
                <!--   v-permission="'musicGroupPaymentCalender/queryPage/4315'" -->
                <el-button type="text" @click="lookDetail(scope.row)"
                  >查看</el-button
                ></auth
              >
              <auth
                auths="musicGroupPaymentCalenderDetail/batchAdd/3890"
                v-if="
                  scope.row.status != 'REJECT' &&
                    scope.row.status != 'AUDITING' &&
                    scope.row.status != 'DRAFT' &&
                    teamStatus &&
                    scope.row.paymentType != 'MUSIC_APPLY' &&
                    scope.row.paymentType != 'ADD_STUDENT' &&
                    scope.row.paymentType != 'SPAN_GROUP_CLASS_ADJUST' &&
                    scope.row.paymentType != 'GOODS_PURCHASE'
                "
              >
                <!--    &&scope.row.payUserType === 'STUDENT' -->
                <el-button type="text" @click="openChioseStudent(scope.row)"
                  >添加学员</el-button
                >
              </auth>
              <!-- v-permission="'musicGroupPaymentCalenderDetail/batchAdd/3890'"  v-permission="''" -->

              <template v-if="scope.row.paymentType != 'GOODS_PURCHASE'">
                <auth
                auths="musicGroupPaymentCalender/update/4313"
                v-if="
                  teamStatus &&
                    scope.row.paymentType != 'ADD_STUDENT' &&
                    (scope.row.status === 'REJECT' ||
                      scope.row.status === 'DRAFT')
                "
              >
                <el-button type="text" @click="resetPay(scope.row)"
                  >修改</el-button
                >
              </auth>
              <auth
                auths="musicGroupPaymentCalender/update/4313"
                v-if="
                  team_status == 'FEE_AUDIT_FAILED' &&
                    scope.row.paymentType != 'ADD_STUDENT' &&
                    (scope.row.status === 'REJECT' ||
                      scope.row.status === 'DRAFT')
                "
              >
                <el-button type="text" @click="resetPay(scope.row)"
                  >修改</el-button
                >
              </auth>
              </template>
              <template v-else>
                <auth
                auths="musicGroupPaymentCalender/update/4313"
                v-if="
                  scope.row.status != 'AUDITING'
                "
              >
                <el-button type="text" @click="resetPay(scope.row)"
                  >修改</el-button
                >
              </auth>
              </template>
              <!--                   scope.row.paymentType != 'SPAN_GROUP_CLASS_ADJUST' &&-->
              <auth
                auths="musicGroupPaymentCalender/revoke"
                v-if="
                  (team_status == 'FEE_AUDIT' || team_status == 'PROGRESS') &&
                    scope.row.status === 'AUDITING' &&
                    scope.row.paymentType != 'ADD_STUDENT'
                "
              >
                <el-button type="text" @click="revoke(scope.row)"
                  >撤回</el-button
                >
              </auth>
              <!--   scope.row.paymentType != 'SPAN_GROUP_CLASS_ADJUST' && -->
              <auth
                auths="musicGroupPaymentCalender/delByBatchNo/4305"
                v-if="
                  teamStatus &&
                    scope.row.paymentType != 'ADD_STUDENT' &&
                    (scope.row.status == 'DRAFT' ||
                      scope.row.status == 'REJECT')
                "
              >
                <el-button type="text" @click="removeBatchNo(scope.row)"
                  >删除</el-button
                ></auth
              >
              <auth
                auths="musicGroupPaymentCalender/delByBatchNo/4305"
                v-if="
                  teamStatus &&
                    scope.row.paymentType == 'ADD_STUDENT' &&
                    (scope.row.status == 'DRAFT' ||
                      scope.row.status == 'REJECT')
                "
              >
                <el-button type="text" @click="removeBatchNo(scope.row)"
                  >删除</el-button
                ></auth
              >

              <el-button
                type="text"
                v-if="
                  !isNewGropu &&
                    teamStatus &&
                    scope.row.paymentType != 'MUSIC_APPLY' &&
                    (scope.row.status == 'OPEN' ||
                      scope.row.status == 'OVER') &&
                    scope.row.payUserType === 'STUDENT'
                "
                @click="onCreateQRCode(scope.row)"
                >续费二维码</el-button
              >
              <el-button
                type="text"
                v-if="
                  scope.row.payUserType === 'STUDENT' &&
                    scope.row.paymentType == 'MUSIC_APPLY' &&
                    $helpers.permission(
                      'musicGroup/findMusicGroupSubjectInfo/966'
                    )
                "
                @click="onPreview(scope.row)"
                >预览</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        save-key="resetPayList"
        sync
        :total.sync="rules.total"
        :page.sync="rules.page"
        :limit.sync="rules.limit"
        :page-sizes="rules.page_size"
        @pagination="getList"
      />
    </div>
    <el-dialog :visible.sync="itemsVisible" title="查看缴费计划" width="1000px">
      <pay-items
        v-if="itemsVisible"
        ref="payItems"
        :batchNo="viewDetail && viewDetail.batchNo"
        payUserType="STUDENT"
        :teamStatus="teamStatus"
        :teamType="teamType"
        :isNewGropu="isNewGropu"
        @lookDetail="lookDetail"
        @onPreview="onPreview"
        @openChioseStudent="openChioseStudent"
        @resetPay="resetPay"
        @close="itemsVisible = false"
        @onCreateQRCode="onCreateQRCode"
      />
    </el-dialog>
    <el-dialog
      :visible.sync="payVisible"
      :close-on-click-modal="false"
      width="500px"
      :title="diTitle"
    >
      <el-form
        :model="payForm"
        :inline="true"
        label-width="120px"
        label-position="right"
        ref="payForm"
      >
        <el-form-item
          label="缴费开始日期"
          :rules="[
            { required: true, message: '请设置缴费开始日期', trigger: 'blur' }
          ]"
          prop="startPaymentDate"
        >
          <el-date-picker
            v-model.trim="payForm.startPaymentDate"
            @change="changeStartTime"
            type="date"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            placeholder="开始日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          label="缴费结束日期"
          :rules="[
            { required: true, message: '请设置缴费结束日期', trigger: 'blur' }
          ]"
          prop="deadlinePaymentDate"
        >
          <el-date-picker
            v-model.trim="payForm.deadlinePaymentDate"
            type="date"
            :picker-options="beginDate(payForm.startPaymentDate)"
            value-format="yyyy-MM-dd"
            placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          label="缴费方式"
          prop="paymentPattern"
          :rules="[{ required: true, message: '请选择缴费方式' }]"
        >
          <el-select
            placeholder="缴费方式"
            style="width: 220px"
            clearable
            filterable
            @change="paymentPatternChange"
            v-model.trim="payForm.paymentPattern"
          >
            <el-option :value="0" label="按月"></el-option>
            <el-option :value="1" label="按季"></el-option>
            <el-option :value="2" label="一次性"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="缴费有效期开始"
          :rules="[
            {
              required: true,
              message: '请设置缴费有效期开始日期',
              trigger: 'blur'
            }
          ]"
          prop="paymentValidStartDate"
        >
          <el-date-picker
            v-model.trim="payForm.paymentValidStartDate"
            type="date"
            @change="changePaymentStartTime"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            placeholder="有效期开始日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          label="缴费有效期结束"
          :rules="[
            {
              required: true,
              message: '请设置缴费有效期结束日期',
              trigger: 'blur'
            }
          ]"
          prop="paymentValidEndDate"
        >
          <el-date-picker
            v-model.trim="payForm.paymentValidEndDate"
            type="date"
            :picker-options="beginDate(payForm.paymentValidStartDate)"
            value-format="yyyy-MM-dd"
            placeholder="有效期结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          label="收费类型"
          v-if="isNew"
          :rules="[
            { required: true, message: '请选择收费类型', trigger: 'blur' }
          ]"
          prop="type"
        >
          <el-select
            v-model.trim="payForm.type"
            style="width: 220px !important"
            placeholder="课程类型"
          >
            <el-option label="线上" value="ONLINE"></el-option>
            <el-option label="线下" value="OFFLINE"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="备注"
          v-if="isNew"
          :rules="[{ required: true, message: '请填写备注', trigger: 'blur' }]"
          prop="memo"
        >
          <el-input
            type="textarea"
            style="width: 220px !important"
            :rows="4"
            placeholder="请填写备注"
            v-model="payForm.memo"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="payVisible = false">取 消</el-button>
        <el-button type="primary" v-if="isNew" @click="newPayInfo"
          >确 定</el-button
        >
        <el-button type="primary" v-else @click="resetPayDate">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="查看"
      :visible.sync="reviewVisible"
      width="900px"
      v-if="reviewVisible"
    >
      <reviewDetail
        @close="reviewVisible = false"
        @submited="getList"
        :detail="viewDetail"
        :musicGroupId="$route.query.id"
        destroy-on-close
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="reviewVisible = false"
          >关闭</el-button
        >
      </div>
    </el-dialog>
    <el-dialog :title="payFormTitle" :visible.sync="userVisible" width="830px">
      <userPayForm
        v-if="userVisible"
        @close="userVisible = false"
        @submited="payedSubmited"
        @changeActive="changeActive"
        :organizationCourseUnitPriceSettings="
          organizationCourseUnitPriceSettings
        "
        :rowDetail="activeRow"
        :type="payFormType"
        :baseInfo="baseInfo"
        :paymentType="paymentType"
        :musicGroupId="$route.query.id"
        @changePaymentType="changePaymentType"
      />
    </el-dialog>
    <!-- 会员缴费 -->
    <el-dialog
      :title="payFormTitle"
      :visible.sync="memberVisible"
      width="830px"
    >
      <memberPayForm
        v-if="memberVisible"
        @close="memberVisible = false"
        @submited="payedSubmited"
        @changeActive="changeActive"
        :organizationCourseUnitPriceSettings="
          organizationCourseUnitPriceSettings
        "
        :rowDetail="activeRow"
        :type="payFormType"
        :baseInfo="baseInfo"
        :paymentType="paymentType"
        :musicGroupId="$route.query.id"
      />
    </el-dialog>

    <el-dialog
      title="学员选择"
      :visible.sync="chioseStudentVisible"
      destroy-on-close
      append-to-body
      width="800px"
    >
      <setStudentFee
        @chioseStudent="chioseStudent"
        ref="setStudentFee"
        v-if="chioseStudentVisible"
        :batchNo="batchNo"
        :musicGroupPaymentCalenderId="musicGroupPaymentCalenderId"
        @submited="chioseStudentSubmited"
        :clearTale="clearStduent"
      ></setStudentFee>
      <div slot="footer" class="dialog-footer">
        <el-button @click="chioseStudentVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitNewPay">确 定</el-button>
      </div>
    </el-dialog>

    <qr-code v-model="qrcodeStatus" title="续费二维码" :codeUrl="codeUrl" />

    <el-dialog
      title="报名声部预览"
      :visible.sync="dialogSubjectVisible"
      width="400px"
      class="subjectPreview"
    >
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane
          :label="subject.subName"
          lazy
          v-for="(subject, index) in dialogSubjectList"
          :key="index"
          :name="subject.subjectId.toString()"
          style="max-height: 500px; overflow-y: auto"
        >
          <subject-preview
            :subjectId="subject.subjectId"
            :calenderId="dialogCalenderId"
          ></subject-preview>
        </el-tab-pane>
      </el-tabs>
      <!-- <div slot="footer">
        <el-button @click="dialogSubjectVisible = false">取 消</el-button>
      </div> -->
    </el-dialog>

    <el-dialog
      :title="'延长缴费'"
      :visible.sync="extendPaymentStatus"
      v-if="extendPaymentStatus"
      width="400px"
    >
      <el-form :model="extendForm" ref="extendForm" :rules="extendRule">
        <el-form-item label="缴费时间" 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" @click="onExtendPayment('extendForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-button
      type="primary"
      @click="submitAudit"
      v-if="team_status == 'DRAFT' || team_status == 'AUDIT_FAILED'"
      >提交审核</el-button
    >
    <el-button
      type="primary"
      @click="approval"
      v-if="team_status == 'AUDIT'"
      v-permission="'musicGroup/auditSuccess'"
      >审核通过</el-button
    >
    <el-button
      type="danger"
      @click="refuse"
      v-if="team_status == 'AUDIT'"
      v-permission="'musicGroup/auditFailed'"
      >驳回</el-button
    >
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import dayjs from "dayjs";
import QrCode from "@/components/QrCode/index";
import { vaildStudentUrl } from "@/utils/validate";
import {
  getTeamBaseInfo,
  auditSuccess,
  auditFailed,
  musicGroupAuditing
} from "@/api/buildTeam";
// import { auditSuccess, auditFailed } from "@/api/buildTeam";
import {
  resetMusicGroupPaymentCalender,
  delMusicGroupPaymentCalender,
  findMusicGroupSubjectInfo,
  extensionPayment
} from "@/api/buildTeam";
import { getAuditList } from "@/api/auditManager";
import { getOrganizationCourseUnitPriceSettings } from "@/api/specialSetting";
import {
  getMusicGroupStu,
  musicGroupPaymentCalenderDetailBatchAdd,
  musicGroupPaymentCalenderDelByBatchNo,
  revokeMusicGroupPaymentCalender
} from "../api";
import setStudentFee from "./studentPayBase";
import userPayForm from "../modals/user-pay-form";
import memberPayForm from "../modals/member-pay-form";
import payItems from "../modals/pay-items";
import schoolPayForm from "../modals/school-pay-form";
import review from "../modals/review";
import reviewDetail from "../modals/review-detail";
import subjectPreview from "@/views/resetTeaming/modals/subject-preview";
import { userPaymentType } from "@/constant";
import { objectToOptions } from "@/utils";
import { payOrderTypeList, payUserTypeList } from "@/utils/searchArray";
export default {
  props: ["isNewGropu"],
  components: {
    pagination,
    setStudentFee,
    userPayForm,
    memberPayForm,
    schoolPayForm,
    QrCode,
    review,
    reviewDetail,
    "pay-items": payItems,
    subjectPreview
  },
  data() {
    return {
      paymentType: this.team_status == "DRAFT" ? 0 : 1,
      musicGroupStu: [],
      payFormType: "user",
      userVisible: false,
      schoolVisible: false,
      itemsVisible: false,
      reviewVisible: false,
      organizationCourseUnitPriceSettings: [],
      searchForm: {
        paymentType: null,
        payUserType: null
      },
      viewDetail: null,
      tableList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      isInit: false,
      diTitle: "新增缴费",
      payVisible: false,
      payForm: {
        startPaymentDate: null,
        deadlinePaymentDate: null,
        paymentPattern: null,
        paymentValidStartDate: null,
        paymentValidEndDate: null,
        type: null,
        memo: null
      },
      isNew: false,
      activeRow: null,
      pickerOptions: {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() + 86400000 <= new Date().getTime();
        }
      },
      qrcodeStatus: false, // 生成二维码
      codeUrl: null,
      chioseStudentVisible: false,
      chioseStudentList: [],
      clearStduent: true,
      batchNo: "",
      musicGroupPaymentCalenderId: "",
      teamType: this.$route.query.type,
      payOrderTypeLists: payOrderTypeList,
      dialogSubjectVisible: false, // 预览声部
      dialogSubjectList: [],
      activeName: null,
      dialogCalenderId: null, // 选择编号
      baseInfo: null,
      memberVisible: false, // 会员缴费,
      payUserTypeList: payUserTypeList,
      extendPaymentStatus: "",
      extendForm: {
        expireDate: null
      },
      extendRule: {
        expireDate: [
          { required: true, message: "请选择延长时间", trigger: "change" }
        ]
      },
      applyDates: this.applyDate()
    };
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  async mounted() {
    this.teamid = this.$route.query.id;
    this.paymentType = this.team_status == "DRAFT" ? 0 : 1;
    // 获取分部
    try {
      const res = await getOrganizationCourseUnitPriceSettings({
        rows: 9999
      });
      this.organizationCourseUnitPriceSettings = res.data.rows;
      // this.organizationCourseUnitPriceSettings=[];
      if (this.organizationCourseUnitPriceSettings.length <= 0) {
        this.$bus.$emit("showguide", ["teamCourseFee"]);
        return;
      }
      localStorage.setItem(
        "organizationCourseUnitPriceSettings",
        JSON.stringify(this.organizationCourseUnitPriceSettings)
      );
    } catch (error) {
      localStorage.removeItem("organizationCourseUnitPriceSettings");
    }
    this.init();
  },
  computed: {
    payOrderTypeList() {
      return objectToOptions(userPaymentType);
    },
    payFormTitle() {
      if (this.isNew) {
        return this.payFormType === "user" ? "新增学员缴费" : "新增学校缴费";
      } else {
        return this.payFormType === "user" ? "修改学员缴费" : "修改学校缴费";
      }
    },
    teamStatus() {
      // let type = this.$route.query.type;
      return (
        this.team_status == "DRAFT" ||
        this.team_status == "PROGRESS" ||
        this.team_status == "AUDIT_FAILED"
      );
    },
    team_status() {
      return this.$route.query.team_status;
    }
  },
  // activated () {
  //   this.init();
  // },
  methods: {
    async init() {
      // this.team_status = this.$route.query.team_status;
      try {
        const res = await getMusicGroupStu({
          musicGroupId: this.$route.query.id
        });
      } catch (error) {}
      this.getTeamInfo();
      this.getList();
    },
    getTeamInfo() {
      if (this.$route.query.id) {
        getTeamBaseInfo({ musicGroupId: this.$route.query.id }).then(res => {
          if (res.code == 200) {
            this.baseInfo = res.data;
            this.$emit("getBaseInfo", this.baseInfo);
            localStorage.setItem("payMusicBase", JSON.stringify(this.baseInfo));
          } else {
            localStorage.removeItem("payMusicBase");
          }
        });
      }
    },
    changePaymentType(val) {
      this.paymentType = val;
    },
    newUserPay() {
      let query = this.$route.query;
      this.$router.push({
        path: "/business/studentPaySet",
        query: { ...query, payUserType: "STUDENT" }
      });
      // 判断一下乐团是课程缴费 还是会员缴费 且乐团状态为创建缴费中
      // if (
      //   this.baseInfo?.musicGroup?.courseViewType == 2 &&
      //   this.team_status == "DRAFT"
      // ) {
      //   this.payFormType = "user";
      //   this.isNew = true;
      //   this.activeRow = null;
      //   this.memberVisible = true;
      // } else {
      //   this.payFormType = "user";
      //   this.isNew = true;
      //   this.activeRow = null;
      //   this.userVisible = true;
      // }
    },
    newSchoolPay() {
      let query = this.$route.query;
      this.$router.push(
        {
          path: "/business/studentPaySet",
          query: { ...query, payUserType: "SCHOOL" }
        },
        route => {
          route.meta.title = "学校缴费设置";
        }
      );
    },
    newGoodsPay() {
      let query = this.$route.query;
      this.$router.push(
        {
          path: "/business/goodsPaySet",
          query: { ...query, payUserType: "SCHOOL" }
        },
        route => {
          route.meta.title = "商品采购设置";
        }
      );
    },
    getList() {
      let musicGroupId = this.$route.query.id;
      return getAuditList({
        page: this.rules.page,
        rows: this.rules.limit,
        musicGroupId: musicGroupId,
        payUserType: this.searchForm.payUserType,
        paymentType: this.searchForm.paymentType
      }).then(res => {
        if (res.code == 200) {
          this.rules.total = res.data.total;
          this.tableList = res.data.rows;
        }
      });

      // 请求乐团状态
    },
    paymentPatternChange(val) {
      // if (val === 2) {
      //   this.payForm.paymentValidEndDate = null
      // }
    },
    onCreateQRCode(row) {
      // 生成报名二维码
      this.qrcodeStatus = true;
      this.codeUrl =
        vaildStudentUrl() +
        "/#/musicGroupRenew?calenderId=" +
        row.id +
        "&id=" +
        this.$route.query.id;
    },
    chioseStudent(val) {
      this.chioseStudentList = val;
    },
    newPay() {
      this.diTitle = "新增缴费";
      this.isNew = true;
      this.payVisible = true;
    },
    resetPay(row) {
      this.diTitle = "修改缴费";
      if (
        row.paymentType == "MUSIC_APPLY" ||
        row.paymentType == "MUSIC_RENEW" ||
        row.paymentType == "ADD_COURSE"
      ) {
        this.payFormType = row.payUserType === "SCHOOL" ? "school" : "user";
        this.isNew = false;
        this.activeRow = row;
        let query = this.$route.query;
        this.$router.push({
          path: "/business/studentPaySet",
          query: { ...query, payUserType: row.payUserType, calenderId: row.id }
        });
        // 跳转新接口
        // this.memberVisible = true;
      } else if (row.paymentType == "GOODS_PURCHASE") {
        this.isNew = false;
        this.activeRow = row;
        let query = this.$route.query;
        this.$router.push({
          path: "/business/goodsPaySet",
          query: { ...query, payUserType: row.payUserType, calenderId: row.id }
        });
      }

      // 判断一下 是不是云收费团 且是乐团报名缴费
    },
    async revoke(row) {
      try {
        await this.$confirm("是否撤回此缴费项目的审批？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        });
        const res = await revokeMusicGroupPaymentCalender({
          batchNo: row.batchNo
        });
        this.$message.success("取消审批成功");
        this.getList();
        this.getTeamInfo();
      } catch {}
    },
    changeActive(val) {
      if (this.$listeners.changeActive) {
        this.$listeners.changeActive(val);
      }
    },
    async chioseStudentSubmited() {
      try {
        await this.$confirm("缴费创建完成, 是否立即排课？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        });
        if (this.$listeners.changeActive) {
          this.$listeners.changeActive({
            name: "5"
          });
        }
      } catch (error) {}
    },
    detelePay(row) {
      let id = row.id;
      this.$confirm(`确定删除该缴费周期?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          delMusicGroupPaymentCalender({ id }).then(res => {
            if (res.code == 200) {
              this.$message.success("删除成功");

              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    lookList(row) {
      this.viewDetail = row;
      this.itemsVisible = true;
    },
    lookDetail(row) {
      let query = this.$route.query;
      this.$route.query.paymentId = row.id;
      this.viewDetail = row;
      if (row.payUserType === "SCHOOL") {
        this.reviewVisible = true;
      } else {
        this.$router.push({ path: "/business/strudentPayInfo", query });
        // this.$router.push({ path: "/teamPayInfo/strudentPayInfo", query });
      }
    },
    async submitAudit() {
      try {
        await this.$confirm("确定提交审核?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        });
        const res = await musicGroupAuditing({ musicGroupId: this.teamid });
        this.$message.success("提交成功");
        this.$store.dispatch("delVisitedViews", this.$route);
        this.$router.push({
          path: "/teamList"
        });
      } catch (e) {
        console.log(e);
      }
    },
    extendTime() {
      this.extendPaymentStatus = true;
    },
    onExtendPayment(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          extensionPayment({
            musicGroupId: this.$route.query.id,
            expireDate: this.extendForm.expireDate
          }).then(res => {
            if (res.code == 200) {
              this.$message.success("延长缴费成功");
              this.extendPaymentStatus = false;
              this.getList();
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
    // setStudentPay () {
    //   let query = this.$route.query;
    //   this.$router.push({ path: "/business/studentPayBase", query });
    // },
    async removeBatchNo(row) {
      try {
        await this.$confirm("是否确认删除该缴费批次?", "提示", {
          type: "warning"
        });
        await musicGroupPaymentCalenderDelByBatchNo({ batchNo: row.batchNo });
        this.$message.success("删除成功");
        this.getList();
      } catch (error) {}
    },
    newPayInfo() {
      this.$refs["payForm"].validate(res => {
        if (res) {
          /**
           *   payForm: {
        startPaymentDate: null,
        deadlinePaymentDate: null,
        type: null,
        memo: null
      },
           *
           */
          this.chioseStudentVisible = true;
          return;
        }
      });
    },
    submitNewPay() {
      if (this.chioseStudentList.length < 1) {
        this.$message.error("请至少选择一名学员");
        return;
      }

      let obj = {};
      obj.userIdList = this.chioseStudentList.map(stu => {
        return stu.userId;
      });
      obj.batchNo = this.batchNo;
      musicGroupPaymentCalenderDetailBatchAdd(obj).then(res => {
        if (res.code == 200) {
          this.$message.success("添加成功");
          this.$refs.setStudentFee.clearTable();
          this.payVisible = false;
          this.chioseStudentVisible = false;
          // this.$refs.payItems?.getList()
          this.getList();
        }
      });
    },
    resetPayDate() {
      resetMusicGroupPaymentCalender({
        id: this.activeRow.id,
        startPaymentDate: this.payForm.startPaymentDate,
        deadlinePaymentDate: this.payForm.deadlinePaymentDate,
        paymentValidStartDate: this.payForm.paymentValidStartDate
          ? dayjs(this.payForm.paymentValidStartDate).format("YYYY-MM-DD")
          : this.payForm.paymentValidStartDate,
        paymentValidEndDate: this.payForm.paymentValidEndDate
          ? dayjs(this.payForm.paymentValidEndDate).format("YYYY-MM-DD")
          : this.payForm.paymentValidEndDate,
        paymentPattern: this.payForm.paymentPattern
      }).then(res => {
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.payVisible = false;
          this.getTeamInfo();
          this.getList();
        }
      });
    },
    changeStartTime(val) {
      this.payForm.deadlinePaymentDate = this.dateAddDays(val, 3);
    },
    changePaymentStartTime(val) {
      this.payForm.paymentValidEndDate = null;
    },
    dateAddDays(dataStr, dayCount) {
      let strdate = dataStr; //日期字符串
      let isdate = new Date(strdate.replace(/-/g, "/")); //把日期字符串转换成日期格式
      isdate = new Date((isdate / 1000 + 86400 * dayCount) * 1000); //日期加1天
      let pdate =
        isdate.getFullYear() +
        "-" +
        (isdate.getMonth() + 1) +
        "-" +
        isdate.getDate(); //把日期格式转换成字符串
      return pdate;
    },
    beginDate(end) {
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          if (end) {
            return new Date(end).getTime() - 86400000 >= time.getTime();
          } else {
            return time.getTime() + 86400000 < Date.now();
            //开始时间不选时，结束时间最大值小于等于当天
          }
        }
      };
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    onReSet() {
      this.searchForm = { payUserType: null };
    },
    openChioseStudent(row) {
      this.chioseStudentVisible = true;
      this.batchNo = row.batchNo;
      this.musicGroupPaymentCalenderId = row.id;
    },
    async payedSubmited(data) {
      try {
        await this.getList();
        this.getTeamInfo();
        // if (!this.isNewGropu) {
        //   this.chioseStudentVisible = true;
        //   if (data) {
        //     this.musicGroupPaymentCalenderId = data.musicGroupPaymentCalenderId;
        //   }
        // }
      } catch (error) {}
    },
    async onPreview(row) {
      // 开始预览
      this.dialogCalenderId = row.id;
      const musicGroupId = this.$route.query.id;
      findMusicGroupSubjectInfo({ musicGroupId: musicGroupId }).then(res => {
        if (res.code == 200) {
          this.dialogSubjectList = res.data.musicGroupSubjectPlans;

          // 默认预览第一个
          if (this.dialogSubjectList.length <= 0) {
            this.$message.error("请先设置声部信息");
            return;
          }
          this.activeName = this.dialogSubjectList[0].subjectId.toString();
          this.dialogSubjectVisible = true;
        } else {
          this.$message.warning("没有可预览的声部");
        }
      });
    },
    approval() {
      // 审核通过 验证商品
      //  let flag = this.$refs.soundSetCore.checkSubmit()
      // if (!flag) return;
      this.$confirm(`是否审核通过?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          auditSuccess({ musicGroupId: this.teamid }).then(res => {
            if (res.code == 200) {
              this.$message.success("审核通过");
              this.$store.dispatch("delVisitedViews", this.$route);
              this.$router.push({
                path: "/teamList",
                query: { search: this.Fsearch, rules: this.Frules }
              });
            }
          });
        })
        .catch(() => {});
    },
    refuse() {
      // auditFailed
      this.$prompt("请输入拒绝原因", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(({ value }) => {
        //   点击确认  值是value
        if (!value) {
          this.$message.error("请输入驳回原因");
          return;
        } else {
          auditFailed({ musicGroupId: this.teamid, memo: value }).then(res => {
            if (res.code == 200) {
              this.$message.success("已拒绝");
              this.$store.dispatch("delVisitedViews", this.$route);
              this.$router.push({
                path: "/teamList",
                query: { search: this.Fsearch, rules: this.Frules }
              });
            }
          });
        }
      });
    },
    applyDate() {
      let self = this;
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() + 86400000 < new Date().getTime();
        }
      };
    }
  },
  watch: {
    chioseStudentVisible() {
      this.chioseStudentList = [];
    },
    payVisible(val) {
      if (!val) {
        this.payForm = {
          startPaymentDate: null,
          paymentPattern: null,
          paymentValidStartDate: null,
          paymentValidEndDate: null,
          type: null,
          memo: null,
          deadlinePaymentDate: null
        };
        this.$refs["payForm"].resetFields();
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.topWrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  div {
    margin-right: 10px;
  }
}
.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;
  }
}
.previewContainer {
  ::v-deep .el-dialog__body {
    padding: 0;
  }
}

.subjectPreview {
  ::v-deep .el-dialog__body {
    padding: 30px 0 0;
  }
}
</style>