dy-admin-manager/src/views/teacherManager/teacherDetail/components/teacherInfo.vue

<template>
  <div class="teacherInfo">
    <div class="infoWrap">
      <div class="left">
        <h4>基本信息</h4>
        <el-form :model="topForm" >
          <el-row>
            <el-col :span="12">
              <el-form-item label="老师编号" :label-width="formLabelWidth">
                <el-input disabled v-model="topForm.id"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" :label-width="formLabelWidth">
                <el-input disabled v-model="topForm.gender"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="出生日期" :label-width="formLabelWidth">
                <el-input disabled v-model="topForm.birthdate"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工作类别" :label-width="formLabelWidth">
                <el-input disabled v-model="topForm.jobNature "></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="入职日期" :label-width="formLabelWidth">
                <el-input disabled v-model="topForm.entryDate"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="教学点" :label-width="formLabelWidth">
                <el-input disabled v-model="topForm.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 disabled v-model="topForm.organName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="流动范围" :label-width="formLabelWidth">
                <el-input disabled v-model="topForm.flowOrganRange"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="老师简介" :label-width="formLabelWidth">
                <el-input disabled type='textarea'
                          v-model="topForm.introduction"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          
          <h4>资料学历</h4>
          <el-row>
            <el-col :span="12">
              <el-form-item label="手机号" :label-width="formLabelWidth">
                <el-input disabled v-model="topForm.phone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="毕业学校" :label-width="formLabelWidth">
                <el-input disabled 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 disabled v-model="topForm.email"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最高学历" :label-width="formLabelWidth">
                <el-input disabled v-model="topForm.educationBackground"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="专业技能" :label-width="formLabelWidth">
                <el-input disabled v-model="topForm.subjectName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="职称" :label-width="formLabelWidth">
                <el-input disabled 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 disabled v-model="topForm.certificateType"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件号码" :label-width="formLabelWidth">
                <el-input disabled v-model="topForm.certificateNum"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="right">
        <div class="teacherIcon">
          <img v-if="topForm.avatar" :src="topForm.avatar"
               alt="">
          <img v-else src="@/assets/images/base/woman.png"
               alt="">
        </div>

      </div>
    </div>

  </div>
</template>
<script>
import { teacherGet } from '@/api/teacherManager'
export default {
  data () {
    return {
      formLabelWidth: '80px',
      teacherId: this.$route.query.teacherId,
      topForm: {}
    }
  },
  mounted() {
    this.teacherGet()
  },
  methods: {
    teacherGet() {
      teacherGet({ teacherId: this.teacherId }).then(res => {
        if(res.code == 200) {
          let tempData = res.data
          tempData.subjectName = this.joinArray(tempData.subjectName)
          tempData.teacherSchools = this.joinArray(tempData.teacherSchools) // 教学点
          tempData.entryDate = this.formatTimer(tempData.entryDate)
          tempData.jobNature = this.jobNature(tempData.jobNature)
          tempData.birthdate = this.formatTimer(tempData.birthdate)
          tempData.gender = tempData.birthdate ? '男' : '女'
          this.topForm = res.data
        }
      })
    },
    joinArray(value, type) {
      if (!type) {
          type = ' '
      }
      if (typeof value == 'object' && value != null) {
          return value.join(type)
      } else {
          return value
      }
    },
    formatTimer(value) {
      if (value) {
          return value.split(' ')[0]
      } else {
          return value
      }
    },
    jobNature(value) {
      let template = {
        PART_TIME: "兼职",
        FULL_TIME: "全职",
        TEMPORARY: "零时工"
      }
      return template[value]
    }
  }
}
</script>
<style lang="scss" scoped>
.teacherInfo {
  .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;
        }
      }
    }
  }
}
/deep/.el-form-item {
  width: 100%;
}
/deep/.el-date-editor.el-input, /deep/.el-select  {
    width: 100% !important;
}
/deep/.el-form-item__content {
    font-size: 14px !important;
    margin-right: 5%;
}
</style>