cmc-oa/oa-ui-app/pages/oa/staff/staffDetail.vue

<template>
  <view class="container">
    <!-- 头部信息 -->
    <view class="header-section">
      <view class="avatar-section">
        <uv-avatar :src="staffInfo.avatar || '/static/images/user.png'" size="120" />
      </view>
      <view class="basic-info">
        <view class="name">{{ staffInfo.nickName }}</view>
        <view class="dept">{{ staffInfo.dept ? staffInfo.dept.deptName : '未分配部门' }}</view>
        <view class="status">
          <u-tag :text="getStatusText(staffInfo.status)" :type="getStatusType(staffInfo.status)" />
        </view>
      </view>
    </view>
    <!-- 基本信息 -->
    <view class="info-section">
      <view class="section-title">基本信息</view>
      <view class="info-grid">
        <view class="info-item">
          <text class="label">姓名</text>
          <text class="value">{{ staffInfo.nickName }}</text>
        </view>
        <view class="info-item">
          <text class="label">年龄</text>
          <text class="value">{{ String(getAgeByIdCard(staffInfo.idCard)).slice(0, 2) }}岁</text>
        </view>
        <view class="info-item">
          <text class="label">性别</text>
          <text class="value">{{ staffInfo.sex == 0 ? '男' : '女' }}</text>
        </view>
        <view class="info-item">
          <text class="label">手机号码</text>
          <text class="value">{{ staffInfo.phonenumber || '' }}</text>
        </view>
        <view class="info-item">
          <text class="label">身份证</text>
          <text class="value">{{ staffInfo.idCard || '' }}</text>
        </view>
        <view class="info-item">
          <text class="label">籍贯</text>
          <text class="value">{{ staffInfo.nativePlace || '' }}</text>
        </view>
        <view class="info-item">
          <text class="label">民族</text>
          <text class="value">{{ staffInfo.ethnic || '' }}</text>
        </view>
        <view class="info-item">
          <text class="label">政治面貌</text>
          <text class="value">{{ getPoliticalText(staffInfo.politicalAffiliation) || '' }}</text>
        </view>
      </view>
    </view>

    <!-- 工作信息 -->
    <view class="info-section">
      <view class="section-title">工作信息</view>
      <view class="info-grid">
        <view class="info-item">
          <text class="label">部门</text>
          <text class="value">{{ staffInfo.dept ? staffInfo.dept.deptName : '未分配部门' }}</text>
        </view>
        <view class="info-item">
          <text class="label">职务</text>
          <text class="value">{{ postData || '' }}</text>
        </view>
        <view class="info-item">
          <text class="label">职称</text>
          <text class="value">{{ titlesMap[staffInfo.titles] || '' }}</text>
        </view>
        <view class="info-item">
          <text class="label">职业资格</text>
          <text class="value">{{ getCertificateText(staffInfo.certificates) || '' }}</text>
        </view>
        <view class="info-item">
          <text class="label">岗级</text>
          <text class="value">{{ getPostLevelText(staffInfo.postLevel, staffInfo.salaryLevel) || '' }}</text>
        </view>
        <view class="info-item">
          <text class="label">工程师岗级</text>
          <text class="value">{{ engineerLevelData[staffInfo.engineerLevel] || '' }}</text>
        </view>
        <view class="info-item">
          <text class="label">技工等级</text>
          <text class="value">{{ operatorLevelData[staffInfo.operatorLevel] || '' }}</text>
        </view>
        <view class="info-item">
          <text class="label">项目经理等级</text>
          <text class="value">{{ pmLevelData[staffInfo.pmLevel] || '' }}</text>
        </view>
        <view class="info-item">
          <text class="label">入职时间</text>
          <text class="value">{{ parseTime(staffInfo.entryDate, "{y}-{m}-{d}") || '' }}</text>
        </view>
        <view class="info-item">
          <text class="label">合同签订</text>
          <text class="value">{{ parseTime(staffInfo.contractSign, "{y}-{m}-{d}") || '' }}</text>
        </view>
        <view class="info-item">
          <text class="label">合同期满</text>
          <text class="value">{{ parseTime(staffInfo.contractExpire, "{y}-{m}-{d}") || '' }}</text>
        </view>
      </view>
    </view>

    <!-- 教育背景 -->
    <view class="info-section">
      <view class="section-title">教育背景</view>
      <view class="info-grid">
        <view class="info-item">
          <text class="label">最高学历</text>
          <text class="value">{{ getDegreeText(staffInfo.degree) || '' }}</text>
        </view>
        <view class="info-item">
          <text class="label">最高学历专业</text>
          <text class="value">{{ staffInfo.major || '' }}</text>
        </view>
        <view class="info-item">
          <text class="label">最高学历毕业院校</text>
          <text class="value">{{ staffInfo.graduateSchool || '' }}</text>
        </view>
        <view class="info-item">
          <text class="label">初始学历</text>
          <text class="value">{{ getDegreeText(staffInfo.initialDegree) || '' }}</text>
        </view>
        <view class="info-item">
          <text class="label">初始学历专业</text>
          <text class="value">{{ staffInfo.initialMajor || '' }}</text>
        </view>
        <view class="info-item">
          <text class="label">初始学历毕业院校</text>
          <text class="value">{{ staffInfo.initialSchool || '' }}</text>
        </view>
      </view>
    </view>


    <!-- 其他信息 -->
    <view class="info-section">
      <view class="section-title">其他信息</view>
      <view class="info-grid">
        <view class="info-item">
          <text class="label">家庭住址</text>
          <text class="value">{{ staffInfo.homePlace || '' }}</text>
        </view>
        <view class="info-item">
          <text class="label">紧急联系人</text>
          <text class="value">{{ staffInfo.contact || '' }}</text>
        </view>
        <view class="info-item">
          <text class="label">紧急联系电话</text>
          <text class="value">{{ staffInfo.telephone || '' }}</text>
        </view>
        <view class="info-item">
          <text class="label">备注</text>
          <text class="value">{{ staffInfo.remark || '无' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { parseTime } from "@/utils/common.js"
import { getUser } from "@/api/system/user"
import { listType, getType } from "@/api/system/dict/type"
import { listData } from "@/api/system/dict/data"

export default {
  data() {
    return {
      staffInfo: {},
      userId: '',
      nickName: '',
      postData: '',
      engineerLevelData: {},
      operatorLevelData: {},
      pmLevelData: {},
      politicalMap: {},
      titlesMap: {},
      certificateMap: {},
      postLevelMap: {},
      salaryLevelMap: {}
    }
  },
  onLoad(options) {
    this.userId = options.userId
    this.nickName = options.nickName
    this.getDictLabelValue();
    this.getStaffInfo();
  },
  methods: {
    parseTime,
    // 获取员工信息
    async getStaffInfo() {
      try {
        const res = await getUser(this.userId);
        this.staffInfo = res.data;
        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('/')
      } catch (error) {
        console.error('获取员工信息失败:', error);
        uni.showToast({
          title: '获取员工信息失败',
          icon: 'none'
        });
      }
    },
    getDictLabelValue() {
      listData({ pageSize: 100, dictType: 'sys_user_engineerlevel' }).then(res => {
        res.rows.map(item => {
          this.engineerLevelData[item.dictValue] = item.dictLabel
        })
      })
      listData({ pageSize: 100, dictType: 'sys_user_operatorlevel' }).then(res => {
        res.rows.map(item => {
          this.operatorLevelData[item.dictValue] = item.dictLabel
        })
      })
      listData({ pageSize: 100, dictType: 'sys_user_pmlevel' }).then(res => {
        res.rows.map(item => {
          this.pmLevelData[item.dictValue] = item.dictLabel
        })
      })
      listData({ pageSize: 100, dictType: 'sys_user_political' }).then(res => {
        res.rows.map(item => {
          this.politicalMap[item.dictValue] = item.dictLabel
        })
      })
      listData({ pageSize: 100, dictType: 'sys_user_titles' }).then(res => {
        res.rows.map(item => {
          this.titlesMap[item.dictValue] = item.dictLabel
        })
      })
      listData({ pageSize: 100, dictType: 'sys_user_certificates' }).then(res => {
        res.rows.map(item => {
          this.certificateMap[item.dictValue] = item.dictLabel
        })
      })
      listData({ pageSize: 100, dictType: 'sys_user_postlevel' }).then(res => {
        res.rows.map(item => {
          this.postLevelMap[item.dictValue] = item.dictLabel
        })
      })
      listData({ pageSize: 100, dictType: 'sys_user_salarylevel' }).then(res => {
        res.rows.map(item => {
          this.salaryLevelMap[item.dictValue] = item.dictLabel
        })
      })
    },
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        '0': '在职',
        '1': '离职',
        '2': '退休',
        '3': '试用',
        '4': '返聘'
      };
      return statusMap[status] || '未知';
    },
    // 获取状态类型
    getStatusType(status) {
      const typeMap = {
        '0': 'success',
        '1': 'error',
        '2': 'warning',
        '3': 'primary',
        '4': 'info'
      };
      return typeMap[status] || 'default';
    },
    // 根据身份证计算年龄
    getAgeByIdCard(idCard) {
      if (!idCard) return 0;
      const birthStr = idCard.substring(6, 14);
      const birthYear = parseInt(birthStr.substring(0, 4), 10);
      const birthMonth = parseInt(birthStr.substring(4, 6), 10) - 1;
      const birthDay = parseInt(birthStr.substring(6, 8), 10);
      const birthDate = new Date(birthYear, birthMonth, birthDay);
      const now = new Date();
      let age = now.getFullYear() - birthDate.getFullYear();
      const monthDiff = now.getMonth() - birthDate.getMonth();
      if (monthDiff < 0 || (monthDiff === 0 && now.getDate() < birthDate.getDate())) {
        age--;
      }
      return age;
    },
    // 获取政治面貌文本
    getPoliticalText(politicalAffiliation) {
      if (!politicalAffiliation) return '';
      const politicalArray = politicalAffiliation.split(',');
      let politicalText = politicalArray.map(political => this.politicalMap[political] || political).join('、');
      return politicalText;
    },

    // 获取职业资格文本
    getCertificateText(certificates) {
      if (!certificates) return '';
      const certArray = certificates.split(',');
      return certArray.map(cert => this.certificateMap[cert] || cert).join('、');
    },

    // 获取岗级文本
    getPostLevelText(postLevel, salaryLevel) {
      const postText = this.postLevelMap[postLevel] || '';
      const salaryText = this.salaryLevelMap[salaryLevel] || '';
      return postText && salaryText ? `${postText}${salaryText}` : '';
    },
    // 获取学历文本
    getDegreeText(degree) {
      const degreeMap = {
        '0': '博士',
        '1': '硕士',
        '2': '本科',
        '3': '专科',
        '4': '高中',
        '5': '中专',
        '6': '初中'
      };
      return degreeMap[degree] || '';
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 30rpx;
  padding-bottom: 120rpx;
}

.header-section {
  background-color: #fff;
  padding: 40rpx 30rpx;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;

  .avatar-section {
    margin-right: 30rpx;
  }

  .basic-info {
    flex: 1;

    .name {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }

    .dept {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 15rpx;
    }

    .status {
      display: inline-block;
    }
  }
}

.info-section {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 30rpx;

  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
    border-left: 6rpx solid #007aff;
    padding-left: 20rpx;
  }

  .info-grid {
    .info-item {
      display: flex;
      margin-bottom: 25rpx;

      .label {
        width: 200rpx;
        font-size: 28rpx;
        color: #666;
      }

      .value {
        flex: 1;
        font-size: 28rpx;
        color: #333;
        word-break: break-all;
      }
    }
  }
}

.action-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #eee;

  .uv-button {
    width: 100%;
  }
}
</style>