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"
                                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"
                                value-format="yyyy-MM-dd"
                                placeholder="入职日期"></el-date-picker>
              </el-form-item>
            </el-col>
            <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-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">
                <el-select 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>
                </el-select>
              </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 label="正式"
                             :value="1"></el-option>
                  <el-option label="临时"
                             :value="0"></el-option>
                  <el-option label="离职"
                             :value="2"></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="老师简介"
                            :label-width="formLabelWidth">
                <el-input type="textarea"
                          v-model.trim="topForm.introduction"></el-input>
              </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>
          <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">
                <el-select :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>

                </el-select>
              </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-input v-model.trim="topForm.certificateType"></el-input> -->
                <el-checkbox v-model.trim="topForm.isSupportCourseScheduleRewardsRules">适用VIP分部活动</el-checkbox>
              </el-form-item>
            </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">
          <img v-if="topForm.avatar"
               key="avatar"
               :src="topForm.avatar"
               alt />
          <img v-else
               key="avatar"
               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"
                   :max-size="2048"
                   multiple
                   action="/api-web/uploadFile">
          <el-button icon="ios-cloud-upload-outline"
                     v-if="pageType != 'create'"
                     v-permission="{child: 'resetTeacher/uploadFile', parent: '/teacherUpdate/baseInfo'}">修改头像</el-button>
          <el-button icon="ios-cloud-upload-outline"
                     v-if="pageType == 'create'"
                     v-permission="{child: 'createTeacher/uploadFile', parent: '/teacherAdd/baseInfo'}">新增头像</el-button>
        </el-upload>
        <p class="iconP">
          推荐图片尺寸：200x200；
          <br />支持的格式：jpg，jpeg，png；
          <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 } from "@/utils/searchArray";
import { isvalidPhone } from "@/utils/validate";
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 () {
    return {
      headers: {
        Authorization: getToken()
      },
      jobNature: jobNature,
      organId: null,
      pageType: this.$route.query.type,
      teacherId: this.$route.query.teacherId,
      formLabelWidth: "80px",
      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,

        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
      }
    };
  },
  created () { },
  mounted () {
    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,
              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,

              technicalTitles: result.technicalTitles,
              certificateType: result.certificateType,
              certificateNum: result.certificateNum,
              isProbationPeriod: result.isProbationPeriod,
              isSupportCourseScheduleRewardsRules:
                result.isSupportCourseScheduleRewardsRules,
              isSupportExtraPracticeLesson: result.isSupportExtraPracticeLesson,
              memo: result.memo
            };
            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();
          }
        });
      }
    },
    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.$router.push({
                  path: "/business/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.$router.push({
                    path: "/business/teacherList",
                    query: { rules: this.Frules, search: this.Fsearch }
                  });
                }
              }
              this.messageTips("添加", res);
            });
          }
        } else {
          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,
        subjectIds: [],
        technicalTitles: null,
        certificateType: null,
        certificateNum: null,
        jobType: "ADVISER",
        memo
      };
      this.$refs[formName].resetFields();
    },
    onCancel () {
      this.$router.push({
        path: "/business/teacherList",
        query: { rules: this.Frules, search: this.Fsearch }
      });
    },
    handleSuccess (res) {
      // 获取富文本组件实例
      // let quill = this.editor
      // 如果上传成功
      if (res.code == 200) {
        // 获取光标所在位置
        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 {
  /deep/.el-form-item__label {
    text-align: left !important;
  }
}

// /deep/.el-tooltip__popper.is-dark {
//   background-color: #ECF0F0!important;
//   color: #666!important;
// }
.el-button--primary {
  background: #14928a;
  border-color: #14928a;
  color: #fff;
  &:hover,
  &:active,
  &:focus {
    background: #14928a;
    border-color: #14928a;
    color: #fff;
  }
}
/deep/.el-date-editor.el-input,
/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;
// }
// /deep/.el-tree-node__content {
//   height: 40px !important;
// }
/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;
  }
}
</style>