dy-admin-manager/src/views/teacherManager/teacherOperation/components/teacherOperation.vue

<template>
  <div class="m-container">
    <!-- <h2>
      <el-page-header @back="onCancel" :content="'老师' + (pageType == 'create' ? '新增' : '修改')"></el-page-header>
    </h2>-->
    <div class="infoWrap">
      <div class="left">
        <h4>基本信息</h4>
        <el-form :model="topForm" :rules="rules" ref="form">
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="姓名"
                prop="realName"
                :label-width="formLabelWidth"
              >
                <el-input v-model.trim="topForm.realName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="姓名(备注)" :label-width="formLabelWidth">
                <el-input v-model.trim="topForm.memo"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="性别"
                prop="gender"
                :label-width="formLabelWidth"
              >
                <el-select v-model.trim="topForm.gender">
                  <el-option label="男" :value="1"></el-option>
                  <el-option label="女" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出生日期" :label-width="formLabelWidth">
                <el-date-picker
                  v-model.trim="topForm.birthdate"
                  type="date"
                  :picker-options="{
                    firstDayOfWeek: 1
                  }"
                  value-format="yyyy-MM-dd"
                  placeholder="出生日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="入职日期"
                prop="entryDate"
                :label-width="formLabelWidth"
              >
                <el-date-picker
                  v-model.trim="topForm.entryDate"
                  type="date"
                  :picker-options="pickerOptions2"
                  value-format="yyyy-MM-dd"
                  placeholder="入职日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <!--               <template #label>
                  转正日期
                  <el-popover placement="top" width="280" trigger="hover">

                    <i
                      slot="reference"
                      class="el-icon-warning-outline"
                      style="font-size: 14px"
                    />
                    <p
                      style="color: red; line-height: 1.3; margin-bottom: 10px"
                    >
                      入职日期之前课酬按100%计算；<br />
                      入职日期当天及以后课酬按80%计算；<br />
                      转正日期当天及以后课酬按100%计算；<br />
                      若入职日期和转正日期设置为同一天，则日期当天及以后课酬按100%计算；
                    </p>
                  </el-popover>
                </template> <template #label>
                  入职日期
                  <el-popover placement="top" width="280" trigger="hover">

                    <i
                      slot="reference"
                      class="el-icon-warning-outline"
                      style="font-size: 14px"
                    />
                    <p
                      style="color: red; line-height: 1.3; margin-bottom: 10px"
                    >
                      入职日期之前课酬按100%计算；<br />
                      入职日期当天及以后课酬按80%计算；<br />
                      转正日期当天及以后课酬按100%计算；<br />
                      若入职日期和转正日期设置为同一天，则日期当天及以后课酬按100%计算；
                    </p>
                  </el-popover>
                </template>-->
            <el-col :span="12">
              <el-form-item label="转正日期" :label-width="formLabelWidth">
                <el-date-picker
                  v-model="topForm.formalStaffDate"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择转正日期"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-alert class="alert" :closable="false" type="info">
              <template #title>
                <div>
                  <p style="font-weight:600">老师课酬结算规则：</p>
                  <p>1.入职日期之前的课程，按老师课酬的100%结算</p>
                  <p>
                    2.入职日期当天及以后的课程，按老师课酬*试用期课酬折算值结算
                  </p>
                  <p>3.转正日期当天及以后的课程，按老师课酬的100%结算</p>
                  <p>
                    4.入职日期和转正日期设置为同一天，则日期当天及以后的课程按老师课酬的100%结算
                  </p>
                </div>
              </template>
            </el-alert>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="所属分部"
                prop="organId"
                :label-width="formLabelWidth"
              >
                <el-select
                  v-model.trim="topForm.organId"
                  filterable
                  clearable
                  placeholder="所属分部"
                  @change="switchOrgan"
                >
                  <el-option
                    v-for="item in branchList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="流动范围" :label-width="formLabelWidth">
                <select-all
                  v-model.trim="topForm.flowOrganRange"
                  filterable
                  clearable
                  multiple
                  placeholder="流动范围"
                >
                  <el-option
                    v-for="item in branchList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value.toString()"
                  ></el-option>
                </select-all>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="员工状态"
                prop="isProbationPeriod"
                :label-width="formLabelWidth"
              >
                <el-select
                  v-model.trim="topForm.isProbationPeriod"
                  clearable
                  filterable
                  placeholder="员工状态"
                >
                  <el-option
                    v-for="item in ProbationPeriodList"
                    :key="item.value"
                    :label="item.label"
                    :value="Number(item.value)"
                  ></el-option>
                  <!-- <el-option label="正式" :value="0"></el-option>
                  <el-option label="试用" :value="1"></el-option>
                  <el-option label="实习" :value="3"></el-option> -->
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="pageType == 'update'">
              <el-form-item label="教学点" :label-width="formLabelWidth">
                <el-input disabled v-model.trim="teacherSchools"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="工作类型"
                prop="jobNature"
                :label-width="formLabelWidth"
              >
                <el-select
                  v-model.trim="topForm.jobNature"
                  placeholder="工作类型"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in jobNature"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12" class="diSpan">
              <el-tooltip placement="top" popper-class="mTooltip">
                <div slot="content">
                  「是」此老师可作为网管课老师；
                  <br />「否」此老师不可作为网管课老师；
                </div>
                <!-- <img :src="imageIcon" class="micon el-tooltip" style="width:8px height:8px" alt /> -->
                <i
                  class="el-icon-question micon el-tooltip"
                  style="font-size: 18px; color: #f56c6c"
                ></i>
              </el-tooltip>

              <el-form-item label="开放陪练" label-width="90px" class="course">
                <el-select
                  v-model.trim="topForm.isSupportExtraPracticeLesson"
                  clearable
                  filterable
                  placeholder="开放陪练"
                >
                  <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="老师简介" :label-width="formLabelWidth">
                <el-input
                  type="textarea"
                  v-model.trim="topForm.introduction"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <h4>资料学历</h4>
          <el-row>
            <el-col :span="12">
              <!-- :rules="[{ required: true, message: '手机号不能为空',trigger: 'blur'},{pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号',trigger: 'blur' }]" -->
              <el-form-item
                label="手机号"
                prop="phone"
                :label-width="formLabelWidth"
              >
                <el-input v-model.trim.number="topForm.phone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="毕业学校" :label-width="formLabelWidth">
                <el-input v-model.trim="topForm.graduateSchool"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="电子邮箱" :label-width="formLabelWidth">
                <el-input v-model.trim="topForm.email"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最高学历" :label-width="formLabelWidth">
                <!-- <el-input v-model.trim="topForm.educationBackground"></el-input> -->
                <el-select
                  v-model.trim="topForm.educationBackground"
                  clearable
                  filterable
                  placeholder="最高学历"
                >
                  <el-option label="初中" value="初中"></el-option>
                  <el-option label="高中" value="高中"></el-option>
                  <el-option label="大专" value="大专"></el-option>
                  <el-option label="本科" value="本科"></el-option>
                  <el-option label="硕士" value="硕士"></el-option>
                  <el-option label="博士" value="博士"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="专业技能"
                :rules="[{ required: true }]"
                :label-width="formLabelWidth"
              >
                <select-all
                  :disabled="!topForm.organId"
                  v-model="subjectIds"
                  clearable
                  placeholder="专业技能"
                  multiple
                >
                  <el-option
                    v-for="item in subjectList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </select-all>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="职称" :label-width="formLabelWidth">
                <el-input v-model.trim="topForm.technicalTitles"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="证件类型" :label-width="formLabelWidth">
                <el-input v-model.trim="topForm.certificateType"></el-input>
                <!-- <el-select v-model.trim="topForm.certificateType" placeholder="证件类型">
                            <el-option label="身份证" value="身份证"></el-option>
                            <el-option label="护照" value="护照"></el-option>
                            <el-option label="港澳通行证" value="港澳通行证"></el-option>
                </el-select>-->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件号码" :label-width="formLabelWidth">
                <el-input v-model.trim="topForm.certificateNum"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="离职日期" :label-width="formLabelWidth">
                <el-date-picker
                  v-model="topForm.demissionDate"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择离职日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label :label-width="formLabelWidth">
                <!-- <el-input v-model.trim="topForm.certificateType"></el-input> -->
                <el-checkbox
                  v-model.trim="topForm.isSupportCourseScheduleRewardsRules"
                  >是否适用阶梯奖励</el-checkbox
                >
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row>
            <el-col :span="24">
              <p style="color: red; line-height: 1.3; margin-bottom: 10px;">入职日期之前课酬按100%计算；<br />
                入职日期当天及以后课酬按80%计算；<br />
                转正日期当天及以后课酬按100%计算；<br />
                若入职日期和转正日期设置为同一天，则日期当天及以后课酬按100%计算；</p>
            </el-col>
          </el-row> -->
          <el-form-item>
            <el-button @click="onSubmit('form')" type="primary"
              >立即{{ pageType == "create" ? "创建" : "修改" }}</el-button
            >
            <el-button @click="onReSet('form')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="right">
        <div class="teacherIcon">
          <image-cropper
            ref="imgCropper"
            :options="cropperOptions"
            :imgSize="2"
            showSize
            :imageUrl="topForm.avatar ? topForm.avatar : avatar1"
            @crop-upload-success="handleSuccess"
          />
          <!-- <img v-if="topForm.avatar" key="avatar" :src="topForm.avatar" alt />
          <img v-else key="avatar1" src="@/assets/images/base/woman.png" alt /> -->
        </div>
        <!-- <el-upload
          class="ivu-upload"
          :show-upload-list="false"
          :show-file-list="false"
          :headers="headers"
          :on-success="handleSuccess"
          accept=".jpg, .jpeg, .png, .gif"
          :max-size="2048"
          multiple
          action="/api-web/uploadFile"
        >  -->

        <!-- <el-button icon="ios-cloud-upload-outline" @click="$refs.imgCropper.$refs.upload.submit">修改头像</el-button> -->
        <!--
               v-if="pageType != 'create'"
            <el-button
            icon="ios-cloud-upload-outline"
            v-if="0. == 'create'"
            v-permission="{
              child: 'createTeacher/uploadFile',
              parent: '/teacherAdd/baseInfo',
            }"
            >新增头像</el-button
          > -->
        <!-- </el-upload> -->
        <p class="iconP">
          推荐图片尺寸：200x200；
          <br />支持的格式：jpg，jpeg，png，gif；
          <br />*头像修改后，需要点击页面 <br />下方「立即修改」保存生效；
        </p>
      </div>
    </div>
  </div>
</template>
<script>
// import { queryByOrganId } from '@/api/systemManage'
import { getToken } from "@/utils/auth";
import { branchQueryPage, subjectListTree } from "@/api/specialSetting";
import { teacherAdd, teacherUpdate, teacherGet } from "@/api/teacherManager";
import { getSubject } from "@/api/buildTeam";
import store from "@/store";
import { permission } from "@/utils/directivePage";
import { jobNature, ProbationPeriodList } from "@/utils/searchArray";
import { isvalidPhone } from "@/utils/validate";
import ImageCropper from "@/components/ImageCropper";
import avatar1 from "@/assets/images/base/woman.png";
import dayjs from "dayjs";
let validPhone = (rule, value, callback) => {
  if (!value) {
    callback(new Error("请输入电话号码"));
  } else if (!isvalidPhone(value)) {
    callback(new Error("请输入正确的11位手机号码"));
  } else {
    callback();
  }
};

export default {
  name: "teacherOperation",
  data() {
    const that = this;
    return {
      headers: {
        Authorization: getToken()
      },
      avatar1,
      jobNature: jobNature,
      ProbationPeriodList: ProbationPeriodList,
      organId: null,
      pageType: this.$route.query.type,
      teacherId: this.$route.query.teacherId,
      formLabelWidth: "120px",
      branchList: [], // 分部列表
      subjectList: [], //声部列表 // 多选声部列表
      teacherSchools: null,
      topForm: {
        realName: null,
        gender: null,
        birthdate: null,
        entryDate: null,
        jobNature: null,
        organId: null,
        flowOrganRange: null,
        introduction: null,
        phone: null,
        avatar: null,
        graduateSchool: null,
        email: null,
        educationBackground: null,
        demissionDate: null,
        formalStaffDate: null,
        isProbationPeriod: null,
        technicalTitles: null,
        certificateType: null,
        certificateNum: null,
        isSupportCourseScheduleRewardsRules: true,
        isSupportExtraPracticeLesson: null,
        memo: null
      },
      subjectIds: [],
      tenantId: null,
      // imageIcon: require("@/assets/images/base/warning.png"),
      rules: {
        realName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        entryDate: [
          { required: true, message: "请选择入职日期", trigger: "change" }
        ],
        jobNature: [
          { required: true, message: "请选择工作类型", trigger: "change" }
        ],
        isProbationPeriod: [
          { required: true, message: "请选择员工状态", trigger: "change" }
        ],
        organId: [
          { required: true, message: "请选择所属分部", trigger: "change" }
        ],
        phone: [{ required: true, validator: validPhone, trigger: "blur" }],
        subjectIds: [
          {
            required: true,
            type: "array",
            message: "请选择专业技能",
            trigger: "change"
          }
        ],
        isAvatar: null
      },
      pickerOptions2: {
        firstDayOfWeek: 1,
        disabledDate(time) {
          let date = new Date(
            dayjs(that.topForm.formalStaffDate).format("YYYY-MM-DD") +
              " 00:00:00"
          );
          return that.topForm.formalStaffDate
            ? time.getTime() > date.getTime()
            : false;
        }
      },
      pickerOptions: {
        firstDayOfWeek: 1,
        disabledDate(time) {
          let date = new Date(
            dayjs(that.topForm.entryDate).format("YYYY-MM-DD") + " 00:00:00"
          );
          return that.topForm.entryDate
            ? date.getTime() > time.getTime()
            : false;
        }
      },
      cropperOptions: {
        autoCrop: true, //是否默认生成截图框
        autoCropWidth: 200, //默认生成截图框宽度
        autoCropHeight: 200, //默认生成截图框高度
        fixedBox: true, //是否固定截图框大小 不允许改变
        previewsCircle: false, //预览图是否是圆形
        title: "老师头像" //模态框上显示的标题
      }
    };
  },
  components: {
    ImageCropper
  },
  created() {},
  mounted() {
    this.pageType = this.$route.query.type;
    this.teacherId = this.$route.query.teacherId;
    this.__init();
  },
  // activated() {
  //   this.pageType = this.$route.query.type;
  //   this.teacherId = this.$route.query.teacherId;
  //   this.__init();
  // },
  methods: {
    __init() {
      if (this.$route.query.search) {
        this.Fsearch = this.$route.query.search;
      }
      if (this.$route.query.rules) {
        this.Frules = this.$route.query.rules;
      }
      // isAvatar
      branchQueryPage({
        // 获取分部
        delFlag: 0,
        rows: 9999
      }).then(res => {
        if (res.code == 200 && res.data && res.data.rows) {
          this.branchList = [];
          res.data.rows.forEach(item => {
            this.branchList.push({
              label: item.name,
              value: item.id
            });
          });
        }
      });

      if (this.pageType == "update") {
        teacherGet({ teacherId: this.teacherId }).then(res => {
          if (res.code == 200) {
            let result = res.data;
            this.topForm = {
              realName: result.realName,
              gender: result.gender,
              birthdate: result.birthdate,
              entryDate: result.entryDate,
              jobNature: result.jobNature,
              organId: result.teacherOrganId ? result.teacherOrganId : null,
              flowOrganRange: result.flowOrganRangeId
                ? result.flowOrganRangeId.split(",")
                : null,
              introduction: result.introduction,
              phone: result.phone,
              avatar: result.avatar,
              graduateSchool: result.graduateSchool,
              email: result.email,
              educationBackground: result.educationBackground,
              demissionDate: result.demissionDate,
              formalStaffDate: result.formalStaffDate,
              technicalTitles: result.technicalTitles,
              certificateType: result.certificateType,
              certificateNum: result.certificateNum,
              isProbationPeriod: result.isProbationPeriod,
              isSupportCourseScheduleRewardsRules:
                result.isSupportCourseScheduleRewardsRules,
              isSupportExtraPracticeLesson: result.isSupportExtraPracticeLesson,
              memo: result.memo,
              postDeptIds: result.postDeptIds,
              postIds: result.postIds,
              deptId: result.deptId,
              deptIds: result.deptIds
            };
            let sn = [];
            result.teacherSchools.forEach(item => {
              sn.push(item.name);
            });
            if (result.subjectId) {
              let arr = result.subjectId.split(",");
              this.subjectIds = arr.map(item => {
                return parseInt(item);
              });
            }
            this.teacherSchools = this.joinArray(sn, ","); // 教学点
            this.switchOrgan();
          }
        });
      }
    },
    // pickerOptions() {
    //   return {
    //     disabledDate(time) {
    //       let date = new Date(this.topForm.entryDate)
    //       return time.getTime() > date.now();
    //     }
    //   }
    // },
    joinArray(value, type) {
      if (!type) {
        type = " ";
      }
      if (typeof value == "object" && value != null) {
        return value.join(type);
      } else {
        return value;
      }
    },
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.subjectIds.length <= 0) {
            this.$message.error("请选择专业技能");
            return;
          }
          if (this.topForm.flowOrganRange instanceof Array) {
            this.topForm.flowOrganRange = this.topForm.flowOrganRange
              ? this.topForm.flowOrganRange.join(",")
              : null;
          }

          this.subjectId = this.subjectIds.join(",");
          this.topForm.subjectId = this.subjectId;
          if (this.pageType == "update") {
            this.topForm.id = this.teacherId;

            teacherUpdate(this.topForm).then(res => {
              if (res.code == 200) {
                // this.$emit('onTeacher')
                this.$store.dispatch("delVisitedViews", this.$route);
                this.$router.push({
                  path: "/teacherManager/teacherList",
                  query: { rules: this.Frules, search: this.Fsearch }
                });
              }
              this.messageTips("修改", res);
            });
          } else if (this.pageType == "create") {
            if (this.topForm.id) {
              delete this.topForm.id;
            }
            teacherAdd(this.topForm).then(res => {
              if (res.code == 200) {
                // 权限判断，是否有课酬设置
                if (permission("/teacherAdd/salarySeting")) {
                  this.$emit("onTeacher", res.data);
                } else {
                  this.$store.dispatch("delVisitedViews", this.$route);
                  this.$router.push({
                    path: "/teacherManager/teacherList",
                    query: { rules: this.Frules, search: this.Fsearch }
                  });
                }
              }
              this.messageTips("添加", res);
            });
          }
        } else {
          this.$nextTick(() => {
            let isError = document.getElementsByClassName("is-error");
            isError[0].scrollIntoView({
              // 滚动到指定节点
              // 值有start,center,end，nearest，当前显示在视图区域中间
              block: "center",
              // 值有auto、instant,smooth，缓动动画（当前是慢速的）
              behavior: "smooth"
            });
          });
          return false;
        }
      });
    },
    messageTips(title, res) {
      if (res.code == 200) {
        this.$message.success(title + "成功");
      } else {
        this.topForm.subjectIds = this.topForm.subjectIds.split(",");
        this.$message.error(res.msg);
      }
    },
    onReSet(formName) {
      this.topForm = {
        realName: null,
        gender: null,
        birthdate: null,
        entryDate: null,
        jobNature: null,
        organId: null,
        flowOrganRange: null,
        introduction: null,
        phone: null,
        avatar: null,
        graduateSchool: null,
        email: null,
        educationBackground: null,
        demissionDate: null,
        formalStaffDate: null,
        subjectIds: [],
        technicalTitles: null,
        certificateType: null,
        certificateNum: null,
        jobType: "ADVISER",
        memo: null
      };
      this.subjectIds = [];
      this.$refs[formName].resetFields();
    },
    onCancel() {
      this.$store.dispatch("delVisitedViews", this.$route);
      this.$router.push({
        path: "/teacherManager/teacherList",
        query: { rules: this.Frules, search: this.Fsearch }
      });
    },
    handleSuccess(res) {
      // 获取富文本组件实例
      // let quill = this.editor
      // 如果上传成功
      // if (res.code == 200) {
      console.log(res);
      // 获取光标所在位置
      this.topForm.avatar = res.data.url;
      // }
    },
    // 选择分部
    switchOrgan() {
      if (this.topForm.organId == 43) {
        this.tenantId = 2;
      } else {
        this.tenantId = 1;
      }
      getSubject({ tenantId: this.tenantId }).then(res => {
        if (res.code == 200) {
          this.subjectList = res.data;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow {
  border-top-color: #ecf0f0;
  color: #666666;
}
.atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow:after {
  border-top-color: #ecf0f0;
  color: #666666;
}
.atooltip {
  background: #ecf0f0 !important;
  color: #666666;
}
.diSpan {
  position: relative;
  .micon {
    position: absolute;
    top: 12px;
    left: 64px;
  }
}
.course {
  ::v-deep .el-form-item__label {
    text-align: left !important;
  }
}

// ::v-deep .el-tooltip__popper.is-dark {
//   background-color: #ECF0F0!important;
//   color: #666!important;
// }

::v-deep .el-date-editor.el-input,
::v-deep .el-select {
  width: 100% !important;
}
// .el-row {
//   margin-top: 40px;
// }
// .el-col {
//   display: flex;
//   align-items: center;
//   margin-bottom: 20px;
//   justify-content: flex-end;
//   margin-right: 50%;
// }
// .el-input-group {
//   width: 200px;
//   margin: 0 20px;
// }
// ::v-deep .el-tree-node__content {
//   height: 40px !important;
// }
::v-deep .el-form-item__content {
  font-size: 14px !important;
  margin-right: 5%;
}
.infoWrap {
  margin-top: 20px;

  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  .left {
    max-width: 1000px;
    width: 100%;
    h4 {
      margin-bottom: 20px;
    }
  }
  .right {
    margin-left: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    // .teacherIcon {
    //   width: 150px;
    //   height: 150px;
    //   // border: 1px solid #444;
    //   border-radius: 50%;
    //   overflow: hidden;
    //   margin-bottom: 20px;
    //   img {
    //     width: 150px;
    //     height: 150px;
    //     object-fit: cover;
    //   }
    // }
  }
  .iconP {
    margin-top: 10px;
    font-size: 14px;
    color: red;
    width: 260px;
    text-align: center;
  }
  .alert {
    margin: 0 0 20px 120px;
    width: 855px;
  }
}
</style>