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="topForm.realName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别"
                            prop="gender"
                            :label-width="formLabelWidth">
                <el-select v-model="topForm.gender">
                  <el-option label='男'
                             :value='1'></el-option>
                  <el-option label='女'
                             :value='0'></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-date-picker v-model="topForm.birthdate"
                                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="entryDate"
                            :label-width="formLabelWidth">
                <el-date-picker v-model="topForm.entryDate"
                                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="jobNature"
                            :label-width="formLabelWidth">
                <el-select v-model="topForm.jobNature"
                           placeholder="工作类型">
                  <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">
              <el-form-item label="所属分部"
                            prop="organId"
                            :label-width="formLabelWidth">
                <el-select v-model="topForm.organId"
                           placeholder="所属分部">
                  <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-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="流动范围"
                            :label-width="formLabelWidth">
                <el-select v-model="topForm.flowOrganRange"
                           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-col :span="12">
              <el-form-item label="人事状态"
                            prop="isProbationPeriod"
                            :label-width="formLabelWidth">
                <el-select v-model="topForm.isProbationPeriod"
                           placeholder="人事状态">
                  <el-option label="正式"
                             :value="1"></el-option>
                  <el-option label="临时"
                             :value="0"></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="topForm.introduction"></el-input>
              </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="teacherSchools"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <h4>资料学历</h4>
          <el-row>
            <el-col :span="12">
              <el-form-item label="手机号"
                            prop="phone"
                            :label-width="formLabelWidth">
                <el-input v-model.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="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="topForm.email"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最高学历"
                            :label-width="formLabelWidth">
                <!-- <el-input v-model="topForm.educationBackground"></el-input> -->
                <el-select v-model="topForm.educationBackground"
                           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="专业技能"
                            prop="subjectIds"
                            :label-width="formLabelWidth">
                <el-select multiple
                           v-model="topForm.subjectIds"
                           placeholder="专业技能">
                  <el-option-group v-for="group in subjectList"
                                   :key="group.label"
                                   :label="group.label">
                    <el-option v-for="item in group.options"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value.toString()">
                    </el-option>
                  </el-option-group>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="职称"
                            :label-width="formLabelWidth">
                <el-input v-model="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="topForm.certificateType"></el-input>
                <!-- <el-select v-model="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="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="topForm.certificateType"></el-input> -->
                <el-checkbox v-model="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>
      </div>
    </div>
  </div>
</template>
<script>
// import { queryByOrganId } from '@/api/systemManage'
import { branchQueryPage, subjectListTree } from '@/api/specialSetting'
import { teacherAdd, teacherUpdate, teacherGet } from '@/api/teacherManager'
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: 'adminManager',
  data () {
    return {
      jobNature: jobNature,
      organId: store.getters.organ,
      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: store.getters.organ,
        flowOrganRange: null,
        introduction: null,
        phone: null,
        avatar: null,
        graduateSchool: null,
        email: null,
        educationBackground: null,
        subjectIds: [],
        isProbationPeriod: null,
        technicalTitles: null,
        certificateType: null,
        certificateNum: null,
        isSupportCourseScheduleRewardsRules: true
      },
      rules: {
        realName: [{ required: true, message: '请输入姓名', trigger: 'blur' },
        { min: 2, max: 10, message: '请输入 2 到 10 个字符', 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' }]
      }
    }
  },
  mounted () {
    this.__init()
  },
  methods: {
    __init () {
      branchQueryPage({ // 获取分部
        delFlag: 0,
        rows: 9999
      }).then(res => {
        if (res.code == 200 && res.data && res.data.rows) {
          res.data.rows.forEach(item => {
            this.branchList.push({
              label: item.name,
              value: item.id
            })
          })
        }
      })
      subjectListTree({ // 声部
        delFlag: 0,
        rows: 9999
      }).then(res => {
        let result = res.data
        if (res.code == 200) {
          let tempArray = []
          result.rows.forEach((item, index) => {
            let subject = []
            item.subjects.forEach(s => {
              subject.push({
                value: s.id,
                label: s.name
              })
            })

            tempArray[index] = {
              label: item.name,
              options: subject
            }
          })
          this.subjectList = tempArray
        }
      })

      if (this.pageType == 'update') {
        teacherGet({ teacherId: this.teacherId }).then(res => {
          let result = res.data
          this.topForm = {
            realName: result.realName,
            gender: result.gender,
            birthdate: result.birthdate,
            entryDate: result.entryDate,
            jobNature: result.jobNature,
            organId: result.organId,
            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,
            subjectIds: result.subjectId ? result.subjectId.split(',') : null,
            technicalTitles: result.technicalTitles,
            certificateType: result.certificateType,
            certificateNum: result.certificateNum,
            isProbationPeriod: result.isProbationPeriod,
            isSupportCourseScheduleRewardsRules: result.isSupportCourseScheduleRewardsRules
          }
          this.teacherSchools = result.teacherSchools.length > 0 ? result.teacherSchools.join(',') : ''
        })
      }
    },
    onSubmit (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.topForm.flowOrganRange = this.topForm.flowOrganRange.join(',')
          this.topForm.subjectId = this.topForm.subjectIds.join(',')
          if (this.pageType == 'update') {
            this.topForm.id = this.teacherId
            teacherUpdate(this.topForm).then(res => {
              if (res.code == 200) {
                // this.$emit('onTeacher')
                this.$router.push('/business/teacherList')
              }
              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.$router.push('/business/teacherList')
                } else {
                  this.$emit('onTeacher', res.data)
                }
                
              }
              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: store.getters.organ,
        flowOrganRange: null,
        introduction: null,
        phone: null,
        avatar: null,
        graduateSchool: null,
        email: null,
        educationBackground: null,
        subjectIds: [],
        technicalTitles: null,
        certificateType: null,
        certificateNum: null,
        jobType: 'ADVISER'
      }
      this.$refs[formName].resetFields()
    },
    onCancel () {
      this.$router.push('/business/teacherList')
    }
  }
}
</script>
<style lang="scss" scoped>
.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;
    .teacherIcon {
      width: 150px;
      height: 150px;
      // border: 1px solid #444;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 150px;
        height: 150px;
      }
    }
  }
}
</style>