dy-admin-manager/src/views/teamBuild/components/teamBaseInfo.vue

<template>
  <div class="base-container">
    <div class="banseLeft">
      <div class="head">乐团基本信息：</div>
      <!-- <div class="num">乐团编号：dywh01</div> -->
      <el-form
        :model="topFrom"
        :inline="true"
        ref="topinfo"
        label-width="120px"
        style="margin-left: 11px"
      >
        <el-form-item
          label="所属分部"
          prop="section"
          :rules="[{ required: true, message: '所属分部不能为空' }]"
        >
          <el-select
            v-model.trim="topFrom.section"
            filterable
            :disabled="basdisabled"
            @change="changeSection"
            clearable
          >
            <el-option
              v-for="(item, index) in sectionList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="收费类型"
          prop="type"
          :rules="[{ required: true, message: '收费类型不能为空' }]"
        >
          <el-select
            v-model.trim="topFrom.type"
            filterable
            :disabled="basdisabled"
            clearable
            @change="changeType"
          >
            <el-option
              v-for="(item, index) in typeList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="收费模式"
          prop="courseViewType"
          :rules="[{ required: true, message: '收费模式不能为空' }]"
        >
          <el-select
            v-model.trim="topFrom.courseViewType"
            filterable
            :disabled="basdisabled"
            clearable
          >
            <el-option label="课程收费" :value="0"></el-option>
            <el-option label="会员收费" :value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="合作单位"
          prop="school"
          :rules="[{ required: true, message: '合作单位不能为空' }]"
        >
          <el-select
            v-model.trim="topFrom.school"
            :disabled="!topFrom.section || basdisabled"
            @change="chioseSchool"
            filterable
            clearable
          >
            <el-option
              v-for="(item, index) in cooperationList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="乐团主管"
          prop="teacher"
          :rules="[{ required: true, message: '乐团主管不能为空' }]"
        >
          <el-select
            v-model.trim="topFrom.teacher"
            :disabled="true"
            filterable
            clearable
          >
            <el-option
              v-for="(item, index) in educationList"
              :key="index"
              :label="item.realName"
              :value="item.userId"
            >
              <span style="float: left">{{ item.realName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                String(item.userId)
              }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="教学地点"
          prop="address"
          :rules="[{ required: true, message: '教学地点不能为空' }]"
        >
          <template #label>
            <p style="position: relative; display: inline-block">
              教学地点
              <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>
          <el-select
            v-model.trim="topFrom.address"
            filterable
            clearable
            :disabled="!topFrom.section || basdisabled"
          >
            <el-option
              v-for="(item, index) in addList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="乐团名称"
          prop="name"
          :rules="[{ required: true, message: '乐团名称不能为空' }]"
        >
          <el-input
            placeholder="请输入乐团名称"
            v-model.trim="topFrom.name"
            :disabled="basdisabled"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="运营主管"
          prop="boss"
          :rules="[{ required: true, message: '运营主管不能为空' }]"
        >
          <el-select
            v-model.trim="topFrom.boss"
            :disabled="!topFrom.section || basdisabled"
            filterable
            clearable
          >
            <el-option
              v-for="item in bossList"
              :key="item.userId"
              :label="item.realName"
              :value="item.userId"
            >
              <span style="float: left">{{ item.realName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                String(item.userId)
              }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="衔接老师" prop="transactionTeacherId">
          <el-select
            v-model.trim="topFrom.transactionTeacherId"
            :disabled="!topFrom.section || basdisabled"
            filterable
            clearable
          >
            <el-option
              v-for="item in transactionList"
              :key="item.userId"
              :label="item.realName"
              :value="item.userId"
            >
              <span style="float: left">{{ item.realName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                String(item.userId)
              }}</span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="维修技师" prop="repairUserId">
          <el-select
            v-model.trim="topFrom.repairUserId"
            :disabled="!topFrom.section || basdisabled"
            filterable
            clearable
          >
            <el-option
              v-for="(item, index) in technician"
              :key="index"
              :label="item.userName"
              :value="item.userId"
            >
              <span style="float: left">{{ item.realName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                String(item.userId)
              }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item
          label="预报名截止时间"
          prop="time"
          :rules="[{ required: true, message: '请输入预报名截止时间' }]"
        >
          <el-date-picker
            v-model.trim="topFrom.time"
            :disabled="basdisabled"
            type="date"
            value-format="yyyy-MM-dd"
            :picker-options="beginDate()"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item> -->
        <el-form-item
          label="报名截止时间"
          prop="time"
          :rules="[{ required: true, message: '请输入报名截止时间' }]"
        >
          <el-date-picker
            v-model.trim="topFrom.time"
            :disabled="basdisabled"
            type="date"
            value-format="yyyy-MM-dd"
            :picker-options="beginDate()"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          label="预计开团时间"
          prop="startTime"
          :rules="[{ required: true, message: '请输入预计开团时间' }]"
        >
          <el-date-picker
            v-model.trim="topFrom.startTime"
            :disabled="basdisabled"
            type="date"
            value-format="yyyy-MM-dd"
            :picker-options="beginDate()"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          label="课酬结算标准"
          :rules="[{ required: true, message: '请选择课酬结算标准' }]"
          prop="salary"
        >
          <el-select
            v-model.trim="topFrom.salary"
            clearable
            :disabled="basdisabled"
            filterable
          >
            <el-option label="自定义课酬" value="TEACHER_DEFAULT"></el-option>
            <el-option label="标准课酬" value="GRADIENT_SALARY"></el-option>
            <!-- <el-option label="课堂课酬" value="CLASSROOM_SALARY"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="机构类型" prop="ownershipType">
          <el-select
            v-model.trim="topFrom.ownershipType"
            :disabled="basdisabled"
          >
            <el-option label="自有" value="OWN"></el-option>
            <el-option label="三方" value="COOPERATION"></el-option>
            <!-- <el-option label="租赁"
            value="LEASE"></el-option>-->
          </el-select>
        </el-form-item>
        <!-- v-if="teamStatus == 'resetTeam' || teamStatus == 'teamList'" -->
        <el-form-item label="乐队指导" prop="head">
          <el-select
            v-model.trim="topFrom.head"
            filterable
            :disabled="!topFrom.section || basdisabled"
            clearable
          >
            <el-option
              v-for="(item, index) in teacherList"
              :key="index"
              :label="item.realName"
              :value="item.id"
            >
              <span style="float: left">{{ item.realName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                String(item.id)
              }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label prop="isClass">
          <el-checkbox v-model.trim="topFrom.isClass" :disabled="basdisabled"
            >课堂课乐团</el-checkbox
          >
        </el-form-item> -->
        <br />
        <el-form-item label="" v-if="teamStatus == 'teamDraft'">
          <p style="color: red; padding-left: 50px">
            修改【收费类型】会重置乐团声部与缴费信息
          </p>
        </el-form-item>
      </el-form>
      <div class="btnWrap">
        <!-- <div
          class="nextBtn"
          v-if="teamStatus == 'resetTeam'"
          v-permission="{
            child: 'musicGroup/update',
            parent: '/resetTeaming/teamBaseInfo',
          }"
          @click="resetSubmit"
        >
          修改
        </div> -->
        <!-- 审批或者草稿的下一步 -->
        <div class="nextBtn" @click="gotoNext()" v-if="!basdisabled">
          {{ this.teamStatus == "teamDraft" ? "下一步" : "保存" }}
        </div>
        <div
          class="nextBtn"
          v-if="this.teamStatus == 'teamAudit'"
          @click="gotoNext()"
        >
          下一步
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getType,
  getTeamBaseInfo,
  resetTeamBaseInfo,
  getEmployeeOrgan,
  getStudentList,
  musicGroupOpenPay,
  extensionPayment,
  extensionApplyExpire,
  findUserByRole,
  getTeacher,
  createTeam,
} from "@/api/buildTeam";
import { findTechnician } from "@/api/repairManager";
import dayjs from "dayjs";
import merge from "webpack-merge";
import { queryByOrganId, getSchool } from "@/api/systemManage";
import qrCode from "@/components/QrCode/index";
import { classStatus } from "@/utils/searchArray";
import { vaildStudentUrl, vaildTeacherUrl } from "@/utils/validate";
import mergeMusic from "../components/merge-music";
export default {
  components: {
    mergeMusic,
    qrCode,
  },
  name: "teamBaseInfo",
  props: ["getTeamList"],
  data() {
    return {
      classStatus,
      organId: null,
      topFrom: {
        type: "", // 收费类型
        section: "", //所属分部
        courseViewType: "", // 收费模式
        school: "", // 合作单位
        teacher: "", // 乐团主管
        name: "", //乐团名称
        boss: "", // 运营主管
        time: "", // 报名截止时间
        startClass: [], // 招生年级起始
        address: "", // 教学地点
        salary: "", // 收费模式
        head: "",
        isClass: false, //是否为课堂课
        startTime: "",
        feeType: null,
        paymentPattern: "", // 缴费方式
        paymentValid: [], // 缴费有效期
        paymentValidStartDate: null, // 缴费有效期开始
        paymentValidEndDate: null, // 缴费有效期结束
        ownershipType: "OWN", // 合作机构类型
        repairUserId: null, // 维修技师
        transactionTeacherId: null, // 衔接老师
      },
      baseInfo: {},
      money: 580,
      orderInfo: {
        marketPrice: 0, // 原价总金额
        referencePrice: 0, // 现价总金额
      }, // 金额列表，金额计算
      sectionList: [], // 分部列表
      typeList: [], // 收费类型列表
      cooperationList: [], // 教学点列表
      teacherList: [], // 获取老师列表
      educationList: [], // 乐团主管
      bossList: [],
      transactionList: [],
      addList: [], // 教学地点列表
      activeTeam: [],
      teamid: "",
      teamStatus: "",
      isInit: false,
      technician: [],
      basdisabled: false,
      // 整合报名中
      paymentExpireDate: "",
      applyExpireDate: null,
      mergeVisible: false,
      team_status: "",
      paymentNum: 0,
      paymentStatus: false,

      paymentForm: {
        paymentExpireDate: null,
        // feeType: null
      },
      paymentRules: {
        paymentExpireDate: [
          { required: true, message: "请设置缴费截止日期", trigger: "blur" },
        ],
      },
      extendForm: {
        expireDate: null,
      },
      extendRule: {
        expireDate: [
          { required: true, message: "请选择延长时间", trigger: "change" },
        ],
      },
      isPay: false,
      extendPaymentStatus: false, // 延长缴费
      codeStatus: false,
      qrCodeUrl: null,
      codeTitle: null,
      teamid: "",
    };
  },
  created() {},

  mounted() {
    if (this.$route.query.type == "newTeam") {
      this.onReset();
    }

    this.init();
  },
  activated() {
    if (
      (this.teamid && this.teamid != this.$route.query.id) ||
      this.teamStatus != this.$route.query.type
    ) {
      this.init();
    }

    if (this.$route.query.clear == "true") {
      this.onReset();
    }
    if (this.teamStatus == "newTeam") {
      this.$store.dispatch("buildIndex", 0);
    }

    if (this.teamStatus != "newTeam") {
      this.$store.dispatch("draftIndex", 0);
    }
    this.teamStatus = this.$route.query.type;

    if (
      this.teamStatus == "look" ||
      this.teamStatus == "teamAudit" ||
      this.teamStatus == "feeAudit" ||
      this.teamStatus == "APPLY" ||
      this.teamStatus == "PAY"
    ) {
      this.basdisabled = true;
    } else {
      this.basdisabled = false;
    }
  },
  deactivated() {},
  // async beforeDestroy() {
  //   await this.setStore();
  //   // await new Promise((res, err) => {
  //   //   setTimeout(() => {
  //   //     res();
  //   //   }, 1000);
  //   // });
  // },

  methods: {
    async setStore(str) {
      if (this.teamid) {
        let loadash = this.$helpers.lodash;
        let sotrage = JSON.parse(localStorage.getItem(`${this.teamid}base`));
        // console.log(sotrage,this.topFrom)
        if (!loadash.isEqual(this.topFrom, sotrage) && sotrage) {
          // 提示保存
          return await this.$confirm("已修改当前页面数据是否保存", "提示", {
            confirmButtonText: "是",
            cancelButtonText: "否",
            type: "warning",
            closeOnClickModal: false,
            distinguishCancelAndClose: true,
          })
            .then(async () => {
              // localStorage.setItem(
              //   `${this.teamid}base`,
              //   JSON.stringify(this.topFrom)
              // );
              let b = await this.gotoNext(str);
              console.log(b);
              return b;
            })
            .catch((e) => {
              console.log(e);
              if (e == "close") {
                return false;
              } else {
                localStorage.removeItem(`${this.teamid}base`);
                return true;
              }

              // localStorage.setItem(`${this.teamid}base`,JSON.stringify(this.topFrom));
            });
        } else {
          return true;
          // localStorage.setItem(`${this.teamid}base`,JSON.stringify(this.topFrom));
        }
      } else {
        localStorage.setItem(`newTeambase`, JSON.stringify(this.topFrom));
        return true;
      }
    },
    //|| this.teamStatus === 'teamAudit'
    isNotEditing: function () {
      return !(
        this.teamStatus === "teamDraft" ||
        this.teamStatus === "newTeam" ||
        this.teamStatus === "teamList"
      );
    },
    changeFeeType(val) {},
    changePaymentValidStartDate(val) {
      if (val) {
        this.$set(this.topFrom, "paymentValidEndDate", "");
      }
    },
    changePaymentPattern(val) {
      // if (val === 2) {
      //   // this.topFrom.paymentValidStartDate = null
      //   this.$set(this.topFrom, 'paymentValidEndDate', '')
      // }
    },
    beginDate(end) {
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          if (end) {
            return new Date(end).getTime() - 86400000 >= time.getTime();
          } else {
            return time.getTime() + 86400000 < Date.now();
            //开始时间不选时，结束时间最大值小于等于当天
          }
        },
      };
    },
    init() {
      this.isInit = true;
      if (this.$route.query.id) {
        this.teamid = this.$route.query.id;
      }
      this.teamStatus = this.$route.query.type;
      this.team_status = this.$route.query.team_status;
      // if (this.teamStatus == "newTeam") {
      //   this.$store.dispatch("buildIndex", 0);
      // }

      // if (this.teamStatus != "newTeam") {
      //   this.$store.dispatch("draftIndex", 0);
      // }
      // 传过来的乐团信息
      this.activeTeam = this.getTeamList;
      if (
        this.teamStatus == "look" ||
        this.teamStatus == "teamAudit" ||
        this.teamStatus == "feeAudit" ||
        this.teamStatus == "teamCanceled"
      ) {
        this.basdisabled = true;
      } else {
        this.basdisabled = false;
      }
      if (this.$route.query.id) {
        // 单团修改
        this.teamid = this.$route.query.id;

        let sotrage = JSON.parse(
          localStorage.getItem(`${this.$route.query.id}base`)
        );

        if (!sotrage?.section) {
          getTeamBaseInfo({ musicGroupId: this.teamid }).then((res) => {
            if (res.code == 200) {
              // if (this.$listeners.getBaseInfo) {
              //   this.$listeners.getBaseInfo(res.data);
              // }

              // 头部
              this.setBase(res);
              // // 循环缴费月
              // this.payList.chioseMonth = res.data.months;
              if (res.data.musicGroup.organId) {
                // 获取员工
                this.getBaseList(res.data.musicGroup.organId);
              }
              this.$emit("getBaseInfo", res.data);
            }
          });
        } else {
          this.topFrom = sotrage;
          // this.applyExpireDate = sotrage.time;
          // this.paymentExpireDate = Storage.paymentExpireDate;
          if (this.topFrom?.section) {
            // 获取员工
            this.getBaseList(this.topFrom.section);
          }
        }
      } else {
        // 如果是新建团

        let sotrage = JSON.parse(localStorage.getItem(`newTeambase`));
        sotrage ? (this.topFrom = sotrage) : this.topFrom;
        if (this.topFrom?.section) {
          // 获取员工
          this.getBaseList(this.topFrom.section);
        }
      }
      this.getStudentStatus();
      this.$emit("getName", this.topFrom?.name);
      getEmployeeOrgan().then((res) => {
        if (res.code == 200) {
          this.sectionList = res.data;
        }
      });
      // 2.获取收费类型选项卡
      getType({ rows: 1000 }).then((res) => {
        if (res.code == 200) {
          this.typeList = res.data.rows;
        }
      });
      // 缓存设置时的状态
    },
    changeSection(val) {
      // 修改分部的时候 重置运营主管 重置乐团主管 重置乐队指导 合作单位  教学点
      this.topFrom.teacher = "";
      this.topFrom.boss = "";
      this.topFrom.head = "";
      this.topFrom.school = "";
      this.topFrom.address = "";
      // 发请求 根据分部id 查询所有员工
      this.getBaseList(val);
    },
    async getBaseList(val) {
      // 合作单位
      queryByOrganId({ organId: val }).then((res) => {
        if (res.code == 200) {
          this.cooperationList = res.data;
        }
      });
      // 教学点=>学校
      getSchool({ organId: val }).then((res) => {
        if (res.code == 200) {
          this.addList = res.data;
        }
      });
      // 获取维修技师
      findTechnician().then((res) => {
        if (res.code == 200) {
          this.technician = res.data;
        }
      });
      // 获取乐团主管
      try {
        const ruselt = await findUserByRole({
          organId: val,
        });
        this.educationList = ruselt?.data?.EDUCATION;
        this.bossList = ruselt?.data?.TEAM_TEACHER;
        this.transactionList = ruselt?.data?.TRANSACTION;
      } catch (e) {
        console.log(e);
      }
      // 获取运营主管
      // try {
      //   const ruselt = await findUserByRole({
      //     organId: val,
      //     employeeRole: "TEAM_TEACHER",
      //   });
      //   this.bossList = ruselt.data;
      // } catch (e) {
      //   console.log(e);
      // }
      // 获取指导老师
      getTeacher({ organId: val }).then((res) => {
        if (res.code == 200) {
          this.teacherList = res.data;
        }
      });
    },
    chioseSchool(val) {
      // 清除教学点
      this.topFrom.teacher = "";
      if (val) {
        console.log(this.cooperationList);
        this.cooperationList.forEach((item) => {
          if (item.id == val) {
            console.log(item);
            this.$set(this.topFrom, "teacher", item.educationUserId);
            // this.topFrom.teacher = item.educationUserId;
          }
        });
      }
      console.log("chioseSchool", this.topFrom.teacher);
    },
    async gotoNext(str) {
      let tempStatus;
      return new Promise((resolve, reject) => {
        this.$refs["topinfo"].validate(async (valid, object) => {
          if (!valid) {
            this.$message.error("请填写建团必要参数");
            // return false
            resolve(false);
          } else {
            // 判断一下是否勾选了课程类型而没有输入金额
            // 验证通过
            this.$store.dispatch("topinfo", this.topFrom);
            if (this.teamStatus == "teamAudit") {
              // 获取数据提交
              this.$emit("handleClick", { name: "2" });
            } else {
              this.$emit("getName", this.topFrom.name);

              tempStatus = await this.resetSubmit(str);
              console.log(tempStatus, "tempStatus");
              resolve(tempStatus);
            }
          }
        });
      });
    },
    async resetSubmit(str) {
      return new Promise((resolve, reject) => {
        this.$refs["topinfo"].validate(async (valid, object) => {
          if (!valid) {
            this.$message.error("请填写必要参数");
            reject();
          } else {
            let status = null;
            // 1.resetTeam 乐团修改
            // 2.newTeam 新建乐团
            // 3.teamList 跨团修改
            // 4.teamDraft 乐团草稿
            switch (this.teamStatus) {
              case "resetTeam": {
                status = "PROGRESS";
                break;
              }
              case "newTeam": {
                status = "DRAFT";
                break;
              }
              case "teamList": {
                status = null;
                break;
              }
              case "teamDraft": {
                status = "DRAFT";
                break;
              }
            }
            let obj = {};
            // topFrom.ownershipType
            //  修改  合并对象
            obj.musicGroup = {
              settlementType: this.topFrom.salary,
              applyExpireDate: dayjs(this.topFrom.time).format(
                "YYYY-MM-DD HH:mm:ss"
              ),
              chargeTypeId: this.topFrom.type,
              cooperationOrganId: this.topFrom.school,
              courseViewType: this.topFrom.courseViewType,
              teamTeacherId: this.topFrom.boss,
              // educationalTeacherId: this.topFrom.teacher,
              // chioseSchool
              enrollClasses: this.topFrom.startClass.join(","),
              name: this.topFrom.name,
              paymentPattern: this.topFrom.paymentPattern,
              paymentValidStartDate: this.topFrom.paymentValidStartDate
                ? dayjs(this.topFrom.paymentValidStartDate).format("YYYY-MM-DD")
                : this.topFrom.paymentValidStartDate,
              paymentValidEndDate: this.topFrom.paymentValidEndDate
                ? dayjs(this.topFrom.paymentValidEndDate).format("YYYY-MM-DD")
                : this.topFrom.paymentValidEndDate,
              organId: this.topFrom.section,
              // paymentMonths:obj.months  有待确认
              schoolId: this.topFrom.address,
              id: this.teamid,
              directorUserId: this.topFrom.head,
              isClassroomLessons: this.topFrom.isClass,
              status,
              expectStartGroupDate: this.topFrom.startTime,
              ownershipType: this.topFrom.ownershipType,
              repairUserId: this.topFrom.repairUserId || null,
              feeType: this.topFrom.feeType,
              transactionTeacherId: this.topFrom.transactionTeacherId,
            };
            // obj.musicGroupPaymentEntities = [];
            // createTeam
            if (this.teamStatus != "newTeam") {
              return await resetTeamBaseInfo(obj).then(async (res) => {
                if (res.code == 200) {
                  localStorage.setItem(
                    `${this.teamid}base`,
                    JSON.stringify(this.topFrom)
                  );
                  this.$emit("getBaseInfo");
                  if (this.teamStatus == "teamDraft") {
                    this.$message.success("保存成功");
                    if (!str) {
                      this.$emit("handleClick", { name: "2" });
                    }
                    resolve(true);

                    // 跳到第二页
                  } else {
                    this.$message.success("修改乐团成功");
                    // this.$router.push({ path: '/teamLists', query: { id: this.teamid, name: this.topFrom.name } })
                  }
                  resolve(true);
                }
              });
            } else {
              // 发送建团申请 成功后跳到第二页
              createTeam(obj).then((res) => {
                if (res.code == 200) {
                  // this.$message.success('建团成功,请设置声部信息')
                  // this.$emit("chiosetab", 1);
                  const h = this.$createElement;
                  this.$msgbox({
                    title: "提示",
                    message: h("p", null, [
                      h("p", null, "新建乐团成功 "),
                      h("p", null, "请设置声部信息"),
                    ]),
                    type: "warning",
                    confirmButtonText: "是",
                    cancelButtonText: "否",
                    showCancelButton: true,
                    customClass: "messageBox-prompt-test",
                  })
                    .then(() => {
                      this.$router.push(
                        {
                          query: merge(this.$route.query, {
                            type: "teamDraft",
                            id: res.data,
                            team_status: "DRAFT",
                          }),
                        },
                        (router) => {
                          console.log(router);
                          router.meta.title = "乐团编辑中";
                        }
                      );

                      this.$emit("getName", this.topFrom.name);
                      this.$emit("handleClick", { name: "2" });
                      return true;
                    })
                    .catch(() => {
                      this.$router.push(
                        {
                          query: merge(this.$route.query, {
                            type: "teamDraft",
                            id: res.data,
                            team_status: "DRAFT",
                          }),
                        },
                        (router) => {
                          console.log(router);
                          router.meta.title = "乐团编辑中";
                        }
                      );
                      this.$emit("getName", this.topFrom.name);
                      this.init();
                      return true;
                    });
                }
              });
            }
            // 发请求
          }
        });
      });
    },
    changeApplyTime(val) {
      this.$set(this.topFrom, "paymentValidStartDate", "");
      this.$set(this.topFrom, "paymentValidEndDate", "");
      // this.topFrom.paymentValidStartDate = ''
      // this.topFrom.paymentValidEndDate = ''
    },
    onReset() {
      this.topFrom = {
        type: "", // 收费类型
        section: "", //所属分部
        school: "", // 合作单位
        courseViewType: "",
        teacher: "", // 乐团主管
        name: "", //乐团名称
        boss: "", // 运营主管
        time: "", // 报名截止时间
        startClass: [], // 招生年级起始
        paymentValid: [], // 缴费有效期时间起始
        address: "", // 教学地点
        salary: "", // 收费模式
        head: "",
        paymentPattern: "", // 缴费方式
        isClass: false, //是否为课堂课
        startTime: "",
        ownershipType: "OWN", // 合作机构类型
        feeType: null,
      };
      this.$refs["topinfo"].resetFields();
    },
    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(() => {});
    },
    payStart() {
      this.paymentStatus = true;
    },
    getStudentStatus() {
      let obj = {
        musicGroupId: this.teamid,
        page: 1,
        rows: 9999,
      };
      if (!this.teamid) 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;
        }
      });
    },
    payDate() {
      let self = this;
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          if (self.applyExpireDate) {
            return (
              time.getTime() <=
              new Date(self.applyExpireDate.replace(/-/g, "/")).getTime()
            );
          } else {
            return false;
          }
        },
      };
    },
    onStartPayment(formName) {
      // 开启缴费
      this.$refs[formName].validate((valid) => {
        if (valid) {
          musicGroupOpenPay({
            musicGroupId: this.teamid,
            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.$router.push({
              //   path: "/business/resetTeaming",
              //   query: {
              //     status: "PAY",
              //     id: this.$route.query.id,
              //     name: this.$route.query.name,
              //   },
              // });
              // this.team_status = "PAY";
              // this.paymentExpireDate = this.paymentForm.paymentExpireDate;
              // this.getList();
            }
          });
        } else {
          return false;
        }
      });
    },
    applyDate() {
      let self = this;
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          if (self.paymentExpireDate) {
            return (
              time.getTime() >
              new Date(self.paymentExpireDate.replace(/-/g, "/")).getTime()
            );
          } else {
            return false;
          }
        },
      };
    },
    extendTime(isPay) {
      this.isPay = isPay;

      if (isPay) {
        // 点击的延长缴费
        this.extendForm.expireDate = this.paymentExpireDate;
      } else {
        // 点击的延长报名
        this.extendForm.expireDate = this.applyExpireDate;
      }
      this.extendPaymentStatus = true;
    },
    onExtendPayment(formName, isPay) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!isPay) {
            extensionApplyExpire({
              musicGroupId: this.teamid,
              expireDate: this.extendForm.expireDate,
            }).then((res) => {
              if (res.code == 200) {
                this.$message.success("延长报名成功");
                this.extendPaymentStatus = false;
                getTeamBaseInfo({ musicGroupId: this.teamid }).then((res) => {
                  if (res.code == 200) {
                    this.applyExpireDate = res.data.musicGroup.applyExpireDate;
                    this.setBase(res);
                  }
                });
              } else {
                this.$message.error(res.msg);
              }
            });
          } else {
            extensionPayment({
              musicGroupId: this.teamid,
              expireDate: this.extendForm.expireDate,
            }).then((res) => {
              if (res.code == 200) {
                this.$message.success("延长缴费成功");
                this.extendPaymentStatus = false;
                getTeamBaseInfo({ musicGroupId: this.teamid }).then((res) => {
                  if (res.code == 200) {
                    this.paymentExpireDate =
                      res.data.musicGroup.paymentExpireDate;
                  }
                });
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        }
      });
    },
    onCreateQRCode(type) {
      // 生成报名二维码
      let id = this.teamid;
      this.codeStatus = true;
      if (type == "payment") {
        this.codeTitle = "学员报名链接";
        this.qrCodeUrl = vaildStudentUrl() + "/#/login?musicGroupId=" + id;
      } 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 + "&instrument=1";
      }
    },
    gotoStudentList() {
      this.$router.push({
        query: merge(this.$route.query, { tabrouter: 7 }),
      });
      //  this.$router.replace({query:{...this.$route.query,tabrouter:7}})
    },
    setBase(res) {
      this.topFrom.name = res.data.musicGroup.name;
      this.$emit("getName", this.topFrom.name);
      this.topFrom.time = res.data.musicGroup.applyExpireDate;
      this.topFrom.type = res.data.musicGroup.chargeTypeId;
      this.topFrom.startClass = res.data.musicGroup.enrollClasses.split(",");
      this.topFrom.paymentPattern = res.data.musicGroup.paymentPattern;
      this.topFrom.paymentValidStartDate =
        res.data.musicGroup.paymentValidStartDate;
      this.topFrom.paymentValidEndDate =
        res.data.musicGroup.paymentValidEndDate;
      this.topFrom.section = res.data.musicGroup.organId;
      this.topFrom.courseViewType = res.data.musicGroup.courseViewType;
      this.topFrom.school = res.data.musicGroup.cooperationOrganId;
      this.topFrom.teacher = res.data.musicGroup.educationalTeacherId;
      this.topFrom.boss = res.data.musicGroup.teamTeacherId;
      this.topFrom.address = res.data.musicGroup.schoolId;
      this.topFrom.salary = res.data.musicGroup.settlementType;
      this.topFrom.head = res.data.musicGroup.directorUserId
        ? res.data.musicGroup.directorUserId
        : null;
      this.topFrom.isClass = res.data.musicGroup.isClassroomLessons;
      this.topFrom.startTime = res.data.musicGroup.expectStartGroupDate;
      this.topFrom.ownershipType = res.data.musicGroup.ownershipType;
      this.topFrom.repairUserId = res.data.musicGroup.repairUserId
        ? res.data.musicGroup.repairUserId
        : null;
      this.topFrom.feeType = res.data.musicGroup.feeType
        ? res.data.musicGroup.feeType
        : null;
      this.paymentExpireDate = res.data.musicGroup.paymentExpireDate;
      this.applyExpireDate = res.data.musicGroup.applyExpireDate;
      this.topFrom.transactionTeacherId =
        res.data.musicGroup.transactionTeacherId||'';
      localStorage.setItem(`${this.teamid}base`, JSON.stringify(this.topFrom));
    },
    changeType(val) {
      if (val) {
        localStorage.removeItem(`${this.teamid}sound`);
      }
    },
  },
  computed: {
    startClassString() {
      return this.topFrom.startClass
        .map((item) => {
          for (let i in this.classStatus) {
            if (item == this.classStatus[i].value) {
              return this.classStatus[i].label;
            }
          }
          // return  this.classStatus[item]
        })
        .join(",");
    },
    showNext() {
      const teamStatus = this.teamStatus;
      return (
        teamStatus == "newTeam" ||
        teamStatus == "teamDraft" ||
        teamStatus == "teamAudit" ||
        teamStatus == "feeAudit"
      );
    },
  },
};
</script>
<style lang="scss" >
.messageBox-prompt-test {
  .el-message-box__status {
    top: 25% !important;
  }
}
.base-container {
  overflow: auto;
  // display: flex;
  // flex-direction: row;
  // justify-content: flex-start;
  // flex-wrap: nowrap;
  font-size: 14px;
  color: #444;
  // width: fill-available;
  .banseLeft {
    // width: 1050px;
    .head {
      height: 48px;
      line-height: 48px;
      background-color: #edeef0;
      font-size: 14px;
      font-weight: bold;
      color: #444;
      padding: 0 11px;
      margin-bottom: 20px;
    }
    .noMargin.head {
      margin-bottom: 0;
    }
    .num {
      padding: 15px 11px;
    }
    .checkRow {
      min-width: 1200px;
      padding-left: 28px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: nowrap;
      overflow: auto;

      .el-checkbox {
        line-height: 72px;
        width: 120px;
      }
      .inputWrap {
        line-height: 72px;
        font-size: 14px;
        color: #777;
        margin-left: 65px;
        input {
          // border: none;
          // width: 80px;
          // margin-right: 10px;
          // outline: none;
        }
      }
      .inputWrap.rightFirst {
        margin-left: 245px;
      }
      .textWrap {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        font-size: 14px;
        color: #777;
        align-items: center;

        span {
          color: #f97215;
        }
      }
      .selectWrap {
        font-size: 14px;
        padding-top: 5px;
        margin-left: 100px;
        margin-right: 52px;
        .rowSelect {
          .el-input__inner {
            min-height: 69px;
          }
        }
      }

      .chioseList {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        font-size: 14px;
        color: #777;
        margin-left: 64px;
        .chioseItem {
          width: 80px;
          height: 30px;
          border-radius: 15px;
          border: 1px solid #979797;
          margin-right: 10px;
          line-height: 30px;
          text-align: center;
          cursor: pointer;
        }
        .chioseItem.active {
          background-color: #14928a;
          border: 1px solid #14928a;
          color: #fff;
        }
      }
      // &:nth-child(even) {
      //   background-color: #c6cbd4;
      //   input {
      //     background-color: #c6cbd4;
      //   }
      // }
    }
  }
  .btnWrap {
    margin-top: 30px;
  }
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #606266;
  }
  .subTitle {
    // width: 1203px;
    height: 40px;
    line-height: 40px;
    background-color: #fefceb;
    padding: 0 25px;
    box-sizing: border-box;
    font-size: 16px;
    color: #474747;
    margin-bottom: 20px;
  }
  .chioseWrap {
    margin-bottom: 30px;
    display: flex;
    flex-direction: row;
    padding: 0 25px;
    p {
      width: 80px;
      font-size: 14px;
      // margin-right: 30px;
    }
  }

  .classCheckBox {
    margin-right: 10px;
  }
}
</style>
<style scoped lang="scss">
/deep/.el-date-editor {
  width: 180px !important;
}
/deep/.el-checkbox {
  margin-left: 15px !important;
}
/deep/.el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 180px;
}
input[disabled] {
  background-color: #fff;
  border-color: #b3b3b3;
  color: #606266;
}
/deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background-color: rgb(19, 129, 122);
  border-color: rgb(19, 129, 122);
  // -webkit-box-shadow: -1px 0 0 0 rgb (19, 129, 122);
  box-shadow: -1px 0 0 rgb(19, 129, 122);
  color: #fff;
  outline: none;
}
/deep/.el-radio-button__inner {
  &:hover {
    color: rgb(19, 129, 122);
  }
  outline: none;
}
/deep/.el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) {
  -webkit-box-shadow: none;
  box-shadow: none;
}
</style>