cmc-oa/oa-ui/src/views/oa/staff/info.vue

<!--
 * @Author: ysh
 * @Date: 2024-03-22 14:50:46
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-05-20 15:17:11
-->
<template>
  <div class="bg" v-loading="loading">
    <div class="header">
      <div class="back">
        <el-button type="primary" plain @click="goBack">返回</el-button>
      </div>
      <div class="title">
        {{ '【' + this.form.nickName + '】' }}详细信息
      </div>
    </div>
    <el-row class="app-container">
      <el-col :span="6" class="userInfo">
        <div class="text-center">
          <div class="avatar">
            <img :src="avatar" class="user-avatar" />
          </div>
          <div class="user-name">{{ this.form.nickName }}</div>
          <div class="user-sex">
            {{ getAgeByIdCard(this.form.idCard) + '岁' }} {{ this.form.sex == '0' ? ' 男' : ' 女' }}
            <el-tag :type="form.status == '在职' ? 'success' : 'warning'">{{ form.status }}</el-tag>
          </div>
        </div>
        <div class="info-item">
          <div class="item-label">
            <svg-icon icon-class="dept" class="info-icon"></svg-icon>
            <div class="item-label">部门：</div>
          </div>
          <div>{{ postData }}</div>
        </div>
        <div class="info-item">
          <div class="item-label">
            <svg-icon icon-class="phone" class="info-icon"></svg-icon>
            <div class="item-label">联系电话：</div>
          </div>
          <div class="item-value">{{ form.phonenumber }}</div>
        </div>
        <div class="info-item">
          <div class="item-label">
            <svg-icon icon-class="postSalary" class="info-icon"></svg-icon>
            <div class="item-label">薪资岗级：</div>
          </div>
          <div>
            {{ selectDictLabel(dict.type.sys_user_postlevel, form.postLevel) +
          selectDictLabel(dict.type.sys_user_salarylevel, form.salaryLevel) }}
          </div>
        </div>
        <div class="info-item">
          <div class="item-label">
            <svg-icon icon-class="date" class="info-icon"></svg-icon>
            <div class="item-label">入职时间：</div>
          </div>
          <div>{{ parseTime(form.entryDate, '{y}-{m}') }}</div>
        </div>
        <div class="info-item" v-for="item in userInfo">
          <div class="item-label">
            <svg-icon :icon-class="item.icon" class="info-icon"></svg-icon>
            <div class="item-label">{{ item.label }}</div>
          </div>
          <div>{{ item.value }}</div>
        </div>
        <div class="info-item">
          <div class="item-label">
            <svg-icon icon-class="homePlace" class="info-icon"></svg-icon>
            <div class="item-label" style="min-width:70px;">家庭住址：</div>
          </div>
          <div>{{ form.homePlace }}</div>
        </div>
      </el-col>
      <el-col :span="17" class="stateInfo">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <!-- <el-tab-pane label="负责项目" name="1">
            <projectInfo></projectInfo>
          </el-tab-pane> -->
          <el-tab-pane label="变更记录" name="2">
            <changeRecord></changeRecord>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import userAvatar from "@/views/system/user/profile/userAvatar.vue"
import { getUser } from "@/api/system/user"
import projectInfo from './projectInfo'
import changeRecord from './changeRecord'
export default {
  components: { userAvatar, projectInfo, changeRecord },
  dicts: ['sys_normal_disable', 'sys_user_sex', 'sys_user_titles', 'sys_user_certificates', 'sys_user_pmlevel',
    'sys_user_postlevel', 'sys_user_salarylevel', 'sys_user_political', 'sys_user_degree', 'sys_user_engineerlevel', 'sys_user_operatorlevel'],
  created() {
    if (this.$route.query)
      this.getUserInfo(this.$route.query.userId);
  },
  data() {
    return {
      loading: true,
      form: {
        userId: undefined,
        nickName: '',
        dept: {
          deptName: ''
        }
      },
      userInfo: [],
      postOptions: [],
      postData: '',
      activeName: '2',
      avatar: ''
    }
  },
  methods: {
    getUserInfo(id) {
      getUser(id).then(res => {
        this.postOptions = res.posts;
        if (res.data) {
        this.avatar =  (res.data.avatar == "" || res.data.avatar == null) ? require("@/assets/images/user.png") : process.env.VUE_APP_BASE_API + res.data.avatar;
          this.form = res.data;
          this.formartForm(res);
          this.userInfo = [
            {
              label: '技术职称：',
              icon: 'titles',
              value: this.form.titles != null ? this.selectDictLabels(this.dict.type.sys_user_titles, this.form.titles, ',') : ''
            },
            {
              label: '执业证书：',
              icon: 'certificate',
              value: this.form.certificates != null ? this.selectDictLabels(this.dict.type.sys_user_certificates, this.form.certificates, ',') : ''
            },
            {
              label: '工程师岗级：',
              icon: 'engineer',
              value: this.selectDictLabel(this.dict.type.sys_user_engineerlevel, this.form.engineerLevel)
            },
            {
              label: '技工等级：',
              icon: 'operator',
              value: this.selectDictLabel(this.dict.type.sys_user_operatorlevel, this.form.operatorLevel)
            },
            {
              label: '项目经理级别：',
              icon: 'pmLevel',
              value: this.selectDictLabel(this.dict.type.sys_user_pmlevel, this.form.pmLevel)
            },
            {
              label: '身份证号码：',
              icon: 'idCard',
              value: this.form.idCard
            },
            {
              label: '籍贯：',
              icon: 'place',
              value: this.form.nativePlace
            },
            {
              label: '政治面貌：',
              icon: 'politicalAffiliation',
              value: this.selectDictLabels(this.dict.type.sys_user_political, this.form.politicalAffiliation, ',')
            },
            {
              label: '民族：',
              icon: 'flower',
              value: this.form.ethnic
            },
            {
              label: '毕业院校：',
              icon: 'school',
              value: this.form.graduateSchool
            },
            {
              label: '专业：',
              icon: 'major',
              value: this.form.major
            },
            {
              label: '学历：',
              icon: 'degree',
              value: this.selectDictLabel(this.dict.type.sys_user_degree, this.form.degree)
            },
            {
              label: '合同签订：',
              icon: 'contractSign',
              value: this.parseTime(this.form.contractSign, '{y}-{m}-{d}')
            },
            {
              label: '合同期满：',
              icon: 'contractExpire',
              value: this.parseTime(this.form.contractExpire, '{y}-{m}-{d}')
            },
          ]
          this.loading =false;
        }
      })
    },
    formartForm(res) {
      if (this.$route.query) {
        this.form.userId = this.$route.query.userId
        this.form.nickName = this.$route.query.nickName
      }
      let postArr = [];
      for (let post of res.posts) {
        for (let postid of res.postIds) {
          if (postid == post.postId) {
            postArr.push(post.postName)
          }
        }
      }
      this.postData = '中水成勘测绘公司-' + postArr.join('-')

      if (this.form.status == '0') {
        this.form.status = '在职'
      } else if (this.form.status == '1') {
        this.form.status = '离职'
      } else {
        this.form.status = '退休'
      }
    },
    handleClick() {

    },
    goBack() {
      let obj = { path: "/staff/info" }
      this.$tab.closeOpenPage(obj);
      this.$router.push({ path: '/staff/people' });
    },
    getAgeByIdCard(idCard) {
      const sexAndAge = {}
      //获取用户身份证号码
      const userCard = idCard
      //如果用户身份证号码为undefined则返回空
      if (!userCard) {
        return sexAndAge
      }
      // 获取出生日期
      const yearBirth = userCard.substring(6, 10)
      const monthBirth = userCard.substring(10, 12)
      const dayBirth = userCard.substring(12, 14)
      // 获取当前年月日并计算年龄
      const myDate = new Date()
      const monthNow = myDate.getMonth() + 1
      const dayNow = myDate.getDate()
      let age = myDate.getFullYear() - yearBirth

      if (monthNow < monthBirth || (monthNow == monthBirth && dayNow < dayBirth)) {
        age--
      }
      // 得到年龄
      sexAndAge.age = age
      return sexAndAge.age
    },
  }
}
</script>

<style lang="scss" scoped>
.bg {
  background-color: #F0F2F5;
  height: 1000px;
}

.header {
  background-color: #fff;
  height: 110px;
  display: flex;
  align-items: center;


  .back {
    margin-left: 30px;
    flex: 1;
  }

  .title {
    text-align: center;
    flex: 24;
    font-size: 25px;
    padding-right: 100px;
  }
}

.userInfo {
  background-color: #fff;
  // height: 800px;
  margin-right: 40px;
  padding: 5px;

  .avatar {
    text-align: center;

    // padding: 10px 0;
    .user-avatar {
      width: 130px;
      height: 130px;
      border-radius: 50%;
    }

  }

  .user-name {
    font-size: 18px;
    font-weight: bold;
  }

  .user-sex {
    line-height: 30px;
    font-size: 14px;
    color: #797979;
  }

  .info-item {
    line-height: 30px;
    color: #5A5A5A;
    font-size: 14px;
    padding-left: 30px;
    display: flex;
    align-items: flex-start;

    .info-icon {
      font-size: 20px;
      margin-right: 10px;
      vertical-align: middle;
    }

    .item-label {
      max-width: 150px;
      display: flex;
      align-items: center;
      font-family: '微软雅黑';
      font-weight: bold;
      // text-align: right;
      // display: inline-block;
    }

    .item-value {
      max-width: 260px;
      // display: inline-block;
    }
  }
}

.stateInfo {
  background-color: #fff;
  height: 800px;
  padding: 10px 30px 0;
}
</style>