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
          >
            <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="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"
            ></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="!topFrom.section || basdisabled"
            filterable
            clearable
          >
            <el-option
              v-for="(item, index) in educationList"
              :key="index"
              :label="item.realName"
              :value="item.userId"
            ></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"
            ></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="招生年级" v-if="basdisabled">
          <el-input
            placeholder="请输入招生年级"
            v-model.trim="startClassString"
            :disabled="basdisabled"
          ></el-input> -->
          <!-- <el-tooltip
            class="item"
            effect="dark"
            :content="startClassString"
            placement="top-start"
          >
            <div style="width: 180px; overflow: hidden">
              {{ startClassString }}
            </div>
          </el-tooltip> -->
        <!-- </el-form-item> -->
        <!-- <el-form-item
          label="招生年级"
          v-else
          prop="startClass"
          :rules="[{ required: true, message: '请选择招生年纪' }]"
        >
          <el-select
            placeholder="起始年级"
            clearable
            multiple
            collapse-tags
            filterable
            v-model.trim="topFrom.startClass"
          >
            <el-option
              v-for="item in classStatus"
              :value="item.value"
              :label="item.label"
              :key="item.value"
            ></el-option>
          </el-select>
        </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"
            ></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(1)" v-if="showNext">下一步</div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getSection,
  getType,
  getCooperation,
  getTeacher,
  getAddress,
  getPayMaster,
  getPayStatus,
  getTeamBaseInfo,
  resetTeamBaseInfo,
  getEmployeeOrgan,
  findUserByRole
} from "@/api/buildTeam";
import { findTechnician } from "@/api/repairManager";
import dayjs from "dayjs";
import {
  queryEmployByOrganId,
  queryByOrganId,
  getSchool,
} from "@/api/systemManage";
import { classStatus } from "@/utils/searchArray";
import store from "@/store";
import numeral from "numeral";
import { formatData } from "@/utils/utils";
import qs from "qs";
import MusicStore from "@/views/resetTeaming/store";
export default {
  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, // 维修技师
      },
      baseInfo: {},
      money: 580,
      orderInfo: {
        marketPrice: 0, // 原价总金额
        referencePrice: 0, // 现价总金额
      }, // 金额列表，金额计算
      sectionList: [], // 分部列表
      typeList: [], // 收费类型列表
      cooperationList: [], // 教学点列表
      teacherList: [], // 获取老师列表
      educationList:[], // 乐团主管
      bossList:[],
      addList: [], // 教学地点列表
      activeTeam: [],
      teamid: "",
      teamStatus: "",
      isInit: false,
      technician: [],
      basdisabled: false,
    };
  },
  created() {},
  mounted() {
    if (this.$route.query.id) {
      this.teamid = this.$route.query.id;
    }
    this.teamStatus = this.$route.query.type;
    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.basdisabled = true;
    } else {
      this.basdisabled = false;
    }
  },
  deactivated() {},
  beforeDestroy() {
    sessionStorage.setItem(`${this.teamid}base`, JSON.stringify(this.topFrom));
  },

  methods: {
    //|| 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;
      this.teamStatus = this.$route.query.type;
      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.basdisabled = true;
      } else {
        this.basdisabled = false;
      }
      if (this.$route.query.id) {
        // 单团修改
        this.teamid = this.$route.query.id;
        let sotrage = JSON.parse(
          sessionStorage.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.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.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;
          if (this.topFrom.section) {
            // 获取员工
             this.getBaseList(this.topFrom.section)
          }
        }
      }
      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,employeeRole:'EDUCATION' })
        this.educationList = ruselt.data
      }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) {},
    gotoNext(num) {
      this.$refs["topinfo"].validate((valid, object) => {
        if (!valid) {
          this.$message.error("请填写建团必要参数");
        } else {
          // 判断一下是否勾选了课程类型而没有输入金额
          // 验证通过
          this.$store.dispatch("topinfo", this.topFrom);
          if (this.teamStatus == "teamDraft") {
            // 获取数据提交

            this.resetSubmit();
          } else {
            // this.resetSubmit();
            this.$emit("chiosetab", num);
          }
        }
      });
    },
    resetSubmit() {
      this.$refs["topinfo"].validate((valid, object) => {
        if (!valid) {
          this.$message.error("请填写必要参数");
        } else {
          let status = null;
          // 1.resetTeam 乐团修改
          // 2.newTeam 新建乐团
          // 3.teamList 跨团修改
          // 4.teamDraft 乐团草稿
          switch (this.teamStatus) {
            case "resetTeam": {
              status = "PROGRESS";
              break;
            }
            case "newTeam": {
              status = null;
              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,
            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,
          };
          obj.musicGroupPaymentEntities = [];
          // 发请求
          resetTeamBaseInfo(obj).then((res) => {
            if (res.code == 200) {
              if (this.teamStatus == "teamDraft") {
                this.$message.success("保存成功");
                // 跳到第二页

                this.$emit("chiosetab", 1);
              } else {
                this.$message.success("修改乐团成功");
                // this.$router.push({ path: '/business/teamDetails', query: { id: this.teamid, name: this.topFrom.name } })
              }
              this.init();
            }
          });
        }
      });
    },
    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();
    },
  },
  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" >
.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 lang="scss" scoped>
/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>